/* ============================================================
   ULCrew Service — app.css
   Design: Professional industrial utility — clean, dense, fast
   Brand reset Sesija 97 → docs/BAZAZNANJA/30-design-tokens.md
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    /* === Brand — Pine Green + Orange (S97) === */
    --brand-primary:      #047857;  /* Pine 700 — main */
    --brand-primary-dark: #065F46;  /* Pine 800 — hover/pressed */
    --brand-primary-h:  #065f46;  /* Pine 800 — hover/pressed */
    --brand-accent:     #ea580c;  /* Orange 600 — Hitno/AI/Eskalacije */

    /* Pine Green skala (9 stupnjeva) */
    --p-50:             #ecfdf5;
    --p-100:            #d1fae5;
    --p-200:            #a7f3d0;
    --p-500:            #10b981;
    --p-600:            #059669;
    --p-700:            #047857;
    --p-800:            #065f46;
    --p-900:            #064e3b;

    /* Orange accent skala */
    --a-50:             #fff7ed;
    --a-bg:             #ffedd5;
    --a-border:         #fdba74;
    --a-500:            #f97316;
    --a-600:            #ea580c;
    --a-700:            #c2410c;
    --a-dark:           #9a3412;

    /* === Identitet entiteta (S475) — boja = obitelj, ikona = entitet ===
       Jedini potrošač: Shared/Constants/EntitetIdentitet.cs (BojaVar).
       Boja NIKAD ne znači status — status ima vlastiti badge. */
    --ent-crm:                 #047857;  /* obitelj: CRM / brand */
    --ent-predmet:             #047857;
    --ent-klijent:             #065f46;

    --ent-operativa:           #2563eb;  /* obitelj: operativa */
    --ent-zahtjev:             #4f46e5;
    --ent-radni-nalog:         #2563eb;
    --ent-zapisnik:            #0e7490;

    --ent-gradjevina:          #b45309;  /* obitelj: građevina */
    --ent-troskovnik:          #b45309;
    --ent-gradjevinska-knjiga: #92400e;
    --ent-situacija:           #d97706;

    --ent-financije:           #7c3aed;  /* obitelj: financije */
    --ent-obracun:             #7c3aed;
    --ent-izlazni-dokument:    #9333ea;

    --ent-neutralno:           #6b7280;  /* vrsta bez dodijeljenog identiteta */

    /* Tailwind Gray skala (referenced kroz codebase, def u 30-design-tokens.md) */
    --gray-50:          #f9fafb;
    --gray-100:         #f3f4f6;
    --gray-200:         #e5e7eb;
    --gray-300:         #d1d5db;
    --gray-400:         #9ca3af;
    --gray-500:         #6b7280;
    --gray-600:         #4b5563;
    --gray-700:         #374151;
    --gray-800:         #1f2937;
    --gray-900:         #111827;

    /* Sidebar — light theme (S97 redizajn — opcija B). Modern SaaS standard
       (Stripe/Notion/Asana). Content fokus, čitljivije pod suncem za field service.
       Brand-accent na active/hover umjesto dark BG dominacije. */
    --sidebar-bg:       #ffffff;
    --sidebar-width:    260px;
    --sidebar-text:     #374151;                        /* gray-700 — default item */
    --sidebar-text-h:   #111827;                        /* gray-900 — hover */
    --sidebar-active:   #047857;                        /* Pine 700 — active text */
    --sidebar-active-bg: #d1fae5;                       /* Pine 100 — active fill (vidljiviji od Pine 50 na bijeloj BG) */
    --sidebar-section:  #6b7280;                        /* gray-500 — section header */
    --sidebar-border:   #e5e7eb;                        /* gray-200 — separator */
    --sidebar-hover:    #f3f4f6;                        /* gray-100 — hover BG */
    --sidebar-brand:    #111827;                        /* gray-900 — brand naziv tamno */

    /* Topbar */
    --topbar-h:         56px;
    --topbar-bg:        #ffffff;
    --topbar-border:    #e5e7eb;

    /* Content */
    --content-bg:       #f3f4f6;
    --surface:          #ffffff;
    --surface-border:   #e5e7eb;

    /* Text */
    --text-primary:     #111827;
    --text-secondary:   #6b7280;
    --text-muted:       #9ca3af;

    /* Status colors */
    --success:          #059669;   /* Pine 600 — usklađeno s brand familijom (S97 cohesion fix) */
    --warning:          #c27803;
    --danger:           #c81e1e;
    --info:             #1c64f2;

    /* Font sizes */
    --fs-xs:   10px;    /* version labels, uppercase headers */
    --fs-sm:   11px;    /* badges, sub-text, timestamps */
    --fs-base: 12px;    /* sub-tables, detail rows */
    --fs-md:   13px;    /* form labels, grid body, nav items */
    --fs-lg:   14px;    /* body default, buttons, card titles */
    --fs-xl:   16px;    /* brand name */
    --fs-2xl:  18px;    /* mobile page titles */
    --fs-3xl:  20px;    /* page titles */
    --fs-4xl:  22px;    /* login title */

    /* Spacing (8px grid) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  28px;
    --sp-8:  32px;

    /* Status backgrounds (pair with --success/--warning/--danger/--info) */
    --success-bg:   #def7ec;
    --warning-bg:   #fdf6b2;
    --danger-bg:    #fde8e8;
    --info-bg:      #e1effe;
    --neutral-bg:   #f3f4f6;
    --danger-border:#fbd5d5;
    --success-border:#bbf7d0;
    --warning-border:#fce96a;
    --info-border:   #a4cafe;

    /* Hover & interactive surfaces */
    --hover-bg:     #e9eaf0;
    --hover-row:    #f9fafb;
    --hover-subtle: rgba(0, 0, 0, .04);
    --border-light: #f3f4f6;
    --surface-alt:  #fafbfc;

    /* Filter bar (Pine derivati) */
    --filter-bg:           var(--p-50);
    --filter-border:       var(--p-100);
    --filter-text:         var(--p-800);
    --filter-btn-border:   var(--p-200);
    --filter-btn-hover:    var(--p-100);
    --filter-btn-hover-border: var(--p-500);

    /* Dark surface (dev KB sidebar, debug overlays) */
    --dark-surface:          var(--gray-900);
    --dark-surface-alt:      var(--gray-800);
    --dark-border:           var(--gray-700);
    --dark-text-primary:     var(--gray-200);
    --dark-text-secondary:   var(--gray-400);
    --dark-text-muted:       var(--gray-500);

    /* Dev accent — amber (razlikuje od brand Pine i Orange accent) */
    --dev-accent:            #f59e0b;                    /* Amber 500 */
    --dev-accent-tint:       rgba(245, 158, 11, 0.15);   /* selected row fill */
    --dev-accent-border:     rgba(245, 158, 11, 0.2);    /* separator */

    /* Brand primary tint — blagi fill za active/selected state (bijela BG) */
    --brand-primary-tint:    rgba(4, 120, 87, 0.08);     /* Pine 700 @ 8% */

    /* Shape */
    --radius-xs:        2px;
    --radius-sm:        4px;
    --radius-default:   6px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        20px;
    --radius-full:      50%;
    --shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:        0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --transition:       150ms ease;

    /* === DX Fluent theme override (S97 brand reset) ============================
       DevExpress Fluent v25 customization point: --dxbl-accent-color-NN skala
       (10 = najsvjetlija, 170 = najtamnija, 100 = brand main).
       Stock blue.min.css mapira --DS-primary-NN → var(--dxbl-accent-color-NN, blue).
       Override ovdje cijelu Pine Green skalu i sve dolje (DxButton, DxGrid, link,
       focus, select) automatski naslijedi.
    ============================================================================ */
    --dxbl-accent-color-10:  #ECFDF5;   /* Pine 50  — najsvjetlije, soft fill */
    --dxbl-accent-color-20:  #D1FAE5;   /* Pine 100 */
    --dxbl-accent-color-30:  #A7F3D0;   /* Pine 200 */
    --dxbl-accent-color-40:  #86EFAC;
    --dxbl-accent-color-50:  #6EE7B7;
    --dxbl-accent-color-60:  #4ADE80;
    --dxbl-accent-color-70:  #22C55E;
    --dxbl-accent-color-80:  #10B981;   /* Pine 500 */
    --dxbl-accent-color-90:  #059669;   /* Pine 600 — link/aktivni element */
    --dxbl-accent-color-100: #047857;   /* Pine 700 — MAIN brand fill */
    --dxbl-accent-color-110: #065F46;   /* Pine 800 — hover/pressed */
    --dxbl-accent-color-120: #054C39;
    --dxbl-accent-color-130: #04412F;
    --dxbl-accent-color-140: #033326;
    --dxbl-accent-color-150: #02281D;
    --dxbl-accent-color-160: #021E15;
    --dxbl-accent-color-170: #01140E;   /* Najtamnije — focus ring contrast */

    /* DX font override — DS-font-family-sans-serif default ne uključuje Inter, pa
       sve DX komponente (DxButton/DxGrid/DxTextBox/DxComboBox/DxPopup) padaju
       na sistemski Segoe UI. Override-amo da Inter bude prvi u stack-u. */
    --DS-font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Cantarell, Ubuntu, Roboto, Arial, sans-serif;

    /* Standardizirani brand shadowi za hover/focus — Pine alpha umjesto generic black.
       Koriste DxButton, DxComboBox, DxTextBox, .grid-actions itd. */
    --shadow-focus-ring:    0 0 0 3px rgba(4, 120, 87, 0.18);    /* Pine 700 alpha — focus state */
    --shadow-btn-hover:     0 4px 8px rgba(4, 120, 87, 0.18), 0 1px 2px rgba(0, 0, 0, 0.06); /* hover lift */
    --shadow-accent-ring:   0 0 0 3px rgba(234, 88, 12, 0.18);   /* Orange 600 alpha — accent focus */
}

/* ============================================================
   DxButton Secondary — Pine outline brand override
   DX Fluent v25 koristi .dxbl-btn.dxbl-btn-secondary (2 klase = specificity 0,2,0).
   Naš selektor mora koristiti isti pattern da pobijedi DX default (gray).
   ButtonRenderStyle.Primary ide kroz --dxbl-accent-color-NN skalu gore.
   Pravilo: svi Secondary koriste --brand-primary boje (Pine outline, bijela pozadina).
   ============================================================ */
.dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg:                   var(--dxbl-btn-primary-bg);
    --dxbl-btn-hover-bg:             var(--dxbl-btn-primary-hover-bg);
    --dxbl-btn-color:                var(--dxbl-btn-primary-color);
    --dxbl-btn-border-color:         var(--dxbl-btn-primary-border-color);
    --dxbl-btn-hover-border-color:   var(--dxbl-btn-primary-hover-border-color);
    --dxbl-btn-active-bg:            var(--dxbl-btn-primary-active-bg);
    --dxbl-btn-active-border-color:  var(--dxbl-btn-primary-active-border-color);
    --dxbl-btn-focus-shadow-color:   rgba(4, 120, 87, 0.18);
}

/* ── DxPopup footer — razmak između gumba ────────────────────── */
.dxbl-modal-footer {
    gap: 8px;
}

/* ── DxPopup — DxFormLayout itemi uvijek vertikalni ──────────────
   DxFormLayout defaultno raspoređuje iteme u Bootstrap responsive grid
   (default ColCount=2 → col-md-6, dva polja bok uz bok na md+).
   Za sve popupe u aplikaciji željeno je da su polja jedan ispod drugog.
   Selektor .dxbl-fl [class*="col-md-"] pokriva sve Bootstrap col divove
   unutar DxFormLayout-a, bez obzira na dubinu nesting-a u popup-u.
================================================================== */
.dxbl-popup .dxbl-fl [class*="col-md-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Brand-aware focus & hover (uniformizacija) ───────────────────
   DX gumb hover defaultira na blago tonsko zatamnjenje + generic shadow.
   Override-amo na Pine-alpha shadow lift i Pine focus ring.
================================================================== */
.dxbl-btn-primary:hover:not(:disabled),
.grid-actions .dxbl-btn-primary:hover {
    box-shadow: var(--shadow-btn-hover) !important;
    transition: box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.dxbl-btn-primary:focus-visible,
.dxbl-text-edit:focus-within,
.dxbl-combobox:focus-within {
    box-shadow: var(--shadow-focus-ring) !important;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs-lg);
    color: var(--text-primary);
    background: var(--content-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01';
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── App Shell ──────────────────────────────────────────────── */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    transition: width var(--transition), min-width var(--transition);
    z-index: 100;
    overflow: hidden;
}

/* Default text color u sidebar — non-aggressive, dozvoljava DX active state-ovima
   da postave Pine green tekst kroz DS-color tokene (S97 light sidebar redizajn). */
.sidebar {
    color: var(--sidebar-text);
}

/* Override DX Fluent Design System tokens at sidebar scope */
.sidebar-accordion {
    /* DS-level tokens (consumed by DX Fluent theme) */
    --DS-color-surface-neutral-muted-rest: transparent;
    --DS-color-surface-neutral-default-hovered: var(--sidebar-hover);
    --DS-color-surface-neutral-default-selected: var(--sidebar-active-bg);
    --DS-color-surface-neutral-muted-hovered: var(--sidebar-hover);
    --DS-color-surface-neutral-muted-disabled: transparent;
    --DS-color-content-neutral-default-rest: var(--sidebar-text);
    --DS-color-content-neutral-default-hovered: var(--sidebar-text-h);
    --DS-color-content-neutral-subdued-rest: var(--sidebar-text);
    --DS-color-content-neutral-subdued-hovered: var(--sidebar-text-h);
    --DS-color-content-neutral-subdued-selected: var(--sidebar-active);
    --DS-color-border-neutral-muted-rest: transparent;

    /* DX accordion-level tokens */
    --dxbl-accordion-group-header-default-bg: transparent;
    --dxbl-accordion-group-header-hover-bg: var(--sidebar-hover);
    --dxbl-accordion-group-header-selected-bg: var(--sidebar-active-bg);
    --dxbl-accordion-group-header-default-color: var(--sidebar-section);
    --dxbl-accordion-group-header-hover-color: var(--sidebar-text-h);
    --dxbl-accordion-group-header-selected-color: var(--sidebar-active);
    --dxbl-accordion-group-item-default-bg: transparent;
    --dxbl-accordion-group-item-hover-bg: var(--sidebar-hover);
    --dxbl-accordion-group-item-selected-bg: var(--sidebar-active-bg);
    --dxbl-accordion-group-item-default-color: var(--sidebar-text);
    --dxbl-accordion-group-item-hover-color: var(--sidebar-text-h);
    --dxbl-accordion-group-item-selected-color: var(--sidebar-active);
    --dxbl-accordion-group-border-color: transparent;
    --dxbl-accordion-group-body-border-radius: 0;
    --dxbl-accordion-group-header-btn-bg: transparent;
    --dxbl-accordion-group-header-btn-color: var(--sidebar-section);
    --dxbl-accordion-group-header-btn-hover-bg: var(--sidebar-hover);
    --dxbl-accordion-group-header-btn-hover-color: var(--sidebar-text-h);
    --dxbl-accordion-group-header-btn-border-color: transparent;
    --dxbl-accordion-group-item-btn-bg: transparent;
    --dxbl-accordion-group-item-btn-color: var(--sidebar-section);
    --dxbl-accordion-group-item-btn-hover-bg: var(--sidebar-hover);
    --dxbl-accordion-group-item-btn-hover-color: var(--sidebar-text-h);
    --dxbl-accordion-group-item-btn-border-color: transparent;
}

.sidebar.collapsed {
    width: 56px;
    min-width: 56px;
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-4) 14px;
    border-bottom: 1px solid var(--sidebar-border);
    min-height: var(--topbar-h);
    flex-shrink: 0;
}

.brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.brand-icon svg { width: 100%; height: 100%; }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
}

.brand-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--sidebar-brand);
    letter-spacing: -0.02em;
}

.brand-sub {
    font-size: var(--fs-xs);
    color: var(--sidebar-active);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Scroll area */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-2) 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300, #d1d5db) transparent;
}

.sidebar-scroll::-webkit-scrollbar { width: var(--sp-1); }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--gray-300, #d1d5db); border-radius: var(--radius-xs); }


/* Sidebar footer */
.sidebar-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.sidebar-brand-logo {
    height: 28px;
    max-width: 100%;
    object-fit: contain;
}

.version-label {
    font-size: var(--fs-xs);
    color: var(--sidebar-section);
    white-space: nowrap;
    opacity: 0.7;
}

/* ── Main Area ──────────────────────────────────────────────── */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── TopBar ─────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-5);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    z-index: 50;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.topbar-menu-btn {
    width: var(--sp-8);
    height: var(--sp-8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}

.topbar-menu-btn:hover {
    color: var(--text-primary);
    background: var(--content-bg);
}

.topbar-menu-btn svg {
    width: 18px;
    height: 18px;
}

.topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.topbar-tenant-logo {
    height: 32px;
}

/* User chip */
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
    background: var(--content-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: background var(--transition);
}

.user-chip:hover { background: var(--hover-bg); }

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: white;
    font-size: var(--fs-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Content Area ───────────────────────────────────────────── */
.content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--content-bg);
}

.content-inner {
    padding: var(--sp-6);
}

/* ── Page Toolbar (DxToolbar header on each page) ────────────── */
.page-toolbar {
    margin-bottom: var(--sp-5);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    align-items: flex-end !important;
}

/* Toolbar buttons — match grid SizeMode.Small button height */
.page-toolbar .dxbl-toolbar-item .dxbl-btn {
    min-width: auto;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Bootstrap Icons — consistent size in toolbars, buttons and grids. */
.page-toolbar .bi,
.dxbl-btn .bi,
.grid-actions .bi {
    font-size: 1rem;
    line-height: 1;
    vertical-align: -0.125em;
}

/* Dashboard top action row — Osvježi gumb (Primary) ispod naslova ploče.
   Izvučen iz DxToolbar-a jer .page-toolbar override-a sve dxbl-btn na mali padding/font. */
.dashboard-actionbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--sp-3);
}

/* Dostupnost danas — 4 KPI brojke u 2×2 ili 4×1 gridu (Resursi ploča, S194). */
.dostupnost-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}
.dostupnost-cell {
    text-align: center;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
}
.dostupnost-num {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.1;
}
.dostupnost-lbl {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}
.dostupnost-cell[data-status="success"] .dostupnost-num { color: var(--success); }
.dostupnost-cell[data-status="brand"]   .dostupnost-num { color: var(--brand-primary); }
.dostupnost-cell[data-status="warning"] .dostupnost-num { color: var(--warning); }
.dostupnost-cell[data-status="danger"]  .dostupnost-num { color: var(--danger); }
@media (max-width: 768px) {
    .dostupnost-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Neispostavljeno KPI — 2 kartice (U pripremi + Obračunato) — Financije ploča S195. */
.neispostavljeno-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.neisp-cell {
    text-align: center;
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
}
.neisp-num {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.1;
}
.neisp-amt {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-top: var(--sp-1);
}
.neisp-lbl {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.neisp-cell[data-status="info"]    .neisp-num,
.neisp-cell[data-status="info"]    .neisp-amt { color: var(--info); }
.neisp-cell[data-status="warning"] .neisp-num,
.neisp-cell[data-status="warning"] .neisp-amt { color: var(--warning); }
@media (max-width: 768px) {
    .neispostavljeno-grid { grid-template-columns: 1fr; }
}

/* ERP sync KPI — 4 kartice (Uspjeh 7d / Na čekanju / Greške / Zadnja). */
.erp-sync-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}
.erp-cell {
    text-align: center;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
}
.erp-num {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.1;
}
.erp-num-sm {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.1;
}
.erp-lbl {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}
.erp-cell[data-status="success"] .erp-num    { color: var(--success); }
.erp-cell[data-status="info"]    .erp-num    { color: var(--info); }
.erp-cell[data-status="danger"]  .erp-num    { color: var(--danger); }
.erp-cell[data-status="neutral"] .erp-num,
.erp-cell[data-status="neutral"] .erp-num-sm { color: var(--text-primary); }
@media (max-width: 768px) {
    .erp-sync-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Dashboard layout ──────────────────────────────────────── */
.dashboard-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.kpi-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.2;
    margin: var(--sp-1) 0;
}

.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.dashboard-chart-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

@media (max-width: 1024px) {
    .dashboard-kpi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .dashboard-kpi { grid-template-columns: 1fr; }
    .dashboard-charts { grid-template-columns: 1fr; }
}

/* ── Nadzorne ploče — jedinstveni layout (S191) ──────────────
   Sve nadzorne ploče slažu sekcije kroz .dashboard-page (vertical flow s
   gap-om) i .dashboard-row-X za horizontalne grupe widgeta. Konzistentan
   spacing (--sp-4 između widgeta, --sp-5 između sekcija) sprječava da se
   widgeti vizualno "lijepe" jedni na druge. */
.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.dashboard-row {
    display: grid;
    gap: var(--sp-4);
}
.dashboard-row-2   { grid-template-columns: repeat(2, 1fr); }
.dashboard-row-3   { grid-template-columns: repeat(3, 1fr); }
.dashboard-row-4   { grid-template-columns: repeat(4, 1fr); }
.dashboard-row-1-2 { grid-template-columns: 1fr 2fr; }
.dashboard-row-2-1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 1280px) {
    .dashboard-row-4   { grid-template-columns: repeat(2, 1fr); }
    .dashboard-row-3   { grid-template-columns: repeat(2, 1fr); }
    .dashboard-row-1-2,
    .dashboard-row-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .dashboard-row { grid-template-columns: 1fr !important; }
}

/* ── WidgetCard — jedinstveni omotač svih dashboard widgeta ──
   Zamjenjuje raw .card .card-body u dashboard kontekstu. Daje konzistentan
   border / radius / shadow / header padding. Status accent traka uz lijevi
   rub je opcionalna (semantička, ne dekoracijska). */
.widget-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.widget-card-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.widget-card-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Accent traka uz lijevi rub (4px) — semantička statusna boja */
.widget-card-accent-brand,
.widget-card-accent-success,
.widget-card-accent-warning,
.widget-card-accent-danger,
.widget-card-accent-info { padding-left: 4px; }
.widget-card-accent-brand   { background: linear-gradient(to right, var(--brand-primary) 4px, var(--surface) 4px); }
.widget-card-accent-success { background: linear-gradient(to right, var(--success)       4px, var(--surface) 4px); }
.widget-card-accent-warning { background: linear-gradient(to right, var(--warning)       4px, var(--surface) 4px); }
.widget-card-accent-danger  { background: linear-gradient(to right, var(--danger)        4px, var(--surface) 4px); }
.widget-card-accent-info    { background: linear-gradient(to right, var(--info)          4px, var(--surface) 4px); }

.widget-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-light);
    gap: var(--sp-3);
    flex-shrink: 0;
}

.widget-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0; /* dozvoli truncate ako treba */
}

.widget-card-icon {
    color: var(--brand-primary);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}

.widget-card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-card-info-icon {
    color: var(--text-muted);
    font-size: var(--fs-md);
    cursor: help;
    flex-shrink: 0;
}
.widget-card-info-icon:hover { color: var(--brand-primary); }

.widget-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.widget-card-body { flex: 1 1 auto; min-height: 0; }
.widget-card-body-none { padding: 0; }
.widget-card-body-sm   { padding: var(--sp-2); }
.widget-card-body-md   { padding: var(--sp-4); }
.widget-card-body-lg   { padding: var(--sp-6); }

.widget-card-footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
    font-size: var(--fs-md);
    flex-shrink: 0;
}

/* ── KpiCard — varijanta za KPI brojeve ────────────────────── */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-height: 120px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.kpi-card-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi-card-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.kpi-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 500;
}

.kpi-card-info-icon {
    color: var(--text-muted);
    font-size: var(--fs-md);
    cursor: help;
}

.kpi-card-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}
.kpi-card[data-status="brand"]   .kpi-card-value { color: var(--brand-primary); }
.kpi-card[data-status="success"] .kpi-card-value { color: var(--success); }
.kpi-card[data-status="warning"] .kpi-card-value { color: var(--warning); }
.kpi-card[data-status="danger"]  .kpi-card-value { color: var(--danger); }
.kpi-card[data-status="info"]    .kpi-card-value { color: var(--info); }

.kpi-card-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── SifrarniciMapa — grid linkova unutar svake kategorije ── */
.sifr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-2) var(--sp-3);
}
/* Zelene + bold naslove kartica (kao .page-title) na Šifrarnici mapi — scope kroz :has()
   da se ne dira drugi widgeti na nadzornim pločama. */
.widget-card:has(.sifr-grid) .widget-card-title { color: var(--brand-primary); font-weight: 700; }
.sifr-link {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-default);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--fs-md);
    transition: background .12s ease, color .12s ease;
    line-height: 1.2;
}
.sifr-link:hover {
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
    text-decoration: none;
}
.sifr-link-arrow {
    color: var(--brand-primary);
    font-size: var(--fs-xl);
    font-weight: 700;
    -webkit-text-stroke: 0.75px currentColor;
    flex-shrink: 0;
}

/* ── EskalacijeWidget ── */
.esk-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.esk-row  { display: flex; justify-content: space-between; align-items: center; }
.esk-value { font-weight: 700; font-size: var(--fs-xl); color: var(--text-primary); }

/* ── NiskaZalihaWidget — DxGrid kolona "Materijal" 2-line stack ── */
.niska-zaliha-grid .dxbl-grid-table td { vertical-align: middle; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.niska-zaliha-naziv { line-height: 1.3; }
.niska-zaliha-skl   { font-size: 11px; line-height: 1.2; margin-top: 2px; }

/* File input — styled Croatian label overlay */
.file-input-hr { position: relative; display: inline-block; }
.file-input-hr input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.file-input-hr .file-input-label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--surface-border); border-radius: var(--radius-default); background: var(--surface); color: var(--text-primary); font-size: var(--fs-base); cursor: pointer; }
.file-input-hr .file-input-label:hover { background: var(--neutral-bg); }

/* ── File pick — naziv datoteke pokraj DxButton-a ─────────────── */
.file-pick-name {
    font-size: var(--fs-md);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.file-pick-name.has-file {
    color: var(--text-primary);
    font-weight: 500;
}

/* Info tooltip — inline icon with hover popup */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-border, #dee2e6);
    color: var(--text-muted, #6c757d);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}
.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text, #1a1a2e);
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 4px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: 260px;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.info-tip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Toolbar checkbox — vertically center with adjacent buttons */
.page-toolbar .dxbl-checkbox {
    display: flex;
    align-items: center;
}

/* ── Klijent detail row (tabs + content inside grid expand) ─────── */
/* Bijela pozadina kao standardni sadržaj — siva ostaje samo na expanded master
   rowu (kroz .grid-row-expanded klasu) i tab baru (.detail-tabs). */
.detail-row-wrap {
    padding: var(--sp-2) var(--sp-2);
}

/* DX detail-cell padding override SAMO unutar Klijent admin grida.
   Inače bi utjecalo globalno na sve DxGrids u aplikaciji (Zahtjevi, RadniNalozi...).
   CSS klasa 'grid-klijent-admin' postavljena je na Klijenti.razor DxGrid;
   descendant selector pokriva i nested DxGrids unutar expand zona. */
.grid-klijent-admin,
.grid-klijent-admin .dxbl-grid {
    --dxbl-grid-detail-cell-padding-x: 0;
    --dxbl-grid-detail-cell-padding-y: 0;
}

/* S264 — Pine outline oko expanded master + detail row, UNIVERZALNO za sve
   UoW gridove. Kad je više master redaka otvoreno paralelno (npr. 3 klijenta
   ili 5 radnih naloga expandirano istovremeno), bez okvira vizualno se ne
   vidi gdje jedna master-grupa završava i sljedeća počinje.

   Veže se za .grid-row-expanded klasu koju Grid_CustomizeElement callback
   dinamički dodaje master redu kad je expanded. Generic — bez scope prefiksa.

   DOM: <tr.grid-row-expanded> (master) + sljedeći <tr> (detail s colspan).
   Nested grid unutar detail-row-wrap također može imati .grid-row-expanded;
   drugi blok ispod resetira nested okvir da ne bude "matrjoshka" efekt. */
.grid-row-expanded > td {
    border-top: 2px solid var(--brand-primary) !important;
}
.grid-row-expanded > td:first-child {
    border-left: 2px solid var(--brand-primary) !important;
}
.grid-row-expanded > td:last-child {
    border-right: 2px solid var(--brand-primary) !important;
}
/* Detail row neposredno nakon expanded master — zatvara okvir s lijeve, desne i donje strane */
.grid-row-expanded + tr > td {
    border-left: 2px solid var(--brand-primary) !important;
    border-right: 2px solid var(--brand-primary) !important;
    border-bottom: 2px solid var(--brand-primary) !important;
    /* Zrak između otvorenih master redaka — tr nema margin u tablici, fakeamo kroz padding */
    padding-bottom: var(--sp-3) !important;
}

/* Reset okvira za nested expanded retke (npr. Predmet expand unutar Klijent
   detail panela). Inače bi nested redak dobio drugi Pine okvir unutar prvog. */
.detail-row-wrap .grid-row-expanded > td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.detail-row-wrap .grid-row-expanded + tr > td {
    border: none !important;
    padding-bottom: initial !important;
}

/* Master row highlight ide kroz .grid-row-expanded klasu — vidi lookup.css.
   Klasa se dodaje runtime-om u Grid_CustomizeElement callbacku. */

/* B5 — PeekPopup (read-only pregled povezanog entiteta bez gubitka stanja forme). */
.peek-popup .dxbl-popup-content {
    /* Suptilni muted BG da se vizualno odmakne od regulacijskih popupa. */
    background: var(--surface-muted, #f9fafb);
}
.peek-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--brand-primary-50, #ECFDF5);
    color: var(--brand-primary, #047857);
    border-left: 3px solid var(--brand-primary, #047857);
    border-radius: 4px;
    font-size: 0.8125rem;
}
.peek-banner i {
    font-size: 1rem;
}
.peek-loading {
    padding: var(--sp-5);
    text-align: center;
}
.peek-fullview-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    background: var(--brand-primary, #047857);
    color: #fff !important;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.peek-fullview-link:hover {
    background: var(--brand-primary-hover, #065f46);
    color: #fff !important;
    text-decoration: none;
}

/* 👁️ peek ikon-gumb pored FK polja (kompakt, sjedi inline s combo-om). */
.peek-trigger-btn {
    padding: 6px 8px !important;
    min-width: 32px !important;
}

/* Flex wrapper za FK combo + peek button pair (DxFormLayout content / grid cell). */
.fk-with-peek {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.fk-with-peek > :first-child {
    flex: 1;
    min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   B4 — PredlosciRnPopup (enterprise split-pane layout)
   Lijevo: lista RN predloška. Desno: usluge za kopiranje (rich empty state
   kad nije ništa odabrano).
   ───────────────────────────────────────────────────────────────────── */
.predlosci-grid {
    display: grid;
    grid-template-columns: minmax(540px, 1fr) minmax(560px, 1.05fr);
    gap: var(--sp-3);
    min-height: 540px;
}

/* Pane = card-style kontejner s headerom i body-jem. */
.predlosci-pane {
    display: flex;
    flex-direction: column;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
}

.predlosci-pane-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-muted, #f9fafb);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.predlosci-pane-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}
.predlosci-pane-title i {
    color: var(--brand-primary, #047857);
    font-size: 1.05rem;
}
.predlosci-pane-title h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}
.predlosci-pane-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 var(--sp-2);
    background: var(--brand-primary, #047857);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.predlosci-pane-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
}
.predlosci-loading {
    background: var(--surface-muted, #f9fafb);
}

/* Empty state — neutralna verzija (npr. nema usluga). */
.predlosci-empty {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
    color: var(--text-muted, #6b7280);
}
.predlosci-empty i {
    font-size: 2.5rem;
    color: var(--border-light, #d1d5db);
    margin-bottom: var(--sp-2);
}
.predlosci-empty h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}
.predlosci-empty p {
    margin: 0;
    font-size: 0.875rem;
    max-width: 320px;
    line-height: 1.5;
}

/* CTA varijanta — desni panel kad RN nije odabran (vodi korisnika u lijevu listu). */
.predlosci-empty-cta {
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f9fafb) 100%);
}
.predlosci-empty-cta i {
    color: var(--brand-primary, #047857);
    opacity: 0.4;
    transform: rotate(180deg);
}

/* "Prikaži tuđe" pill toggle u headeru. */
.predlosci-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #d1d5db);
    border-radius: 999px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.predlosci-toggle-pill:hover {
    border-color: var(--brand-primary, #047857);
}
.predlosci-toggle-pill input[type=checkbox] {
    margin: 0;
    cursor: pointer;
}

/* Pretraga "učitaj iz bilo kojeg plana" u predlosci popupu (lijevi panel). */
.predlosci-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    background: var(--surface);
}
.predlosci-search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.predlosci-selected-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    background: var(--brand-primary-50, #ECFDF5);
    color: var(--brand-primary, #047857);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.predlosci-selected-pill i {
    font-size: 0.95rem;
}

/* Opcije sekcija — toggleovi za "kopiraj X polje" kao chip-stil. */
.predlosci-options {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.predlosci-options-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7280);
    margin-bottom: var(--sp-2);
}
.predlosci-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Chip-style toggle (ON = Pine outline + Pine50 BG, OFF = neutralni outline). */
.predlosci-chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    background: var(--surface-muted, #f9fafb);
    border: 1px solid var(--border-light, #d1d5db);
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.predlosci-chip-toggle:hover {
    border-color: var(--brand-primary, #047857);
}
.predlosci-chip-toggle input[type=checkbox] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand-primary, #047857);
}
.predlosci-chip-toggle:has(input[type=checkbox]:checked) {
    background: var(--brand-primary-50, #ECFDF5);
    border-color: var(--brand-primary, #047857);
    color: var(--brand-primary, #047857);
    font-weight: 600;
}
.predlosci-chip-toggle i {
    font-size: 0.95rem;
}

/* Plan materijala — izbor izvora (3-way select umjesto on/off chip-a). */
.predlosci-materijal-row {
    margin-top: var(--sp-3);
    align-items: center;
}
.predlosci-materijal-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.predlosci-materijal-label i {
    font-size: 0.95rem;
    color: var(--brand-primary);
}
.predlosci-materijal-select {
    padding: 6px 10px;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
}
.predlosci-materijal-select:focus {
    outline: none;
    border-color: var(--brand-primary);
}

/* ── Intake slice 3 — DodijeliIzPonudePopup (bazen prihvaćene ponude → dodjela nalogu) ── */
.dodijeli-ponuda-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) 0 var(--sp-3);
}
.dodijeli-ponuda-toolbar .form-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.dodijeli-ponuda-combo {
    min-width: 280px;
}
.dodijeli-ponuda-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex: 1 1 200px;
}
.dodijeli-ponuda-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.dodijeli-ponuda-rezultat {
    margin-top: var(--sp-3);
}
.dodijeli-ponuda-preskoceno {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-4);
    font-size: 0.8125rem;
    color: var(--text-primary);
}
.dodijeli-ponuda-preskoceno li {
    margin-bottom: 2px;
}

/* DxGrid wrapper u panelu — bez vlastitog outer border-a (panel ga već daje). */
.predlosci-rn-grid,
.predlosci-preview-grid {
    flex: 1;
    border: none !important;
}
.predlosci-rn-grid .dxbl-grid,
.predlosci-preview-grid .dxbl-grid {
    border: none !important;
    border-radius: 0 !important;
}

/* Ćelija s ellipsis za stupce koji bi se inače lomili u više redaka. */
.predlosci-cell-ellipsis {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Brojač usluga u zadnjem stupcu lijevog grida. */
.predlosci-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 var(--sp-2);
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Inline tag pored naziva usluge (ima plan materijala itd.). */
.predlosci-tag {
    display: inline-flex;
    align-items: center;
    margin-left: var(--sp-2);
    padding: 1px 6px;
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border-radius: 4px;
    font-size: 0.75rem;
}
.predlosci-tag i {
    font-size: 0.7rem;
}

.detail-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--sp-2);
}

.detail-tab-btn {
    background: transparent;
    border: none;
    padding: var(--sp-2) var(--sp-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    transition: color 0.15s, background 0.15s;
}

.detail-tab-btn:hover:not(.disabled) {
    color: var(--brand-primary);
}

.detail-tab-btn.active {
    color: var(--brand-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--brand-primary);
}

.detail-tab-btn.disabled {
    color: var(--text-muted, #9ca3af);
    cursor: not-allowed;
    opacity: 0.5;
}

.detail-tab-content {
    min-height: 120px;
    padding: var(--sp-1) 0 0 0;
    width: 100%;
}

.detail-tab-pane {
    padding: 0;
}

.detail-tab-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--sp-3);
}

/* Zapisnik lifecycle — storniran red (R9.5.5c-3) */
.zapisnik-row-storno td:not(:last-child) {
    opacity: 0.55;
    text-decoration: line-through;
}
.zapisnik-row-storno td:last-child {
    opacity: 1;
}
.povijest-row td {
    border-top: 1px dashed #d1d5db;
}

/* Obračun detail row tiles (R9.5.5d-2) */
.obracun-tile {
    background: var(--bg-secondary, #f3f4f6);
    padding: 12px;
    border-radius: 6px;
}
.obracun-tile-label {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.obracun-tile-value {
    font-size: 18px;
    font-weight: 700;
}
.obracun-tile-primary {
    border: 2px solid var(--brand-primary);
}
.obracun-tile-primary .obracun-tile-value {
    color: var(--brand-primary);
}

/* Container font-size pinan na 1rem da DX SizeMode.Small em-padding ne
   shrinkuje kroz nasljeđe od .detail-tab-pane-grid (0.875rem) → .klijent-subtab-grid (0.8125rem). */
.detail-tab-actions,
.klijent-subtab-actions,
.klijent-subtab-header,
.klijent-subtab-header-left {
    font-size: 1rem;
}

/* Lijeva grupa headera: title + Prikaži neaktivne + Refresh.
   Add gumb ostaje desno (jedini drugi child od .klijent-subtab-header). */
.klijent-subtab-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Action bar gumbi — zadržavamo samo layout (min-width za konzistentnost
   + border-radius + centered tekst). Padding i font-size su kroz DX SizeMode
   i DX default Medium (ne forsiramo size u CSS-u — to bi overridalo razor
   SizeMode prop). */
.grid-action-bar .dxbl-btn,
.detail-tab-actions .dxbl-btn,
.klijent-subtab-header .dxbl-btn,
.planiranje-bulk-row .dxbl-btn {
    min-width: 64px;
    border-radius: var(--radius-sm);
    justify-content: center;
}


/* Checkbox "Prikaži neaktivne" — pored gumba, lijevo, kompaktan */
.detail-tab-pane-show-inactive {
    margin-right: auto;
    white-space: nowrap;
}

.detail-tab-pane-grid {
    font-size: 0.9375rem;
}

/* ── Klijent sub-tab (2. nivo expand: Lokacija → Prostorije) ────── */
/* Bijela pozadina, samo plava lijeva traka kao vizualni indikator nivoa */
.klijent-subtab {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--brand-primary);
    margin: var(--sp-1) 0;
}

.klijent-subtab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.klijent-subtab-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.klijent-subtab-actions {
    display: flex;
    gap: var(--sp-2);
}

.klijent-subtab-grid {
    font-size: 0.9375rem;
}

/* Ugovor info banner iznad planova — broj/status/napomena na jedan pogled */
.ugovor-info-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--gray-50, #f9fafb);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}
.ugovor-info-napomena {
    flex-basis: 100%;
}
.ugovor-info-banner .detail-label {
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-right: var(--sp-1);
}

/* Oprema expand red — framed panel (okvir + pozadina) da se izdvoji od grida;
   bijele kartice unutra tada "iskaču". Override .klijent-subtab (definiran ranije). */
.oprema-detail {
    background: var(--neutral-bg);
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin: var(--sp-3) var(--sp-2);
}

/* Oprema detail row — Detalji kao kartice (label + value po polju). */
.oprema-detalji-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-3);
}
.oprema-detalji-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.oprema-detalji-card--wide { grid-column: 1 / -1; }
.oprema-detalji-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}
.oprema-detalji-value {
    font-size: var(--fs-md);
    color: var(--text-primary);
    word-break: break-word;
}

/* #6 — Klijent "Pregled" tab: dvije razdvojene kolone (Aktivnost | Financije). */
.klijent-pregled {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 1100px) {
    .klijent-pregled { grid-template-columns: 1fr; }
}
.klijent-pregled-kol { min-width: 0; }
.klijent-pregled-naslov {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--surface-border);
}
.klijent-pregled-hint {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

/* #9 — KPI traka brojki u 360 zaglavlju klijenta. */
.klijent-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5, 2rem);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--surface-border);
}
.klijent-kpi-item {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.klijent-kpi-broj {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: 700;
    color: var(--brand-primary);
}
.klijent-kpi-lbl {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Klijent sub-sub-tab (4. nivo: Plan → Stavke) ───────────────── */
/* Bijela pozadina, ista Pine boja kao level 2 — hijerarhija se vidi indentom,
   ne različitom nijansom. (Korisnik feedback S97: "više nijansi zelene zbunjuje".) */
.klijent-subsubtab {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--brand-primary);
    margin: var(--sp-1) 0;
}

/* Klikabilni "Ukupno (N)" link u koloni Prostorije — toggla expand rowa */
.prostorije-link-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.prostorije-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-weight: 600;
    white-space: nowrap;
}

.prostorije-link .bi {
    font-size: 0.95rem;
}

/* ── Grid action bar (buttons + filters row above grid) ───────────── */
.grid-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.grid-action-bar-left,
.grid-action-bar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Modifikator: poravnaj sve children na donji rub (kad LeftExtra sadrži
   "label IZNAD ComboBox" pattern, ostali gumbi/checkboxi inače plivaju
   na sredini visine ComboBox div-a što izgleda nepoređano). */
.grid-action-bar--align-end .grid-action-bar-left,
.grid-action-bar--align-end .grid-action-bar-right {
    align-items: flex-end;
}

/* DxDateEdit wrapper + nested input — CSS klasa hvata samo vanjski element pa
   descendant selektor mora pokriti i .dxbl-edit i .dxbl-edit-input koje DX render-ira
   unutar. Scopirano kroz parent klasu po pravilu CSS-003 (ne diramo druge gridove). */
.date-filter-input,
.date-filter-input .dxbl-edit,
.date-filter-input .dxbl-edit-input {
    width: 240px !important;
    min-width: 240px;
    flex-shrink: 0;
}

/* ── Planiranje usluga ── */

/* Sekcije headera — logičko odvajanje 3 faze workflowa:
   1 Radni nalog · 2 Dodaj usluge · 3 Skupna izmjena (kontekstualna). */
.planiranje-sekcija {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: var(--sp-3);
}
.planiranje-sekcija-naslov {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-alt);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}
.planiranje-sekcija-broj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
}
.planiranje-sekcija-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3);
}
.planiranje-sekcija-hint {
    padding: var(--sp-2) var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.planiranje-bulk-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.planiranje-bulk-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.planiranje-bulk-label {
    min-width: 80px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
    text-align: left;
}
.planiranje-bulk-combo {
    width: 380px;
    flex-shrink: 0;
}
/* DxComboBoxSifrarnik — naslijeđuje default DX visinu (SizeMode=Medium)
   tako da je usklađen s običnim DxComboBox-om na istoj stranici. Prijašnja
   "normalizacija" s min-height:0 je zapravo sabijala visinu → nekonzistentno. */
.planiranje-bulk-row .dxbl-btn {
    flex-shrink: 0;
}
.planiranje-grid .dxbl-edit,
.planiranje-grid .dxbl-edit-input,
.planiranje-grid .dxbl-edit-input-container,
.planiranje-grid .dxbl-dropdownedit-input,
.planiranje-grid .dxbl-combobox .dxbl-edit-input,
.planiranje-grid .dxbl-listbox-item,
.planiranje-grid td {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planiranje-grid tr.dxbl-grid-data-row {
    height: auto !important;
    max-height: 36px;
}

/* S156 — "Dodaj uslugu" red unutar Sekcije 2; okvir/bg/padding dolaze iz
   .planiranje-sekcija-body, ovdje samo horizontalni flex raspored polja. */
.planiranje-add-row {
    flex-direction: row;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.planiranje-add-field {
    flex: 1 1 240px;
    min-width: 240px;
}
.planiranje-add-field--auto {
    flex: 0 0 auto;
    min-width: 0;
}
.planiranje-add-normativ {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
}
.planiranje-add-divider {
    width: 1px;
    align-self: stretch;
    background: var(--surface-border);
    margin: 0 var(--sp-1);
}

/* Toolbar iznad grida usluga — broj usluga + "Obriši sve usluge". */
.planiranje-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.planiranje-grid-toolbar-left {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
}
.planiranje-grid-toolbar-info {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
}
.planiranje-grid-toolbar-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.planiranje-add-ishod {
    flex-basis: 100%;
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-primary);
}

/* S324 — popup za izbor master konteksta podusluge: okomiti popis opcija. */
.planiranje-pod-opcije {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.planiranje-pod-opcija {
    width: 100%;
    justify-content: flex-start;
}

/* S324 — akcijska zona iznad grida u sub-tabovima (npr. Podusluge tab).
   Okomiti stack jednakih gumba (širina = najširi gumb), poravnat desno. */
.uow-subtab-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    width: max-content;
    margin-left: auto;
}
.uow-subtab-add-btn {
    width: 100%;
    justify-content: flex-start;
}

/* Sekcija 3 — kontekstualna bulk traka (renderira se samo kad ima označenih
   redaka). Brand-tint pozadina signalizira "mod označavanja". */
.planiranje-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--p-50);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-md);
}
.planiranje-bulk-bar-count {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--brand-primary);
    white-space: nowrap;
}
.planiranje-bulk-bar-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.planiranje-bulk-bar-group > label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
.planiranje-bulk-bar-combo {
    width: 210px;
}
.planiranje-bulk-bar-hint {
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.planiranje-bulk-bar-clear {
    margin-left: auto;
}

/* S213 — DxButton picker (umjesto DxComboBox) za "Dodaj uslugu" i "Pod master-om".
   Otvara DxDropDown s embedded DxGrid (FilterRow + Sort + Search). */
.planiranje-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--surface, #fff);
    color: var(--color-text, #1f2937);
    font-weight: 400;
}
.planiranje-picker-btn:hover {
    border-color: var(--brand-primary);
}
.planiranje-katalog-dropdown {
    padding: var(--sp-3);
}
.planiranje-katalog-grid {
    max-height: 480px;
}

/* S156 — upozorenje kad planirana količina opreme prelazi evidentiranu na opremi klijenta. */
.planiranje-grid .kolicina-opreme-warning .dxbl-edit-input,
.planiranje-grid .kolicina-opreme-warning .dxbl-edit-input-container {
    border-color: var(--bs-warning, #ffc107) !important;
    background-color: #fff8e1;
}

.date-filter-check {
    white-space: nowrap;
}

.page-toolbar-title {
    pointer-events: none;
}

.page-toolbar-title,
.page-toolbar-title *,
.page-toolbar .dxbl-toolbar-item {
    outline: none !important;
}

.page-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

/* ── Izvrsenja panel (enterprise) ── */

.oi-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    background: var(--bg-primary);
    overflow: hidden;
}

.oi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.oi-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.oi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.oi-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oi-name {
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-primary);
}

.oi-dates {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.oi-note {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--bg-tertiary, #f8f9fa);
    border-bottom: 1px solid var(--border-color);
    font-style: italic;
}

.oi-room-header {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.oi-service-card {
    margin: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}

.oi-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.oi-service-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.oi-service-name {
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-primary);
}

.oi-service-qty {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.oi-results-grid {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 1px 0;
    font-size: var(--fs-sm);
}

.oi-results-grid .oi-result-label,
.oi-results-grid .oi-result-value {
    padding: 4px var(--sp-3);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.oi-results-grid .oi-result-label {
    background: var(--bg-secondary);
}

.oi-result-label {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 2px 0;
}

.oi-result-value {
    color: var(--text-primary);
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.oi-result-note {
    font-size: var(--fs-xs, 11px);
    color: var(--text-muted);
    font-style: italic;
}

/* ── Izvrsenja summary (simplified view) ── */

.oi-summary-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.oi-summary-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    overflow: hidden;
}

.oi-summary-card .oi-header {
    border-bottom: 1px solid var(--border-color);
}

.oi-summary-stats {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-3);
}

.oi-stat {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
}

.oi-stat-value {
    font-size: var(--fs-xl, 20px);
    font-weight: 700;
    color: var(--text-primary);
}

.oi-stat-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.oi-prostorije {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: 0 var(--sp-3) var(--sp-3);
}

.oi-summary-card .oi-note {
    border-top: 1px solid var(--border-color);
    border-bottom: none;
}

/* Sesija 81 F6.7 — vidljivost preuzimanja usluga (multi-tehničar audit).
   Konzistentno s oi-prostorije padding pattern-om + history-item iz StatusPovijestPanel-a. */
.oi-stat-preuzeto .oi-stat-value { color: var(--warning); }

.oi-preuzete {
    padding: 0 var(--sp-3) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oi-preuzete-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-1);
}

.preuzeta-usluga {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    flex: 1;
}

.back-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
}

.back-banner a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 500;
}

.back-banner a:hover {
    text-decoration: underline;
}

.page-subtitle {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-top: 2px;
    margin-bottom: 0;
}

/* ── Card ───────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 14px var(--sp-5);
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.card-body { padding: var(--sp-5); }

/* ── Grid link button (PDF download etc.) ──────────────────── */
.grid-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
    text-decoration: none;
    transition: background var(--transition);
    white-space: nowrap;
}
.grid-link-btn:hover { background: var(--content-bg); }

/* ── Page title icon ─────────────────────────────────────────── */
.page-title-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.page-title-icon {
    width: 28px;
    height: 28px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* ── Grid actions (Uredi + operacije popup) ──────────────────── */
.grid-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
/* Grid action buttons — forced primary filled style */
.grid-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
/* Grid command cell buttons: align s DX btn-primary default (Pine 600 = --DS-primary-90),
   ne s --brand-primary (Pine 700) — toolbar i grid akcije moraju biti ISTA nijansa.
   DX btn-primary-bg → --DS-color-surface-primary-default-rest → --DS-primary-90. */
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-primary.dxbl-btn-icon-only {
    background-color: var(--p-600) !important;
    border-color: var(--p-600) !important;
    color: #fff !important;
}
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-primary.dxbl-btn-icon-only:hover {
    background-color: var(--p-700) !important;     /* Pine 700 — hover (same darker step kao i DX hover na drugima) */
    border-color: var(--p-700) !important;
}
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-primary .dxbl-image {
    color: #fff !important;
}
/* Text/mixed primary buttons in grid-actions — lookup.css whitens ALL .dxbl-btn, so we
   must re-apply Pine fill for non-icon-only primary buttons (e.g. "Prioriteti" text btn). */
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-primary:not(.dxbl-btn-icon-only) {
    background-color: var(--p-600) !important;
    border-color: var(--p-600) !important;
    color: #fff !important;
}
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-primary:not(.dxbl-btn-icon-only):hover {
    background-color: var(--p-700) !important;
    border-color: var(--p-700) !important;
}
/* Danger (delete) buttons in grid-actions — restore DX red fill (lookup.css whitens ALL .dxbl-btn) */
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-danger {
    background-color: var(--DS-color-surface-danger-default-rest, #dc3545) !important;
    border-color: var(--DS-color-surface-danger-default-rest, #dc3545) !important;
    color: #fff !important;
}
td.dxbl-grid-command-cell .grid-actions .dxbl-btn.dxbl-btn-danger:hover {
    background-color: var(--DS-color-surface-danger-default-hover, #bb2d3b) !important;
    border-color: var(--DS-color-surface-danger-default-hover, #bb2d3b) !important;
}

/* Popup operations menu */
.grid-ops-menu {
    display: flex;
    flex-direction: column;
    padding: var(--sp-1) 0;
}
.grid-ops-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-md);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.grid-ops-item:hover {
    background: var(--content-bg);
    color: var(--text-primary);
}
.grid-ops-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--brand-primary);
}
.grid-ops-divider {
    height: 1px;
    background: var(--surface-border);
    margin: var(--sp-2) var(--sp-4);
}

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    line-height: 1.4;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-info    { background: var(--info-bg);    color: var(--info);    }
.badge-gray    { background: var(--neutral-bg); color: var(--text-secondary); }

/* ── Status text helper (inline broj/tekst kojem boja označava status) ── */
/* Generic helper kad ne treba badge background, samo bojanje teksta. */
/* Koristiti data-status atribut, ne klasu — usklađeno s §11 ui-standardi.md. */
.status-text { font-weight: 500; }
.status-text[data-status="success"] { color: var(--success); }
.status-text[data-status="warning"] { color: var(--warning); }
.status-text[data-status="danger"]  { color: var(--danger); }
.status-text[data-status="info"]    { color: var(--info); }
.status-text[data-status="neutral"] { color: var(--text-secondary); }

/* ── Lokacije skladišta — 4-razinski drill-down (Zona/Regal/Polica/Pozicija) ── */
/* Sklad/Lokacije.razor renderira liste kao .lokacija-row redove unutar 4 cards. */

/* Header toolbar (Skladište label + ComboBox + Osvježi gumb) — VLASTITE klase
   jer Bootstrap utility klase (.d-flex, .gap-2, .align-items-center) NISU
   učitane u App.razor (samo DevExpress Fluent + app.css + lookup.css). */
.lokacije-toolbar {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-2);
}
.lokacije-toolbar-label {
    font-weight: 500;
    margin-bottom: 0;
}
.lokacije-toolbar-combo {
    width: 320px;
}
.lokacije-path {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

/* Card header s + gumbom desno — Bootstrap d-flex/justify-content-between
   ne radi (vidi gore), pa moramo vlastiti flex helper. */
.lokacija-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
}

/* Grid 4 panela (Zone | Regali | Police | Pozicije) — replace .row g-3
   (Bootstrap g-3 utility ne radi). Gap između panela horizontalno + razmak
   ispod prvog reda na manjim ekranima. */
.lokacije-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}
@media (max-width: 1200px) {
    .lokacije-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .lokacije-grid { grid-template-columns: 1fr; }
}

/* Scrollable body s fiksnom max visinom — vertikalan scroll kad lista preraste.
   Kombinira se s <Virtualize> za police/pozicije gdje može biti 100+. */
.lokacije-card-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 0;
}

/* Pozicija meta info (puna adresa + barkod) — manji font, sivi */
.lokacija-pozicija-meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--sp-1);
}
.lokacija-pozicija-meta code {
    font-size: 0.85em;
}
.lokacija-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--surface-border);
    cursor: pointer;
    transition: background var(--transition);
}
.lokacija-row:last-child { border-bottom: none; }
.lokacija-row:hover { background: var(--content-bg); }
.lokacija-row.selected {
    background: var(--info-bg);
    border-left: 3px solid var(--brand-primary);
}
/* Pozicije imaju dodatni red s adresom + barkodom — top align */
.lokacija-row--pozicija { align-items: flex-start; }

/* S303 (AS-OK) — OpremaFormPopup Sifra polje + "Generiraj" gumb side-by-side. */
.oprema-sifra-row {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
}
.oprema-sifra-input {
    flex: 1 1 auto;
    min-width: 0;
}

.lokacija-sifra {
    color: var(--brand-primary);
    font-weight: 600;
}
.lokacija-naziv {
    color: var(--brand-primary);
    margin-left: var(--sp-3);
}
/* Action grupa desno — uniformno s grid-actions standardom (min-width 64px na gumbu) */
.lokacija-actions {
    display: flex;
    gap: var(--sp-1);
    flex-shrink: 0;
}
.lokacija-row .dxbl-btn { min-width: 64px; }

/* ── Status banner (semantic panel: success/warning/danger/info) ── */
.status-banner {
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    font-size: var(--fs-md);
    margin-bottom: var(--sp-4);
}
.status-banner--success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-banner--warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.status-banner--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border);  }
.status-banner--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border);    }

/* ── Diagnostic page helpers (placeholder chip, info box, suggestion panel) ── */
.diag-code-chip {
    display: inline-block;
    padding: 2px var(--sp-2);
    background: var(--neutral-bg);
    border-radius: var(--radius-xs);
    margin-right: var(--sp-1);
    font-size: var(--fs-sm);
    font-family: monospace;
}
.diag-info-box {
    padding: var(--sp-2);
    background: var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    min-height: 32px;
}
.diag-info-box--wrap { white-space: pre-wrap; }
.diag-suggestion-panel {
    margin-top: var(--sp-6);
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    background: var(--surface-alt);
}
.diag-suggestion-title {
    margin-top: 0;
    color: var(--danger);
}
.diag-channel-chip {
    display: inline-block;
    background: var(--info-bg);
    color: var(--info);
    padding: 3px var(--sp-3);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.diag-decisive-cell {
    background: var(--warning-bg);
    font-weight: 600;
    padding: 2px var(--sp-1);
    border-radius: var(--radius-xs);
}

/* ── Portal layout helpers (dokumenti, prilozi) ──────────────── */
.portal-dok-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 14px;
}
.portal-prilog-item {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) 10px;
    font-size: var(--fs-md);
}
.portal-pdf-link {
    background: var(--info);
    color: var(--surface);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--fs-base);
    white-space: nowrap;
}
.portal-preuzmi-link {
    color: var(--info);
    font-size: var(--fs-base);
    text-decoration: none;
}
.portal-preuzmi-link:hover {
    text-decoration: underline;
}
.portal-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--sp-5);
}

/* ── Obracuni UoW helpers (zbirni/pojedinačni pregled) ───────── */
.obracun-klijent-block {
    margin-bottom: var(--sp-6);
}
.obracun-bruto {
    color: var(--brand-primary);
    font-weight: bold;
}
.obracun-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    text-align: center;
}
.stavke-heading {
    margin: var(--sp-2) 0;
    font-size: var(--fs-lg);
}

/* ── Audit log detail row (stare/nove vrijednosti diff) ──────── */
.audit-detail-row {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-base);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}
.audit-diff-pre {
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: var(--fs-sm);
    max-height: 200px;
}
.audit-diff-pre--old { background: var(--danger-bg); }
.audit-diff-pre--new { background: var(--success-bg); }

/* filter-grid-4col je zamijenjen s .filter-bar — vidi dolje */
.filter-grid-4col { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-end; }
.filter-grid-4col > div { flex: 1 1 150px; min-width: 0; max-width: 300px; }
.filter-grid-4col > div:has(> button) { flex: 0 0 auto; max-width: none; }

/* ── Home dashboard helpers (SLA grid + analitika) ────────────── */
.home-sla-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.sql-preview {
    max-height: 100px;
    overflow: auto;
}
.analitika-scroll {
    max-height: 300px;
    overflow: auto;
}
.progress-thin { height: 8px; }
.progress-pct-label { min-width: 45px; }

/* ── DatePicker varijacije širine (izvještaji, filter bar) ──── */
.dp-wide { width: 180px; }
.dp-narrow { width: 120px; }
.filter-card { margin-bottom: 1.5rem; }

/* ── Filter bar — jedino pravilo za sve filter retke ──────────
   Koristi se u svakom filter-card umjesto inline style/grid.
   Standardne širine definirane ovdje, HTML nema inline px-ove.
   Wrapper <div> oko kontrole dobiva klasu po tipu:
     (bez klase) = combo 200px  |  .fb-wide = 260px
     .fb-date    = 155px        |  .fb-search = 280px          */
.filter-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-end;
}
.filter-bar > div          { flex: 0 0 200px; }
.filter-bar > .fb-wide     { flex: 0 0 260px; }
.filter-bar > .fb-date     { flex: 0 0 155px; }
.filter-bar > .fb-search   { flex: 0 0 280px; }
/* Wrapper div koji sadrži samo gumb (bez labele): prirodna širina */
.filter-bar > div:has(> button) { flex: 0 0 auto; }
/* Direktni gumb kao child filter-bara                             */
.filter-bar > button       { flex: 0 0 auto; }

/* ── Iframe preview (PDF/document lightbox) ──────────────────── */
.iframe-preview {
    width: 100%;
    height: 75vh;
    border: none;
}

/* ── Disabled panel overlay (planiranje desni panel) ─────────── */
.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Planiranje usluga helpers ───────────────────────────────── */
.podusluga-indent {
    display: inline-block;
    width: 20px;
}

/* ── Compact alert (manji padding + font) ────────────────────── */
.alert-sm {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-md);
}

/* ── Utility: 60% opacity (disabled/secondary) ───────────────── */
.opacity-60 { opacity: 0.6; }

/* ── Utility: icon size helpers (SVG / i) ────────────────────── */
.icon-16 { width: 16px; height: 16px; }
.icon-20 { font-size: 1.2rem; }

/* ── History scroll (slanje log, itd.) ───────────────────────── */
.history-scroll {
    max-height: 150px;
    overflow-y: auto;
}

/* ── Section divider (top border + padding) ─────────────────── */
.section-divider {
    border-top: 1px solid var(--surface-border);
    padding-top: 0.75rem;
}

/* ── Auto-narrow select (TimelinePanel tip toggle) ──────────── */
.select-auto-narrow {
    width: auto;
    min-width: 120px;
}

/* ── Flex grow 2 (omjer 2:1 dvo-stupačni layout) ─────────────── */
.flex-grow-2 { flex: 2; }

/* ── Usluga podusluga indent (zapisnik detail) ───────────────── */
.usluga-podusluga-indent { padding-left: 20px; }

/* ── Inline text truncation (za overflow u combobox/picker itd.) ── */
.text-truncate-inline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Large icon (3rem — empty state placeholders) ────────────── */
.icon-3rem { font-size: 3rem; }

/* ── SLA hours column (100px narrow form col) ────────────────── */
.sla-hours-col { width: 100px; }

/* ── Plan detail grid (2-col) ────────────────────────────────── */
.plan-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* ── Max-width helpers (300/500/900) ─────────────────────────── */
.max-w-300 { max-width: 300px; }
.max-w-500 { max-width: 500px; }
.help-topic-container { max-width: 900px; }

/* ── Firma info card (admin) ─────────────────────────────────── */
.firma-info-card {
    padding: var(--sp-5);
    max-width: 720px;
}

/* ── NotifikacijeLog filter stupci (min-width varijante) ────── */
.filter-col-140 { min-width: 140px; }
.filter-col-150 { min-width: 150px; }
.filter-col-160 { min-width: 160px; }
.filter-col-220 { min-width: 220px; }

/* ── Table column width helpers (<th>) ───────────────────────── */
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-90 { width: 90px; }
.w-200 { width: 200px; }

/* ── Dashboard KPI 4 stupca override ─────────────────────────── */
.kpi-4col { grid-template-columns: repeat(4, 1fr); }

/* ── Diagnostic card (notif/permission stranice) ──────────────── */
.diag-card { padding: var(--sp-5); }
.diag-card--narrow { max-width: 900px; }
.diag-card--wide { max-width: 1100px; }

/* ── Diagnostic 2-col grid (notifikacija pravilo/kanali) ─────── */
.diag-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.diag-grid-2col--tight { gap: var(--sp-3); }
.grid-span-2 { grid-column: span 2; }

/* ── Diagnostic suggestion list (prava prijedlozi) ──────────── */
.diag-suggestion-list {
    margin: var(--sp-2) 0 0 var(--sp-4);
}

/* ── Utility classes ────────────────────────────────────────── */
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary   { color: var(--text-primary); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fs-xs  { font-size: var(--fs-xs); }
.fs-sm  { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md  { font-size: var(--fs-md); }
.cursor-pointer { cursor: pointer; }

/* ── Sidebar toggle via JS ──────────────────────────────────── */
.sidebar.collapsed .brand-text,
.sidebar.collapsed .version-label { display: none; }

.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 14px; }
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar.collapsed .sidebar-accordion { display: none; }

/* =============================================================
   Sidebar nav icons (mask-image SVG — inherits text color)
   ============================================================= */
.nav-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: -3px;
    flex-shrink: 0;
}

.nav-icon-home       { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.nav-icon-dashboard  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
.nav-icon-crm        { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
.nav-icon-operativa  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); }
.nav-icon-planiranje { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E"); }
.nav-icon-zapisnici  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.nav-icon-financije  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E"); }
.nav-icon-sifrarnici { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z'/%3E%3C/svg%3E"); }
.nav-icon-katalog    { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E"); }
.nav-icon-sklad      { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4h-4v2h4v-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4h-4v2h4v-2z'/%3E%3C/svg%3E"); }
.nav-icon-admin      { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); }
.nav-icon-komunikacije { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E"); }
.nav-icon-prodaja    { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E"); }

/* Troškovnik stavke-toolbar — ergonomska min-širina (ikon-gumbi nisu tijesni kvadrati) */
.troskovnik-toolbar .dxbl-btn { min-width: 46px; }

/* Icon positioning inside DxAccordion group headers */
.sidebar-accordion .dxbl-accordion-item-header .nav-icon {
    margin-right: var(--sp-2);
}

/* =============================================================
   Sidebar DxAccordion — dark theme override
   ============================================================= */

.sidebar-accordion {
    background: transparent !important;
    border: none !important;
    padding: 0;
}

/* === DX v25 Sidebar Accordion overrides ============================
   v25 DOM struktura (POTVRĐENA grep-om iz core.min.css):
   - .dxbl-accordion-group           — top-level grupa (Pregled, CRM, Operativa)
   - .dxbl-accordion-group-header    — naslov grupe (clickable za expand)
   - .dxbl-accordion-group-body      — collapsible wrapper ispod headera
   - .dxbl-accordion-items-container — kontejner child itema (uvijek unutar group-body)
   - .dxbl-accordion-item            — nav link ILI nested grupa
   - .dxbl-accordion-item-content    — vidljivi sadržaj nav linka (a element)
   - .dxbl-active (modifier)         — selected/active state

   GUIDE LINIJU stavljamo na `.dxbl-accordion-group-body` (S218) jer items-
   container nije direktno dijete `.dxbl-accordion-group`-a (u između stoji
   group-body wrapper).

   PRIJAŠNJE PRAVILO BUG (S97): targetiralo `.dxbl-accordion-item-header` koje
   NE POSTOJI u v25 → ništa nije bilo style-ano kroz našu CSS, sidebar je
   radio samo na DS-token mapping nivou.
================================================================== */

/* Default text na svim accordion containerima */
.sidebar-accordion,
.sidebar-accordion .dxbl-accordion-group,
.sidebar-accordion .dxbl-accordion-item {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* === Borderless accordion s vertikalnom linijom (S218 redizajn) ==============
   Hijerarhija se NE nosi kroz deep indent već kroz tanku vertikalnu vodilju
   uz lijevi rub group body-a (kao GitHub/Notion/Linear sidebari). Top-level
   nosi boju + bold + ikonu, children su lagano uvučeni (text se poravnava s
   parent text-om) i guide line ih grupira pod parent.
============================================================================ */

/* Top-level grupe — Pine 700 bold header. */
.sidebar-accordion .dxbl-accordion-group > .dxbl-accordion-group-header {
    background: transparent !important;
    border: none !important;
    color: var(--brand-primary) !important;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: var(--sp-3) 14px var(--sp-1) 14px !important;
    min-height: unset !important;
}

.sidebar-accordion .dxbl-accordion-group > .dxbl-accordion-group-header:hover {
    background: var(--sidebar-hover) !important;
    color: var(--brand-primary-h) !important;
}

/* Expand chevron na group header */
.sidebar-accordion .dxbl-accordion-group-expand-btn-container {
    color: var(--brand-primary) !important;
    opacity: 0.7;
}

/* Top-level leaf item s `top-link` klasom (npr. Šifrarnici) — vizualno kao
   group header (Pine bold + ikona), ali bez chevrona jer nema djecu. */
.sidebar-accordion .dxbl-accordion-item.top-link > .dxbl-accordion-item-content {
    background: transparent !important;
    border: none !important;
    color: var(--brand-primary) !important;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: var(--sp-3) 14px var(--sp-1) 14px !important;
    min-height: unset !important;
    transition: color var(--transition), background var(--transition);
}

.sidebar-accordion .dxbl-accordion-item.top-link:not(.nav-active) > .dxbl-accordion-item-content:hover {
    color: var(--brand-primary-h) !important;
    background: var(--sidebar-hover) !important;
}

/* Vertikalna guide linija na group body — markira da su djeca grupa unutar
   parent-a. Pozicija na ~22px (otprilike sredina chevron+icon zone parent
   header-a) tako da tekst djeteta visi desno od linije.
   Linija ide na .dxbl-accordion-group-body wrapper jer DX v25 ima taj wrapper
   između .dxbl-accordion-group i .dxbl-accordion-items-container. */
.sidebar-accordion .dxbl-accordion-group > .dxbl-accordion-group-body {
    position: relative;
    margin-left: 22px;
    border-left: 1px solid var(--sidebar-border);
    padding-bottom: var(--sp-1);
}

/* Nav linkovi (leaf itemi unutar grupe) — minimalni indent (12px desno od
   guide linije), font weight 400 da se razlikuje od bold parent header-a. */
.sidebar-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group) > .dxbl-accordion-item-content {
    background: transparent !important;
    border: none !important;
    color: var(--sidebar-text) !important;
    font-size: var(--fs-md);
    font-weight: 400;
    padding: 6px 14px 6px 12px !important;
    min-height: unset !important;
    white-space: normal;
    transition: color var(--transition), background var(--transition);
}

.sidebar-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.nav-active):hover > .dxbl-accordion-item-content {
    color: var(--sidebar-text-h) !important;
    background: var(--sidebar-hover) !important;
}

/* Selected/active leaf item — Pine 100 BG + Pine 700 tekst + 3px lijeva traka.
   Traka se preklapa s guide linijom, što je namjerno: aktivni red "lomi"
   guide liniju i tako se dodatno ističe. */
.sidebar-accordion .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content,
.sidebar-accordion .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content:hover,
.sidebar-accordion .dxbl-accordion-item.nav-active > .dxbl-accordion-item-content,
.sidebar-accordion .dxbl-accordion-item.nav-active > .dxbl-accordion-item-content:hover {
    color: var(--sidebar-active) !important;
    background: var(--sidebar-active-bg) !important;
    font-weight: 600;
    position: relative;
}

.sidebar-accordion .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content::before,
.sidebar-accordion .dxbl-accordion-item.nav-active > .dxbl-accordion-item-content::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sidebar-active);
    border-radius: 0 2px 2px 0;
}

/* S280 — Locked leaf (modul neaktivan po razini licence). Klik je dopušten
   (API vraća 403 s razlogom), ali UI hint kaže "ne sada":
   - opacity 0.55 = vizualno utisnut
   - lock ikona "🔒" desno od teksta (CSS pseudo, ne ulazi u DOM tekst)
   - tooltip dopunjen suffix-om "Dostupno u razini X" iz ItemTitle helper-a */
.sidebar-accordion .dxbl-accordion-item.sidebar-locked > .dxbl-accordion-item-content {
    opacity: 0.55;
}

.sidebar-accordion .dxbl-accordion-item.sidebar-locked > .dxbl-accordion-item-content::after {
    content: ' 🔒';
    font-size: 0.85em;
    margin-left: auto;
    padding-left: 8px;
    opacity: 0.85;
}

.sidebar-accordion .dxbl-accordion-item.sidebar-locked:hover > .dxbl-accordion-item-content {
    opacity: 0.75; /* hover blago pojača za otkrivanje tooltipa */
}

/* Nested sub-grupe (Postavke modula unutar CRM/Operativa/Skladiste/Katalog,
   Korisnici/Organizacija/Konfiguracija/Notifikacije/Nadzor unutar Administracije).
   Slijede istu vertikalnu vodilju mehaniku, samo razina dublja. */
.sidebar-accordion .dxbl-accordion-group .dxbl-accordion-group > .dxbl-accordion-group-header {
    color: var(--sidebar-text-h) !important;
    font-size: var(--fs-md);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 6px 14px 4px 12px !important;
}

/* Druga razina guide line — još malo dublja od prve.
   Selector targeta unutarnji group-body (DX v25 wrapper). */
.sidebar-accordion .dxbl-accordion-group .dxbl-accordion-group > .dxbl-accordion-group-body {
    margin-left: 16px;
    border-left: 1px solid var(--sidebar-border);
}

/* Nav linkovi unutar nested grupa — isti minimalni indent kao prva razina */
.sidebar-accordion .dxbl-accordion-group .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group) > .dxbl-accordion-item-content {
    font-size: var(--fs-base);
    padding: 5px 14px 5px 12px !important;
}

/* ── TopBar buttons ───────────────────────────────────────── */
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--surface-border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-md);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.btn-logout:hover {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}
.btn-login {
    background: var(--brand-primary);
    color: var(--surface);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    text-decoration: none;
}

/* ── Godina context selector ─────────────────────────────── */
.godina-context-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--sp-3);
}
.godina-context-label {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.godina-context-combo {
    min-width: 110px;
    max-width: 140px;
}

/* ── Terenski rad dot (grid) ─────────────────────────────── */
.terenski-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
}
.terenski-dot.online {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    animation: sync-pulse 2s ease-in-out infinite;
}
.terenski-dot.done {
    background: var(--brand-primary);
}
.terenski-dot.offline {
    background: var(--text-muted);
}

/* ── Sync status chip (TopBar) ───────────────────────────── */
.sync-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    background: var(--neutral-bg);
    font-size: var(--fs-base);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.sync-status-chip:hover {
    background: var(--brand-primary-tint);
}
.sync-status-chip .sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.sync-status-chip.sync-active .sync-dot {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    animation: sync-pulse 2s ease-in-out infinite;
}
.sync-status-chip .sync-label {
    font-weight: 600;
    color: var(--text-primary);
}
.sync-status-chip .sync-label-muted {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}
.sync-status-chip .sync-separator {
    color: var(--surface-border);
    margin: 0 2px;
}
.sync-status-chip .sync-done {
    font-weight: 600;
    color: var(--text-primary);
}
@keyframes sync-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
    50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.05); }
}

/* ── Notification bell ───────────────────────────────────── */
.notif-bell { background:transparent; border:none; color:var(--text-secondary); cursor:pointer; position:relative; padding:4px; }
.notif-bell:hover { color:var(--text-primary); }
.notif-badge { position:absolute; top:-2px; right:-4px; background:var(--danger); color:white; font-size:var(--fs-xs); font-weight:700;
    min-width:16px; height:16px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; padding:0 var(--sp-1); }
.notif-overlay { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1049; background:transparent; }
.notif-panel { position:absolute; top:var(--sp-8); right:0; width:340px; max-height:420px; background:var(--surface);
    border:1px solid var(--surface-border); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1050; overflow:hidden; }
.notif-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
    border-bottom:1px solid var(--neutral-bg); font-weight:600; font-size:var(--fs-lg); }
.notif-markall { background:none; border:none; color:var(--info); font-size:var(--fs-base); cursor:pointer; }
.notif-markall:hover { text-decoration:underline; }
.notif-list { max-height:360px; overflow-y:auto; }
.notif-item { padding:10px 14px; border-bottom:1px solid var(--neutral-bg); cursor:pointer; }
.notif-item:hover { background:var(--neutral-bg); }
.notif-unread { background:var(--info-bg); }
.notif-title { font-size:var(--fs-md); font-weight:500; color:var(--text-primary); }
.notif-text { font-size:var(--fs-base); color:var(--text-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-meta { font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; }
.notif-empty { padding:var(--sp-6); text-align:center; color:var(--text-muted); font-size:var(--fs-md); }

/* ============================================================
   Scheduler — multiline appointment text
   ============================================================ */
/* Prelom teksta događaja rješava VerticalAppointmentTemplate (renderira retke kao zasebne <div>),
   ne CSS — pa ovdje nema više pre-line hacka (klasa appointmenta varira po DX verziji). */

/* ============================================================
   Responsive — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .sidebar {
        width: 56px;
        min-width: 56px;
    }

    .sidebar .brand-text,
    .sidebar .version-label { display: none; }

    .sidebar .sidebar-brand { justify-content: center; padding: 14px; }
    .sidebar .sidebar-footer { display: none; }

    /* DxAccordion: hide in collapsed tablet sidebar */
    .sidebar .sidebar-accordion { display: none; }

    .content-inner { padding: var(--sp-4); }
}

/* ============================================================
   Responsive — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Sidebar: off-canvas overlay drawer */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 250ms ease;
        z-index: 1000;
    }

    /* Restore full sidebar appearance when open */
    .sidebar .brand-text,
    .sidebar .version-label { display: revert; }

    .sidebar .sidebar-brand { justify-content: flex-start; padding: var(--sp-4) 14px; }
    .sidebar .sidebar-footer { display: block; }

    /* DxAccordion: show in mobile drawer */
    .sidebar .sidebar-accordion { display: block; }

    /* Open state (toggled via JS) */
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Backdrop overlay */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-backdrop.active {
        display: block;
    }

    /* Main area takes full width */
    .main-area {
        width: 100%;
    }

    /* TopBar adjustments */
    .topbar {
        padding: 0 var(--sp-3);
    }

    .user-info { display: none; }

    /* Content */
    .content-inner {
        padding: var(--sp-3);
    }

    .page-title { font-size: var(--fs-2xl); }

}

/* ===== Timeline Panel ===== */
.timeline-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.timeline-item {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--surface-border);
    background: var(--surface);
}

.timeline-item.timeline-status { border-left-color: var(--warning); }
.timeline-item.timeline-klijent { border-left-color: var(--success); }
.timeline-item.timeline-javna { border-left-color: var(--brand-primary); }
.timeline-item.timeline-interna { border-left-color: var(--text-muted); }

.timeline-icon {
    font-size: var(--fs-lg);
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
}

.timeline-content { flex: 1; min-width: 0; }

.timeline-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.timeline-author {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.timeline-date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-left: auto;
}

.timeline-badge {
    font-size: var(--fs-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
}

.timeline-badge.badge-status { background: #fff3cd; color: #856404; }
.timeline-badge.badge-klijent { background: #d4edda; color: #155724; }
.timeline-badge.badge-javna { background: #cce5ff; color: #004085; }
.timeline-badge.badge-interna { background: #e9ecef; color: #6c757d; }

.timeline-text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
    word-break: break-word;
}

/* ===== Sesija 86B — KontaktPicker (centralni adresar) ===== */
.kontakt-picker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.kontakt-picker-combo-wrap {
    flex-grow: 1;
    min-width: 0; /* dopusti ellipsis unutar DxComboBox wrappera */
}
.kontakt-picker-combo {
    width: 100%;
}
.kontakt-picker-add-btn {
    flex-shrink: 0;
}
.kontakt-picker-email {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}
.kontakt-picker-toggle {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
}
.kontakt-picker-toggle .detail-muted {
    color: var(--text-secondary);
}

/* ============================================================ */
/* Help / KB topic styling — S105 (Faza B in-app help)           */
/* ============================================================ */

.help-topic-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand-primary);
    text-decoration: underline;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.help-topic-link:hover {
    color: var(--brand-primary-hover, var(--brand-primary));
    text-decoration: none;
}

.help-topic-link .bi {
    font-size: 1em;
}

.kb-topic {
    line-height: 1.6;
    color: var(--text-primary);
}

.kb-topic h1, .kb-topic h2, .kb-topic h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.kb-topic h1:first-child, .kb-topic h2:first-child {
    margin-top: 0;
}

.kb-topic table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.kb-topic table th, .kb-topic table td {
    border: 1px solid var(--border-light, #dee2e6);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.kb-topic table th {
    background-color: var(--bg-subtle, #f8f9fa);
    font-weight: 600;
}

.kb-topic blockquote {
    border-left: 3px solid var(--brand-primary);
    padding-left: 1rem;
    color: var(--text-secondary);
    margin: 1em 0;
}

.kb-topic code {
    background-color: var(--bg-subtle, #f8f9fa);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}

.kb-topic pre {
    background-color: var(--bg-subtle, #f8f9fa);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

.kb-topic-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.kb-topic-footer {
    background-color: var(--bg-subtle, #f8f9fa);
    padding: 1rem;
    border-radius: 4px;
}

.topbar-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary, #6c757d);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
}

.topbar-help-btn:hover {
    color: var(--brand-primary);
    background-color: var(--bg-subtle, #f8f9fa);
}

.topbar-help-btn .bi {
    font-size: 1.2rem;
}

/* ============================================================
   Help / KB browser (S232 redesign — enterprise look)
   Audience: user only (dev pogled uklonjen).
   Sve boje/spacing kroz design tokene — vidi :root gore.
   ============================================================ */

.help-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-8) var(--sp-12);
}

/* ---------- Header (title + lead + search) ---------- */

.help-page-header {
    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: end;
    gap: var(--sp-8);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-8);
    border-bottom: 1px solid var(--surface-border);
}

.help-page-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--brand-primary);
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.01em;
}

.help-page-lead {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    max-width: 56ch;
}

.help-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.help-search-wrap:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-tint);
}

.help-search-icon {
    position: absolute;
    left: var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    pointer-events: none;
}

.help-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-4) + 24px);
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.help-search-input::placeholder {
    color: var(--text-secondary);
}

.help-search-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
}

.help-search-clear:hover {
    color: var(--text-primary);
    background: var(--neutral-bg);
}

/* ---------- Section title (shared) ---------- */

.help-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-5);
}

.help-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0 var(--sp-2);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    border-radius: var(--radius-xl);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------- Loading / error states ---------- */

.help-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-6);
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.help-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--surface-border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: help-spin 0.8s linear infinite;
}

@keyframes help-spin {
    to { transform: rotate(360deg); }
}

.help-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-default);
    padding: var(--sp-4) var(--sp-5);
    color: var(--text-primary);
}

.help-error i {
    color: var(--danger);
    font-size: var(--fs-xl);
    flex-shrink: 0;
    margin-top: 2px;
}

.help-error strong {
    display: block;
    margin-bottom: var(--sp-1);
}

.help-error p {
    margin: 0;
    color: var(--text-secondary);
}

/* ---------- Home: category grid ---------- */

.help-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
}

.help-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    min-height: 140px;
    position: relative;
}

.help-cat-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.help-cat-card:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.help-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-2);
}

.help-cat-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0;
    line-height: 1.3;
}

.help-cat-count {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0;
    text-transform: lowercase;
}

/* ---------- Search results ---------- */

.help-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.help-result-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background-color var(--transition);
}

.help-result-item:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-tint);
}

.help-result-icon {
    color: var(--brand-primary);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}

.help-result-body {
    flex: 1;
    min-width: 0;
}

.help-result-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.help-result-meta {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.help-result-folder {
    font-weight: 500;
}

.help-result-sep {
    opacity: 0.5;
}

.help-result-tags {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-result-chevron {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.help-empty-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--text-secondary);
}

.help-empty-results i {
    font-size: 2.5rem;
    color: var(--text-secondary);
    opacity: 0.4;
    margin-bottom: var(--sp-3);
}

.help-empty-results p {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-md);
}

.help-empty-results .help-empty-hint {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    opacity: 0.8;
}

/* ---------- Reading: sidebar + content ---------- */

.help-reading {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

.help-reading-sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-4));
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    padding: var(--sp-4);
    max-height: calc(100vh - var(--topbar-h) - var(--sp-6));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.help-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: transparent;
    border: none;
    padding: var(--sp-1) var(--sp-2);
    margin: 0 0 var(--sp-2) calc(var(--sp-2) * -1);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
}

.help-back-btn:hover {
    color: var(--brand-primary);
    background: var(--neutral-bg);
}

.help-reading-cat {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.help-reading-cat i {
    font-size: var(--fs-md);
}

.help-reading-siblings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-reading-siblings button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: 1.35;
    transition: background-color var(--transition), color var(--transition);
}

.help-reading-siblings button:hover {
    background: var(--neutral-bg);
}

.help-reading-siblings li.active button {
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
    font-weight: 600;
}

.help-reading-content {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    padding: var(--sp-6) var(--sp-8);
    min-height: 480px;
}

/* ---------- Breadcrumb ---------- */

.help-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--surface-border);
}

.help-crumb-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-primary);
    cursor: pointer;
    font-size: inherit;
}

.help-crumb-link:hover {
    text-decoration: underline;
}

.help-crumb-sep {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 0.75em;
}

.help-crumb-current {
    color: var(--text-secondary);
}

.help-crumb-current.help-crumb-active {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---------- Topic body ---------- */

.help-topic-body {
    font-size: var(--fs-md);
    line-height: 1.65;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .help-page {
        padding: var(--sp-4) var(--sp-4) var(--sp-8);
    }

    .help-page-header {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .help-reading {
        grid-template-columns: 1fr;
    }

    .help-reading-sidebar {
        position: static;
        max-height: none;
    }

    .help-reading-content {
        padding: var(--sp-4) var(--sp-5);
    }

    .help-cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ============================================================
   Help context popup — TopBar "?" gumb (S233)
   ============================================================ */

.help-context-popup .dxbl-popup-content {
    padding: 0;
}

.help-ctx-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6);
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.help-ctx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-secondary);
}

.help-ctx-empty i {
    font-size: 2rem;
    color: var(--brand-primary);
    opacity: 0.5;
    margin-bottom: var(--sp-2);
}

.help-ctx-empty p {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-md);
}

.help-ctx-empty-hint {
    font-size: var(--fs-sm);
    opacity: 0.8;
    margin-bottom: var(--sp-3) !important;
}

.help-ctx-body {
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

.help-ctx-purpose {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 var(--sp-4);
}

.help-ctx-muted {
    color: var(--text-secondary);
    font-style: italic;
}

.help-ctx-section {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--surface-border);
}

.help-ctx-section-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-2);
}

.help-ctx-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-height: 280px;
    overflow-y: auto;
}

.help-ctx-actions li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--neutral-bg);
}

.help-ctx-action-icon {
    color: var(--brand-primary);
    font-size: var(--fs-md);
    flex-shrink: 0;
    margin-top: 2px;
}

.help-ctx-action-body {
    flex: 1;
    min-width: 0;
}

.help-ctx-action-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.help-ctx-action-tip {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 2px;
}

.help-ctx-fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 320px;
    overflow-y: auto;
}

.help-ctx-fields li {
    padding: var(--sp-2) var(--sp-3);
    background: var(--neutral-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--brand-primary);
}

.help-ctx-field-head {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.help-ctx-field-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.help-ctx-field-flag {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-xl);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.help-ctx-field-required {
    background: var(--danger-bg);
    color: var(--danger);
}

.help-ctx-field-readonly {
    background: var(--neutral-bg);
    color: var(--text-secondary);
    border: 1px solid var(--surface-border);
}

.help-ctx-field-type {
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
}

.help-ctx-field-tip {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.help-ctx-footer {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--surface-border);
    text-align: center;
}

.help-ctx-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--brand-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.help-ctx-link:hover {
    text-decoration: underline;
}

/* ============================================================
   Page layout standard — .page-container / .page-header / .toolbar
   Pattern se koristi kroz sve UoW i admin stranice. Ako se mijenja
   ovdje — svi ekrani se usklađuju (centralizacija).
   ============================================================ */

.page-container {
    padding: var(--sp-5) var(--sp-6);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header {
    margin-bottom: var(--sp-5);
}

.page-header h1 {
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-1) 0;
}

.page-header h1 > i {
    color: var(--brand-primary);
    font-size: 1em;
}

.page-subtitle {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0;
    max-width: 900px;
    line-height: 1.5;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    margin-bottom: var(--sp-4);
}

/* ============================================================
   Tenant help config — 3 tab-a (Terminologija / FAQ / Branding)
   ============================================================ */

.config-tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--surface-border);
    margin-bottom: var(--sp-5);
}

.config-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
    margin-bottom: -1px;
}

.config-tab:hover {
    color: var(--text-primary);
    background: var(--neutral-bg);
}

.config-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

.config-tab i {
    font-size: 1.05em;
}

.config-tab-count {
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-xl);
    min-width: 1.5rem;
    text-align: center;
}

.config-tab.active .config-tab-count {
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
}

.config-panel {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-default);
    padding: var(--sp-5) var(--sp-6);
}

.config-panel-header {
    margin-bottom: var(--sp-4);
}

.panel-intro {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0;
    max-width: 820px;
    line-height: 1.5;
}

.config-toast {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    display: inline-block;
}

.config-grid {
    margin-top: var(--sp-3);
}

.config-term-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-md);
    background: var(--neutral-bg);
    color: var(--brand-primary);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-xs);
}

.config-term-opis {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
    line-height: 1.4;
}

.config-term-default {
    font-style: italic;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.config-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.config-suggest-btn {
    font-size: var(--fs-xs) !important;
    padding: 2px var(--sp-2) !important;
}

.config-row-actions {
    display: flex;
    gap: var(--sp-1);
}

.config-brand {
    max-width: 720px;
}

.config-brand-form {
    margin-bottom: var(--sp-5);
}

.config-logo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.config-logo-input {
    font-size: var(--fs-md);
}

.config-logo-preview {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--neutral-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
}

.config-logo-preview img {
    max-height: 80px;
    max-width: 200px;
    background: var(--surface);
    padding: var(--sp-2);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xs);
}

.config-brand-footer {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--surface-border);
}

.config-brand-status {
    color: var(--success);
    font-size: var(--fs-md);
}

.config-faq-hint {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
    line-height: 1.4;
}

.config-faq-hint code {
    font-size: var(--fs-xs);
    background: var(--neutral-bg);
    padding: 0 var(--sp-1);
    border-radius: var(--radius-xs);
    color: var(--brand-primary);
}

/* Proširenje help-badge varijanti */
.help-badge-user {
    background: var(--p-50);
    color: var(--p-800);
}

/* ──────────────────────────────────────────────────────────────────
   Layout utility helpers (S206)
   ──────────────────────────────────────────────────────────────────
   Bootstrap nije učitan u App.razor (samo DX Fluent + app.css + lookup.css).
   Ali §3.5 ui-standardi.md i 80+ postojećih komponenti pretpostavljaju
   `.d-flex`, `.mb-3`, `.justify-content-end` itd. Umjesto pisanja vlastitih
   klasa per-page (što bi tražilo refactor svuda), definiramo ove helpere
   ovdje po S205 patternu (CSS var spacing, ne hardkodirani px).

   Imena se podudaraju s Bootstrap utility imenima namjerno — postojeći kod
   nastavlja raditi, novi može svjesno koristiti istu konvenciju.
   ────────────────────────────────────────────────────────────────── */

.d-flex                    { display: flex; }
.d-inline-flex             { display: inline-flex; }
.d-block                   { display: block; }
.d-inline-block            { display: inline-block; }
.d-none                    { display: none; }

.flex-row                  { flex-direction: row; }
.flex-column               { flex-direction: column; }
.flex-wrap                 { flex-wrap: wrap; }
.flex-nowrap               { flex-wrap: nowrap; }
.flex-grow-1               { flex-grow: 1; }
.flex-shrink-0             { flex-shrink: 0; }

.justify-content-start     { justify-content: flex-start; }
.justify-content-center    { justify-content: center; }
.justify-content-end       { justify-content: flex-end; }
.justify-content-between   { justify-content: space-between; }
.justify-content-around    { justify-content: space-around; }

.align-items-start         { align-items: flex-start; }
.align-items-center        { align-items: center; }
.align-items-end           { align-items: flex-end; }
.align-items-stretch       { align-items: stretch; }
.align-items-baseline      { align-items: baseline; }

.text-start                { text-align: left; }
.text-center               { text-align: center; }
.text-end                  { text-align: right; }

/* Gap (gap-N) — koristi CSS var spacing skalu */
.gap-0                     { gap: 0; }
.gap-1                     { gap: var(--sp-1); }
.gap-2                     { gap: var(--sp-2); }
.gap-3                     { gap: var(--sp-3); }
.gap-4                     { gap: var(--sp-4); }

/* Margins — m{side}-{step} */
.m-0  { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.ms-0 { margin-left: 0; }
.ms-1 { margin-left: var(--sp-1); }
.ms-2 { margin-left: var(--sp-2); }
.ms-3 { margin-left: var(--sp-3); }
.ms-auto { margin-left: auto; }
.me-0 { margin-right: 0; }
.me-1 { margin-right: var(--sp-1); }
.me-2 { margin-right: var(--sp-2); }
.me-3 { margin-right: var(--sp-3); }
.me-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding — p{side}-{step} */
.p-0  { padding: 0; }
.pb-1 { padding-bottom: var(--sp-1); }
.pb-2 { padding-bottom: var(--sp-2); }
.pb-3 { padding-bottom: var(--sp-3); }
.pt-1 { padding-top: var(--sp-1); }
.pt-2 { padding-top: var(--sp-2); }
.pt-3 { padding-top: var(--sp-3); }
.py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.px-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.ps-1 { padding-left: var(--sp-1); }
.ps-2 { padding-left: var(--sp-2); }
.ps-3 { padding-left: var(--sp-3); }
.ps-4 { padding-left: var(--sp-4); }

/* Form label — koristi se u inline add-row formama unutar popupa.
   §3.5 preporuča DxFormLayout (label lijevo) ali stari kod ima
   `<label class="form-label">` iznad kontrole — neka radi za backward compat. */
.form-label {
    display: inline-block;
    margin-bottom: var(--sp-1);
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

/* Small font helper */
.small { font-size: var(--fs-sm); }

/* ============================================================
   S216 — Snimka stanja detail row (KlijentDetailRow → SnimkeStanjaTab)
   ============================================================ */
.snimka-detail-opis {
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--gray-50, #f9fafb);
    border-radius: 6px;
    font-size: 0.9375rem;
}

.snimka-stavke-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.snimka-stavka-card {
    padding: var(--sp-2) var(--sp-3);
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
}

.snimka-stavka-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.9375rem;
}

.snimka-stavka-header i {
    color: var(--brand-primary);
    font-size: 1rem;
}

.snimka-stavka-akcija {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.snimka-akcija-dodano        { background: #dcfce7; color: #166534; }
.snimka-akcija-izmijenjeno   { background: #dbeafe; color: #1e40af; }
.snimka-akcija-foto          { background: #fed7aa; color: #9a3412; }
.snimka-akcija-nedostaje     { background: #fee2e2; color: #991b1b; }

.snimka-stavka-napomena {
    margin-top: var(--sp-1);
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

.snimka-stavka-foto {
    margin-top: var(--sp-1);
    font-size: 0.875rem;
}

.snimka-stavka-foto a {
    color: var(--brand-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.snimka-stavka-foto a:hover { text-decoration: underline; }


/* ============================================================
   S261 — DnevniIzvjestajEdit / Prepis: enterprise card layout
   Modul EGRADJEVINSKI_DNEVNIK. Card-based forma s 2-kolone
   gridom za slobodne tekstove i 2-kolone za detail kartice.
   ============================================================ */

.dnevni-edit {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-bottom: 80px; /* prostor za sticky actions bar */
}

.dnevni-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

.dnevni-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.dnevni-card-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dnevni-card-title i {
    color: var(--brand-primary);
    font-size: 16px;
}

.dnevni-card-meta {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

.dnevni-card-body {
    padding: var(--sp-4);
}

.dnevni-count {
    color: var(--text-secondary);
    font-weight: 400;
}

/* === Meta header card === */
.dnevni-meta-card .dnevni-meta-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 0.8fr auto;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    align-items: center;
}

.dnevni-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dnevni-meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dnevni-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dnevni-meta-status {
    align-items: flex-end;
}

.dnevni-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.dnevni-badge-locked {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

/* === Vremenski uvjeti grid === */
.dnevni-vrijeme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.dnevni-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.dnevni-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.dnevni-clana {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.dnevni-field-full {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* === Slobodni tekstovi 2-kolone grid === */
.dnevni-text-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3) var(--sp-4);
}

.dnevni-text-cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.dnevni-text-cell-wide {
    grid-column: 1 / -1;
}

.dnevni-memo {
    background: #fafbfc;
}

/* === Detail liste 2-kolone grid === */
.dnevni-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

/* S265 — Predmet detail row > Dnevni izvještaji tab: razvuci grid cijelom širinom
   expand zone. Bez ovoga DxGrid sa fiksnim širinama kolona ne dosegne 100%, pa
   tab izgleda usko (S264 oversight, korisnik primijetio). */
.dnevni-izvjestaji-tab {
    width: 100%;
}

.dnevni-izvjestaji-tab .dxbl-grid {
    width: 100%;
}

.dnevni-detail-card .dnevni-card-body {
    min-height: 120px;
}

.dnevni-grid {
    border: none;
}

/* PriloziPanel — standardni izgled (NE dijeli .dnevni-* s Dnevnim izvještajem; cjelina Troškovnik 01.07).
   Toolbar bez sive pozadine, "Dodaj" desno; grid dobiva standardni DX okvir (bez .dnevni-grid). */
.prilozi-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: var(--sp-2);
}
.prilozi-toolbar .prilozi-actions {
    margin-left: auto;
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}
.prilozi-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.prilozi-title i { color: var(--brand-primary); font-size: 16px; }
.prilozi-title .prilozi-count { color: var(--text-secondary); font-weight: 400; }
.prilozi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    color: var(--text-secondary);
}
.prilozi-empty-icon { font-size: 28px; color: var(--text-muted); margin-bottom: var(--sp-2); }
.prilozi-empty-text { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }

/* Uvoz troškovnika iz Excela (wizard, Faza 2 B1) */
.uvoz-wizard { display: flex; flex-direction: column; gap: var(--sp-3); }
.uvoz-korak { display: flex; flex-direction: column; gap: var(--sp-2); }
.uvoz-korak-naslov { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.uvoz-file-btn { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer;
    background: var(--p-600, #059669); color: #fff; padding: var(--sp-1) var(--sp-3); border-radius: 6px; font-size: 13px; width: max-content; }
.uvoz-file-btn:hover { filter: brightness(0.95); }
.uvoz-file-ime { margin-left: var(--sp-2); font-size: 13px; color: var(--text-primary); }
.uvoz-map-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2) var(--sp-3); }
.uvoz-map-lbl { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.uvoz-raw-wrap { max-height: 260px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.uvoz-raw { border-collapse: collapse; width: 100%; font-size: 12px; }
.uvoz-raw td, .uvoz-raw th { border: 1px solid #eef0f2; padding: 3px 6px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.uvoz-raw th { background: #f9fafb; font-weight: 600; text-align: left; position: sticky; top: 0; }
.uvoz-raw-header td { background: #fef9e7; color: var(--text-secondary); font-style: italic; }
.uvoz-r-grupa td { background: #eff6ff; font-weight: 600; }
.uvoz-r-napomena td { color: var(--text-secondary); font-style: italic; }

/* Ekran mapiranja troškovnika na katalog (Faza 3) */
.map-layout { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; }
.map-col-left { flex: 1 1 340px; min-width: 0; }
.map-col-right { flex: 2 1 480px; min-width: 0; }
.map-stavke, .map-redci { width: 100%; border-collapse: collapse; font-size: 13px; }
.map-stavke th, .map-redci th { background: #f9fafb; text-align: left; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #e5e7eb; }
.map-stavke td, .map-redci td { padding: 5px 10px; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.map-stavke tbody tr { cursor: pointer; }
.map-stavke tbody tr:hover { background: #f3f4f6; }
.map-stavke tr.map-sel { background: #eff6ff; }
.map-stavke tr.map-sel td { font-weight: 600; }
.map-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.map-badge-ok { background: #d1fae5; color: #065f46; }
.map-badge-no { background: #f3f4f6; color: var(--text-muted); }
.map-opis { padding: var(--sp-2) 0; margin-bottom: var(--sp-2); border-bottom: 1px solid #eef0f2; }
.map-izvor { font-size: 12px; color: var(--text-secondary); background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 4px 10px; margin-bottom: var(--sp-2); }
.map-vrsta { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.map-vrsta-1 { background: #dbeafe; color: #1e40af; }   /* materijal */
.map-vrsta-2 { background: #ede9fe; color: #5b21b6; }   /* usluga */
.map-vrsta-3 { background: #f3f4f6; color: #374151; }   /* ručno */
.map-sem { display: inline-block; min-width: 30px; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
.map-sem-g { background: #059669; }
.map-sem-y { background: #d97706; }
.map-sem-r { background: #dc2626; }
.map-sem-x { background: #9ca3af; }

.dnevni-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    color: var(--text-secondary);
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
}

.dnevni-empty-icon {
    font-size: 28px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.dnevni-empty-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dnevni-empty-hint {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 320px;
}

.dnevni-info {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e40af;
    font-size: 13px;
}

.dnevni-info i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* === Sticky actions bar === */
.dnevni-actions-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 10;
    margin-top: var(--sp-4);
}

.dnevni-actions-primary,
.dnevni-actions-secondary {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* === Responsive: pod 1024px sve u jednu kolonu === */
@media (max-width: 1024px) {
    .dnevni-meta-card .dnevni-meta-grid {
        grid-template-columns: 1fr 1fr;
    }
    .dnevni-meta-status {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
    .dnevni-vrijeme-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dnevni-text-grid,
    .dnevni-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dnevni-meta-card .dnevni-meta-grid {
        grid-template-columns: 1fr;
    }
    .dnevni-vrijeme-grid {
        grid-template-columns: 1fr;
    }
    .dnevni-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .dnevni-actions-primary,
    .dnevni-actions-secondary {
        justify-content: center;
    }
}


/* S262 — Add-row popup styling u DnevniIzvjestajEdit */
.dnevni-card-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.dnevni-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    margin-top: var(--sp-3);
    border-top: 1px solid #e5e7eb;
}

.dnevni-add-form {
    padding: var(--sp-2) 0;
}

/* S268d — Catalog picker inline "Dodaj novu" expand u DnevniIzvjestajEdit popup */
.dnevni-add-new-katalog {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background-color: var(--p-50);
    border: 1px solid var(--p-100);
    border-radius: var(--radius-default);
}

.dnevni-add-new-title {
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: var(--sp-2);
}

.dnevni-add-new-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.dnevni-add-new-error {
    margin-top: var(--sp-2);
}

.dnevni-snapshot-divider {
    margin: var(--sp-3) 0 var(--sp-2);
    padding-bottom: var(--sp-1);
    font-weight: 600;
    color: var(--gray-600);
    font-size: var(--fs-md);
    border-bottom: 1px dashed var(--gray-200);
}

/* S268f — uvodni help tekst u popup-u (iznad forme) */
.dnevni-popup-help {
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background-color: var(--p-50);
    border: 1px solid var(--p-100);
    border-radius: var(--radius-default);
    color: var(--gray-700);
    font-size: var(--fs-md);
    line-height: 1.4;
}

/* S268n — Prilozi grid: thumb + naziv + chips u jednom retku */
.prilog-grid-naziv {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    max-width: 100%;
}

.prilog-thumb-sm {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
}

.prilog-icon-sm {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.prilog-grid-naziv-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 400px;
}

.prilog-grid-ucitano {
    line-height: 1.3;
    font-size: var(--fs-md);
    white-space: nowrap;
}

/* S268h — info traka (npr. nakon "Dodaj u katalog" prije "Dodaj u dnevnik") */
.dnevni-popup-info {
    padding: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3);
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-default);
    color: #065f46;
    font-size: var(--fs-md);
}

/* S268h — read-only input prepoznatljiv kao "auto" polje (Šifra koja se generira) */
.dnevni-input-readonly input,
.dnevni-input-readonly .dxbl-text-edit-input {
    background-color: #f3f4f6 !important;
    color: var(--gray-600) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* S263 — Source badge + row action buttons u DnevniIzvjestajEdit detail gridovima */
.dnevni-source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.dnevni-source-rn {
    background: var(--brand-primary-tint);
    color: var(--brand-primary-dark);
    border: 1px solid #a7f3d0;
}

.dnevni-source-manual {
    background: #f3f4f6;
    color: var(--text-secondary);
    border: 1px solid #d1d5db;
}

/* S268i — "Katalog" oznaka za retke s FK vezom na master šifrarnik */
.dnevni-source-katalog {
    background: var(--brand-primary-tint);
    color: var(--brand-primary-dark);
    border: 1px solid var(--brand-primary);
    margin-left: var(--sp-2);
}

/* Naziv text uz Katalog chip — odvoji ih vertikalno na center */
.dnevni-naziv-text {
    vertical-align: middle;
}

.dnevni-row-actions {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* =========================================================================
   S268i — Enterprise styling za DnevniIzvjestajPrepis stranicu
   "Za prepisivanje u eGrađevinski dnevnik" — read-only paste-friendly prikaz
   ========================================================================= */

.dnevni-prepis {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Toolbar — portal link + akcije */
.prepis-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-default);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.prepis-portal-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    background: var(--brand-primary-tint);
    color: var(--brand-primary-dark);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-default);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-md);
}

.prepis-portal-link:hover {
    background: var(--brand-primary);
    color: #ffffff;
}

/* Header — predmet naziv + meta chips */
.prepis-header {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-default);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.prepis-header h2 {
    margin: 0 0 var(--sp-3) 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
}

.prepis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.prepis-meta > span {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-1);
    padding: 4px var(--sp-3);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-size: var(--fs-md);
    color: var(--gray-700);
}

.prepis-meta > span strong {
    color: var(--gray-900);
    font-weight: 600;
}

.badge-zakljucen {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
    font-weight: 600;
}

/* Card — jedna od 7 sekcija */
.prepis-kartica {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-default);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

.prepis-kartica-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.prepis-kartica-header h3 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.prepis-kartica-body {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Subhead — "Radna oprema", "Utrošeni materijal", "Dopuna voditelja"... */
.prepis-subhead {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary-dark);
}

.prepis-subhead:first-child {
    margin-top: 0;
}

/* Lista bullet-ova i ol-ova u prepisu */
.prepis-list {
    margin: 0;
    padding-left: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prepis-list li {
    line-height: 1.5;
    color: var(--gray-800);
}

/* Empty placeholder */
.prepis-empty {
    color: var(--gray-500);
    font-style: italic;
}

/* Pre-wrap blok teksta (slobodni unos voditelja) */
.prepis-prewrap {
    white-space: pre-wrap;
    color: var(--gray-800);
    line-height: 1.55;
    padding: var(--sp-2) 0;
}

/* ============================================================
   Nadzorni hub (S290 A10-H) — root `/` KPI tile grid.
   Klasterirano po domenama; per-tile status traka + hover.
   ============================================================ */

.dashboard-hub {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.hub-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.hub-section-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: var(--sp-1);
    border-left: 3px solid var(--brand-primary);
}

.hub-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
}

.hub-tile {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-left: 4px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-height: 140px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.hub-tile-clickable { cursor: pointer; }
.hub-tile-clickable:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.hub-tile-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-subtle, #f8f9fa);
}

.hub-tile[data-status="brand"]   { border-left-color: var(--brand-primary); }
.hub-tile[data-status="success"] { border-left-color: var(--success); }
.hub-tile[data-status="warning"] { border-left-color: var(--warning); }
.hub-tile[data-status="danger"]  { border-left-color: var(--danger); }
.hub-tile[data-status="info"]    { border-left-color: var(--info); }

.hub-tile-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.hub-tile-icon {
    font-size: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}
.hub-tile[data-status="brand"]   .hub-tile-icon { color: var(--brand-primary); }
.hub-tile[data-status="success"] .hub-tile-icon { color: var(--success); }
.hub-tile[data-status="warning"] .hub-tile-icon { color: var(--warning); }
.hub-tile[data-status="danger"]  .hub-tile-icon { color: var(--danger); }
.hub-tile[data-status="info"]    .hub-tile-icon { color: var(--info); }

.hub-tile-titles {
    flex: 1;
    min-width: 0;
}

.hub-tile-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.hub-tile-subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

.hub-tile-coming-soon {
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-subtle, #f0f0f0);
    color: var(--text-muted);
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.hub-tile-kpi {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin-top: auto;
}
.hub-tile[data-status="brand"]   .hub-tile-kpi { color: var(--brand-primary); }
.hub-tile[data-status="success"] .hub-tile-kpi { color: var(--success); }
.hub-tile[data-status="warning"] .hub-tile-kpi { color: var(--warning); }
.hub-tile[data-status="danger"]  .hub-tile-kpi { color: var(--danger); }
.hub-tile[data-status="info"]    .hub-tile-kpi { color: var(--info); }

.hub-tile-kpi-secondary {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .hub-section-grid { grid-template-columns: 1fr; }
}

/* ── A10-2 Nefakturirano ploca — aging badge ── */
.aging-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-sm);
    min-width: 40px;
    text-align: center;
}
.aging-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-border); }
.aging-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.aging-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }

/* ── Reporting Designer fullscreen layout ─────────────────────────
   DxReportDesigner u runtime mode-u zauzima cijeli prostor desno od sidebara
   (ispod TopBar-a). Negativni margin probija content-inner padding pa Designer
   ima maksimalan prostor za rad. Top-bar unutar Designer page-a je compact
   (jedan red sa naslovom + Natrag gumb, ~40px). */
.reporting-designer-fullscreen {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    margin: calc(var(--sp-6) * -1);
    background: var(--content-bg);
}

.reporting-designer-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
}

.reporting-designer-title {
    font-size: 0.9rem;
    color: var(--text-default);
}

.reporting-designer-canvas {
    flex: 1 1 auto;
    min-height: 0;     /* important: omogućuje da child preuzme točnu visinu u flex column */
    overflow: hidden;
}

/* DxReportDesigner JS renderira hijerarhiju klasa (potvrđeno u dx-reportdesigner.min.js
   25.1.3): outer Blazor div → .dxrd-designer-wrapper → .dxrd-designer → .dxrd-main.
   Niti jedna razina nema default height:100% pa Designer se prikazuje u svojoj prirodnoj
   visini (oko 700px) bez popunjavanja kontejnera. Postavljamo 100% kroz cijeli lanac. */
.reporting-designer-canvas > div,
.reporting-designer-canvas .dxrd-designer-wrapper,
.reporting-designer-canvas .dxrd-designer,
.reporting-designer-canvas .dxrd-main {
    height: 100% !important;
}

/* ── Reporting Run page (PDF preview) — 80% viewer + 20% controls split ───
   Viewer lijevo zauzima 80% širine i punu visinu prozora ispod TopBar+UowPageHeader+UowActionBar.
   Kontrole (Parametri/Format/Layout/Generiraj/Preuzmi) idu u sticky desnu ploču 20%. */
.report-run-layout {
    display: flex;
    gap: var(--sp-3);
    height: calc(100vh - var(--topbar-h) - 200px);
    min-height: 520px;
}

.report-run-viewer {
    flex: 0 0 calc(80% - var(--sp-3));
    background: var(--content-bg);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Wait state — overlay preko viewera + cursor:wait kroz cijeli layout.
   Polu-transparentan zatamnjeni overlay drži korisnika fokusiran na operaciju
   i sprječava ponovni klik na Generiraj dok PDF render traje. */
.report-run-layout.is-busy,
.report-run-layout.is-busy * {
    cursor: wait;
}

.report-run-busy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    z-index: 10;
}

.report-run-busy-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-default);
}

.report-run-busy-sub {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.report-run-iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.report-run-empty {
    text-align: center;
    padding: var(--sp-6);
    color: #6b7280;
}

.report-run-empty-icon {
    font-size: 48px;
    color: #9ca3af;
    display: block;
    margin-bottom: var(--sp-3);
}

.report-run-empty-text {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.report-run-controls {
    flex: 0 0 20%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.report-run-card {
    flex: 0 0 auto;
}

.report-run-field {
    margin-bottom: var(--sp-2);
}

.report-run-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-default);
    margin-bottom: var(--sp-1);
}

.report-run-actions {
    margin-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.report-run-btn-block {
    width: 100%;
}

.report-run-status {
    font-size: 0.8rem;
    color: #6b7280;
}

.report-run-last {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    margin-top: var(--sp-1);
}

/* ============================================================
 * BackofficeIzvrsenjeFormPopup — A5-EVI (S300)
 * Tab strip reusing .detail-tabs/.detail-tab-btn; minimalna stub area.
 * ============================================================ */

.bo-izvr-popup-body {
    min-height: 320px;
}

.bo-izvr-flag {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 4px;
    padding: var(--sp-2) var(--sp-3);
    color: #9a3412;
    font-size: 0.85rem;
}

.bo-izvr-flag i {
    color: #c2410c;
    margin-top: 2px;
}

.bo-izvr-tab-stub {
    padding: var(--sp-3) 0;
}

.bo-izvr-stub-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: var(--sp-2);
    font-size: 1rem;
}

.bo-izvr-stub-desc {
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
    margin-bottom: var(--sp-3);
    max-width: 64ch;
}

/* ==========================================================
   S305 — IzvrsenjeDetail (/izvrsenje/{oiId}) strukturalan view.
   Stavke plana grupirane po Lokacija+Prostorija, inline edit
   per usluga, batch 'Spremi sve' na dnu.
   ========================================================== */

.izvrsenje-detail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.content-inner-muted {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.izvr-grupa-card {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}

.izvr-grupa-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--p-50, #ecfdf5);
    border-bottom: 1px solid var(--surface-border);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.izvr-grupa-header > i.bi {
    color: var(--brand-primary);
    font-size: 1.05rem;
}

.izvr-grupa-sep {
    color: var(--text-muted);
    margin: 0 var(--sp-1);
}

.izvr-grupa-prostorija {
    font-weight: 600;
}

.izvr-grupa-counter {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.izvr-grupa-body {
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.izvr-stavka {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface, #ffffff);
    transition: border-color 120ms ease, background 120ms ease;
}

.izvr-stavka-active {
    border-color: var(--brand-primary);
    background: var(--p-50, #ecfdf5);
}

.izvr-stavka-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.izvr-stavka-check {
    margin-right: var(--sp-2);
}

.izvr-stavka-naslov {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.izvr-stavka-usluga {
    font-weight: 600;
    color: var(--text-primary);
}

.izvr-stavka-edit {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--surface-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.izvr-edit-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.izvr-edit-row-fields {
    flex-wrap: wrap;
}

.izvr-edit-row-actions {
    align-items: center;
    justify-content: space-between;
}

.izvr-edit-lbl {
    flex: 0 0 110px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 6px;
}

.izvr-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.izvr-edit-field .izvr-edit-lbl {
    flex: 0 0 auto;
    padding-top: 0;
}

.izvr-edit-combo,
.izvr-edit-input {
    min-width: 180px;
}

.izvr-edit-memo {
    flex: 1;
}

.izvr-batch-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface, #ffffff);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

/* ==========================================================
   S305c — RezultatiRn (/radni-nalozi/{rnId}/rezultati) — paritet
   MAUI Usluge ekrana (ProstorijaPage). Strukturalan prikaz plana
   Lokacija → Prostorija → Stavka s 3-state radio, inline forma
   rezultata polja i batch save.
   ========================================================== */

.rezultati-rn {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.rez-lokacija-card {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}

.rez-lokacija-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--brand-primary, #1B4332);
    color: #ffffff;
    font-size: 1rem;
}

.rez-lokacija-header > i.bi { color: #ffffff; font-size: 1.1rem; }

.rez-lokacija-counter {
    margin-left: auto;
    padding: 2px 10px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.rez-lokacija-actions {
    margin-left: var(--sp-2);
}

.rez-prostorija-block {
    border-top: 1px solid var(--surface-border);
}

.rez-prostorija-block:first-of-type { border-top: 0; }

.rez-prostorija-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--p-50, #ecfdf5);
    border-bottom: 1px solid var(--surface-border);
}

.rez-prostorija-header > i.bi {
    color: var(--brand-primary);
}

.rez-prostorija-naziv {
    font-weight: 600;
    color: var(--text-primary);
}

.rez-prostorija-counter {
    padding: 2px 8px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.rez-prostorija-actions {
    margin-left: auto;
}

.rez-stavke {
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.rez-stavka {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface, #ffffff);
    transition: border-color 120ms ease, background 120ms ease;
    /* S307f — 2-col: glavni sadržaj 1fr | radio sidebar fixed. */
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: var(--sp-3);
    align-items: start;
}

.rez-stavka-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* S307f — vertikalni radio stack na desnoj strani stavke (uvijek vidljiv,
   pa korisnik može mijenjati stanje i kad je body collapsed). */
.rez-stavka-radio-side {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: var(--sp-1);
    align-self: start;
}

.rez-stavka-radio-side .rez-radio {
    justify-content: flex-start;
    width: 100%;
    padding: 6px 10px;
}

/* S307g — kad je body proširen, gurni radio sidebar prema dolje da se gornja
   linija prvog gumba poravna s gornjom linijom bilješke (Izvršena s formom)
   ili razloga (NeIzvršavaSe). Vrijednosti su aproksimacije visine elemenata
   iznad (naslov + tehničar + gap-ovi); CSS var dopušta lokalni override. */
.rez-stavka-izvrsena .rez-stavka-radio-side {
    margin-top: var(--rez-radio-offset-izvrsena, 95px);
}

.rez-stavka-neizvrsavase .rez-stavka-radio-side {
    margin-top: var(--rez-radio-offset-neizvrsavase, 49px);
}

.rez-stavka-izvrsena {
    border-color: var(--brand-primary, #1B4332);
    background: var(--p-50, #ecfdf5);
}

.rez-stavka-neizvrsavase {
    border-color: var(--warning, #BC6C25);
    background: var(--warning-light, #fef3c7);
}

.rez-stavka-top {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.rez-stavka-radio-group {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 2px;
}

.rez-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: background 120ms ease, color 120ms ease;
}

.rez-radio:hover { background: rgba(0,0,0,0.04); }

.rez-radio input[type="radio"] { margin: 0; }

.rez-radio.active {
    background: var(--surface, #ffffff);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.rez-radio.rez-radio-ok.active {
    background: var(--brand-primary, #1B4332);
    color: #ffffff;
}

.rez-radio.rez-radio-skip.active {
    background: var(--warning, #BC6C25);
    color: #ffffff;
}

.rez-stavka-naslov {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.rez-stavka-usluga {
    font-weight: 600;
    color: var(--brand-primary);
}

.rez-stavka-edit {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--surface-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.rez-edit-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

/* S307f — Tehničar row sužen na širinu rezultati-polja panela (~480px). */
.rez-edit-row--narrow {
    max-width: 480px;
}

.rez-edit-row--narrow .rez-edit-combo {
    flex: 1 1 auto;
    min-width: 0;
}

.rez-edit-lbl {
    flex: 0 0 110px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 6px;
}

.rez-edit-combo { min-width: 240px; }

.rez-edit-memo { flex: 1; }

.rez-forma {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* S307e — 2-col flex: "Rezultati polja" panel lijevo, Bilješka desno (sprječava
   da polja panel zauzme cijelu širinu kad ima samo 1-3 polja). */
.rez-forma-row {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
    flex-wrap: wrap;
}

.rez-forma-row .rez-forma {
    flex: 1 1 480px;
    min-width: 0;
}

.rez-biljeska-side {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.rez-biljeska-side-lbl {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rez-biljeska-side-memo {
    flex: 1 1 auto;
    min-height: 100px;
}

.rez-forma-naslov {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--sp-1);
}

.rez-polje {
    display: grid;
    /* S307h — 4 kolone: label | input | bilješka gumb | Preskočeno kvačica. */
    grid-template-columns: 200px 1fr auto 130px;
    gap: var(--sp-2);
    align-items: center;
}

/* S307h — per-polje bilješka olovčica (paritet MAUI). Siva default,
   narančasta kad postoji tekst (vizualni signal "ima bilješku"). */
.rez-polje-biljeska {
    display: flex;
    justify-content: center;
}

.rez-biljeska-btn {
    color: var(--text-muted) !important;
    padding: 4px 6px !important;
}

.rez-biljeska-btn.has-text {
    color: var(--warning, #BC6C25) !important;
}

.rez-polje-lbl {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rez-polje-input { min-width: 0; }

/* S307b — paritet MAUI: kad je "ne mjeri" kvačica označena, input se priguši
   (opacity) i postane neaktivan (pointer-events) tako da korisnik ne može
   istovremeno upisati vrijednost i označiti polje kao nemjereno. */
.rez-polje-input.is-skipped {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.rez-polje-skip {
    text-align: right;
}

.rez-polje-ok {
    display: flex;
    gap: var(--sp-1);
}

.rez-polje-ok-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    background: var(--surface, #ffffff);
}

.rez-polje-ok-opt.active-ok {
    background: var(--brand-primary, #1B4332);
    color: #ffffff;
    border-color: var(--brand-primary);
}

.rez-polje-ok-opt.active-not {
    background: var(--danger, #b91c1c);
    color: #ffffff;
    border-color: var(--danger);
}

.rez-batch-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface, #ffffff);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

/* ==========================================================
   S305d — PregledTerena (/radni-nalozi/{rnId}/teren) — agregat
   dashboard za RN: gdje + što + zapisnici sa statusima.
   ========================================================== */

.teren-pregled {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.teren-toolbar {
    position: sticky;
    top: 56px; /* ispod TopBar-a */
    z-index: 4;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface, #ffffff);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.teren-sekcija {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    overflow: hidden;
}

.teren-sekcija-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--p-50, #ecfdf5);
    border-bottom: 1px solid var(--surface-border);
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.teren-sekcija-header > i.bi {
    color: var(--brand-primary);
    font-size: 1.05rem;
}

.teren-sekcija-body {
    padding: var(--sp-3);
}

.teren-grouping-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.teren-grouping-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.teren-lokacija {
    margin-bottom: var(--sp-3);
}

.teren-lokacija:last-child { margin-bottom: 0; }

.teren-lokacija-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px dashed var(--surface-border);
    margin-bottom: var(--sp-2);
}

.teren-prostorije-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2);
}

.teren-prostorija-card {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: var(--sp-2);
    background: var(--bg-subtle, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.teren-prostorija-card.complete {
    border-color: var(--brand-primary);
    background: var(--p-50, #ecfdf5);
}

.tpc-naslov {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.tpc-naslov > i.bi { color: var(--brand-primary); }

.tpc-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tpc-broj {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.teren-upozorenja {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.teren-upozorenje-spremno {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--warning-light, #fef3c7);
    border: 1px solid var(--warning, #BC6C25);
    border-radius: 6px;
}

.teren-upozorenje-spremno > i.bi {
    color: var(--warning, #BC6C25);
    font-size: 1.1rem;
}

.teren-upozorenje-spremno > span { flex: 1; }

/* Commit C — Prilozi galerija */
.teren-prilozi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-2);
}

.teren-prilog-card {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface, #ffffff);
    display: flex;
    flex-direction: column;
}

.teren-prilog-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--bg-subtle, #f8fafc);
}

.teren-prilog-icon {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-muted);
    font-size: 2.2rem;
}

.teren-prilog-meta {
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
}


/* S323 — naslov grupe u popup formama (DxFormLayoutGroup CaptionCssClass).
   Vizualno izdvaja sekciju (npr. "Zaglavlje") kao odsječak forme. */
.form-grupa-naslov {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-2);
}

/* S323 — šifra odabranog zapisa desno od combo-a (DxComboBoxSifrarnik/FkComboWithActions).
   Pravilo: FK/entitetski combo-i prikazuju šifru odabranog kao bold Pine tekst. */
.combo-sifra-tag {
    font-weight: 700;
    white-space: nowrap;
    color: var(--brand-primary);
}

/* S323 — zelena linija iznad gumba u podnožju popup forme (UowFormPopup).
   Logički + vizualno odvaja akcijske gumbe od kontrola forme iznad. */
.uow-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    width: 100%;
    border-top: 2px solid var(--brand-primary);
    padding-top: var(--sp-3);
}

/* ── Građevinska knjiga — dokaznice mjera editor (DxGrid s uvijek-editabilnim ćelijama) ──
   Enterprise izgled: DX Fluent grid chrome + editori koji pune širinu ćelije + udoban
   vertikalni razmak (višredne kontrole u ćeliji ne smiju biti stisnute). */
.gk-dokaznice-grid {
    margin-top: var(--sp-2);
}
/* Editori (DxTextBox/DxSpinEdit/DxComboBox) pune cijelu širinu ćelije umjesto zadane uske. */
.gk-cell-ed {
    width: 100%;
}
/* Ćelija dovoljne visine da spin/combo ne dodiruju rubove; kad su dva editora (Izraz + katalog)
   u istoj ćeliji, slažu se okomito s malim razmakom. */
.gk-dokaznice-grid .dxbl-grid-cell {
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
    vertical-align: middle;
}
.gk-dokaznice-grid .dxbl-grid-cell > .gk-cell-ed + .gk-cell-ed {
    margin-top: var(--sp-1);
}
.gk-kolicina {
    font-size: var(--fs-lg);
    font-weight: 700;
}
/* Toolbar ispod grida: „Dodaj dokaznicu" lijevo + kumulativ istaknut desno. */
.gk-dokaznice-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--surface-border);
}
.gk-kumulativ {
    font-size: var(--fs-lg);
}
.gk-kumulativ b {
    font-size: var(--fs-xl);
    color: var(--brand-primary);
}
/* Gumb u ćeliji „Ručno/Izraz" koji prikazuje tekuću formulu (monospace, lijevo poravnato). */
.gk-formula-btn {
    width: 100%;
    justify-content: flex-start;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Uređivač formule izmjere (popup) ── */
.formula-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.formula-expr-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.formula-input {
    flex: 1;
}
.formula-input input {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: var(--fs-lg);
}
.formula-preview {
    white-space: nowrap;
    font-size: var(--fs-lg);
    min-width: 90px;
    text-align: right;
    color: var(--brand-primary);
}
.formula-preview b { font-size: var(--fs-xl); }
.formula-preview.err { color: var(--danger); font-size: var(--fs-md); }
.formula-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}
.formula-chips .dxbl-btn {
    min-width: 44px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.formula-katalog {
    max-height: 190px;
}
.formula-kat-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.formula-kat-item code {
    color: var(--text-muted, #6b7280);
    font-size: var(--fs-base);
}

/* Vizualni standard Rule B — univerzalni potvrdni dijalog (UowConfirmHost).
   Ujednačen izgled potvrde destruktivnih akcija kroz cijelu aplikaciju
   (zamjena za native browser confirm()). */
.confirm-dialog-body {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0 var(--sp-3) 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
.confirm-dialog-icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: var(--brand-primary);
    margin-top: 1px;
}
.confirm-dialog-text {
    flex: 1 1 auto;
    color: var(--text-default, inherit);
}

/* Vizualni standard — reusable info/status message-boxovi (zamjena inline hex /
   ghost-var stilova; INLINE-HEX cleanup). Boje kroz definirane semantičke tokene
   (--success je Pine-usklađen, S97). */
.msg-box {
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 8px;
    border: 1px solid transparent;
}
.msg-box--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.msg-box--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.msg-box--danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger);  }
/* Lijevi-akcent varijanta (uži box s bojanom lijevom trakom). */
.msg-box--left-success { margin: var(--sp-1) 0; padding: var(--sp-1) var(--sp-2); border-radius: 4px; background: var(--success-bg); border-left: 3px solid var(--success); }
.msg-box--left-danger  { margin: var(--sp-1) 0; padding: var(--sp-1) var(--sp-2); border-radius: 4px; background: var(--danger-bg);  border-left: 3px solid var(--danger);  }

/* S323 — tri gumba desno od opisa zahtjeva (Predložak / Tekst / Kategorizacija)
   jednake širine. */
.opis-ai-buttons {
    width: 180px;
}
.opis-ai-buttons > * {
    width: 100%;
}
.opis-ai-buttons .dxbl-btn {
    width: 100%;
}

/* S323 — flex slot za combo unutar "combo + gumbi" reda
   (DxComboBoxSifrarnik, LokacijeMultiSelect). Bazno ponašanje = stari inline flex:1. */
.combo-flex-slot {
    flex: 1;
    min-width: 0;
}
/* S323 — Klijent / Kontakt / Lokacije combo-i jednake širine: combo zauzima
   fiksni postotak reda pa su svi jednaki bez obzira na prateće gumbe. */
.kl-eq-combo .combo-flex-slot,
.kl-eq-combo .kontakt-picker-combo-wrap {
    flex: 0 0 75%;
    min-width: 0;
}

/* S323 — grid lokacija jednako širok kao combo za odabir lokacije (75% retka). */
.kl-eq-combo .lokacije-multiselect-grid {
    width: 75%;
}

/* S323 — akcijski gumbi FK kontrola (Klijent peek+add, Kontakt add, Lokacije Odaberi)
   poravnati uz desni rub retka → add gumb kontakta je točno ispod add gumba klijenta. */
.kl-eq-combo .combo-flex-slot + *,
.kl-eq-combo .kontakt-picker-combo-wrap + * {
    margin-left: auto;
}

/* S323 — delete gumb u gridu lokacija: forsiraj Pine pozadinu (DxGridCommandColumn
   ćelija inače skida pozadinu gumba). */
.lok-delete-btn.dxbl-btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* CONCURRENCY korak 4 (S332) — KonfliktDijalog: sukob paralelnog rada. */
.konflikt-dijalog {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-1) 0;
}
.konflikt-poruka {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--gray-100);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}
.konflikt-poruka-ikona {
    color: var(--warning);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.konflikt-razlika-naslov {
    font-weight: 600;
    color: var(--text-primary);
}
.konflikt-bez-razlike {
    margin: 0;
}
.konflikt-razlika-grid {
    max-height: 320px;
}

/* CONCURRENCY korak 5 (S332) — konfigurator /sustav/kontrola-paralelnog-rada. */
.konkurentnost-default-card {
    margin-bottom: var(--sp-4);
}
.konkurentnost-default-opis {
    margin: 0 0 var(--sp-3);
    color: var(--text-muted);
}
.konkurentnost-default-redak {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
}
.konkurentnost-oznaka {
    display: inline-block;
    min-width: 130px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Korisnik-360: "Prava i moduli" tab (EfektivnaPravaTab) ───────────────── */
.ef-sazetak {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    font-size: var(--fs-md);
}
.ef-section {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--surface-border);
}
.ef-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.ef-section-title {
    margin: 0 0 var(--sp-1) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.ef-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    cursor: pointer;
}
.ef-matrix {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-2);
}
.ef-matrix-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--surface-border);
}
.ef-matrix-modul {
    flex: 0 0 180px;
    font-weight: 600;
    font-size: var(--fs-md);
}
.ef-matrix-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    flex: 1;
}
.ef-chip {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    line-height: 1.5;
    cursor: pointer;
}
.ef-chip--all    { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.ef-chip--org    { background: var(--info-bg);    color: var(--info);    border-color: var(--info); }
.ef-chip--scoped { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.ef-chip--none   { background: transparent;       color: var(--text-muted); border-color: var(--surface-border); }
.ef-modul-row, .ef-override-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--surface-border);
}
.ef-modul-info {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    flex-wrap: wrap;
}
.ef-modul-actions, .ef-override-actions {
    display: flex;
    gap: var(--sp-1);
    margin-left: auto;
}
.ef-override-code { font-size: var(--fs-md); }
.ef-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-right: var(--sp-3);
}
/* Inline forma/panel (zamjena DxPopup-a koji ne renderira u DxGrid detail-row) */
.ef-inline-panel {
    border: 1px solid var(--info);
    border-radius: 6px;
    background: var(--info-bg);
    padding: var(--sp-3);
    margin-top: var(--sp-3);
}

/* ════════════════════════════════════════════════════════════════
   Čarobnjak "Novi korisnik" (NoviKorisnikWizard)
   ════════════════════════════════════════════════════════════════ */
.wiz-steps {
    display: flex;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--surface-border);
}
.wiz-step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.wiz-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--surface-border);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.wiz-step--active { color: var(--info); font-weight: 600; }
.wiz-step--active .wiz-step-num { border-color: var(--info); background: var(--info-bg); color: var(--info); }
.wiz-step--done { color: var(--success); }
.wiz-step--done .wiz-step-num { border-color: var(--success); background: var(--success-bg); color: var(--success); }

.wiz-body { min-height: 280px; }
.wiz-hint { font-size: var(--fs-md); margin: 0 0 var(--sp-3) 0; }
.wiz-field { margin-bottom: var(--sp-3); }
.wiz-label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.wiz-note { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); }

/* Korak 1 — izbor tipa osobe */
.wiz-tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.wiz-tip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
}
.wiz-tip i { font-size: 1.4rem; color: var(--text-muted); }
.wiz-tip span { font-weight: 600; }
.wiz-tip small { color: var(--text-muted); font-size: var(--fs-sm); }
.wiz-tip--sel { border-color: var(--info); background: var(--info-bg); }
.wiz-tip--sel i { color: var(--info); }

/* Korak 3 — način odabira uloga + predlošci */
.wiz-mode-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wiz-mode {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-full);
    background: var(--surface);
    cursor: pointer;
    font-size: var(--fs-sm);
}
.wiz-mode--sel { border-color: var(--info); background: var(--info-bg); color: var(--info); font-weight: 600; }

.wiz-preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.wiz-preset {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
}
.wiz-preset i { grid-row: 1 / span 2; font-size: 1.5rem; color: var(--text-muted); }
.wiz-preset-naziv { font-weight: 600; }
.wiz-preset-opis { color: var(--text-muted); font-size: var(--fs-sm); }
.wiz-preset--sel { border-color: var(--info); background: var(--info-bg); }
.wiz-preset--sel i { color: var(--info); }

.wiz-odabrane { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-4); }

/* Korak 4 — sažetak + pregled prava */
.wiz-sazetak {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
}
.wiz-pregled-naslov { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--sp-2) 0; }
.wiz-pregled-lista { display: flex; flex-direction: column; }
.wiz-pregled-red {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-light);
}
.wiz-pregled-modul { flex: 0 0 160px; font-weight: 600; font-size: var(--fs-md); }
.wiz-pregled-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex: 1; }

/* --- Situacije (progresivna naplata) --- */
.situacije-racun-ok {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    border-radius: var(--radius-md, 6px);
    background: var(--pine-50, #ecfdf5);
    border: 1px solid var(--border-light);
    color: var(--text-strong, #065f46);
    font-size: var(--fs-md);
}
.situacije-natrag { margin-top: var(--sp-3); }
.situacije-hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.situacije-detalji-sazetak {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-3);
    font-size: var(--fs-md);
}
.situacije-iznosi {
    margin-top: var(--sp-3);
    margin-left: auto;
    max-width: 340px;
}
.situacije-iznosi > div {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-1) 0;
    font-size: var(--fs-md);
}
.situacije-iznosi-neto {
    border-top: 2px solid var(--border-light);
    margin-top: var(--sp-1);
    font-weight: 700;
    font-size: var(--fs-lg);
}

/* ══ Papir-skin dokumenta (ui-standardi §0.9) — expand-detail izlaznog dokumenta ══ */
.doc-paper-wrap { padding: var(--sp-3, 16px); background: var(--neutral-0, #f6f7f6); }
.doc-paper {
  --doc-accent:#047857; --doc-wash:#e7f2ec; --doc-ink:#035c44;
  width: 100%; margin: 0; background:#fff;
  border:1px solid #dde3df; border-radius:10px;
  box-shadow: 0 1px 2px rgba(16,33,26,.06), 0 10px 30px rgba(16,33,26,.09);
  overflow:hidden; color:#16211c; font-size:13.5px;
}
.doc-paper--ponuda   { --doc-accent:#3a5bd0; --doc-wash:#e9edfb; --doc-ink:#2c46a8; }
.doc-paper--racun    { --doc-accent:#047857; --doc-wash:#e7f2ec; --doc-ink:#035c44; }
.doc-paper--predujam { --doc-accent:#ea580c; --doc-wash:#fdecdc; --doc-ink:#b4460b; }
.doc-paper--storno   { --doc-accent:#d64545; --doc-wash:#fbe4e4; --doc-ink:#b02a2a; }
.doc-paper > * { padding-left:28px; padding-right:28px; }

.doc-paper-head { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top:24px; padding-bottom:18px; border-bottom:2px solid #16211c; }
.doc-party-label { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8b988f; margin-bottom:4px; }
.doc-party-name { font-weight:700; font-size:15px; }
.doc-meta { text-align:right; min-width:230px; }
.doc-badge { display:inline-block; font-size:19px; font-weight:800; letter-spacing:.03em; line-height:1;
  padding:7px 13px; border-radius:8px; margin-bottom:10px;
  background:var(--doc-wash); color:var(--doc-ink); border:1px solid var(--doc-accent); }
.doc-meta-list { margin:0; display:grid; grid-template-columns:auto auto; gap:2px 14px; justify-content:end; }
.doc-meta-list > div { display:contents; }
.doc-meta-list dt { color:#8b988f; font-size:12px; text-align:right; }
.doc-meta-list dd { margin:0; font-weight:600; text-align:right; }

.doc-items-wrap { padding-top:8px; overflow-x:auto; }
table.doc-items { width:100%; border-collapse:collapse; min-width:520px; }
table.doc-items thead th { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8b988f;
  text-align:right; font-weight:600; padding:10px 8px; border-bottom:1px solid #c3ccc6; white-space:nowrap; }
table.doc-items th.l, table.doc-items td.l { text-align:left; }
table.doc-items tbody td { padding:8px; text-align:right; border-bottom:1px solid #eef1ef; vertical-align:top; }
table.doc-items tbody td.l { text-align:left; }
.doc-items .rb { color:#8b988f; width:30px; text-align:left; }
.doc-items .num { font-variant-numeric:tabular-nums; }
.doc-items .doc-group td { background:var(--doc-wash); font-weight:700; font-size:12px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--doc-ink); padding:6px 8px; }
.doc-items .doc-note td { color:#5d6c65; font-style:italic; }

.doc-foot { display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding-top:16px; padding-bottom:24px; }
.doc-notes { color:#5d6c65; font-size:12.5px; max-width:44ch; white-space:pre-wrap; }
.doc-recap { min-width:230px; margin-left:auto; }
.doc-recap .r { display:flex; justify-content:space-between; gap:24px; padding:5px 0; font-variant-numeric:tabular-nums; }
.doc-recap .r span:first-child { color:#5d6c65; }
.doc-recap .total { margin-top:5px; padding-top:10px; border-top:2px solid #16211c; font-size:17px; font-weight:800; }
.doc-recap .total span:last-child { color:var(--doc-ink); }
.doc-recap .r-pdv span:first-child { font-size:12.5px; }
.doc-recap .doc-recap-base { color:#94a29a; font-size:11px; }

/* papir-skin editor: alati u retku + dodaj-stavku red */
.doc-items .row-tools { display:flex; gap:4px; justify-content:flex-end; }
.doc-add-row { padding:10px 0 4px; }
table.doc-items thead th:last-child, table.doc-items tbody td:last-child { white-space:nowrap; }
.doc-head-edit { margin-top:10px; display:flex; justify-content:flex-end; }

/* DxGrid stavki skiniran kao papir-tijelo dokumenta (§0.9) */
.doc-items-grid { border:none; background:transparent; }
.doc-items-grid .row-tools { display:flex; gap:4px; justify-content:flex-end; }

/* Agregatni editor: save-bar + dirty indikator (INV-42) */
.doc-savebar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:8px 14px; margin-bottom:12px; border:1px solid #d7ddd9; border-radius:6px; background:#f6f8f7; }
.doc-savebar.is-dirty { border-color:#e0b64a; background:#fdf7e8; }
.doc-savebar-state { font-size:13px; }
.doc-savebar .doc-dirty { color:#b7791f; font-weight:600; }
.doc-savebar .doc-clean { color:#6b7a70; }
.doc-savebar-actions { display:flex; gap:6px; }
.doc-recap-hint { font-size:11px; color:#b7791f; text-align:right; margin-top:4px; font-style:italic; }

/* ── FAZA 2 — dokument tabovi (Dokument / Naplata) ── */
.doc-tabs { display:flex; gap:2px; margin-bottom:14px; border-bottom:2px solid #e2e7e4; }
.doc-tab { appearance:none; background:transparent; border:none; cursor:pointer;
    padding:8px 16px; font-size:13.5px; font-weight:600; color:#6b7a70;
    border-bottom:2px solid transparent; margin-bottom:-2px; display:flex; align-items:center; gap:8px; }
.doc-tab:hover { color:var(--doc-ink, #16211c); }
.doc-tab.is-active { color:var(--success); border-bottom-color:var(--success); }

/* ── FAZA 2 — naplatni panel (tab „Naplata") ── */
.naplata { margin-top:4px; }
.naplata-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.naplata-title { font-size:15px; font-weight:800; letter-spacing:.02em; color:var(--doc-ink, #16211c); }
.naplata-badge { display:inline-block; padding:2px 10px; border-radius:var(--radius-xl); font-size:12px; font-weight:700;
    border:1px solid transparent; background:var(--gray-100,#f3f4f6); color:#5d6c65; }
.naplata-badge--0 { background:#f3f4f6; color:#5d6c65; border-color:#e2e7e4; }                 /* Neplaćen */
.naplata-badge--1 { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-border); } /* Djelomično */
.naplata-badge--2 { background:var(--success-bg); color:var(--success); border-color:var(--success-border); } /* Plaćen */
.naplata-badge--3 { background:#e0eefb; color:#1c64c2; border-color:#c3ddf7; }                 /* Preplaćen */

/* uplate — tablično (kao stavke računa) */
.naplata-tbl { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.naplata-tbl thead th { text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:#6b7a70; padding:6px 10px; border-bottom:2px solid #16211c; }
.naplata-tbl thead th.num { text-align:right; }
.naplata-tbl tbody td { padding:7px 10px; border-bottom:1px solid #eef1ef; }
.naplata-tbl td.num { text-align:right; font-weight:700; white-space:nowrap; }
.naplata-tbl .naplata-ref { color:#6b7a70; }
.naplata-tbl tr.is-minus td.num { color:var(--danger); }

/* saldo — dolje desno (kao totali računa) */
.naplata-foot { margin-top:0; }
.naplata-prazno { padding:14px 0; font-style:italic; }
.naplata-actions { display:flex; gap:8px; margin-top:14px; }

/* ============================================================
   Fiskalizacija panel (FAZA 4) — stanje + JIR/ZKI + akcije + log.
   Paralelno naplata panelu; Pine tokeni, bez hardkodiranih boja.
   ============================================================ */
.fiskal { margin-top:4px; }
.fiskal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fiskal-title { font-size:15px; font-weight:800; letter-spacing:.02em; color:var(--doc-ink, #16211c); }
.fiskal-badge { display:inline-block; padding:2px 10px; border-radius:var(--radius-xl); font-size:12px; font-weight:700; border:1px solid transparent; }
.fiskal-badge--ok { background:var(--success-bg); color:var(--success); border-color:var(--success-border); }
.fiskal-badge--warn { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-border); }
.fiskal-badge--err { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border); }
.fiskal-badge--none { background:#f3f4f6; color:#5d6c65; border-color:#e2e7e4; }
.fiskal-rezultat { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:13px; }
.fiskal-rezultat .r { display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; }
.fiskal-rezultat .r > span:first-child { color:#6b7a70; font-weight:600; }
.fiskal-rezultat .mono { font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-weight:700; }
.fiskal-msg { padding:8px 10px; margin-bottom:12px; border-radius:var(--radius-md); background:var(--warning-bg); color:var(--warning); font-size:12.5px; }
.fiskal-akcije { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.fiskal-log { margin-top:8px; }

/* Poslovni prostori — detail-red naplatnih uređaja */
.uredaji-detail { padding:var(--sp-2) var(--sp-3); }
.uredaji-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); }
.uredaji-title { font-size:13px; font-weight:700; color:var(--doc-ink, #16211c); }
.uredaji-grid { margin-top:4px; }

/* ============================================================
   CRM Klijent hub — samo klijent-specifično.
   Raspored (dvopanel, zaglavlje, prazno stanje, responzivnost) preuzeo je
   HubShell (.hub-shell-*, VAL §12). Ovdje ostaje redak liste i chipovi uloga.
   ============================================================ */
.klijent-hub-lb { height: 100%; border: none; }

.klijent-hub-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-1) 0;
}
.klijent-hub-item-naziv {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--text-primary);
}
.klijent-hub-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
/* Odabrani redak nosi Pine 700 pozadinu (definirano generički u .hub-shell-master-body);
   ovdje samo tekst na njoj — bijelo daje AA kontrast (naziv ≈5.9:1, meta ≈5:1). */
.klijent-hub-lb .dxbl-list-box-item-selected .klijent-hub-item-naziv {
    color: #fff !important;
}
.klijent-hub-lb .dxbl-list-box-item-selected .klijent-hub-item-meta,
.klijent-hub-lb .dxbl-list-box-item-selected .klijent-hub-item-meta * {
    color: rgba(255, 255, 255, 0.92) !important;
}

.klijent-chip {
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    border: 1px solid transparent;
}
.klijent-chip-kupac { background: var(--success-bg); color: var(--success); }
.klijent-chip-inv   { background: var(--info-bg);    color: var(--info); }
.klijent-chip-sub   { background: var(--neutral-bg); color: var(--text-secondary); }

/* ── Pod-tabovi u expand-redu opreme (OpremaExpandRow: Detalji | Povijest). ── */
.detail-subtabs { margin-bottom: var(--sp-3); }

/* ============================================================================
   SljedivostTree (VAL §12 pilot) — stablo sljedivosti predmeta.
   Boja/ikona čvora dolaze iz EntitetIdentitet (inline style var(--ent-*));
   ovdje je samo raspored, pregrada-grana i sustavni highlight.
   ============================================================================ */

.sljedivost-tree {
    font-size: 0.9375rem;
}

/* Čvor: ikona u obojenom kvadratiću + naziv */
.sljedivost-cvor {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.sljedivost-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
}

.sljedivost-naziv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sintetička grana — pregrada u prikazu, nije entitet. Bez ikone, prigušena. */
.sljedivost-grana > td {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.8125rem;
}

/* Sustavni highlight/focus stil — Pine 50 / 200 / 800 ("ovdje si sad") */
.sljedivost-istaknut > td {
    background: var(--p-50);
    color: var(--p-800);
    box-shadow: inset 2px 0 0 var(--p-200);
}

/* Klizna ploča sljedivosti (DxDrawer, desno).
   DxDrawer je visok koliko i sadržaj koji obavija (TargetContent = stranica), pa bi kratak grid
   dao odrezanu ploču. Vežemo ga na visinu prozora umanjenu za gornju traku. */
.sljedivost-drawer {
    min-height: calc(100vh - 7rem);
}

.sljedivost-drawer .dxbl-drawer-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sljedivost-drawer .sljedivost-iznos,
.sljedivost-drawer .sljedivost-iznos-rollup {
    white-space: nowrap;
}

.sljedivost-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-200);
}

.sljedivost-drawer-naslov {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    color: var(--text-primary);
}

.sljedivost-drawer-body {
    padding: var(--sp-3) var(--sp-4);
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.sljedivost-istaknut .sljedivost-naziv {
    font-weight: 600;
}

/* Iznos: vlastiti je čvrst, rollup (Σ zbroj djece) je prigušen — ne miješaju se */
.sljedivost-iznos {
    font-variant-numeric: tabular-nums;
}

.sljedivost-iznos-rollup {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================================================
   HubShell (VAL §12 pilot) — dvopanelna ljuska: master-lista lijevo, detalj desno.
   Generalizacija dosadašnjeg .klijent-hub rasporeda; sadržaj panela daje pozivatelj.
   NAPOMENA: prefiks .hub-* je već zauzet za dashboard pločice (.hub-tile) — otud .hub-shell-*.
   ============================================================================ */

.hub-shell {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    height: calc(100vh - 130px);
    min-height: 520px;
}

/* ── Lijevo: master ── */
.hub-shell-master {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hub-shell-master-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-light);
}

.hub-shell-master-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--sp-2);
}

.hub-shell-master-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border-light);
    font-size: var(--fs-sm);
}

/* ── Desno: detalj ── */
.hub-shell-detail {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: auto;
}

.hub-shell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--sp-3);
    color: var(--text-muted);
}

.hub-shell-empty i { font-size: 42px; opacity: .5; }

.hub-shell-header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}

.hub-shell-header-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    font-weight: 700;
}

.hub-shell-header-main { flex: 1; min-width: 0; }

.hub-shell-master-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--text-primary);
}

.hub-shell-master-count {
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
    border-radius: 999px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.hub-shell-master-link {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.hub-shell-master-link:hover { text-decoration: underline; }

.hub-shell-header-naziv {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text-primary);
}
/* Naslov je programski fokusiran radi najave čitaču ekrana pri promjeni zapisa —
   sakrij UA focus-okvir jer to nije korisnički fokus. */
.hub-shell-header-naziv:focus,
.hub-shell-header-naziv:focus-visible { outline: none; }

.hub-shell-header-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.hub-shell-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.hub-shell-header-acts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

/* Uski ekran: lista gore, detalj ispod */
@media (max-width: 1100px) {
    .hub-shell {
        flex-direction: column;
        height: auto;
    }
    .hub-shell-master {
        flex: none;
        width: 100%;
        max-height: 320px;
    }
    .hub-shell-detail { height: auto; overflow: visible; }
}

/* DX ListBox u master panelu: odabrani redak je Pine 700 (ne DX default #059669);
   bijeli tekst daje AA kontrast (≈5.9:1). */
.hub-shell-master-body .dxbl-list-box-item-selected,
.hub-shell-master-body .dxbl-list-box-item-selected:hover {
    background: var(--brand-primary) !important;
}