/* ═══════════════════════════════════════════════════════════════════════════
   Sensiteh WMS — Global Styles
   Dizajn: hybrid dark sidebar + bijeli topbar + toplo-sivi content
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens + MudBlazor CSS variable overrides ──────────────────── */
:root {
    /* MudBlazor internals — override globalni default radius */
    --mud-default-borderradius: 10px;
    /* Boje — content zona (light) */
    --wms-content-bg:       #F0F2EE;
    --wms-card-bg:          #FFFFFF;
    --wms-border:           #E5E7EB;
    --wms-text:             #1A1A1A;
    --wms-text-muted:       #6B7280;

    /* Boje — sidebar (dark) */
    --wms-sidebar-bg:       #12140e;
    --wms-sidebar-text:     #8a9070;

    /* Login stranica (poseban dark ekran) */
    --wms-login-bg:         #070808;
    --wms-login-surface:    #12140e;

    /* Sage zeleni akcent (prigušena brand boja) */
    --wms-green:            #7BA962;
    --wms-green-dim:        rgba(123, 169, 98, 0.12);
    --wms-green-border:     rgba(123, 169, 98, 0.25);
    --wms-green-hover:      #8FBD75;

    /* Status boje */
    --wms-error:            #EF4444;
    --wms-warning:          #F59E0B;
    --wms-info:             #3B82F6;
    --wms-success:          #7BA962;

    /* ── Radijusi ── */
    --wms-r-xs:     6px;    /* tooltip, error box */
    --wms-r-sm:     8px;    /* gumbi, badge-ovi */
    --wms-r-md:     12px;   /* kartice, inputi, dropdown */
    --wms-r-lg:     16px;   /* dijalozi, modali */
    --wms-r-pill:   9999px; /* status chip-ovi */

    /* ── Sjene ── */
    --wms-shadow-card:   0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06);
    --wms-shadow-hover:  0 2px 6px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.09);
    --wms-shadow-dialog: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    --wms-shadow-pop:    0 4px 16px rgba(0,0,0,0.12);

    /* ═══════════════════════════════════════════════════════════════════════
       Soft Daylight tokeni (--sd-*) — novi dizajn jezik (Attio/Notion feel).
       Koegzistiraju s --wms-* dok migracija ne završi. Nove stranice/komponente
       koriste --sd-*, postojeće stranice nastavljaju s --wms-*.

       Napomena: --sd-brand (#5BA071, mint) je različit od --wms-green (#7BA962,
       sage). Dvije zelene koegzistiraju namjerno tijekom prijelaza.
       Izvor: docs/design/Blazor/.../design_handoff_artikli_soft_daylight/design_tokens.css
       ═══════════════════════════════════════════════════════════════════════ */

    /* Surfaces */
    --sd-page:           #f6f4ee;
    --sd-card:           #ffffff;
    --sd-surface:        #faf8f2;
    --sd-surface-hover:  #f3f0e7;

    /* Hairlines */
    --sd-hairline:       #ece9e0;
    --sd-hairline-soft:  #f1eee6;

    /* Ink */
    --sd-ink:            #1d201a;
    --sd-ink-2:          #494a40;
    --sd-ink-3:          #7c7a6d;
    --sd-ink-4:          #a8a597;
    --sd-ink-5:          #c7c4b6;

    /* Brand (mint) */
    --sd-brand:          #5BA071;
    --sd-brand-deep:     #3f7a55;
    --sd-brand-soft:     #e7f1e6;
    --sd-brand-tint:     #f0f7ef;

    /* Semantic */
    --sd-warn:           #c08326;
    --sd-warn-soft:      #fbf2dc;
    --sd-warn-ink:       #8d5e15;
    --sd-warn-tint:      #fef8e7;   /* najblijeđa warn pozadina (warn kartica, banner) */
    --sd-warn-border:    #ecdcb0;
    --sd-danger:         #c0473d;
    --sd-danger-deep:    #9b362d;
    --sd-danger-soft:    #f9e6e3;
    --sd-danger-tint:    #fbeeec;
    --sd-danger-border:  #efd6d2;

    /* Typography */
    --sd-font:           'Manrope', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sd-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    --sd-text-h1:        28px;
    --sd-text-h2:        20px;
    --sd-text-body:      14px;
    --sd-text-meta:      13px;
    --sd-text-label:     11px;
    --sd-text-mono:      12.5px;

    /* Spacing */
    --sd-space-1:        4px;
    --sd-space-2:        8px;
    --sd-space-3:        12px;
    --sd-space-4:        16px;
    --sd-space-5:        20px;
    --sd-space-6:        24px;
    --sd-space-7:        28px;

    /* Radii */
    --sd-radius-sm:      6px;
    --sd-radius-md:      8px;
    --sd-radius-lg:      10px;
    --sd-radius-xl:      12px;
    --sd-radius-2xl:     14px;
    --sd-radius-card:    18px;
    --sd-radius-pill:    999px;

    /* Shadows */
    --sd-shadow-card:    0 1px 2px rgba(60,55,40,0.04), 0 8px 24px -12px rgba(60,55,40,0.10);
    --sd-shadow-btn:     0 1px 2px rgba(63,122,85,0.20);

    /* Sizing */
    --sd-sidebar-w:      240px;
    --sd-row-h:          56px;
    --sd-input-h:        46px;
    --sd-btn-h:          40px;
    --sd-btn-icon:       36px;
    --sd-topbar-pad:     14px;

    /* Slomljeni tokeni — light popravak (bili nedefinirani → bezbojni elementi) */
    --sd-hairline-2:     #f1eee6;              /* = --sd-hairline-soft */
    --sd-ink-1:          #1d201a;              /* = --sd-ink (najtamniji, naglašeni tekst) */
    --sd-mono:           var(--sd-font-mono);  /* FONT, ne boja — dark ga ne dira */

    /* Info (plava) — "overridden" pilula i info chip; app nema drugog plavog soft para.
       Light vrijednosti = postojeći pill izgled (pixel-identično). */
    --sd-info:           #3B82F6;
    --sd-info-soft:      #e8eef9;
    --sd-info-ink:       #2a4880;

    /* Tekst/ikone na accent podlozi (brand/danger/warn gumbi, chipovi, badge).
       Light: bijelo. Dark: tamno (#0f1409) jer je accent svjetliji na tamnom. */
    --sd-on-accent:      #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — html[data-theme="dark"]
   Dizajnerov usklađeni set (78 tokena). Aktivira se preko data-theme na <html>.
   Napomene: "deep" tokeni (brand/danger) idu SVJETLIJE u darku (tekst/hover na
   tamnom); --sd-warn-ink je svijetli jantar; login (--wms-login-*) namjerno
   ostaje taman u obje teme; --sd-mono se ne dira (font, ne boja).
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    /* Nativne kontrole (select popup, date/time picker, scrollbari) crtaju se u
       tamnoj shemi — inače popup <option> liste dobiju svijetlu pozadinu. */
    color-scheme: dark;

    /* ── A. POVRŠINE ── */
    --sd-page:            #14160f;
    --sd-card:            #1b1e16;
    --sd-surface:         #20241a;
    --sd-surface-hover:   #272c20;
    --wms-content-bg:     #14160f;   /* ≈ --sd-page */
    --wms-card-bg:        #1b1e16;   /* ≈ --sd-card */

    /* ── B. LINIJE / HAIRLINES ── */
    --sd-hairline:        #2b2f24;
    --sd-hairline-soft:   #242820;
    --wms-border:         #2b2f24;   /* ≈ --sd-hairline */

    /* ── C. TEKST / INK ── */
    --sd-ink:             #f0efe6;
    --sd-ink-2:           #c8c8ba;
    --sd-ink-3:           #928f80;
    --sd-ink-4:           #6d6b5d;
    --sd-ink-5:           #4c4a3e;
    --wms-text:           #f0efe6;   /* ≈ --sd-ink */
    --wms-text-muted:     #928f80;   /* ≈ --sd-ink-3 */

    /* ── D. BRAND (svjetliji u darku) ── */
    --sd-brand:           #6fb888;
    --sd-brand-deep:      #93cfa8;   /* "deep" = svjetliji akcent za tekst na tamnom */
    --sd-brand-soft:      #22331f;
    --sd-brand-tint:      #1e2a1a;
    --wms-green:          #83c091;   /* ≈ --sd-brand, legacy sage */
    --wms-green-dim:      rgba(111,184,136,0.16);
    --wms-green-border:   rgba(111,184,136,0.34);
    --wms-green-hover:    #9ad0aa;

    /* ── E. STATUS ── */
    --sd-warn:            #d99f4a;
    --sd-warn-soft:       #33290f;
    --sd-warn-ink:        #e0ad63;   /* svijetli warn tekst na warn-soft */
    --sd-warn-tint:       #241d12;
    --sd-warn-border:     #4a3a1e;
    --sd-danger:          #d9695e;
    --sd-danger-deep:     #e08076;   /* "deep" = svjetliji za hover na tamnom */
    --sd-danger-soft:     #38211e;
    --sd-danger-tint:     #2a1a18;
    --sd-danger-border:   #50302b;
    --wms-error:          #e5695f;
    --wms-warning:        #dca24f;
    --wms-info:           #5b9be0;
    --wms-success:        #83c091;   /* ≈ --wms-green */

    /* Info (plava) — dizajnerove vrijednosti; soft prigušen u rang warn/danger-soft */
    --sd-info:            #6f9fe0;
    --sd-info-soft:       #1c2740;   /* ~7:1 kontrast s --sd-info-ink */
    --sd-info-ink:        #9db8e8;

    /* ── F. CHROME ── */
    --wms-sidebar-bg:     #181b13;
    --wms-sidebar-text:   #928f80;
    --wms-login-bg:       #070808;   /* namjerno taman uvijek — nepromijenjen */
    --wms-login-surface:  #12140e;   /* namjerno taman uvijek — nepromijenjen */

    /* ── G. SJENE (pojačane) ── */
    --sd-shadow-card:     0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
    --sd-shadow-btn:      0 1px 2px rgba(0,0,0,.5);
    --wms-shadow-card:    0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5);
    --wms-shadow-hover:   0 2px 6px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.6);
    --wms-shadow-dialog:  0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
    --wms-shadow-pop:     0 4px 16px rgba(0,0,0,.6);

    /* ── H. SLOMLJENI TOKENI (dark dio) ── */
    --sd-hairline-2:      #242820;   /* = --sd-hairline-soft */
    --sd-ink-1:           #f6f5ec;   /* naglašeni strong tekst, iznad --sd-ink */

    /* Tekst/ikone na accent podlozi — taman jer je accent svjetliji na tamnom */
    --sd-on-accent:       #0f1409;

    /* ═══ MudBlazor palette bridge ═══
       Mud komponente (MudSelect/MudMenu popover, MudDialog, MudTable, inputi)
       čitaju --mud-palette-*. Override pod istim data-theme = jedan izvor istine,
       bez C# PaletteDark i bez FOUC-a (atribut se postavi prije painta). */
    --mud-palette-surface:                    var(--sd-card);
    --mud-palette-background:                 var(--sd-page);
    --mud-palette-background-gray:            var(--sd-surface);
    --mud-palette-text-primary:               var(--sd-ink);
    --mud-palette-text-secondary:             var(--sd-ink-3);
    --mud-palette-text-disabled:              var(--sd-ink-4);
    --mud-palette-action-default:             var(--sd-ink-3);
    --mud-palette-action-disabled:            var(--sd-ink-4);
    --mud-palette-action-disabled-background: var(--sd-surface-hover);
    --mud-palette-divider:                    var(--sd-hairline);
    --mud-palette-divider-light:              var(--sd-hairline-soft);
    --mud-palette-lines-default:              var(--sd-hairline);
    --mud-palette-lines-inputs:               var(--sd-hairline);
    --mud-palette-table-lines:                var(--sd-hairline);
    --mud-palette-table-striped:              var(--sd-surface);
    --mud-palette-table-hover:                var(--sd-surface-hover);
    --mud-palette-drawer-background:          var(--sd-page);
    --mud-palette-drawer-text:                var(--sd-ink-2);
    --mud-palette-drawer-icon:                var(--sd-ink-3);
    --mud-palette-appbar-background:          var(--sd-page);
    --mud-palette-appbar-text:                var(--sd-ink);
    --mud-palette-skeleton:                   var(--sd-surface-hover);
    --mud-palette-gray-default:               var(--sd-ink-4);
    --mud-palette-gray-light:                 var(--sd-ink-5);
    --mud-palette-gray-darker:                var(--sd-ink-2);

    /* Accent (brand/status) — baza + kontrast tekst; svjetliji u darku.
       -rgb je za translucent hover tinte (rgba(var(--..-rgb), .x)). */
    --mud-palette-primary:                    var(--sd-brand);
    --mud-palette-primary-text:               var(--sd-on-accent);
    --mud-palette-primary-rgb:                111,184,136;   /* #6fb888 */
    --mud-palette-success:                    var(--wms-success);
    --mud-palette-success-text:               var(--sd-on-accent);
    --mud-palette-error:                      var(--sd-danger);
    --mud-palette-error-text:                 var(--sd-on-accent);
    --mud-palette-error-rgb:                  217,105,94;    /* #d9695e */
    --mud-palette-warning:                    var(--sd-warn);
    --mud-palette-warning-text:               var(--sd-on-accent);
    --mud-palette-warning-rgb:                217,159,74;    /* #d99f4a */
    --mud-palette-info:                       var(--sd-info);
    --mud-palette-info-text:                  var(--sd-on-accent);
    --mud-palette-overlay-dark:               rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark interakcijska stanja — light koristi rgba(0,0,0,.x) (odobreno); u darku je
   to nevidljivo (crno na tamnom), pa preokreni na svijetle tinte / tokene.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-default,
html[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-primary {
    border-color: rgba(255,255,255,0.16) !important;
}
html[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-default:hover,
html[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-primary:hover {
    border-color: rgba(255,255,255,0.28) !important;
    background-color: rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.28) !important;
}
html[data-theme="dark"] .mud-icon-button:not(.mud-icon-button-color-primary):not(.mud-icon-button-color-error):not(.mud-icon-button-color-success):hover {
    background-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .inv-progress-bar { background: var(--sd-surface-hover); }

/* ── Baza ───────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--sd-page);
    color: var(--wms-text);
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: var(--wms-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--wms-green-border); }

/* Brand logo — light verzija (cream pozadina) za svijetli sidebar, dark verzija
   (crna pozadina) za tamni. Swap po temi; oba asseta imaju zapečenu pozadinu. */
.sd-brand-logo--dark { display: none; }
html[data-theme="dark"] .sd-brand-logo--light { display: none; }
html[data-theme="dark"] .sd-brand-logo--dark { display: inline-block; }

/* Prekidač teme u topbaru — icon-only, kvadratni (uz .sd-icon-button štit/odjava) */
.sd-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-btn-icon);
    height: var(--sd-btn-icon);
    padding: 0;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: var(--sd-radius-lg);
    color: var(--sd-ink-2);
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.sd-theme-toggle:hover {
    background: var(--sd-surface);
    border-color: var(--sd-ink-4);
    color: var(--sd-ink);
}
.sd-theme-toggle .mud-icon-root {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}
.sd-theme-toggle-face { display: inline-flex; align-items: center; }
/* Light mod: ikona mjeseca (prebaci na tamnu). Dark mod: ikona sunca (prebaci na svijetlu). */
.sd-theme-toggle-face--dark { display: none; }
html[data-theme="dark"] .sd-theme-toggle-face--light { display: none; }
html[data-theme="dark"] .sd-theme-toggle-face--dark { display: inline-flex; }

/* Mekani prijelaz pri prebacivanju teme */
html, body { transition: background-color .25s ease, color .25s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — shell (drawer, appbar)
   Soft Daylight shell — svijetli sidebar i topbar dijele istu --sd-page boju;
   razlika prema content area dolazi od --sd-card surface (bez bordera).
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-drawer {
    background-color: var(--sd-page) !important;
    border-right: none !important;
    color: var(--sd-ink-2) !important;
}
.mud-appbar {
    background-color: var(--sd-page) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: var(--sd-ink) !important;
}
.mud-main-content {
    background-color: var(--sd-page) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — surface
   .wms-card je eksplicitna klasa na svakom MudPaper-u — sigurnija od globalnog
   .mud-paper override-a koji bi pogodio drawer, appbar i popover.
   mud-elevation-0 ima box-shadow:none pa mu trebamo !important.
   ═══════════════════════════════════════════════════════════════════════════ */
.wms-card,
.mud-paper.wms-card,
.mud-elevation-0.wms-card {
    background:    var(--wms-card-bg)      !important;
    border-radius: var(--wms-r-md)         !important;
    box-shadow:    var(--wms-shadow-card)  !important;
    border:        none                    !important;
}

/* ── Dijalog ────────────────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: var(--wms-r-lg)         !important;
    box-shadow:    var(--wms-shadow-dialog) !important;
    overflow: hidden;
}

/* ── Popover / Dropdown ─────────────────────────────────────────────────── */
.mud-popover-paper {
    border-radius: var(--wms-r-md)     !important;
    box-shadow:    var(--wms-shadow-pop) !important;
    border: 1px solid var(--wms-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — gumbi (sve varijante: Filled, Outlined, Text)
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-button-root:not(.mud-icon-button) {
    border-radius: var(--wms-r-sm) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
.mud-button-root.mud-icon-button {
    border-radius: var(--wms-r-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — input polja i select
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-input-outlined fieldset,
.mud-input-outlined .mud-input-outlined-border,
.mud-input-outlined-border,
fieldset.mud-input-outlined-border {
    border-radius: var(--wms-r-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — chip / status badge
   Pill oblik — svi chipovi su zaobljene pilule
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-chip,
.mud-chip-root,
.mud-chip.mud-chip-filled,
.mud-chip.mud-chip-outlined {
    border-radius: var(--wms-r-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    height: 22px !important;
    padding: 0 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MudBlazor — tablica
   Nema vertikalnih linija, samo horizontalni separator između redova
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-table-root {
    border-collapse: collapse !important;
}
.mud-table-cell {
    border: none !important;
    border-bottom: 1px solid var(--wms-border) !important;
    padding: 12px 16px !important;
}
.mud-table-head .mud-table-cell {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--wms-text-muted) !important;
    border-bottom: 2px solid var(--wms-border) !important;
    background: transparent !important;
}
.mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}
.mud-table-row:hover .mud-table-cell {
    background: rgba(123, 169, 98, 0.05) !important;
}

/* ── Snackbar ───────────────────────────────────────────────────────────── */
.mud-snackbar {
    border-radius: var(--wms-r-sm) !important;
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.mud-tooltip {
    border-radius: var(--wms-r-xs) !important;
    font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar nav — Soft Daylight (pill aktivna stavka, brand-soft tint)
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-nav-link {
    color: var(--sd-ink-2) !important;
    font-family: var(--sd-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--sd-radius-pill) !important;
    margin: 1px 10px !important;
    padding: 9px 14px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
    transition: background 150ms, color 150ms !important;
}
.mud-nav-link .mud-nav-link-icon {
    color: var(--sd-ink-3) !important;
    transition: color 150ms !important;
    font-size: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
}
.mud-nav-link:hover {
    background: var(--sd-surface) !important;
    color: var(--sd-ink) !important;
}
.mud-nav-link:hover .mud-nav-link-icon {
    color: var(--sd-ink-2) !important;
}
.mud-nav-link.active {
    background: var(--sd-brand-soft) !important;
    border-left: none !important;
    color: var(--sd-brand-deep) !important;
    font-weight: 600 !important;
}
.mud-nav-link.active .mud-nav-link-icon {
    color: var(--sd-brand) !important;
}

/* Sidebar nav group label */
.wms-nav-group-label {
    font-family: var(--sd-font) !important;
    font-size: var(--sd-text-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
    padding: 0 24px 9px;
    margin-top: 22px;
    display: block;
}
.wms-nav-group-label:first-of-type {
    margin-top: 8px;
}

/* Sidebar nav — samostalni link na dnu (bez group labela), odvojen razmakom kao sekcija */
.wms-nav-standalone {
    margin-top: 22px;
}

/* Sidebar nav — zadnji help link (FAQ): prilijepljen uz Upute iznad, s malo prostora ispod */
.wms-nav-help-last {
    margin-top: 2px;
    margin-bottom: 18px;
}

/* ── Sistemska najava (banner na vrhu sadržaja) ─────────────────────────── */
.sd-announcement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    /* Gornji bar ima dodatni inline padding pa je viši od rezervirane visine sadržaja;
       ovaj razmak osigurava da vrh trake ne završi ispod bara. */
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    border-left-width: 4px;
    font-size: 13.5px;
    line-height: 1.45;
}

.sd-announcement-icon {
    display: flex;
    flex: 0 0 auto;
    margin-top: 1px;
}

.sd-announcement-body { flex: 1 1 auto; min-width: 0; }

.sd-announcement-title { font-weight: 700; }

.sd-announcement-text { margin-top: 2px; }

.sd-announcement-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 2px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.sd-announcement-dismiss:hover { opacity: 1; }

/* Info = brand (mint) */
.sd-announcement--info {
    background: var(--sd-brand-soft);
    border-color: var(--sd-brand);
    color: var(--sd-brand-deep);
}

/* Upozorenje = amber */
.sd-announcement--warning {
    background: var(--sd-warn-soft);
    border-color: var(--sd-warn);
    color: var(--sd-warn-ink);
}

/* Održavanje = crveno */
.sd-announcement--maintenance {
    background: var(--sd-danger-soft);
    border-color: var(--sd-danger);
    color: var(--sd-danger-deep);
}

/* Sidebar nav — disabled stavka */
.wms-nav-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* Sidebar verzija */
.wms-sidebar-version {
    font-size: 11px;
    color: var(--sd-ink-4);
    padding: 12px 24px;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page layout helperi
   ═══════════════════════════════════════════════════════════════════════════ */
.wms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.wms-page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--wms-text);
    margin: 0;
}

/* FocusOnNavigate u Routes.razor programatski fokusira <h1> nakon svake
   navigacije radi screen reader najave — framework dodaje tabindex="-1"
   i poziva focus(). Browser bi inače crtao default outline (debeli crni
   pravokutnik) oko naslova što vizualno smeta. Naslov nije interaktivan,
   tipkovnički korisnici tabaju kroz dugmad/linkove (koji zadržavaju svoj
   normalan :focus-visible outline) — tako da je outline tu samo balast.
   Global rule po atributu pokriva sve h1 u projektu (postojeće i buduće)
   neovisno o klasi koju koriste. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ── Kartica ────────────────────────────────────────────────────────────── */
.wms-card {
    background: var(--wms-card-bg);
    border-radius: var(--wms-r-md);
    padding: 20px;
    box-shadow: var(--wms-shadow-card);
    border: none;
}

/* ── Warehouse picker (Soft Daylight gumb u topbaru) ────────────────────── */
.sd-warehouse-picker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: var(--sd-btn-icon);
    padding: 0 12px 0 14px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: var(--sd-radius-lg);
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
    white-space: nowrap;
}
.sd-warehouse-picker:hover {
    background: var(--sd-surface);
    border-color: var(--sd-ink-4);
}
.sd-warehouse-picker:disabled,
.sd-warehouse-picker[disabled] {
    cursor: default;
}
/* Fiksna oznaka kad postoji samo jedna dozvoljena PJ — nema izbora, pa ni hover/pointer. */
.sd-warehouse-picker-fixed {
    cursor: default;
    padding-right: 14px;
}
.sd-warehouse-picker-fixed:hover {
    background: var(--sd-card);
    border-color: var(--sd-hairline);
}
.sd-warehouse-picker-icon {
    display: inline-flex;
    color: var(--sd-brand);
}
.sd-warehouse-picker-icon .mud-icon-root {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}
/* 280px, ne 200: oznaka nosi "PJ-01 · Poslovnica Zagreb Utrine" (šifra + naziv), a na 200px se
   rezala. Dulji nazivi se i dalje skrate — naziv smije imati do 200 znakova — pa element nosi
   title s punim tekstom. */
.sd-warehouse-picker-label {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-warehouse-picker-chev {
    display: inline-flex;
    color: var(--sd-ink-4);
}
.sd-warehouse-picker-chev .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* MudMenu activator wrapper — ukloni default MudBlazor padding/min-width */
.mud-menu .sd-warehouse-picker {
    min-width: 0;
}

/* Soft Daylight dropdown menu za warehouse selector — vlastiti popup
   (zamjena za MudMenu jer ActivatorContent nije triggerirao klik). */
.sd-warehouse-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--wms-shadow-card);
    padding: 6px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-warehouse-menu-item {
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--sd-ink);
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms;
    white-space: nowrap;
}
.sd-warehouse-menu-item:hover {
    background: var(--sd-surface);
}
.sd-warehouse-menu-item-active {
    background: var(--sd-surface);
    font-weight: 600;
}
.sd-warehouse-menu-item .sd-status-pill,
.sd-warehouse-picker-label + .sd-status-pill { margin-left: 8px; }
.sd-warehouse-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1299;
    background: transparent;
}

/* Legacy class — više se ne koristi nakon prelaska na .sd-warehouse-picker.
   Ostavljeno za kompatibilnost dok se ne potvrdi da nigdje nije referencirano. */
.wms-warehouse-selector {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Login stranica — poseban dark dizajn, nepromijenjeno
   ═══════════════════════════════════════════════════════════════════════════ */
.wms-login-page {
    min-height: 100vh;
    background-color: var(--wms-login-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wms-login-card {
    background: var(--wms-login-surface);
    border-radius: var(--wms-r-md);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.10);
}

.wms-login-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0 0 28px;
}

.wms-login-logo {
    display: block;
    width: 200px;
    margin: 0 auto 32px;
}

.wms-login-footer {
    font-size: 12px;
    color: var(--wms-text-muted);
    text-align: center;
    margin-top: 24px;
}

.wms-login-form-group { margin-bottom: 20px; }

.wms-login-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wms-text-muted);
    margin-bottom: 6px;
}

.wms-login-input {
    width: 100%;
    background: var(--wms-login-bg);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--wms-r-xs);
    padding: 10px 14px;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms;
    box-sizing: border-box;
}
.wms-login-input:focus { border-color: var(--wms-green); }

.wms-login-input-wrapper { position: relative; }
.wms-login-input-wrapper .wms-login-input { padding-right: 44px; }

.wms-login-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wms-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    font-size: 18px;
}
.wms-login-pw-toggle:hover { color: #ffffff; }

.wms-login-btn {
    width: 100%;
    padding: 12px;
    background: var(--wms-green);
    color: var(--wms-login-surface);
    border: none;
    border-radius: var(--wms-r-xs);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms, opacity 150ms;
    margin-top: 8px;
    letter-spacing: 0.3px;
}
.wms-login-btn:hover { background: var(--wms-green-hover); }
.wms-login-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.wms-login-error {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--wms-r-xs);
    padding: 10px 14px;
    color: #ef4444;
    font-size: 13px;
    margin-top: 16px;
}

.wms-login-validation {
    font-size: 12px;
    color: var(--wms-error);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blazor infrastruktura
   ═══════════════════════════════════════════════════════════════════════════ */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(18,20,14,0.85);
    align-items: center;
    justify-content: center;
    color: var(--wms-text);
    font-size: 16px;
}
#components-reconnect-modal.components-reconnect-show { display: flex; }

.blazor-error-boundary {
    background: rgba(239,68,68,0.10);
    border: 1px solid var(--wms-error);
    border-radius: var(--wms-r-sm);
    padding: 12px 16px;
    color: var(--wms-error);
    margin: 16px;
}
.blazor-error-boundary::after {
    content: "Došlo je do pogreške. Pokušajte osvježiti stranicu.";
}

/* ═══════════════════════════════════════════════════════════════════════════
   Muted palette overrides — prigušuje sve sekundarne UI elemente
   da sadržaj (data, šifre, brojevi) dobije fokus umjesto chrome-a.
   Primary CTA gumbi zadržavaju brand zelenu — jedina "glasna" stvar po ekranu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Status chip-ovi: tonal-pair umjesto solid filled ─────────────────────
   Filled chip vrišti u tablici svakim retkom. Tonal-pair (svijetla pozadina
   + zasićeni tekst iste hue) zadržava prepoznatljivost statusa bez vikanja. */
.mud-chip.mud-chip-filled.mud-chip-color-success {
    background-color: rgba(123,169,98,0.16) !important;
    color: #4C7A35 !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-default {
    background-color: #F3F4F6 !important;
    color: #6B7280 !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-error {
    background-color: rgba(239,68,68,0.10) !important;
    color: #B91C1C !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: rgba(245,158,11,0.12) !important;
    color: #92400E !important;
}
.mud-chip.mud-chip-filled.mud-chip-color-info {
    background-color: rgba(59,130,246,0.10) !important;
    color: #1D4ED8 !important;
}
/* Dark-only override — light chipovi ostaju pixel-identični (odobreni); dark koristi soft/ink tokene */
html[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-success { background-color: var(--sd-brand-soft) !important;  color: var(--sd-brand-deep) !important; }
html[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-default { background-color: var(--sd-surface) !important;     color: var(--sd-ink-3) !important; }
html[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-error   { background-color: var(--sd-danger-soft) !important; color: var(--sd-danger-deep) !important; }
html[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-warning { background-color: var(--sd-warn-soft) !important;   color: var(--sd-warn-ink) !important; }
html[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-info    { background-color: var(--sd-info-soft) !important;   color: var(--sd-info-ink) !important; }

/* ── Outlined gumbi: meka granica ─────────────────────────────────────────
   Default outlined border je previše tamno-siv, izgleda kao "uokvireni boks". */
.mud-button-root.mud-button-outlined.mud-button-outlined-default,
.mud-button-root.mud-button-outlined.mud-button-outlined-primary {
    border-color: rgba(0,0,0,0.12) !important;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-default:hover,
.mud-button-root.mud-button-outlined.mud-button-outlined-primary:hover {
    border-color: rgba(0,0,0,0.20) !important;
    background-color: rgba(0,0,0,0.03) !important;
}

/* ── Filled primary gumb: blaga sjena za "lebdjeti" osjećaj umjesto
       agresivnog pop-a; brand zelena ostaje. */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(123,169,98,0.18) !important;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 2px 6px rgba(123,169,98,0.24) !important;
}

/* ── Outlined input: mekša granica + tiše focus stanje ────────────────────
   Default MudBlazor outlined ima dosta kontrastnu granicu i jaku focus boju. */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--wms-border) !important;
}
.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: rgba(0,0,0,0.20) !important;
}
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--wms-green) !important;
    border-width: 1px !important;          /* default je 2px — preglasno */
}

/* ── Tablica header: tiše, manje "uredske" boje ────────────────────────── */
.mud-table .mud-table-head .mud-table-row {
    background-color: #FAFAF9 !important;
}
.mud-table .mud-table-head .mud-table-cell {
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}
/* Dark-only override — light header pixel-identičan (odobren) */
html[data-theme="dark"] .mud-table .mud-table-head .mud-table-row  { background-color: var(--sd-surface) !important; }
html[data-theme="dark"] .mud-table .mud-table-head .mud-table-cell { color: var(--sd-ink-3) !important; }

/* ── IconButton hover ne treba biti zeleni krug; samo blagi siv ─────────── */
.mud-icon-button:not(.mud-icon-button-color-primary):not(.mud-icon-button-color-error):not(.mud-icon-button-color-success):hover {
    background-color: rgba(0,0,0,0.04) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Inventura — moderni SaaS dashboard stil
   Svi selektori prefiksirani s `.inv-` — bez utjecaja izvan inventory stranice.
   ═══════════════════════════════════════════════════════════════════════════ */

.inv-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.inv-kpi-card {
    background: var(--wms-card-bg);
    border-radius: var(--wms-r-md);
    padding: 20px 22px;
    box-shadow: var(--wms-shadow-card);
    position: relative;
    transition: transform 150ms ease, box-shadow 150ms ease;
    min-height: 110px;
}

.inv-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--wms-shadow-hover);
}

.inv-kpi-card.is-active {
    background: var(--wms-sidebar-bg);
}

.inv-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--wms-text-muted);
    margin-bottom: 10px;
    padding-right: 48px;
}

.inv-kpi-card.is-active .inv-kpi-label {
    color: rgba(255, 255, 255, 0.70);
}

.inv-kpi-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--wms-text);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
}

.inv-kpi-card.is-active .inv-kpi-num {
    color: #FAFAF8;
}

.inv-kpi-hint {
    font-size: 12px;
    color: var(--wms-text-muted);
    margin-top: 6px;
}

.inv-kpi-card.is-active .inv-kpi-hint {
    color: rgba(255, 255, 255, 0.55);
}

.inv-kpi-badge {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wms-green-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inv-kpi-badge .mud-icon-root {
    color: var(--wms-green) !important;
    width: 18px !important;
    height: 18px !important;
}

.inv-kpi-card.is-active .inv-kpi-badge {
    background: var(--wms-green);
}

.inv-kpi-card.is-active .inv-kpi-badge .mud-icon-root {
    color: var(--wms-sidebar-bg) !important;
}

.inv-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.inv-filter-row .mud-chip {
    border-radius: var(--wms-r-pill) !important;
    font-weight: 500;
    cursor: pointer;
}

.inv-progress-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}

.inv-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: var(--wms-r-pill);
    background: rgba(0,0,0,0.06);
    overflow: hidden;
    position: relative;
}

.inv-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--wms-green);
    border-radius: inherit;
    transition: width 250ms ease;
}

.inv-progress-text {
    font-size: 12px;
    color: var(--wms-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

.inv-progress-text strong {
    color: var(--wms-text);
    font-weight: 600;
}

.inv-doc-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--wms-text);
    letter-spacing: -0.005em;
}

.inv-empty {
    text-align: center;
    padding: 64px 24px;
}

.inv-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--wms-green-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.inv-empty-icon .mud-icon-root {
    color: var(--wms-green) !important;
    width: 32px !important;
    height: 32px !important;
}

.inv-empty-headline {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--wms-text);
    margin: 0 0 8px;
}

.inv-empty-body {
    font-size: 14px;
    color: var(--wms-text-muted);
    margin: 0 auto 24px;
    max-width: 360px;
    line-height: 1.5;
}

/* ── Not found (404) stranica ─────────────────────────────────────────────── */
.nf-suggestion {
    font-size: 14px;
    color: var(--wms-text);
    margin: -8px auto 24px;
}

.nf-suggestion a {
    color: var(--wms-green);
    font-weight: 600;
    text-decoration: none;
}

.nf-suggestion a:hover {
    text-decoration: underline;
}

.nf-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nf-quicklinks {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--sd-hairline);
}

.nf-quicklinks-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wms-text-muted);
    margin-bottom: 12px;
}

.nf-quicklinks-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nf-quicklink {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--sd-hairline);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wms-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.nf-quicklink:hover {
    background: var(--wms-green-dim);
    border-color: var(--wms-green);
}

.nf-help {
    font-size: 13px;
    color: var(--wms-text-muted);
    margin: 24px 0 0;
}

.nf-help a {
    color: var(--wms-green);
    font-weight: 500;
    text-decoration: none;
}

.nf-help a:hover {
    text-decoration: underline;
}

.nf-help-sep {
    margin: 0 6px;
}

@media (max-width: 900px) {
    .inv-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* ── Inventory detail page ────────────────────────────────────────────────── */
/* Outer shell — single rounded card wrapping cijeli page content
   (header + sve sub-section kartice), prema Soft Daylight P_Shell-u. */
.sd-content-card.inv-detail-shell {
    padding: 24px 28px 28px;
    /* Mora POBIJEDITI .sd-content-card { overflow: hidden } (dolazi kasnije u kaskadi, ista
       specifičnost bi izgubila) — bez visible sticky review sažetak se nikad ne zalijepi. */
    overflow: visible;
}
.inv-detail-shell .wms-card {
    box-shadow: none !important;
    border: 1px solid var(--sd-hairline) !important;
    border-radius: 14px !important;
    margin-bottom: 16px;
}
.inv-detail-shell .wms-card:last-child {
    margin-bottom: 0;
}

.inv-detail-breadcrumb {
    margin-bottom: 10px;
}

.inv-detail-back-link.mud-button-root,
.mud-button-root.inv-detail-back-link {
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    font-family: var(--sd-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--sd-ink-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.inv-detail-back-link.mud-button-root:hover,
.mud-button-root.inv-detail-back-link:hover {
    background: transparent !important;
    color: var(--sd-ink-2) !important;
}
.inv-detail-back-link .mud-button-icon-start {
    margin-right: 2px !important;
    margin-left: -2px !important;
}
.inv-detail-back-link .mud-icon-root {
    color: var(--sd-ink-3) !important;
    font-size: 16px !important;
}

.inv-detail-header {
    display: flex;
    /* Gumbi poravnati s dnom naslovnog bloka (INV broj + "Kreirano"), kao u dizajnu. */
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inv-detail-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.inv-detail-status-row {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.inv-detail-title {
    font-family: var(--sd-font-mono, ui-monospace, monospace);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sd-ink);
    margin: 0 0 8px;
}

.inv-detail-meta {
    font-size: 13px;
    color: var(--wms-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-detail-meta-sep {
    color: var(--wms-border);
}

.inv-detail-meta-cancelled {
    color: var(--wms-error);
}

.inv-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Napredak inventure — objedinjena kartica: pojas (skladište/opseg) + napredak po
   artiklu (stavke/skenovi/SN kompaktno) + preostalo + lot-nesklad. Klase inv2-*.
   ════════════════════════════════════════════════════════════════════════════ */
.inv2-card {
    margin-bottom: 16px;
    padding: 0 !important;
    overflow: hidden;
}

/* Gornji pojas: skladište + opseg */
.inv2-head {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    padding: 18px 28px 16px;
    border-bottom: 1px solid var(--sd-hairline);
}
.inv2-head-item { min-width: 160px; }
.inv2-head-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 4px;
}
.inv2-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}

/* Tijelo napretka */
.inv2-body { padding: 18px 28px; }
.inv2-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.inv2-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sd-brand-deep);
}
.inv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sd-brand);
}
.inv2-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}
.inv2-stat { text-align: right; }
.inv2-stat-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--sd-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.inv2-stat-unit {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink-3);
}
.inv2-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-4);
    margin-top: 4px;
}
.inv2-hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}
.inv2-hero-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.inv2-count {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--sd-brand-deep);
    font-variant-numeric: tabular-nums;
}
.inv2-of {
    font-size: 16px;
    font-weight: 600;
    color: var(--sd-ink-2);
}
.inv2-pct {
    font-size: 26px;
    font-weight: 800;
    color: var(--sd-ink);
    font-variant-numeric: tabular-nums;
}

.inv2-bar {
    display: flex;
    gap: 5px;
    height: 12px;
    margin-top: 18px;
}
.inv2-seg {
    flex: 1;
    border-radius: 4px;
    background: var(--sd-hairline);
}
.inv2-seg.is-done { background: var(--sd-brand); }
.inv2-bar-cont {
    height: 12px;
    border-radius: 6px;
    background: var(--sd-hairline);
    margin-top: 18px;
    overflow: hidden;
}
.inv2-bar-cont > span {
    display: block;
    height: 100%;
    background: var(--sd-brand);
    border-radius: 6px;
}
.inv2-legend {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--sd-ink-2);
}
.inv2-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.inv2-swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}
.inv2-swatch.done { background: var(--sd-brand); }
.inv2-swatch.todo {
    background: var(--sd-hairline);
    border: 1px solid var(--sd-ink-4);
}

.inv2-section {
    border-top: 1px solid var(--sd-hairline);
}
.inv2-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 11px;
    user-select: none;
}
.inv2-section > summary::-webkit-details-marker { display: none; }
.inv2-section > summary:hover { background: var(--sd-surface); }
.inv2-section > summary:focus-visible {
    outline: 2px solid var(--sd-brand);
    outline-offset: -2px;
    border-radius: 6px;
}
.inv2-badge {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--sd-hairline);
    color: var(--sd-ink-3);
    font-variant-numeric: tabular-nums;
}
.inv2-badge.warn {
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
}
.inv2-section-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
}
.inv2-section-title .muted {
    font-weight: 500;
    color: var(--sd-ink-3);
}
.inv2-chev {
    flex: none;
    color: var(--sd-ink-4);
    transition: transform 0.18s ease;
}
.inv2-section[open] .inv2-chev { transform: rotate(90deg); }

.inv2-rows {
    padding: 2px 28px 14px 61px;
    /* Duga lista preostalih ne smije pojesti cijeli ekran — scroll unutar kartice. */
    max-height: 320px;
    overflow-y: auto;
}
.inv2-row--more { color: var(--sd-ink-3); font-style: italic; }
.inv2-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.inv2-row:last-child { border-bottom: none; }
.inv2-code {
    flex: none;
    width: 66px;
    font-family: var(--sd-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
    color: var(--sd-ink-3);
}
.inv2-name {
    flex: 1;
    font-size: 14px;
    color: var(--sd-ink);
}
.inv2-qty {
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink-2);
    font-variant-numeric: tabular-nums;
}

.inv2-section.warn {
    border-top: 1px solid var(--sd-hairline);
    background: var(--sd-warn-soft);
}
.inv2-section.warn > summary { padding: 13px 28px; }
.inv2-section.warn > summary:hover { background: transparent; }
.inv2-warn-body { padding: 0 28px 15px 61px; }
.inv2-warn-item + .inv2-warn-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sd-warn-ink);
}
.inv2-warn-body .inv2-code { color: var(--sd-warn-ink); width: auto; }
.inv2-warn-body .inv2-name { font-weight: 600; margin-left: 8px; }
.inv2-warn-note {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--sd-ink-2);
    max-width: 52ch;
}
.inv2-warn-lots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.inv2-warn-lot {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 8px;
    padding: 4px 10px;
}
.inv2-warn-lot-no {
    font-family: var(--sd-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sd-warn-ink);
}
.inv2-warn-lot-qty {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink-2);
    font-variant-numeric: tabular-nums;
}

.inv-lines-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 2px 14px;
}
.inv-recount-toolbar-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink-3);
}
.inv-position-recount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
}
.inv-position-recount {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.inv-position-recount.is-waiting {
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
}
.inv-position-recount.is-done {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
}
.inv-line-actions-locked {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sd-warn-ink);
    white-space: nowrap;
}

/* ── Dijalog: Kontrolno brojanje ─────────────────────────────────────────── */
.cr-header { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px 16px; }
.cr-header-icon {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    background: var(--sd-brand-soft); color: var(--sd-brand-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.cr-header-icon .mud-icon-root { font-size: 21px; }
.cr-header-main { flex: 1; min-width: 0; }
.cr-header-desc { margin: 4px 0 0; font-size: 13px; color: var(--sd-ink-3); line-height: 1.45; }
.cr-body { padding: 0 22px 4px; display: flex; flex-direction: column; gap: 18px; }
.cr-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cr-section-label { font-size: 12px; font-weight: 700; color: var(--sd-ink-2); letter-spacing: 0.01em; }
.cr-count-badge {
    font-size: 11.5px; font-weight: 700; color: var(--sd-brand-deep);
    background: var(--sd-brand-soft); border-radius: 99px; padding: 2px 9px;
}
.cr-positions { background: var(--sd-surface); border-radius: 12px; border: 1px solid var(--sd-hairline); overflow: hidden; }
.cr-position-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sd-hairline-2); }
.cr-position-row.is-last { border-bottom: none; }
.cr-position-main { flex: 1; min-width: 0; }
.cr-position-title { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.cr-code {
    font-family: var(--sd-font-mono); font-size: 12.5px; font-weight: 700; color: var(--sd-ink);
    background: var(--sd-card); border: 1px solid var(--sd-hairline); border-radius: 6px;
    padding: 2px 7px; letter-spacing: 0.02em; flex: 0 0 auto;
}
.cr-position-name { font-size: 13.5px; font-weight: 600; color: var(--sd-ink); }
.cr-position-meta { display: flex; align-items: center; gap: 12px; }
.cr-loc { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sd-font-mono); font-size: 12px; font-weight: 600; color: var(--sd-ink-2); }
.cr-loc-ico { font-size: 13px !important; color: var(--sd-ink-4); }
.cr-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sd-ink-3); }
.cr-by strong { color: var(--sd-ink-2); font-weight: 600; }
.cr-avatar {
    width: 18px; height: 18px; border-radius: 99px; background: var(--sd-surface); color: var(--sd-ink-2);
    border: 1px solid var(--sd-hairline); display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; flex: 0 0 auto;
}
.cr-position-qty { text-align: right; flex: 0 0 auto; padding-left: 8px; }
.cr-qty-val { font-family: var(--sd-font-mono); font-size: 15px; font-weight: 700; color: var(--sd-ink); line-height: 1; }
.cr-qty-uom { font-size: 11px; color: var(--sd-ink-3); font-weight: 600; }
.cr-qty-label { font-size: 10px; color: var(--sd-ink-4); font-weight: 600; margin-top: 3px; letter-spacing: 0.02em; }
.cr-field-label { font-size: 12px; font-weight: 700; color: var(--sd-ink-2); display: block; margin-bottom: 7px; }
.cr-blind-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
    background: var(--sd-warn-soft); border: 1px solid var(--sd-warn-soft); border-radius: 11px;
    font-size: 12.5px; color: var(--sd-warn-ink); line-height: 1.45; font-weight: 500;
}
.cr-blind-note strong { font-weight: 700; }
.cr-blind-ico { color: var(--sd-warn-ink); display: flex; margin-top: 1px; }
.cr-blind-ico .mud-icon-root { font-size: 16px; }
.cr-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 18px 22px 20px; }

/* ── Dijalog: Storniranje inventure ──────────────────────────────────────── */
.cancel-ctx {
    background: var(--sd-surface); border-radius: 12px; border: 1px solid var(--sd-hairline);
    padding: 13px 15px; display: flex; flex-direction: column; gap: 10px;
}
.cancel-ctx-head { display: flex; align-items: center; gap: 10px; }
.cancel-ctx-name { font-size: 13.5px; font-weight: 700; color: var(--sd-ink); }
.cancel-ctx-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cancel-meta-tag {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    color: var(--sd-ink-2); background: var(--sd-surface); border: 1px solid var(--sd-hairline);
    border-radius: 99px; padding: 3px 9px; white-space: nowrap;
}
.cancel-meta-tag.is-status { color: var(--sd-warn-ink); background: var(--sd-warn-soft); border-color: var(--sd-warn-soft); }
.cancel-meta-ico { font-size: 12px !important; color: var(--sd-ink-4); }
.cancel-meta-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--sd-warn); flex: 0 0 auto; }
.cancel-reason-labelrow { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.cancel-reason-label { font-size: 12px; font-weight: 700; color: var(--sd-ink-2); letter-spacing: 0.01em; }
.cancel-required { font-size: 11.5px; color: var(--sd-danger); font-weight: 700; }
.cancel-reason-spacer { flex: 1; }
.cancel-counter { font-family: var(--sd-font-mono); font-size: 11.5px; font-weight: 600; }
.cancel-counter.is-valid { color: var(--sd-brand-deep); }
.cancel-counter.is-empty { color: var(--sd-ink-4); }
.cancel-counter.is-invalid { color: var(--sd-danger); }
.cancel-textarea-wrap {
    background: var(--sd-card); border-radius: 12px; border: 1.5px solid var(--sd-hairline);
    padding: 11px 14px; transition: border-color 120ms, box-shadow 120ms;
}
.cancel-textarea-wrap.is-valid { border-color: var(--sd-brand); box-shadow: 0 0 0 4px var(--sd-brand-tint); }
.cancel-textarea-wrap.is-invalid { border-color: var(--sd-danger); box-shadow: 0 0 0 4px var(--sd-danger-tint); }
.cancel-textarea {
    width: 100%; border: 0; outline: none; resize: vertical; background: transparent;
    font-size: 14px; color: var(--sd-ink); line-height: 1.5; min-height: 62px;
}
.cancel-textarea::placeholder { color: var(--sd-ink-4); }
.cancel-error { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--sd-danger); }
.cancel-lock-note { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11.5px; color: var(--sd-ink-3); }
.cancel-lock-ico { font-size: 13px !important; color: var(--sd-ink-4); }
/* Klikabilni red za odabir kontrolnog brojanja */
.inv-position-op.is-selectable {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.inv-position-op.is-selectable:hover {
    background: var(--sd-surface);
}
.inv-position-op.is-selected {
    background: var(--sd-brand-soft);
}


.inv-lines-empty {
    text-align: center;
    padding: 48px 24px;
}

.inv-lines-empty-text {
    font-size: 14px;
    color: var(--wms-text-muted);
    max-width: 420px;
    margin: 16px auto 0;
    line-height: 1.5;
}

/* Očekivani artikli (opseg ByArticles) — prikaz prije nego operateri počnu skenirati. */
.inv-expected {
    max-width: 520px;
    margin: 0 auto 8px;
    padding: 14px 16px;
    text-align: left;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-lg);
}
.inv-expected-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink-2);
    margin-bottom: 10px;
}
.inv-expected-list {
    margin-top: 0;
}

/* Klikabilni sort header (npr. ERP usporedba na /zalihe) */
.sd-sortable {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
}
.sd-sortable--right {
    flex-direction: row-reverse;
}
.sd-sortable:hover {
    color: var(--sd-brand-deep);
}
.sd-sortable.is-active {
    color: var(--sd-brand-deep);
    font-weight: 600;
}
.sd-sortable .mud-icon-root {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

@media (max-width: 900px) {
    .inv-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .inv-detail-actions {
        width: 100%;
    }
    .inv-detail-actions .mud-button-root {
        flex: 1 1 auto;
    }
}

/* ── Assign dialog ─────────────────────────────────────────────────────── */
.inv-assign-note-row {
    margin-bottom: 12px;
}

.inv-assign-note-name {
    font-weight: 500;
    color: var(--wms-text);
    display: block;
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Soft Daylight komponente (.sd-*)
   Sve nove klase prefixed s `sd-` — namijenjene migriranim stranicama
   (trenutno: Artikli). Ne utječu na stranice koje koriste --wms-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar icon button (help, bell) ──────────────────────────────────── */
.sd-icon-button {
    width: var(--sd-btn-icon) !important;
    height: var(--sd-btn-icon) !important;
    border-radius: var(--sd-radius-lg) !important;
    background: var(--sd-card) !important;
    border: 1px solid var(--sd-hairline) !important;
    color: var(--sd-ink-2) !important;
    transition: background 150ms, border-color 150ms !important;
}
.sd-icon-button:hover {
    background: var(--sd-surface) !important;
    border-color: var(--sd-ink-4) !important;
}
.sd-icon-button .mud-icon-root {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}

/* ── User pill (avatar + ime + chevron) ───────────────────────────────── */
.sd-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    height: var(--sd-btn-icon);
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-pill);
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-ink);
    cursor: default;
    transition: background 150ms;
}
.sd-user-pill:hover {
    background: var(--sd-surface);
}
.sd-user-pill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Sadržajna kartica (oko cijelog page contenta) ────────────────────── */
.sd-content-card {
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    box-shadow: var(--sd-shadow-card);
    overflow: hidden;
}

/* ── Page header unutar kartice ───────────────────────────────────────── */
.sd-card-header {
    padding: 24px 28px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
/* Kad nema toolbara odmah ispod, dodaj bottom padding tako da tablica/empty/loading
   ne zalijepe direktno za subtitle. Articles ima toolbar pa nije pogođen. */
.sd-card-header:not(:has(+ .sd-toolbar)) {
    padding-bottom: 20px;
}
.sd-card-header-main {
    min-width: 0;
    flex: 1 1 auto;
}
.sd-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.sd-breadcrumb {
    font-family: var(--sd-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sd-ink-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sd-breadcrumb a {
    color: var(--sd-ink-3);
    text-decoration: none;
    transition: color 150ms;
}
.sd-breadcrumb a:hover {
    color: var(--sd-ink);
}
.sd-breadcrumb-sep {
    color: var(--sd-ink-4);
}
.sd-breadcrumb-current {
    color: var(--sd-ink-2);
}

/* ── Page title + subtitle ────────────────────────────────────────────── */
.sd-page-title {
    font-family: var(--sd-font);
    font-size: var(--sd-text-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sd-ink);
    margin: 0;
    line-height: 1.15;
}
.sd-page-title:focus,
.sd-page-title:focus-visible {
    outline: none;
}
.sd-page-subtitle {
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sd-ink-3);
    margin: 6px 0 0;
    line-height: 1.45;
}

/* ── Action buttons (primary / secondary) ─────────────────────────────── */
.sd-btn-primary.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled.sd-btn-primary {
    background-color: var(--sd-brand) !important;
    color: var(--sd-on-accent) !important;
    height: var(--sd-btn-h) !important;
    border-radius: var(--sd-radius-lg) !important;
    box-shadow: var(--sd-shadow-btn) !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
}
.sd-btn-primary.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled.sd-btn-primary:hover {
    background-color: var(--sd-brand-deep) !important;
    box-shadow: var(--sd-shadow-btn) !important;
}

.sd-btn-secondary.mud-button-root,
.mud-button-root.sd-btn-secondary {
    background-color: var(--sd-card) !important;
    color: var(--sd-ink-2) !important;
    height: var(--sd-btn-h) !important;
    border: 1px solid var(--sd-hairline) !important;
    border-radius: var(--sd-radius-lg) !important;
    box-shadow: none !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
}
.sd-btn-secondary.mud-button-root:hover,
.mud-button-root.sd-btn-secondary:hover {
    background-color: var(--sd-surface) !important;
    border-color: var(--sd-ink-4) !important;
}

/* ── Toolbar (filter row) ─────────────────────────────────────────────── */
/* Svi elementi (search, filteri, meta count, bulk banner) idu strogo lijevo.
   Nikad space-between — ako neki child treba auto margin, koristi posebnu klasu. */
.sd-toolbar {
    padding: 20px 28px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.sd-toolbar > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Search field ─────────────────────────────────────────────────────── */
.sd-search.mud-input-control {
    width: 360px;
    flex: 0 0 360px;
}
.sd-search .mud-input-outlined-border {
    border-radius: var(--sd-radius-xl) !important;
    border-color: var(--sd-hairline) !important;
}
.sd-search .mud-input.mud-input-outlined {
    height: var(--sd-input-h) !important;
    font-family: var(--sd-font) !important;
    font-size: 14px !important;
}
.sd-search .mud-input-slot.mud-input-root-outlined {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.sd-search input::placeholder {
    color: var(--sd-ink-4) !important;
    opacity: 1 !important;
}

/* ── Filter select (Jedinica mjere, Status, Rola, …) ───────────────── */
/* Fiksna kompaktna širina — sprječava da MudSelect-i naraste do
   maksimalne širine toolbara. Sva tri ekrana (Articles, Users, Inventory)
   koriste istu kompaktnu vrijednost.

   VAŽNO: ova klasa MORA se postaviti preko `OuterClass="sd-filter-select"`,
   ne `Class="sd-filter-select"`. MudSelect 9.4 stavlja OuterClass na
   vanjski wrapper div (flex child toolbara), dok Class ide na unutarnji
   element. Bez OuterClass selektor ne pogađa pravi element i select se
   raširi na cijelu dostupnu širinu (vidi: feedback-mudblazor9-mudselect-outerclass). */
.sd-filter-select {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}
/* Šira varijanta za polja gdje labela/vrijednost ne stane u 180px (rijetko). */
.sd-filter-select--wide {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
}
.sd-filter-select .mud-input-outlined-border {
    border-radius: var(--sd-radius-xl) !important;
    border-color: var(--sd-hairline) !important;
}
.sd-filter-select .mud-input.mud-input-outlined {
    height: var(--sd-input-h) !important;
    font-family: var(--sd-font) !important;
}
.sd-filter-select .mud-input-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--sd-ink-4) !important;
}
.sd-filter-select .mud-select-input {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--sd-ink) !important;
}

/* ── Više filtera (dashed button) ─────────────────────────────────────── */
.sd-dashed-button.mud-button-root,
.mud-button-root.sd-dashed-button {
    height: var(--sd-input-h) !important;
    border: 1px dashed var(--sd-ink-4) !important;
    background: transparent !important;
    color: var(--sd-ink-3) !important;
    border-radius: var(--sd-radius-xl) !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}
.sd-dashed-button.mud-button-root:hover,
.mud-button-root.sd-dashed-button:hover {
    border-color: var(--sd-ink-3) !important;
    color: var(--sd-ink-2) !important;
    background: var(--sd-surface) !important;
}

/* ── Bulk-select banner ("X odabrano") ────────────────────────────────── */
.sd-bulk-banner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    padding: 8px 12px;
    border-radius: var(--sd-radius-lg);
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 600;
}
.sd-bulk-banner-count {
    font-weight: 700;
}
.sd-bulk-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sd-bulk-banner-actions button {
    background: transparent;
    border: none;
    color: var(--sd-brand-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--sd-radius-md);
    cursor: pointer;
    transition: background 150ms;
}
.sd-bulk-banner-actions button:hover {
    background: rgba(63,122,85,0.10);
}

/* ── Tablica (sd-table scope) ─────────────────────────────────────────── */
.sd-table .mud-table {
    border-collapse: separate;
    border-spacing: 0;
    background: transparent !important;
}
.sd-table .mud-table-root {
    background: transparent !important;
}
.sd-table .mud-table-head .mud-table-row {
    background: var(--sd-surface) !important;
}
.sd-table .mud-table-head .mud-table-cell {
    font-family: var(--sd-font) !important;
    font-size: var(--sd-text-label) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--sd-ink-3) !important;
    border-top: 1px solid var(--sd-hairline-soft) !important;
    border-bottom: 1px solid var(--sd-hairline-soft) !important;
    padding: 10px 16px !important;
    background: var(--sd-surface) !important;
}
.sd-table .mud-table-head .mud-table-cell:first-child {
    padding-left: 22px !important;
}
.sd-table .mud-table-head .mud-table-cell:last-child {
    padding-right: 24px !important;
}
.sd-table .mud-table-body .mud-table-row {
    background: var(--sd-card) !important;
    transition: background 100ms !important;
}
.sd-table .mud-table-body .mud-table-cell {
    border: none !important;
    border-bottom: 1px solid var(--sd-hairline-soft) !important;
    padding: 0 16px !important;
    height: var(--sd-row-h) !important;
    font-family: var(--sd-font) !important;
    font-size: var(--sd-text-body) !important;
    color: var(--sd-ink) !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.sd-table .mud-table-body .mud-table-cell:first-child {
    padding-left: 22px !important;
}
.sd-table .mud-table-body .mud-table-cell:last-child {
    padding-right: 24px !important;
}
.sd-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}
.sd-table .mud-table-body .mud-table-row:hover {
    background: var(--sd-surface) !important;
}
.sd-table .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--sd-surface) !important;
}

/* Row checkbox: opacity 0.4 → 1 na hover row */
.sd-table .sd-row-check .mud-checkbox {
    opacity: 0.4;
    transition: opacity 140ms;
}
.sd-table .mud-table-body .mud-table-row:hover .sd-row-check .mud-checkbox,
.sd-table .sd-row-check.is-checked .mud-checkbox {
    opacity: 1;
}


/* Mono ćelije (šifra, barkod) */
.sd-mono {
    font-family: var(--sd-font-mono) !important;
    font-size: var(--sd-text-mono) !important;
    font-weight: 500;
    color: var(--sd-ink);
}
.sd-mono-muted {
    font-family: var(--sd-font-mono) !important;
    font-size: var(--sd-text-mono) !important;
    font-weight: 500;
    color: var(--sd-ink-3);
}

/* Naziv ćelija — ellipsis */
.sd-cell-name {
    font-family: var(--sd-font) !important;
    font-size: var(--sd-text-body) !important;
    font-weight: 500 !important;
    color: var(--sd-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* JMJ pill */
.sd-jmj-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--sd-radius-sm);
    background: var(--sd-surface);
    color: var(--sd-ink-2);
    font-family: var(--sd-font);
    font-size: 11.5px;
    font-weight: 600;
}

/* Barkod placeholder ("nije dodijeljen") */
.sd-barcode-missing {
    font-family: var(--sd-font);
    font-size: 13px;
    font-style: italic;
    color: var(--sd-ink-4);
}

/* Status cell */
.sd-status-active {
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-ink-3);
}
.sd-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-ink-3);
}
.sd-status-inactive::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-ink-5);
    flex-shrink: 0;
}
.sd-status-needs-barcode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: var(--sd-radius-pill);
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    font-family: var(--sd-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.sd-status-needs-barcode::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-warn);
    flex-shrink: 0;
}

/* ── Row actions (Edit / Deactivate / Delete) — grupirano u pill ──────── */
.sd-row-actions {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-md);
    background: var(--sd-card);
    overflow: hidden;
    opacity: 0;
    transition: opacity 140ms;
}
.sd-table .mud-table-body .mud-table-row:hover .sd-row-actions {
    opacity: 1;
}
.sd-row-actions .mud-icon-button {
    border-radius: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
}
.sd-row-actions .mud-icon-button:hover {
    background: var(--sd-surface-hover) !important;
}
.sd-row-actions .mud-icon-button + .mud-icon-button {
    border-left: 1px solid var(--sd-hairline);
}
.sd-row-actions .mud-icon-button .mud-icon-root {
    color: var(--sd-ink-2) !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── Inventory list — two-line cell (Skladište + Opseg) ──────────────── */
.sd-cell-two-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-cell-sub {
    font-size: 12px;
    color: var(--sd-ink-3);
}

/* ── InventoryDetail: prigušen tekst + operateri (kartica "Dodijeljeni operateri") ── */
.inv-meta-muted {
    color: var(--sd-ink-4);
}

.inv-op-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.inv-op-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
}
.inv-op-avatar-stack {
    display: flex;
    align-items: center;
    padding-left: 9px;
}
.inv-op-avatar--stacked {
    border: 2px solid var(--sd-card);
    margin-left: -9px;
}
.inv-op-avatar--more {
    background: var(--sd-surface);
    color: var(--sd-ink-3);
}
.inv-op-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.inv-op-counts {
    font-size: 13.5px;
    color: var(--sd-ink-2);
    white-space: nowrap;
}
.inv-op-counts strong {
    color: var(--sd-ink);
    font-weight: 700;
}
.inv-op-count-submitted {
    color: var(--sd-brand-deep);
}
.inv-op-count-inprogress {
    color: var(--sd-warn-ink);
}
.inv-op-name {
    font-weight: 600;
    color: var(--sd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-op-zones {
    font-size: 12px;
    color: var(--sd-ink-3);
    white-space: nowrap;
}
.inv-op-chip {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.inv-op-chip.is-submitted {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
}
.inv-op-chip.is-pending {
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
}
.inv-op-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
}
.inv-op-grid-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 10px;
    min-width: 0;
    /* Ista kartica za sve — zebra (nth-child) je u 3-stupčanoj mreži izgledala kao isticanje. */
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
}
.inv-op-grid-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Povijest brojanja (InventoryDetail meta Red 4) ─────────────────── */
.inv-history-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.inv-history-filter { flex: 0 0 200px; }
.inv-history-filter--search { flex: 0 0 280px; }
.inv-history-table-wrap { overflow-x: auto; }
.inv-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.inv-history-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
    padding: 6px 10px;
    border-bottom: 1px solid var(--sd-hairline);
    white-space: nowrap;
}
.inv-history-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--sd-hairline-soft);
    color: var(--sd-ink-2);
    vertical-align: top;
}
.inv-history-time {
    font-family: var(--sd-font-mono);
    font-size: 12.5px;
    white-space: nowrap;
    width: 1%;
}
.inv-history-erp {
    font-family: var(--sd-font-mono);
    font-size: 12px;
    color: var(--sd-ink-3);
    margin-right: 6px;
}
.inv-history-lot-cell {
    font-family: var(--sd-font-mono);
    font-size: 12px;
    color: var(--sd-ink-3);
    white-space: nowrap;
    width: 1%;
}
.inv-history-location { font-family: var(--sd-font-mono); font-size: 12.5px; white-space: nowrap; width: 1%; }
.inv-history-qty {
    font-family: var(--sd-font-mono);
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
/* Header stupca Količina mora pratiti desno poravnanje vrijednosti —
   bez ovoga `.inv-history-table th` (lijevo) pobjeđuje po specifičnosti. */
.inv-history-table th.inv-history-qty { text-align: right; }
.inv-history-qty-neg { color: var(--sd-warn-ink); font-weight: 600; }
.inv-history-target { margin-left: 8px; font-size: 12px; color: var(--sd-ink-3); white-space: nowrap; }
.inv-history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.inv-history-pager-label {
    font-family: var(--sd-font-mono);
    font-size: 12.5px;
    color: var(--sd-ink-3);
}


/* ── Zalihe → ERP usporedba (Soft Daylight) ──────────────────────────── */
/* Naziv artikla skraćen na dva retka */
.sd-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Mjerna jedinica kao mali chip */
.sd-uom-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 24px;
    padding: 0 9px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 6px;
    font-family: var(--sd-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sd-ink-2);
}

/* Brojčane ćelije — mono, desno poravnate, prigušena nula */
.sd-num {
    font-family: var(--sd-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}
.sd-num--strong { font-weight: 700; }
.sd-num--muted  { color: var(--sd-ink-3); }
.sd-num--zero   { color: var(--sd-ink-5); }

/* Razlika — semantika (slaže se / višak / manjak / nije brojano) */
.sd-diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sd-font-mono);
    font-size: 13px;
    font-weight: 700;
}
.sd-diff--up   { color: var(--sd-warn-ink); }
.sd-diff--down { color: var(--sd-danger-deep); }
.sd-diff-unit {
    font-family: var(--sd-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sd-ink-4);
    letter-spacing: 0.02em;
}
.sd-diff-eq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sd-brand-deep);
}
.sd-diff-none {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sd-ink-3);
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 99px;
    padding: 4px 11px;
}
.sd-diff-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    border: 1.5px solid var(--sd-ink-4);
}

/* ── Toolbar count info ──────────────────────────────────────────────── */
.sd-toolbar-spacer { flex: 1 1 auto; }
.sd-toolbar-count {
    font-family: var(--sd-font);
    font-size: 13px;
    color: var(--sd-ink-3);
}

/* ── Footer (paginacija) ──────────────────────────────────────────────── */
.sd-table-footer {
    background: var(--sd-surface);
    border-top: 1px solid var(--sd-hairline-soft);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sd-table-footer-count {
    font-family: var(--sd-font);
    font-size: 13px;
    color: var(--sd-ink-3);
}
.sd-table-footer-count strong {
    color: var(--sd-ink);
    font-weight: 600;
}
.sd-table-footer .mud-pagination .mud-button-root {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--sd-radius-md) !important;
    font-family: var(--sd-font) !important;
    font-size: 13px !important;
    color: var(--sd-ink-2) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sd-table-footer .mud-pagination .mud-button-root:hover {
    background: var(--sd-surface-hover) !important;
}
.sd-table-footer .mud-pagination .mud-button-root.mud-button-filled,
.sd-table-footer .mud-pagination .mud-button-root.mud-pagination-selected {
    background: var(--sd-brand-soft) !important;
    color: var(--sd-brand-deep) !important;
    font-weight: 600 !important;
}

/* ── Empty state unutar kartice ──────────────────────────────────────── */
.sd-empty {
    padding: 64px 28px;
    text-align: center;
    color: var(--sd-ink-3);
    font-family: var(--sd-font);
    font-size: 14px;
}

/* Hero varijanta — empty state vertikalno centriran u preostaloj visini kartice.
   Zahtijeva da je roditelj (sd-content-card) flex column i ima dovoljnu visinu
   (npr. .sd-content-card--fill). */
.sd-empty--center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    min-height: 360px;
}
/* Samo hero-ikona (direktno dijete) se uvećava na 40px — ikone unutar gumba
   (npr. StartIcon na "Otvori Pregled") ostaju normalne veličine. */
.sd-empty--center > .mud-icon-root {
    font-size: 40px !important;
    width: 40px;
    height: 40px;
}

/* Card varijanta koja popunjava preostalu visinu viewporta — koristi se kad
   sadržaj treba "živjeti" u cijelom ekranu (npr. zone detail s praznim
   stanjem). 140px = topbar (~64) + container padding (48) + breathing room. */
.sd-content-card--fill {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
}

/* Generička "‹ natrag" poveznica iznad breadcrumba u card headeru. */
.sd-back-link.mud-button-root {
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    margin-bottom: 6px !important;
    font-family: var(--sd-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--sd-ink-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    align-self: flex-start;
}
.sd-back-link.mud-button-root:hover {
    background: transparent !important;
    color: var(--sd-ink-2) !important;
}
.sd-back-link .mud-button-icon-start {
    margin-right: 2px !important;
    margin-left: -2px !important;
}
.sd-back-link .mud-icon-root {
    color: var(--sd-ink-3) !important;
    font-size: 16px !important;
}

/* ── Loading skeleton wrapper ────────────────────────────────────────── */
.sd-loading {
    padding: 20px 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Soft Daylight — Dijalozi (modali)
   Shell, polja, info-panel, drop-zone, spec-card, ghost footer, meta linija.
   Izvor: docs/design/Blazor/.../design_handoff_artikli_soft_daylight/
   Selektor `.mud-dialog:has(.sd-dialog-shell)` zahtijeva moderne preglednike
   (Chrome 105+, Safari 15.4+, Firefox 121+) — interni admin UI je OK.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global backdrop override — svi dijalozi dobivaju soft daylight tint */
.mud-overlay-dialog .mud-overlay-scrim,
.mud-overlay.mud-overlay-dialog {
    background-color: rgba(29, 32, 26, 0.32) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Modal card override — radi samo kad DialogContent renderira .sd-dialog-shell */
.mud-dialog:has(.sd-dialog-shell) {
    background: var(--sd-card) !important;
    border-radius: var(--sd-radius-card) !important;
    border: 1px solid var(--sd-hairline) !important;
    box-shadow:
        0 1px 2px rgba(60, 55, 40, 0.06),
        0 24px 60px -16px rgba(40, 35, 20, 0.30) !important;
    overflow: hidden;
    padding: 0 !important;
    /* Nikad viši od viewporta (mali laptopi) — skrola se samo body,
       header i footer s tipkama ostaju uvijek vidljivi */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
}

/* Content wrapper propagira visinsko ograničenje do shella
   (.mud-focus-trap između njih je display: contents pa ne smeta) */
.mud-dialog:has(.sd-dialog-shell) .mud-dialog-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Width control — set on shell, applied to .mud-dialog parent */
.mud-dialog:has(.sd-dialog-w-460) {
    max-width: 460px !important;
    width: 460px !important;
}
.mud-dialog:has(.sd-dialog-w-520) {
    max-width: 520px !important;
    width: 520px !important;
}
.mud-dialog:has(.sd-dialog-w-560) {
    max-width: 560px !important;
    width: 560px !important;
}
.mud-dialog:has(.sd-dialog-w-860) {
    max-width: min(860px, calc(100vw - 32px)) !important;
    width: 860px !important;
}

/* Ukloni MudBlazor unutrašnji padding (mi pišemo header/body/footer ručno).
   Descendant selektor (ne direct child) jer MudBlazor wrappa sadržaj u
   .mud-focus-trap (display: contents) — direct-child kombinator promaši. */
.mud-dialog:has(.sd-dialog-shell) .mud-dialog-content,
.mud-dialog:has(.sd-dialog-shell) .mud-dialog-actions,
.mud-dialog:has(.sd-dialog-shell) .mud-dialog-title {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Shell sam je flex stupac koji nosi header/body/footer */
.sd-dialog-shell {
    display: flex;
    flex-direction: column;
    font-family: var(--sd-font);
    color: var(--sd-ink);
    width: 100%;
    min-height: 0;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.sd-modal-header {
    padding: 22px 28px 6px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}
.sd-modal-title {
    margin: 0;
    flex: 1;
    font-family: var(--sd-font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sd-ink);
    line-height: 1.3;
}
.sd-modal-close {
    width: 34px;
    height: 34px;
    border-radius: var(--sd-radius-lg);
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    color: var(--sd-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 150ms, color 150ms;
    padding: 0;
}
.sd-modal-close:hover {
    background: var(--sd-surface);
    color: var(--sd-ink);
}
.sd-modal-close .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── Body ────────────────────────────────────────────────────────────── */
.sd-modal-body {
    padding: 14px 28px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Kad dijalog dosegne max-height, body preuzima skrolanje */
    overflow-y: auto;
    min-height: 0;
}
.sd-modal-body-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.sd-modal-footer {
    margin-top: 12px;
    padding: 16px 28px;
    background: var(--sd-surface);
    border-top: 1px solid var(--sd-hairline-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.sd-modal-footer-ghost {
    margin-right: auto;
}

/* Ghost gumb u footeru (lijevo) — npr. "Preuzmi predložak" */
.sd-footer-ghost.mud-button-root,
.mud-button-root.sd-footer-ghost {
    height: 40px !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--sd-brand-deep) !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.sd-footer-ghost.mud-button-root:hover,
.mud-button-root.sd-footer-ghost:hover {
    background: rgba(63, 122, 85, 0.06) !important;
    color: var(--sd-brand-deep) !important;
}

/* Disabled state primary CTA u footeru (mi ga targetiramo s posebnim klasom
   jer MudBlazor disabled style ne odgovara dizajnu — surface bg, ink-4 tekst, bez sjene) */
.sd-btn-primary.mud-button-root.mud-button-filled.mud-button-disabled,
.mud-button-root.mud-button-filled.sd-btn-primary.mud-button-disabled,
.sd-btn-primary.mud-button-root.mud-button-filled:disabled,
.mud-button-root.mud-button-filled.sd-btn-primary:disabled {
    background-color: var(--sd-surface) !important;
    color: var(--sd-ink-4) !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* ── Meta linija (Uredi dialog) ──────────────────────────────────────── */
.sd-modal-meta {
    margin-top: 4px;
    padding: 10px 4px 2px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--sd-font);
    font-size: 12px;
    color: var(--sd-ink-3);
}
.sd-modal-meta strong {
    color: var(--sd-ink-2);
    font-weight: 600;
}
.sd-modal-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 99px;
    background: var(--sd-ink-4);
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Field — floating-label container (input/textarea/select)
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-field {
    position: relative;
    min-height: 56px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: var(--sd-radius-xl);
    padding: 8px 14px 10px;
    transition: border-color 140ms, box-shadow 140ms;
}
.sd-field:focus-within {
    border-color: var(--sd-brand);
    box-shadow: 0 0 0 3px rgba(91, 160, 113, 0.15);
}
.sd-field.is-error {
    border-color: var(--sd-danger);
}
.sd-field.is-error:focus-within {
    border-color: var(--sd-danger);
    box-shadow: 0 0 0 3px rgba(192, 71, 61, 0.15);
}
.sd-field-label {
    font-family: var(--sd-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
    line-height: 1.3;
}
.sd-field-required {
    color: var(--sd-brand);
    margin-left: 2px;
}
.sd-field-input,
.sd-field-textarea {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--sd-ink);
    line-height: 1.4;
}
.sd-field-input::placeholder,
.sd-field-textarea::placeholder {
    color: var(--sd-ink-4);
    opacity: 1;
}
.sd-field-input.is-mono,
.sd-field-textarea.is-mono {
    font-family: var(--sd-font-mono);
    font-size: 13.5px;
}
.sd-field-textarea {
    resize: none;
    min-height: 48px;
    line-height: 1.5;
}
/* Native <select> popup: transparentna pozadina polja tjera Chrome/Win u
   stilizirani prikaz gdje opcije ostanu svijetle. Bojamo opcije eksplicitno. */
html[data-theme="dark"] select.sd-field-input option {
    background-color: var(--sd-card);
    color: var(--sd-ink);
}
/* SdDateInput — tekstualni hr prikaz + gumb koji otvara kalendar skrivenog nativnog inputa. */
.sd-date-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sd-date-input-btn {
    border: 0;
    padding: 0 2px;
    background: transparent;
    cursor: pointer;
    color: var(--sd-ink-3);
    display: inline-flex;
    align-items: center;
}
.sd-date-input-btn:hover {
    color: var(--sd-brand);
}
/* Nevidljiv, ali renderiran (showPicker ne radi na display:none); sidren uz gumb
   da se browser kalendar otvori uz polje. */
.sd-date-input-native {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    pointer-events: none;
}
.sd-field-hint {
    font-family: var(--sd-font);
    font-size: 12px;
    color: var(--sd-ink-3);
    margin-top: 6px;
    padding-left: 4px;
    line-height: 1.45;
}
.sd-field-hint.is-error {
    color: var(--sd-danger);
}
.sd-field-hint.is-warn {
    color: var(--sd-warn-ink);
}

/* Sd select — MudSelect inside SdField */
.sd-field .sd-field-select.mud-input-control {
    margin: 0;
    padding: 0;
}
.sd-field .sd-field-select .mud-input.mud-input-underline::before,
.sd-field .sd-field-select .mud-input.mud-input-underline::after {
    display: none !important;
    border: 0 !important;
}
.sd-field .sd-field-select .mud-input-slot {
    padding: 0 !important;
    min-height: 0 !important;
}
.sd-field .sd-field-select .mud-select-input {
    font-family: var(--sd-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sd-ink) !important;
    padding: 0 !important;
}
.sd-field .sd-field-select .mud-input-adornment {
    color: var(--sd-ink-4) !important;
}

/* Sd warehouse checklist — vidljiva lista poslovnih jedinica (terminal dialog) */
.sd-wh-checklist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    background: var(--sd-card);
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}
.sd-wh-checkitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px 2px 4px;
    border-bottom: 1px solid var(--sd-hairline);
}
.sd-wh-checkitem:last-child {
    border-bottom: 0;
}
.sd-wh-checkitem .mud-checkbox {
    flex: 1 1 auto;
    min-width: 0;
}
.sd-wh-checkitem .mud-checkbox .mud-button-root {
    color: var(--sd-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Type options — segmentirani radio group (npr. tip skladišta)
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.sd-type-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-card);
    cursor: pointer;
    transition: border-color 140ms, background 140ms, box-shadow 140ms;
}
.sd-type-option:hover {
    border-color: var(--sd-ink-4);
    background: var(--sd-surface);
}
.sd-type-option.is-selected {
    border-color: var(--sd-brand);
    background: var(--sd-brand-tint);
    box-shadow: 0 0 0 3px rgba(91, 160, 113, 0.12);
}
.sd-type-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--sd-ink-4);
    border-radius: 50%;
    margin: 2px 0 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 140ms;
}
.sd-type-option input[type="radio"]:checked {
    border-color: var(--sd-brand);
}
.sd-type-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--sd-brand);
}
.sd-type-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sd-type-option-title {
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.3;
}
.sd-type-option-desc {
    font-family: var(--sd-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--sd-ink-3);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Secret display — jednokratan prikaz PIN-a / lozinke (GeneratedSecretDialog)
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-secret-hint {
    margin: 0;
    font-family: var(--sd-font);
    font-size: 13px;
    color: var(--sd-ink-2);
    line-height: 1.5;
}
.sd-secret-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 16px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-xl);
}
.sd-secret-value {
    font-family: var(--sd-font-mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--sd-brand-deep);
    line-height: 1;
}
.sd-secret-copy {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: var(--sd-radius-lg);
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    color: var(--sd-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms, color 140ms, border-color 140ms;
    flex-shrink: 0;
}
.sd-secret-copy:hover {
    background: var(--sd-surface);
    color: var(--sd-ink);
    border-color: var(--sd-ink-4);
}
.sd-secret-copy .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Code preview — preview generirane šifre (npr. lokacije)
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-code-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-lg);
}
.sd-code-preview-label {
    font-family: var(--sd-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.sd-code-preview-value {
    font-family: var(--sd-font-mono);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sd-ink);
}

/* ── Segmented control (Pojedinačno | Raspon) ────────────────────────── */
.sd-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-lg);
}
.sd-seg-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    border-radius: calc(var(--sd-radius-lg) - 3px);
    padding: 7px 12px;
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink-3);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sd-seg-btn:hover { color: var(--sd-ink); }
.sd-seg-btn.is-active {
    background: var(--sd-card);
    border-color: var(--sd-hairline);
    color: var(--sd-brand-deep);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Range (bulk) inputs ──────────────────────────────────────────────── */
.sd-range-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr 0.7fr 1fr;
    gap: 10px;
}
.sd-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sd-font);
    font-size: 13px;
    color: var(--sd-ink-2);
    cursor: pointer;
    user-select: none;
}
.sd-check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sd-brand);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Modal context — naslovna meta linija u Body-u (npr. "U skladištu X")
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-modal-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-lg);
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
}
.sd-modal-context strong {
    color: var(--sd-ink-2);
    font-weight: 600;
}
.sd-modal-context .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--sd-ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Color swatch — color picker wrapped in SdField
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.sd-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.sd-color-swatch.is-empty {
    background: var(--sd-surface);
    border-style: dashed;
    border-color: var(--sd-hairline);
}
.sd-color-input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-family: var(--sd-font-mono);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sd-ink);
    line-height: 1.4;
    text-transform: uppercase;
}
.sd-color-input::placeholder {
    color: var(--sd-ink-4);
    opacity: 1;
}
.sd-color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.sd-color-preset {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    transition: transform 120ms, box-shadow 120ms;
}
.sd-color-preset:hover {
    transform: scale(1.06);
}
.sd-color-preset.is-selected {
    box-shadow: 0 0 0 2px var(--sd-card), 0 0 0 4px var(--sd-brand);
}
.sd-color-clear {
    margin-left: auto;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sd-ink-3);
    font-family: var(--sd-font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 6px;
}
.sd-color-clear:hover {
    color: var(--sd-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Section header — naslov sa akcijama unutar sd-content-card
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-section-bar {
    padding: 16px 28px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--sd-hairline-soft);
}
.sd-section-bar:first-child {
    border-top: 0;
}
.sd-section-title {
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-ink-2);
    margin: 0;
    letter-spacing: -0.005em;
}
.sd-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Title meta — sekundarni elementi uz page title (kod, tip, ERP, status)
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sd-title-code {
    font-family: var(--sd-font-mono);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sd-ink-3);
}
.sd-title-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
}
.sd-title-meta strong {
    color: var(--sd-ink-2);
    font-weight: 600;
}
.sd-title-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 99px;
    background: var(--sd-ink-4);
    display: inline-block;
}
.sd-zone-swatch {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    display: inline-block;
}
.sd-zone-swatch--sm {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Info panel — brand-tint helper s alert ikonom
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-info-panel {
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-lg);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-2);
    line-height: 1.45;
}
.sd-info-panel strong {
    color: var(--sd-ink);
    font-weight: 600;
}
.sd-info-panel-icon {
    color: var(--sd-brand);
    display: inline-flex;
    margin-top: 1px;
    flex-shrink: 0;
}
.sd-info-panel-icon .mud-icon-root {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

.sd-info-panel--warn {
    background: var(--sd-warn-soft);
    border-color: var(--sd-warn-soft);
    border-left: 3px solid var(--sd-warn);
    color: var(--sd-warn-ink);
}
.sd-info-panel--warn .mud-icon-root { color: var(--sd-warn); }
.sd-info-panel-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.sd-info-panel-title {
    font-weight: 600;
    color: var(--sd-warn-ink);
    font-size: 13px;
}
.sd-info-panel-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sd-ink-2);
    font-size: 12.5px;
}
/* Paragraf teksta (cijela rečenica s inline <strong>): normalan blok-prelom.
   Bez ovog inline-flex baza dijeli tekst oko <strong> u zasebne flex-iteme = izgleda kao dva stupca. */
.sd-info-panel-text--block {
    display: block;
}
.sd-info-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.sd-info-panel-actions .sd-link-button { margin-top: 0; }

/* ── Naplata/pristanak okvir (Nova poslovna jedinica) ────────────────────
   Jedan hairline okvir, dvije jasno odvojene zone: činjenice (gore) +
   pristanak (dolje). Jantar zadržan ISKLJUČIVO za badge novčanika. */
.sd-billing-box {
    margin-top: 12px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-2xl);
    overflow: hidden;
    background: var(--sd-card);
}

/* Zona 1 — činjenice */
.sd-billing-facts {
    padding: 15px 18px;
    background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.sd-billing-facts-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sd-billing-facts-badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--sd-radius-md);
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-billing-facts-badge .mud-icon-root {
    color: var(--sd-warn-ink) !important;
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
}
.sd-billing-facts-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-ink);
}
.sd-billing-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--sd-ink-2);
}
.sd-billing-fact + .sd-billing-fact {
    margin-top: 8px;
}
.sd-billing-fact .mud-icon-root {
    color: var(--sd-ink-4) !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
.sd-billing-fact strong {
    font-weight: 600;
    color: var(--sd-ink);
}

/* Zona 2 — pristanak (cijeli red klikabilan label) */
.sd-billing-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.sd-billing-consent.is-checked {
    background: var(--sd-brand-tint);
}
.sd-billing-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 2px solid var(--sd-ink-4);
    border-radius: var(--sd-radius-sm);
    background: var(--sd-card);
    cursor: pointer;
    position: relative;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.sd-billing-consent input[type="checkbox"]:checked {
    background: var(--sd-brand);
    border-color: var(--sd-brand);
}
.sd-billing-consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--sd-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sd-billing-consent-text {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sd-ink-2);
}

/* Tihi footer hint dok je Spremi onemogućen */
.sd-billing-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--sd-ink-3);
}
.sd-billing-hint .mud-icon-root {
    color: var(--sd-ink-3) !important;
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

.sd-context-chip {
    margin: 4px 0 12px;
    padding: 8px 12px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sd-font);
    font-size: 13px;
    color: var(--sd-ink-2);
}
.sd-context-chip .mud-icon-root { color: var(--sd-brand); }
.sd-context-chip-label { color: var(--sd-ink-3); }
.sd-context-chip-value { color: var(--sd-ink); font-weight: 600; }

.sd-link-button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sd-brand);
    font: inherit;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
}
.sd-link-button:hover { text-decoration: underline; }

/* Aktivne inventure — lista kartica unutar info-panela ("Nova inventura" dijalog).
   Svaka stavka: gornji red (broj + status-pill, "Otvori" gurnut desno) + donji red (opseg). */
.sd-active-inv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0;
}
.sd-active-inv-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-md);
}
.sd-active-inv-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sd-active-inv-open {
    margin-top: 0;
    margin-left: auto;
}
.sd-active-inv-scope {
    font-size: 12px;
    color: var(--sd-ink-3);
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Drop zone — drag-and-drop datoteke
   ═══════════════════════════════════════════════════════════════════════════ */
/* MudFileUpload wrapper — sidro za proziran <input type="file"> koji pokriva zonu.
   Bez toga native drag & drop ne radi: ispuštena datoteka mora pasti na sam input. */
.sd-drop-zone-upload {
    position: relative;
    display: block;
}
.sd-drop-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.sd-drop-zone {
    margin-top: 4px;
    border: 1.5px dashed var(--sd-brand-soft);
    background: var(--sd-brand-tint);
    border-radius: var(--sd-radius-2xl);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 160ms, background 160ms;
    text-align: center;
}
.sd-drop-zone:hover,
.sd-drop-zone.is-dragover,
.sd-drop-zone.is-dragging {
    border-color: var(--sd-brand);
    border-style: solid;
    background: var(--sd-brand-soft);
}
.sd-drop-zone-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sd-radius-xl);
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sd-drop-zone-icon .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}
.sd-drop-zone-title {
    font-family: var(--sd-font);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--sd-ink);
}
.sd-drop-zone-subtitle {
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-top: -4px;
}
.sd-drop-zone-link {
    color: var(--sd-brand-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Selected-file row (zamijeni drop zone kad korisnik odabere fajl) */
.sd-drop-zone-file {
    margin-top: 4px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: var(--sd-radius-xl);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sd-font);
    font-size: 13.5px;
}
.sd-drop-zone-file-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--sd-radius-lg);
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sd-drop-zone-file-icon .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}
.sd-drop-zone-file-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-drop-zone-file-name {
    color: var(--sd-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-drop-zone-file-size {
    color: var(--sd-ink-3);
    font-size: 12px;
}
/* Iznad prozirnog inputa, inače bi klik na X otvorio birač datoteka umjesto uklanjanja. */
.sd-drop-zone-file-remove {
    position: relative;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: var(--sd-radius-md);
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    color: var(--sd-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 150ms, color 150ms;
}
.sd-drop-zone-file-remove:hover {
    background: var(--sd-surface);
    color: var(--sd-ink);
}
.sd-drop-zone-file-remove .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Pregled prije uvoza — tablica se skrola u oba smjera (wrapper ima overflow:auto),
   a ćelije ostaju u jednom redu da se mono šifra/barkod ne lome. */
.sd-import-preview td,
.sd-import-preview th {
    white-space: nowrap;
}

/* MudTable ima vlastiti unutarnji scroll kontejner — ugasi ga da ne dobijemo
   dvije horizontalne trake; skrola samo .sd-import-preview wrapper. */
.sd-import-preview .mud-table-container {
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd Spec card — Uvoz dialog "Obavezne kolone | Opcionalno | Formati"
   ═══════════════════════════════════════════════════════════════════════════ */
.sd-spec-card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-xl);
    padding: 12px 14px;
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-2);
    line-height: 1.55;
}
.sd-spec-card-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.sd-spec-card-note {
    margin-top: 6px;
    color: var(--sd-ink-3);
    font-size: 12px;
}
.sd-spec-card-note code {
    font-family: var(--sd-font-mono);
    color: var(--sd-ink-2);
}
.sd-spec-item {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sd-spec-item-label {
    font-family: var(--sd-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-4);
    text-transform: uppercase;
}
.sd-spec-item-value {
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink);
}
.sd-spec-item-value.is-highlight {
    color: var(--sd-brand-deep);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd destructive dialog — Brisanje artikla (destructive confirm)
   Manji modal (460), alert ikona u headeru, crveni CTA gumb, item highlight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Destructive header — manji title, dodatak ikone lijevo i description ispod */
.sd-modal-header.is-destructive {
    padding: 22px 28px 8px;
    gap: 14px;
}
.sd-modal-header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--sd-radius-lg);
    background: var(--sd-danger-soft);
    color: var(--sd-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sd-modal-header-icon .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}
.sd-modal-header-main {
    flex: 1;
    min-width: 0;
}
.sd-modal-header.is-destructive .sd-modal-title {
    font-size: 18px;
    letter-spacing: -0.01em;
}
.sd-modal-header-desc {
    margin: 6px 0 0;
    font-family: var(--sd-font);
    font-size: 13.5px;
    color: var(--sd-ink-2);
    line-height: 1.55;
}
/* Body paragraf u ConfirmDialogu (Default/Primary varijanta, koja nema header description). */
.sd-modal-text {
    margin: 0;
    font-family: var(--sd-font);
    font-size: 13.5px;
    color: var(--sd-ink-2);
    line-height: 1.55;
}

/* Smaller close button u destructive headeru (30×30, bez bordera) */
.sd-modal-header.is-destructive .sd-modal-close {
    width: 30px;
    height: 30px;
    border-radius: var(--sd-radius-md);
    border: 0;
    background: transparent;
    margin-top: -4px;
}
.sd-modal-header.is-destructive .sd-modal-close:hover {
    background: var(--sd-surface);
}
.sd-modal-header.is-destructive .sd-modal-close .mud-icon-root {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

/* Item highlight kartica — surface kontejner sa mono pill + naziv */
.sd-delete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-xl);
}
.sd-delete-item-code {
    font-family: var(--sd-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-ink);
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    padding: 4px 8px;
    border-radius: var(--sd-radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}
.sd-delete-item-name {
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sd-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

/* Destructive primary button — crveni varijant sd-btn-primary */
.sd-btn-danger.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled.sd-btn-danger {
    background-color: var(--sd-danger) !important;
    color: var(--sd-on-accent) !important;
    height: var(--sd-btn-h) !important;
    border-radius: var(--sd-radius-lg) !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(155, 54, 45, 0.25) !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0 18px !important;
}
.sd-btn-danger.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled.sd-btn-danger:hover {
    background-color: var(--sd-danger-deep) !important;
    box-shadow: 0 1px 2px rgba(155, 54, 45, 0.25) !important;
}
.sd-btn-danger.mud-button-root.mud-button-filled.mud-button-disabled,
.mud-button-root.mud-button-filled.sd-btn-danger.mud-button-disabled,
.sd-btn-danger.mud-button-root.mud-button-filled:disabled,
.mud-button-root.mud-button-filled.sd-btn-danger:disabled {
    background-color: var(--sd-surface) !important;
    color: var(--sd-ink-4) !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* Destructive outline button — bijela pozadina, danger text + border */
.sd-btn-danger-outline.mud-button-root,
.mud-button-root.sd-btn-danger-outline {
    background-color: var(--sd-card) !important;
    color: var(--sd-danger-deep) !important;
    height: var(--sd-btn-h) !important;
    border-radius: var(--sd-radius-lg) !important;
    border: 1px solid var(--sd-danger-soft) !important;
    box-shadow: none !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
}
.sd-btn-danger-outline.mud-button-root:hover,
.mud-button-root.sd-btn-danger-outline:hover {
    background-color: var(--sd-danger-soft) !important;
    border-color: var(--sd-danger) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sd warn dialog — Resetiraj lozinku / Deaktiviraj korisnika (warn confirm)
   Reversibilne disruptivne akcije: amber ikona u headeru, amber CTA, isti
   shell kao destructive ali blaža semantika.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Warn header — ista geometrija kao destructive, samo amber ton */
.sd-modal-header.is-warn {
    padding: 22px 28px 8px;
    gap: 14px;
}
.sd-modal-header.is-warn .sd-modal-header-icon {
    background: var(--sd-warn-soft);
    color: var(--sd-warn);
}
.sd-modal-header.is-warn .sd-modal-title {
    font-size: 18px;
    letter-spacing: -0.01em;
}
.sd-modal-header.is-warn .sd-modal-close {
    width: 30px;
    height: 30px;
    border-radius: var(--sd-radius-md);
    border: 0;
    background: transparent;
    margin-top: -4px;
}
.sd-modal-header.is-warn .sd-modal-close:hover {
    background: var(--sd-surface);
}
.sd-modal-header.is-warn .sd-modal-close .mud-icon-root {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

/* Warn primary button — amber varijant sd-btn-primary */
.sd-btn-warn.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled.sd-btn-warn {
    background-color: var(--sd-warn) !important;
    color: var(--sd-on-accent) !important;
    height: var(--sd-btn-h) !important;
    border-radius: var(--sd-radius-lg) !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(141, 94, 21, 0.25) !important;
    font-family: var(--sd-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0 18px !important;
}
.sd-btn-warn.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled.sd-btn-warn:hover {
    background-color: var(--sd-warn-ink) !important;
    box-shadow: 0 1px 2px rgba(141, 94, 21, 0.25) !important;
}
.sd-btn-warn.mud-button-root.mud-button-filled.mud-button-disabled,
.mud-button-root.mud-button-filled.sd-btn-warn.mud-button-disabled,
.sd-btn-warn.mud-button-root.mud-button-filled:disabled,
.mud-button-root.mud-button-filled.sd-btn-warn:disabled {
    background-color: var(--sd-surface) !important;
    color: var(--sd-ink-4) !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORISNICI — Soft Daylight redesign
   Avatar, role chip, PIN indikator, user chip (za confirm modale),
   PIN display (4-točke za PIN dialog), toolbar meta count.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ime + ERP code ćelija u tablici (avatar + 2-line tekst) */
.sd-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.sd-user-cell-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sd-user-cell-name {
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-user-cell-erp {
    font-family: var(--sd-font-mono);
    font-size: 11px;
    color: var(--sd-ink-4);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Matična poslovna jedinica — neutralni izvještajni tag (NIJE scope/pristup). */
.sd-user-cell-unit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--sd-font);
    font-size: 11px;
    color: var(--sd-ink-4);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-user-cell-unit .mud-icon-root {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* Avatar — inicijali u brand-soft kružiću */
.sd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    font-family: var(--sd-font);
    font-weight: 700;
    letter-spacing: 0;
    user-select: none;
}

/* Role chip — pill s ikonom + tekstom; primarna i sekundarna varijanta */
.sd-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-family: var(--sd-font);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}
.sd-role-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-role-chip-icon .mud-icon-root {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}
.sd-role-chip.is-primary {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
}
.sd-role-chip.is-secondary {
    background: var(--sd-surface);
    color: var(--sd-ink-2);
    border: 1px solid var(--sd-hairline);
}

/* PIN indikator (kolona PIN u tablici) */
.sd-pin-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sd-font);
    font-size: 12.5px;
    font-weight: 500;
}
.sd-pin-indicator.is-na {
    color: var(--sd-ink-4);
    font-size: 13px;
}
.sd-pin-indicator.is-set {
    color: var(--sd-ink-2);
}
.sd-pin-indicator.is-set::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--sd-brand);
    flex-shrink: 0;
}
/* min-height, ne height: fiksna visina uz prelom teksta znači da drugi red iscuri izvan pilule.
   nowrap je pravi popravak — "Bez PIN-a" se lomilo na crtici kad je stupac uzak. */
.sd-pin-indicator.is-missing {
    min-height: 22px;
    padding: 2px 10px;
    border-radius: var(--sd-radius-pill);
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.sd-pin-indicator.is-missing::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-warn);
    flex-shrink: 0;
}

/* User chip (avatar + 2-line tekst) — koristi se u confirm modalima */
.sd-user-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-xl);
}
.sd-user-chip-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sd-user-chip-name {
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-user-chip-sub {
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Last-login mono cell (italic "nikad" fallback ide na font sans) */
.sd-mono-soft {
    font-family: var(--sd-font-mono);
    font-size: 13px;
    color: var(--sd-ink-3);
}
.sd-cell-never {
    font-family: var(--sd-font);
    font-style: italic;
    font-size: 13px;
    color: var(--sd-ink-4);
}

/* Toolbar meta — count desno u toolbaru */
.sd-toolbar-meta {
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
}

/* ── PIN display (4-točke u Postavi PIN dialogu) ─────────────────────── */
.sd-pin-display {
    margin: 8px 0;
    padding: 24px 0;
    background: var(--sd-card);
    border: 1.5px solid var(--sd-brand);
    border-radius: 14px;
    box-shadow: 0 0 0 4px var(--sd-brand-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    cursor: text;
}
.sd-pin-dot {
    width: 18px;
    height: 18px;
    border-radius: 99px;
    border: 1.6px solid var(--sd-ink-5);
    background: transparent;
    box-sizing: border-box;
    transition: all 140ms;
}
.sd-pin-dot.is-filled {
    background: var(--sd-brand);
    border-color: var(--sd-brand);
}
.sd-pin-input-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    border: 0;
    padding: 0;
    margin: 0;
}
.sd-pin-hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--sd-font);
    font-size: 12px;
    color: var(--sd-ink-3);
    padding: 0 4px;
}
.sd-pin-generate {
    border: 0;
    background: transparent;
    color: var(--sd-brand-deep);
    font-family: var(--sd-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.sd-pin-generate:hover {
    color: var(--sd-brand);
}
.sd-pin-generate .mud-icon-root {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* ── Role checkbox kartice (Uredi/Novi korisnik dialog) ──────────────── */
.sd-role-section-label {
    font-family: var(--sd-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sd-role-section-label .sd-field-required {
    color: var(--sd-brand);
    margin-left: 2px;
}
.sd-role-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sd-role-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border: 1.5px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: var(--sd-radius-lg);
    cursor: pointer;
    transition: all 120ms;
}
.sd-role-card.is-checked {
    border-color: var(--sd-brand);
    background: var(--sd-brand-tint);
}
.sd-role-card-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--sd-hairline);
    background: var(--sd-card);
    margin-top: 1px;
    flex-shrink: 0;
    transition: all 120ms;
}
.sd-role-card.is-checked .sd-role-card-box {
    border-color: var(--sd-brand);
    background: var(--sd-brand);
    color: var(--sd-on-accent);
}
.sd-role-card-box .mud-icon-root {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}
.sd-role-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sd-role-card-name {
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
}
.sd-role-card-sub {
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
    line-height: 1.45;
}

/* Info-panel (brand-tint helper) — koristi se u Uredi/Novi korisnik */
.sd-info-panel-inline {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: var(--sd-radius-md);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: var(--sd-font);
    font-size: 12px;
    color: var(--sd-ink-2);
    line-height: 1.5;
}
.sd-info-panel-inline-ico {
    color: var(--sd-brand);
    display: flex;
    margin-top: 1px;
    flex-shrink: 0;
}
.sd-info-panel-inline-ico .mud-icon-root {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}
.sd-info-panel-inline strong {
    color: var(--sd-ink);
    font-weight: 700;
}
/* Amber varijanta — upozorenje na destruktivnu radnju (npr. gubitak izbrojanog). */
.sd-info-panel-inline.is-warning {
    background: var(--sd-warn-soft);
    border-color: var(--sd-warn);
    color: var(--sd-warn-ink);
}
.sd-info-panel-inline.is-warning .sd-info-panel-inline-ico {
    color: var(--sd-warn);
}
.sd-info-panel-inline.is-warning strong {
    color: var(--sd-warn-ink);
}

/* Modal-level form error (kad greška nije polje-specifična) */
.sd-modal-error {
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--sd-danger-tint);
    border: 1px solid var(--sd-danger-soft);
    border-radius: var(--sd-radius-md);
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-danger);
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════
   ETIKETE / NALJEPNICE — Soft Daylight redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Settings + Preview panel layout */
.sd-settings-row {
    padding: 14px 28px 4px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Kartice s postavkama: UVIJEK dva stupca, pretpregled desno od njih.
   flex-basis 460px (2 × 225 + gap) je prag ispod kojeg cijeli blok prelomi na svoj red,
   pa pretpregled padne ispod umjesto da stisne kartice do neupotrebljivosti.
   Neparan broj kartica (3 ili 5) ostavlja zadnju u lijevom stupcu — namjerno, jer je
   raspored stupaca predvidljiviji od kartice koja se širi preko oba. */
.sd-settings-fields {
    flex: 1 1 460px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* Uski ekrani: jedan stupac, kartice jedna ispod druge. */
@media (max-width: 700px) {
    .sd-settings-fields {
        grid-template-columns: 1fr;
    }
}

/* Settings field (floating uppercase label + value + chevron + helper).
   Širinu određuje grid stupac; min-width:0 da dugačak sadržaj ne razvuče stupac. */
.sd-settings-field {
    min-width: 0;
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    background: var(--sd-card);
    padding: 11px 14px 12px;
    transition: border-color 120ms;
}
.sd-settings-field:hover {
    border-color: var(--sd-brand-soft);
}
.sd-settings-field-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sd-settings-field-control {
    display: flex;
    align-items: center;
    height: 22px;
}
/* MudSelect inside — strip ALL chrome, keep only value text + chevron */
.sd-settings-field-control .mud-input-control,
.sd-settings-field-control .mud-select {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.sd-settings-field-control .mud-input.mud-input-outlined,
.sd-settings-field-control .mud-input.mud-input-underline {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
}
.sd-settings-field-control .mud-input-outlined-border,
.sd-settings-field-control .mud-input.mud-input-underline::before,
.sd-settings-field-control .mud-input.mud-input-underline::after {
    border: 0 !important;
    display: none !important;
}
.sd-settings-field-control .mud-input-slot {
    padding: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
}
.sd-settings-field-control .mud-select-input,
.sd-settings-field-control .mud-input-root {
    font-family: var(--sd-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sd-ink) !important;
    padding: 0 !important;
    height: 22px !important;
    line-height: 22px !important;
    min-height: 22px !important;
}
.sd-settings-field-control .mud-input-adornment {
    height: 22px !important;
    color: var(--sd-ink-4) !important;
    margin: 0 !important;
}
.sd-settings-field-control .mud-input-adornment .mud-icon-button {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
}
.sd-settings-field-control .mud-input-adornment .mud-icon-root {
    font-size: 18px !important;
    color: var(--sd-ink-4) !important;
}
.sd-settings-field-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--sd-ink-3);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Native HTML <select> stiliziran kao ravnoteža s SettingsField (bez MudSelect chrome-a) */
.sd-native-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent; 
    border: 0;
    margin: 0;
    padding: 0 22px 0 0;
    width: 100%;
    height: 22px;
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a597' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
}
.sd-native-select:focus-visible {
    outline: 2px solid var(--sd-brand-soft);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Label preview (dashed box + glyph + sample text + hint) */
/* Oznaka da je artikl stigao iz zadnjeg uvoza — uz naziv u popisu za ispis naljepnica. */
.sd-changed-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sd-brand-deep);
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    white-space: nowrap;
    vertical-align: middle;
}

/* Gumb u info traci — izgleda kao poveznica, ne kao gumb. */
.sd-btn-link.mud-button-text {
    min-width: 0;
    padding: 0 4px;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: none;
    color: var(--sd-brand-deep);
    text-decoration: underline;
}

/* Pretpregled je vlastita kartica: zaglavlje sa značkom formata, naljepnica, po potrebi
   kontrola koja mijenja njezin sadržaj, pa napomena na dnu. */
/* Podloga je --sd-surface, a ne --sd-card: kartice s postavkama lijevo su bijele, pa se
   pretpregled izdvaja ispunom. Iz istog razloga nema obruba — bijela naljepnica unutra
   "lebdi" na sivoj podlozi, što na bijeloj podlozi ne bi bilo vidljivo. */
/* Širina prati naljepnicu: LabelPreviewGlyphs.Zoom (1.2) daje 336 px + 2 × 18 px ruba. */
.sd-label-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 372px;
    min-width: 0;
    border-radius: 12px;
    background: var(--sd-surface);
    padding: 14px 18px 18px;
}
/* Zaglavlje i red s prekidačem su bijeli blokovi na sivoj podlozi — siva ostaje samo
   kao "pozornica" oko naljepnice. */
.sd-label-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--sd-card);
    border-radius: 8px;
    padding: 8px 12px;
}
.sd-label-preview-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-4);
    text-transform: uppercase;
}
/* Značka s dimenzijom odabrane naljepnice — isti podatak koji određuje geometriju pretpregleda.
   Neutralno siva: nosi informaciju, ne poziva na klik, pa ne uzima brand boju. */
.sd-label-preview-badge {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sd-ink-3);
    background: var(--sd-surface-hover);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
/* Kontrola ispod naljepnice (npr. prekidač za MPC). Odvaja je razmak, ne linija —
   razdjelnik bi ju odvojio jače nego što zaslužuje, jer mijenja sadržaj iznad sebe. */
.sd-label-preview-actions {
    background: var(--sd-card);
    border-radius: 8px;
    padding: 10px 12px 11px;
}
.sd-label-preview-actions .mud-switch {
    margin: 0;
}
.sd-label-preview-actions .mud-switch .mud-switch-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink-1);
}
/* MudBlazor Primary je #7BA962 (wms-green), a Soft Daylight brand je mint #5BA071.
   Boja se ne može zadati kroz Color parametar, pa ide override. */
.sd-label-preview-actions .mud-switch .mud-switch-base.mud-checked,
.sd-label-preview-actions .mud-switch .mud-switch-base.mud-checked:hover {
    color: var(--sd-brand);
}
.sd-label-preview-actions .mud-switch .mud-switch-base.mud-checked ~ .mud-switch-track {
    background-color: var(--sd-brand);
}
.sd-label-preview-action-hint {
    margin-top: 2px;
    margin-left: 46px;
    font-size: 11.5px;
    color: var(--sd-ink-3);
    line-height: 1.35;
}
.sd-label-preview {
    background: #fff;
    border: 1px solid var(--sd-hairline);
    border-radius: 8px;
    display: flex;
    box-shadow: 0 1px 2px rgba(60, 55, 40, 0.06);
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* QR layout: row 40/60. Lijevo QR + barcode value, desno code+name bottom-aligned
   na visinu QR-a (ne cijele ćelije) — replicira PdfLabelGenerator.RenderQrLabel
   gdje right col ima Height(qrHeightMm).AlignBottom. */
.sd-label-preview-qr-row {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: flex-start;
}
.sd-label-preview-qr-col {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
}
.sd-label-preview-textcol {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
    /* height postavljen inline (qrPx) — sadržaj poravnan s donjom stranom QR slike. */
}

/* Code128 layout: vertikalna kolona, bars full-width */
.sd-label-preview-c128-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
.sd-label-preview-c128-col .sd-label-preview-barvalue {
    align-self: center;
    margin-top: 1px;
}
.sd-label-preview-c128-spacer {
    flex: 0 0 auto;
}

/* Code + name tipografija — code mono bold, name sans-serif do 3 reda.
   Boje su fiksne (ne tokeni teme): naljepnica simulira bijeli papir u obje teme. */
.sd-label-preview-code {
    font-family: var(--sd-font-mono);
    font-weight: 700;
    color: #1d201a;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-label-preview-code--center {
    text-align: center;
}
.sd-label-preview-name {
    color: #494a40;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-label-preview-name--qr {
    -webkit-line-clamp: 3;
}
/* QR + cijena: naziv pada na 2 reda, usklađeno s PdfLabelGenerator.TruncateAtQrPrice
   i ZplGenerator nameRows. */
.sd-label-preview-name--qr-price {
    -webkit-line-clamp: 2;
}
.sd-label-preview-name--center {
    text-align: center;
    -webkit-line-clamp: 2;
}

/* Cijena — najistaknutiji element naljepnice, bold i veći od šifre. */
.sd-label-preview-price {
    font-family: var(--sd-font-mono);
    font-weight: 700;
    color: #1d201a;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
/* QR layout: cijena na vrhu desnog stupca. Auto margina nadjačava justify-content:flex-end
   pa cijena ide gore, a šifra i naziv ostaju poravnati s dnom QR-a. */
.sd-label-preview-price--qr-top {
    margin-top: 0;
    margin-bottom: auto;
    text-align: left;
}

/* Barcode value text ispod barkoda (mono, sitno) — i u QR i u Code128 varijanti */
.sd-label-preview-barvalue {
    font-family: var(--sd-font-mono);
    color: #1d201a;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sd-label-preview-hint {
    font-size: 11.5px;
    color: var(--sd-ink-3);
    line-height: 1.4;
}

/* Stepper (− / N / +) */
.sd-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid var(--sd-hairline);
    border-radius: 8px;
    background: var(--sd-card);
    overflow: hidden;
}
.sd-stepper-btn {
    width: 32px;
    border: 0;
    background: var(--sd-card);
    color: var(--sd-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 100ms;
    padding: 0;
}
.sd-stepper-btn:hover:not(:disabled) {
    background: var(--sd-surface);
}
.sd-stepper-btn:disabled {
    background: var(--sd-surface);
    color: var(--sd-ink-4);
    cursor: default;
}
.sd-stepper-input {
    width: 38px;
    border: 0;
    outline: 0;
    text-align: center;
    background: transparent;
    font-family: var(--sd-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink);
    border-left: 1px solid var(--sd-hairline-2, #f1eee6);
    border-right: 1px solid var(--sd-hairline-2, #f1eee6);
    padding: 0;
}

/* Pill button (×1 ×2 ×5 ×10 multiplier) */
.sd-pill-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    color: var(--sd-ink-2);
    font-family: var(--sd-font);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 120ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sd-pill-btn:hover {
    background: var(--sd-surface);
}
.sd-pill-btn.is-active {
    border-color: var(--sd-brand);
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
}

/* Sticky action bar — fiksna na dnu viewporta unutar MudMainContent area.
   Stoji KAO SIBLING ispod .sd-content-card (ne unutar njega) jer card ima overflow:hidden
   što bi onemogućilo sticky. */
.sd-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 14px;
    padding: 14px 28px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    box-shadow: 0 -2px 12px rgba(60, 55, 40, 0.08), var(--sd-shadow-card);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 160ms, border-color 160ms;
    flex-wrap: wrap;
}
.sd-action-bar.is-active {
    background: var(--sd-brand-tint);
    border-color: var(--sd-brand-soft);
}
/* Page wrap koji osigurava prostor za sticky action bar (sprječava overlap kartice).
   Eksplicitni --sd-page background pokriva slučaj kad sadržaj ne zauzme cijelu visinu
   (npr. search vrati 1 artikl) — bez bg-a bi body boja izvirivala ispod action bar-a. */
.sd-page-with-action-bar {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
    background-color: var(--sd-page);
}
.sd-page-with-action-bar .sd-content-card {
    flex: 1 0 auto;
}
/* Header kartica s tab stripom mora ostati prirodne visine — samo donja kartica
   (sa sadržajem taba) popunjava preostali viewport. */
.sd-page-with-action-bar .sd-content-card.sd-labels-card-top {
    flex: 0 0 auto;
}
.sd-action-bar-empty {
    font-size: 13.5px;
    color: var(--sd-ink-3);
    font-weight: 500;
}
.sd-action-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: var(--sd-brand);
    color: var(--sd-on-accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.sd-action-bar-text {
    font-size: 13.5px;
    color: var(--sd-ink);
    font-weight: 600;
}
.sd-action-bar-text-muted {
    font-size: 13.5px;
    color: var(--sd-ink-2);
    font-weight: 500;
}
.sd-action-bar-text-muted strong {
    color: var(--sd-ink);
    font-weight: 700;
}
.sd-action-bar-dot {
    width: 3px;
    height: 3px;
    border-radius: 99px;
    background: var(--sd-ink-4);
    display: inline-block;
}
.sd-action-bar-separator {
    width: 1px;
    height: 24px;
    background: var(--sd-brand-soft);
    display: inline-block;
}
.sd-action-bar-hint {
    font-size: 12px;
    color: var(--sd-ink-3);
    font-weight: 600;
}
.sd-action-bar-pills {
    display: inline-flex;
    gap: 4px;
}

/* Result count (small text in toolbar — "N artikala") */
.sd-result-count {
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-left: auto;
}

/* Row click affordance + selected state */
.sd-table .mud-table-body .mud-table-row.sd-row-clickable {
    cursor: pointer;
}
.sd-table .mud-table-body .mud-table-row.sd-row-clickable.is-selected,
.sd-table .mud-table-body .mud-table-row.sd-row-clickable.is-selected:hover {
    background: var(--sd-brand-tint) !important;
}
.sd-table .mud-table-body .mud-table-row.sd-row-clickable.is-selected .mud-table-cell {
    background: var(--sd-brand-tint) !important;
}

/* Dash placeholder ("—" za neselektiranu Kopija kolonu) */
.sd-cell-dash {
    font-size: 12.5px;
    color: var(--sd-ink-4);
    display: inline-block;
}

/* ============================================================
   Soft Daylight — Auth (Login, Set Password, Forgot Password)
   Split-screen layout: dark green brand panel (lijevo) + form panel (desno).
   Ispod 768px brand panel se skriva, forma zauzima cijelu širinu.
   ============================================================ */

.sd-auth-shell {
    width: 100%;
    min-height: 100vh;
    background: var(--sd-page);
    color: var(--sd-ink);
    font-family: var(--sd-font);
    display: flex;
}

/* ── Brand panel (lijevo) ─────────────────────────────────── */

.sd-auth-brand-panel {
    flex: 0 0 46%;
    min-width: 0;
    background: var(--sd-brand-deep);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 40px 48px;
    color: #fff;
}
.sd-auth-brand-arcs {
    position: absolute;
    /* Dominantan watermark — 80vw razmjer, sidranjen na donji desni kut panela.
       overflow: hidden na .sd-auth-brand-panel odsijeca dio koji ide izvan zelene zone. */
    bottom: 5vw;
    right: -15vw;
    width: 50vw;
    height: 60vw;
    opacity: 0.14;
    pointer-events: none;
}
.sd-auth-brand-logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.sd-auth-brand-logo-img {
    height: 44px;
    width: auto;
    display: block;
    border-radius: 8px;
    /* Original PNG ima cream pozadinu; rounded corner ga čini namjernom "badge" formom
       na zelenom panelu umjesto zalijepljene slike. */
}
.sd-auth-brand-spacer { flex: 1; }
.sd-auth-brand-story {
    position: relative;
    z-index: 1;
    max-width: 420px;
}
.sd-auth-brand-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.sd-auth-brand-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #fff;
}
.sd-auth-brand-body {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    font-weight: 500;
}
.sd-auth-brand-pills {
    margin-top: 26px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sd-auth-feat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sd-auth-feat-pill svg { color: rgba(255,255,255,0.85); }

/* ── Form panel (desno) ──────────────────────────────────── */

.sd-auth-form-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.sd-auth-form {
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sd-auth-form--wide { width: 420px; }
.sd-auth-heading h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.02em;
}
.sd-auth-heading p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--sd-ink-3);
    font-weight: 500;
    line-height: 1.5;
}

/* ── Floating-label field ────────────────────────────────── */

.sd-auth-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sd-auth-field {
    display: block;
    position: relative;
    min-height: 64px;
    border: 1.5px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: 12px;
    padding: 10px 14px 12px;
    transition: border-color 140ms, box-shadow 140ms;
    cursor: text;
}
.sd-auth-field:focus-within {
    border-color: var(--sd-brand);
    box-shadow: 0 0 0 4px var(--sd-brand-tint);
}
.sd-auth-field-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sd-auth-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--sd-ink-3);
}
.sd-auth-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sd-auth-field-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-family: var(--sd-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--sd-ink);
}
.sd-auth-pw-toggle {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sd-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.sd-auth-pw-toggle:hover { color: var(--sd-ink); background: var(--sd-surface); }

/* ── Checkbox + link row ─────────────────────────────────── */

.sd-auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.sd-auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.sd-auth-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.sd-auth-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid #d6d2c6;
    background: var(--sd-card);
    transition: all 120ms;
}
.sd-auth-checkbox-box svg { display: none; }
.sd-auth-checkbox input:checked ~ .sd-auth-checkbox-box {
    border-color: var(--sd-brand);
    background: var(--sd-brand);
}
.sd-auth-checkbox input:checked ~ .sd-auth-checkbox-box svg { display: block; }
.sd-auth-checkbox-label {
    font-size: 13.5px;
    color: var(--sd-ink-2);
    font-weight: 500;
}
.sd-auth-link {
    font-size: 13px;
    color: var(--sd-brand-deep);
    text-decoration: none;
    font-weight: 600;
}
.sd-auth-link:hover { text-decoration: underline; }

/* ── Primary button ──────────────────────────────────────── */

.sd-auth-btn-primary {
    width: 100%;
    height: 52px;
    background: var(--sd-brand);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-family: var(--sd-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    box-shadow: 0 2px 4px rgba(63,122,85,0.25);
    cursor: pointer;
    transition: background 140ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.sd-auth-btn-primary:hover { background: var(--sd-brand-deep); }
.sd-auth-btn-primary:disabled {
    background: var(--sd-surface);
    color: var(--sd-ink-4);
    box-shadow: none;
    cursor: default;
}
/* Loading stanje login gumba (JS doda .is-loading na submit): prikaži SAMO circular spinner,
   sakrij tekst i strelicu. Zadrži brand izgled (nadjačaj gornje :disabled sivilo, ista
   specifičnost pa pobjeđuje jer je kasnije u fajlu). */
.sd-auth-btn-spinner { display: none; }
.sd-auth-btn-primary.is-loading {
    background: var(--sd-brand);
    color: #fff;
    cursor: default;
    box-shadow: 0 2px 4px rgba(63,122,85,0.25);
}
.sd-auth-btn-primary.is-loading .sd-auth-btn-label { display: none; }
.sd-auth-btn-primary.is-loading .sd-auth-btn-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sd-auth-spin 0.7s linear infinite;
}
@keyframes sd-auth-spin { to { transform: rotate(360deg); } }

/* ── Consent (prihvaćanje uvjeta na prvoj pozivnici) ─────── */

.sd-auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sd-ink-2);
    cursor: pointer;
}
.sd-auth-consent input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--sd-brand);
    cursor: pointer;
}
.sd-auth-consent a { color: var(--sd-brand-deep); font-weight: 700; }

/* ── Error message ───────────────────────────────────────── */

.sd-auth-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--sd-danger-soft);
    color: var(--sd-danger);
    border: 1px solid var(--sd-danger-soft);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
}

/* ── Footer ──────────────────────────────────────────────── */

.sd-auth-footer {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 12px;
    color: var(--sd-ink-4);
    text-align: center;
    font-weight: 500;
}
.sd-auth-footer .mono { font-family: var(--sd-font-mono); }

/* ── Email pill (Set Password) ───────────────────────────── */

.sd-auth-email-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: var(--sd-brand-soft);
    border: 1px solid var(--sd-brand-soft);
    border-radius: 999px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--sd-brand-deep);
    font-weight: 600;
}
.sd-auth-email-pill-icon {
    width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--sd-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}
.sd-auth-email-pill-text { font-family: var(--sd-font-mono); font-size: 12.5px; }

/* ── Strength bar + requirement pills ────────────────────── */

.sd-auth-strength-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 4px 4px;
}
.sd-auth-strength {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sd-auth-strength-bar {
    display: flex;
    gap: 4px;
    flex: 1;
}
.sd-auth-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: #ece9e0;
    transition: background 160ms;
}
.sd-auth-strength--weak .sd-auth-strength-seg:nth-child(-n+1) { background: var(--sd-danger); }
.sd-auth-strength--medium .sd-auth-strength-seg:nth-child(-n+2) { background: var(--sd-warn); }
.sd-auth-strength--strong .sd-auth-strength-seg { background: var(--sd-brand); }
.sd-auth-strength-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sd-auth-strength--weak   .sd-auth-strength-label { color: var(--sd-danger); }
.sd-auth-strength--medium .sd-auth-strength-label { color: var(--sd-warn-ink); }
.sd-auth-strength--strong .sd-auth-strength-label { color: var(--sd-brand-deep); }
.sd-auth-strength--none   .sd-auth-strength-label { display: none; }

.sd-auth-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sd-auth-req {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--sd-surface);
    color: var(--sd-ink-3);
    border: 1px solid var(--sd-hairline);
    border-radius: 999px;
    transition: all 160ms;
}
.sd-auth-req-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 99px;
    background: transparent;
    border: 1.5px solid var(--sd-ink-4);
    color: #fff;
}
.sd-auth-req-dot svg { display: none; }
.sd-auth-req.is-met {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-color: var(--sd-brand-soft);
}
.sd-auth-req.is-met .sd-auth-req-dot {
    background: var(--sd-brand);
    border: none;
}
.sd-auth-req.is-met .sd-auth-req-dot svg { display: block; }

/* ── Success state (post redeem) ─────────────────────────── */

.sd-auth-success {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
}
.sd-auth-success-check {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: var(--sd-brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(63,122,85,0.18);
    color: var(--sd-brand-deep);
}
.sd-auth-success-text { max-width: 320px; }
.sd-auth-success-text h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.02em;
}
.sd-auth-success-text p {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--sd-ink-3);
    font-weight: 500;
    line-height: 1.55;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .sd-auth-brand-panel { display: none; }
    .sd-auth-form-panel { padding: 24px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Pregled (dashboard) — Soft Daylight
   ════════════════════════════════════════════════════════════════════ */

/* ── Page header inside dashboard card ──────────────────────────────── */
.sd-pregled-header {
    padding: 24px 28px 0;
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
.sd-pregled-header-main { flex: 1; min-width: 0; }
.sd-pregled-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Hero number row (Aktivno state) ───────────────────────────────── */
.sd-hero-row {
    display: grid;
    gap: 0;
    padding: 20px 28px 22px;
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.sd-hero-cell {
    padding: 0 20px;
    border-left: 1px solid var(--sd-hairline-soft);
}
.sd-hero-cell:first-child {
    border-left: none;
    padding-left: 0;
}
.sd-stat-hero-value {
    font-family: var(--sd-font-mono);
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--sd-ink);
    line-height: 1.05;
}
.sd-stat-hero-value.is-brand { color: var(--sd-brand); }
.sd-stat-hero-value.is-sans { font-family: var(--sd-font); }
.sd-stat-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-top: 6px;
}
.sd-stat-hero-sub {
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-top: 3px;
    font-weight: 500;
}

/* ── MiniMetric inline (Status Quo hero, Katalog panel) ────────────── */
.sd-mini-metric-value {
    font-family: var(--sd-font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.sd-mini-metric-value.is-sans { font-family: var(--sd-font); }
.sd-mini-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sd-ink-3);
    margin-top: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── ProgressBar ───────────────────────────────────────────────────── */
.sd-progressbar {
    width: 100%;
    background: var(--sd-surface);
    border-radius: 999px;
    overflow: hidden;
}
.sd-progressbar-fill {
    height: 100%;
    background: var(--sd-brand);
    border-radius: 999px;
    transition: width 240ms;
}
.sd-progressbar-fill.is-warn { background: var(--sd-warn); }
.sd-progressbar-fill.is-danger { background: var(--sd-danger); }

/* ── Panel (sub-card inside main dashboard card) ───────────────────── */
.sd-panel {
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    padding: 20px 22px;
}
.sd-panel-header {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
}
.sd-panel-header-main { flex: 1; min-width: 0; }
.sd-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}
.sd-panel-header-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--sd-ink-3);
    font-weight: 500;
}

/* ── Active inventura row ──────────────────────────────────────────── */
.sd-inventura-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sd-inventura-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 130px 130px 110px;
    align-items: center;
    gap: 20px;
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    text-decoration: none;
    color: inherit;
    transition: background 100ms;
    cursor: pointer;
}
.sd-inventura-row:hover {
    background: var(--sd-surface);
    color: inherit;
}
.sd-inventura-row-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.sd-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sd-brand);
    box-shadow: 0 0 0 4px var(--sd-brand-tint);
    flex: 0 0 auto;
    animation: sd-live-dot-pulse 2.4s ease-in-out infinite;
}
/* Status varijante: pulsira samo InProgress (default gore). */
.sd-live-dot--assigned {
    background: var(--sd-ink-4);
    box-shadow: 0 0 0 4px var(--sd-surface);
    animation: none;
}
.sd-live-dot--pending {
    background: var(--sd-warn-ink);
    box-shadow: 0 0 0 4px var(--sd-warn-soft);
    animation: none;
}
.sd-inventura-row-title .sd-status-pill { margin-left: 8px; vertical-align: 1px; }
@keyframes sd-live-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--sd-brand-tint); }
    50%      { box-shadow: 0 0 0 6px var(--sd-brand-soft); }
}
.sd-inventura-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.3;
}
.sd-inventura-row-sub {
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-top: 2px;
}
.sd-inventura-progress-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.sd-inventura-progress-fraction {
    font-family: var(--sd-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-ink);
}
.sd-inventura-progress-percent {
    font-family: var(--sd-font-mono);
    font-size: 12px;
    color: var(--sd-brand-deep);
    font-weight: 600;
}
.sd-inventura-operators {
    font-size: 12.5px;
    color: var(--sd-ink-2);
    font-weight: 600;
}
.sd-inventura-lead {
    font-size: 12px;
    color: var(--sd-ink-3);
    margin-top: 2px;
    font-weight: 500;
}
.sd-inventura-duration {
    font-family: var(--sd-font-mono);
    font-size: 13px;
    color: var(--sd-ink-2);
    font-weight: 500;
}
.sd-inventura-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-brand-deep);
    justify-content: flex-end;
}
.sd-inventura-cta-arrow { transition: transform 140ms; display: inline-block; }
.sd-inventura-row:hover .sd-inventura-cta-arrow { transform: translateX(2px); }

/* ── Location badge & card ─────────────────────────────────────────── */
.sd-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-radius: 10px;
    font-family: var(--sd-font-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0 4px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.sd-location-badge.is-retail {
    background: var(--sd-surface);
    color: var(--sd-ink-2);
    border: 1px solid var(--sd-hairline);
}
.sd-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
@media (max-width: 540px) { .sd-location-grid { grid-template-columns: 1fr; } }
.sd-location-card {
    padding: 16px 18px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sd-location-card.is-highlight { border-color: var(--sd-brand-soft); }
.sd-location-card-head { display: flex; align-items: center; gap: 12px; }
.sd-location-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sd-location-card-kind {
    font-size: 11.5px;
    color: var(--sd-ink-3);
    margin-top: 2px;
    text-transform: capitalize;
    font-weight: 500;
}
.sd-location-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sd-hairline-soft);
}
.sd-location-card-kind .sd-status-pill { margin-left: 6px; padding: 1px 8px; font-size: 10.5px; }
/* PJ bez ijedne inventure — jedan prigušeni tekst preko oba stupca. */
.sd-location-card-empty {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--sd-ink-4);
    font-weight: 500;
}

/* ── Action pill (Pre-inventura) ───────────────────────────────────── */
.sd-action-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 140ms;
}
.sd-action-pill:hover { color: inherit; text-decoration: none; }
.sd-action-pill--warn:hover   { border-color: var(--sd-warn); }
.sd-action-pill--brand:hover  { border-color: var(--sd-brand); }
.sd-action-pill--danger:hover { border-color: var(--sd-danger); }
.sd-action-pill-count {
    min-width: 44px;
    height: 44px;
    padding-inline: 10px;
    border-radius: 12px;
    font-family: var(--sd-font-mono);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.sd-action-pill--warn   .sd-action-pill-count { background: var(--sd-warn-soft);   color: var(--sd-warn); }
.sd-action-pill--brand  .sd-action-pill-count { background: var(--sd-brand-soft);  color: var(--sd-brand); }
.sd-action-pill--danger .sd-action-pill-count { background: var(--sd-danger-soft); color: var(--sd-danger); }
.sd-action-pill-body { flex: 1; min-width: 0; }
.sd-action-pill-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.3;
}
.sd-action-pill-cta {
    font-size: 12px;
    font-weight: 600;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sd-action-pill--warn   .sd-action-pill-cta { color: var(--sd-warn-ink); }
.sd-action-pill--brand  .sd-action-pill-cta { color: var(--sd-brand-deep); }
.sd-action-pill--danger .sd-action-pill-cta { color: var(--sd-danger-deep); }
.sd-action-pill-arrow { transition: transform 140ms; display: inline-block; }
.sd-action-pill:hover .sd-action-pill-arrow { transform: translateX(2px); }

/* ── Status Quo brand-tint hero ────────────────────────────────────── */
.sd-cta-hero {
    margin: 0 28px;
    padding: 24px 28px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
}
.sd-cta-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sd-brand-deep);
    text-transform: uppercase;
}
.sd-cta-hero-title {
    margin: 8px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.015em;
}
.sd-cta-hero-desc {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--sd-ink-2);
    line-height: 1.55;
    max-width: 540px;
}
.sd-cta-hero-metrics {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    align-items: stretch;
}
.sd-cta-hero-divider { width: 1px; background: var(--sd-brand-soft); }

/* Celebration varijanta — prvi-put-spreman scenarij (setup završen, nije bilo inventure). */
.sd-cta-hero--celebrate {
    background: linear-gradient(135deg, var(--sd-brand-tint) 0%, var(--sd-card) 100%);
    border-color: var(--sd-brand);
    box-shadow: 0 1px 0 var(--sd-brand-soft), 0 8px 24px -16px var(--sd-brand);
}
.sd-cta-hero--celebrate .sd-cta-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sd-cta-hero--celebrate .sd-cta-hero-eyebrow .mud-icon-root {
    color: var(--sd-brand);
    font-size: 16px;
}

/* ── Pre-inventura warn hero banner ────────────────────────────────── */
.sd-warn-hero {
    margin: 24px 28px 0;
    padding: 20px 24px;
    background: var(--sd-warn-soft);
    border: 1px solid var(--sd-warn-soft);
    border-left: 3px solid var(--sd-warn);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.sd-warn-hero-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sd-card);
    color: var(--sd-warn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sd-warn-hero-body { flex: 1; }
.sd-warn-hero h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--sd-warn-ink);
    letter-spacing: -0.01em;
}
.sd-warn-hero p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--sd-warn-ink);
    line-height: 1.5;
    max-width: 720px;
}

/* ── Pregled section block (PanelHeader + content) ─────────────────── */
.sd-pregled-section { padding: 24px 28px 8px; }
.sd-pregled-section--lower { padding: 20px 28px 8px; }
.sd-pregled-section--bottom { padding: 20px 28px 32px; }
.sd-pregled-two-col {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
}
.sd-pregled-two-col--wide {
    grid-template-columns: 1.4fr 1fr;
}
/* Obje kartice jednake visine (grid stretch); panel je flex stupac pa sadržaj
   grafa može popuniti višak visine umjesto da ostavi prazno dno. */
.sd-pregled-two-col--wide > .sd-panel { display: flex; flex-direction: column; }
.sd-pregled-two-col--wide .sd-panel-body-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (max-width: 1100px) { .sd-pregled-two-col, .sd-pregled-two-col--wide { grid-template-columns: 1fr; } }

.sd-action-pill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) { .sd-action-pill-grid { grid-template-columns: 1fr; } }

/* ── Activity feed row ─────────────────────────────────────────────── */
.sd-activity-list { display: flex; flex-direction: column; gap: 12px; }
.sd-activity-empty { font-size: 12.5px; color: var(--sd-ink-4); font-weight: 500; padding: 8px 0; }
.sd-activity-row { display: flex; align-items: flex-start; gap: 12px; }
.sd-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--sd-ink-4);
    margin-top: 7px;
    flex: 0 0 auto;
}
.sd-activity-dot.is-brand  { background: var(--sd-brand); }
.sd-activity-dot.is-warn   { background: var(--sd-warn); }
/* Greška (barkod/uređaj/mreža) — isti token kao brojka na kartici Greške, da se kartica i redak vežu. */
.sd-activity-dot.is-danger { background: var(--sd-danger-deep); }
.sd-activity-text {
    font-size: 13px;
    color: var(--sd-ink-2);
    line-height: 1.4;
}
.sd-activity-who { color: var(--sd-ink); font-weight: 600; }
.sd-activity-where { color: var(--sd-ink-3); }
.sd-activity-time {
    font-size: 11.5px;
    color: var(--sd-ink-4);
    margin-top: 2px;
    font-family: var(--sd-font-mono);
}

/* ── Readiness chip ────────────────────────────────────────────────── */
.sd-readiness-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
}
.sd-readiness-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
}
.sd-readiness-chip--ready   { background: var(--sd-brand-soft); color: var(--sd-brand-deep); }
.sd-readiness-chip--ready   .sd-readiness-chip-dot { background: var(--sd-brand-deep); }
.sd-readiness-chip--partial { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
.sd-readiness-chip--partial .sd-readiness-chip-dot { background: var(--sd-warn-ink); }
.sd-readiness-chip--link    { text-decoration: none; cursor: pointer; }
.sd-readiness-chip--link:hover { text-decoration: underline; }

/* ── Readiness table ───────────────────────────────────────────────── */
.sd-readiness-rows { display: flex; flex-direction: column; gap: 12px; }
.sd-readiness-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.sd-readiness-row:last-child { border-bottom: none; padding-bottom: 0; }
.sd-readiness-row-name {
    font-size: 13.5px;
    color: var(--sd-ink-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-readiness-row-bk {
    font-size: 12px;
    font-family: var(--sd-font-mono);
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}
.sd-readiness-row-bk.is-warn { color: var(--sd-warn-ink); }
.sd-readiness-row-bk.is-muted { color: var(--sd-ink-4); }

/* ── Catalog quick links ───────────────────────────────────────────── */
.sd-catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--sd-hairline-soft);
    margin-bottom: 14px;
}
.sd-catalog-links { display: flex; flex-direction: column; gap: 4px; }
.sd-catalog-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sd-ink-2);
    font-weight: 500;
    text-decoration: none;
    transition: background 100ms;
}
.sd-catalog-link:hover { background: var(--sd-surface-hover); color: inherit; text-decoration: none; }
.sd-catalog-link-arrow { color: var(--sd-ink-4); margin-left: auto; }

/* ── Razlike po lokaciji (Status Quo) ──────────────────────────────── */
.sd-readiness-rows { display: flex; flex-direction: column; gap: 11px; }
.sd-readiness-row { display: flex; align-items: center; gap: 12px; }
.sd-readiness-name {
    font-size: 12.5px;
    color: var(--sd-ink-2);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-readiness-detail {
    font-size: 11.5px;
    color: var(--sd-warn-ink);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Setup checklist (Fresh) ───────────────────────────────────────── */
.sd-setup-progress-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.sd-setup-progress-label {
    font-size: 12.5px;
    color: var(--sd-ink-3);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.sd-setup-progress-label strong {
    color: var(--sd-ink);
    font-weight: 600;
}
.sd-setup-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--sd-hairline-soft);
    border-radius: 99px;
    overflow: hidden;
}
.sd-setup-progress-fill {
    height: 100%;
    background: var(--sd-brand);
    border-radius: 99px;
    transition: width 280ms ease;
}
.sd-setup-steps { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.sd-setup-step {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    transition: all 140ms;
}
.sd-setup-step--active {
    background: var(--sd-brand-tint);
    border-color: var(--sd-brand-soft);
}
.sd-setup-step--pending { opacity: 0.6; }
/* Opcionalan korak: vizualno odvojen (dashed) jer nije dio obaveznog napretka. */
.sd-setup-step--optional { border-style: dashed; }
.sd-setup-step--optional .sd-setup-step-num {
    background: var(--sd-surface);
    color: var(--sd-ink-3);
}
.sd-setup-step-optional-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 999px;
    padding: 2px 9px;
}
/* Cilj korak (Pokreni inventuru): brand naglasak na ikoni/badgeu, ali bez brand-tint pozadine
   da ne konkurira 'active' koraku. Ne broji se u napredak. */
.sd-setup-step--goal .sd-setup-step-num {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
}
.sd-setup-step-goal-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-brand-deep);
    background: var(--sd-brand-soft);
    border-radius: 999px;
    padding: 2px 9px;
}
.sd-setup-step--done .sd-setup-step-title {
    color: var(--sd-ink-3);
    text-decoration: line-through;
    text-decoration-color: var(--sd-ink-5);
    text-decoration-thickness: 1px;
}
.sd-setup-step--done .sd-setup-step-desc {
    color: var(--sd-ink-4);
}
.sd-setup-step-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-family: var(--sd-font-mono);
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--sd-surface);
    color: var(--sd-ink-3);
}
.sd-setup-step--active .sd-setup-step-num { background: var(--sd-brand); color: var(--sd-on-accent); }
.sd-setup-step--next   .sd-setup-step-num { background: var(--sd-brand-soft); color: var(--sd-brand-deep); }
.sd-setup-step--done   .sd-setup-step-num { background: var(--sd-brand); color: var(--sd-on-accent); }
.sd-setup-step-body { min-width: 0; padding-top: 4px; }
.sd-setup-step-title-row { display: flex; align-items: center; gap: 10px; }
.sd-setup-step-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}
.sd-setup-step-progress {
    font-size: 11.5px;
    color: var(--sd-ink-3);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--sd-surface);
    border-radius: 999px;
    font-family: var(--sd-font-mono);
}
.sd-setup-step-desc {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--sd-ink-2);
    line-height: 1.5;
    max-width: 640px;
}
.sd-setup-step-cta-wrap { padding-top: 6px; }
/* Dijeljeni izgled CTA gumba u checklistu — samo 2 varijante za dosljednost.
   (Anchor element, pa se .sd-btn-* mud klase ne mogu koristiti.) */
.sd-setup-step-cta {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}
.sd-setup-step-cta--primary {
    background: var(--sd-brand);
    color: var(--sd-on-accent);
    font-weight: 600;
    box-shadow: var(--sd-shadow-btn);
}
.sd-setup-step-cta--primary:hover { background: var(--sd-brand-deep); }
.sd-setup-step-cta--secondary {
    background: transparent;
    color: var(--sd-ink-2);
    border-color: var(--sd-hairline);
}
.sd-setup-step-cta--secondary:hover {
    background: var(--sd-surface);
    border-color: var(--sd-ink-4);
}

/* ── Resource cards (Fresh bottom row) ─────────────────────────────── */
.sd-resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) { .sd-resource-grid { grid-template-columns: 1fr; } }
.sd-resource-card {
    padding: 16px 18px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 140ms;
}
.sd-resource-card:hover { border-color: var(--sd-brand-soft); color: inherit; text-decoration: none; }
.sd-resource-card-head { display: flex; align-items: center; gap: 10px; }
.sd-resource-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-resource-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
}
.sd-resource-card-title {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.sd-resource-card-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--sd-ink-3);
    line-height: 1.5;
}

/* ── Subtle link ───────────────────────────────────────────────────── */
.sd-link-subtle {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sd-brand-deep);
    text-decoration: none;
}
.sd-link-subtle:hover { text-decoration: none; color: var(--sd-brand); }

/* ── Warehouse picker — "Sva skladišta" item ───────────────────────── */
.sd-warehouse-menu-aggregate {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.sd-warehouse-menu-aggregate-icon { color: var(--sd-brand); display: inline-flex; }

/* ════════════════════════════════════════════════════════════════════
   Jedinice mjere (UOMs) — Soft Daylight specifics
   ════════════════════════════════════════════════════════════════════ */

/* Kod chip — brand-soft pill u UOM tablici (veći/istaknutiji nego .sd-jmj-pill) */
.sd-uom-code-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 26px;
    padding: 0 10px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-radius: var(--sd-radius-sm);
    font-family: var(--sd-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* "U upotrebi" link */
.sd-uom-usage-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sd-brand-deep);
    font-weight: 600;
    text-decoration: none;
    transition: color 120ms;
}
.sd-uom-usage-link:hover { color: var(--sd-brand); text-decoration: none; }
.sd-uom-usage-empty {
    font-size: 13px;
    color: var(--sd-ink-4);
}

/* ── Empty state (centered, educational) ───────────────────────────── */
.sd-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 18px;
    text-align: center;
}
.sd-empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--sd-brand-tint);
    border: 1px solid var(--sd-brand-soft);
    color: var(--sd-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-empty-state-icon .mud-icon-root { font-size: 32px !important; width: 32px; height: 32px; }
.sd-empty-state-body { max-width: 380px; }
.sd-empty-state h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.015em;
}
.sd-empty-state p {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--sd-ink-3);
    line-height: 1.55;
}
.sd-empty-state p strong { color: var(--sd-ink-2); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   Status pills & misc utilities — Soft Daylight
   ════════════════════════════════════════════════════════════════════ */

/* Generic Soft Daylight status pill — base + tone modifiers */
.sd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    background: var(--sd-surface);
    color: var(--sd-ink-3);
    border: 1px solid var(--sd-hairline);
    /* Preventivno, isti razlog kao kod .sd-pin-indicator.is-missing: dvoriječni status u uskom
       stupcu inače prelomi pilulu. */
    white-space: nowrap;
}
.sd-status-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}
.sd-status-pill--brand { background: var(--sd-brand-soft); color: var(--sd-brand-deep); border-color: transparent; }
.sd-status-pill--warn  { background: var(--sd-warn-soft);  color: var(--sd-warn-ink);   border-color: transparent; }
.sd-status-pill--danger{ background: var(--sd-danger-soft); color: var(--sd-danger-deep); border-color: transparent; }
.sd-status-pill--info  { background: var(--sd-card); color: var(--sd-ink-2); border-color: var(--sd-hairline); }
.sd-status-pill--inactive { color: var(--sd-ink-3); background: var(--sd-surface); }
.sd-status-pill--inactive .sd-status-pill-dot { background: var(--sd-ink-4); }
.sd-status-pill--success {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-color: transparent;
}
.sd-status-pill--success .sd-status-pill-dot { background: var(--sd-brand); }

/* Vrsta inventure (obično brojanje / godišnji popis) — bez točkice, da se ne pobrka sa statusom.
   Godišnji je invertiran (ink/card), pa u tamnom načinu sam ostaje kontrastan. */
.sd-kind-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: transparent;
    color: var(--sd-ink-2);
    border: 1px solid var(--sd-hairline);
}
.sd-kind-pill--annual {
    background: var(--sd-ink);
    color: var(--sd-card);
    border-color: var(--sd-ink);
}
.sd-kind-pill--inline { margin-left: 8px; padding: 1px 8px; font-size: 10.5px; vertical-align: 1px; }

/* ── Inventory review — discrepancy color tones ──────────────────────── */
.sd-discrepancy--positive { color: var(--sd-brand-deep); font-weight: 600; }
.sd-discrepancy--negative { color: var(--sd-danger-deep); font-weight: 600; }
.sd-discrepancy--zero { color: var(--sd-ink-4); }

/* ── Review per-line pill ─────────────────────────────────────────────── */
.sd-review-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--sd-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.sd-review-pill--all        { background: var(--sd-surface); color: var(--sd-ink); border-color: var(--sd-hairline); }
.sd-review-pill--accepted   { background: var(--sd-brand-soft);  color: var(--sd-brand-deep); }
.sd-review-pill--overridden { background: var(--sd-info-soft); color: var(--sd-info-ink); }
.sd-review-pill--recount    { background: var(--sd-warn-soft);   color: var(--sd-warn-ink); }
.sd-review-pill--counted    { background: var(--sd-surface); color: var(--sd-ink-2); border-color: var(--sd-hairline); }
.sd-review-pill--superseded { background: var(--sd-surface); color: var(--sd-ink-4); border-color: var(--sd-hairline); }

/* ── Review po poziciji (kontrolno brojanje — operaterske brojke jedna do druge) ── */
.inv-positions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inv-position {
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    background: var(--sd-card);
    overflow: hidden;
}
.inv-position-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-hairline);
}
/* Prvi redak glave pozicije: šifra + lokacijski chip u istoj liniji. */
.inv-position-id-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.inv-tag--loc {
    align-items: center;
    gap: 4px;
}
.inv-tag-loc-ico.mud-icon-root {
    width: 13px;
    height: 13px;
    font-size: 13px;
    color: var(--sd-ink-4);
}
.inv-position-wms {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.inv-position-wms-label {
    font-size: 11px;
    color: var(--sd-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.inv-position-wms-val {
    font-weight: 700;
    color: var(--sd-ink-2);
}
/* Trgovina: upozorenje na poziciji s 2+ neodlučenih brojki (bez lokacija sustav ne
   razlikuje kontrolu istog mjesta od brojanja različitih mjesta — admin odlučuje). */
.inv-position-multi-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* Bočni razmak kao zaglavlje pozicije (14px) — inače ide rubom do ruba kartice. */
    margin: 8px 14px;
    padding: 9px 12px;
    background: var(--sd-warn-soft);
    border: 1px solid var(--sd-warn);
    border-radius: 11px;
    font-size: 12.5px;
    color: var(--sd-warn-ink);
    line-height: 1.45;
}
.inv-position-multi-warn-ico { color: var(--sd-warn-ink); margin-top: 1px; flex: 0 0 auto; }
.inv-position-multi-warn-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.inv-position-multi-warn-hint { font-weight: 600; }
.inv-position-multi-warn-btn { align-self: flex-start; }

.inv-position-ops {
    display: flex;
    flex-direction: column;
}
/* Grupa = redak operatera + njegov SN pod-red; razdjelnik je na grupi da SN ostane
   vizualno "zalijepljen" uz svog operatera (nema linije između njih). */
.inv-position-op-group {
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.inv-position-op-group:last-child { border-bottom: 0; }
.inv-position-op {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    row-gap: 6px;
    padding: 9px 14px;
}
.inv-position-op.is-superseded { opacity: 0.55; }
.inv-position-op-name {
    flex: 0 0 160px;
    font-weight: 600;
    color: var(--sd-ink);
}
/* SN pod-red: uvučen ispod imena operatera, prelama duge liste, ne gura brojke. */
.inv-position-op-serials {
    padding: 0 14px 9px 28px;
    word-break: break-word;
}

/* ── Lot / Rok / SN chipovi ────────────────────────────────────────────────
   Label (Lot/Rok/SN) + vrijednost u jednom chipu. Neutralno = tiho; ROK boji
   rizik (istekao = danger, blizu = warn). Isti chipovi u review glavi i tablici. */
.inv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}
.inv-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-surface);
    color: var(--sd-ink-2);
    font-family: var(--sd-font-mono);
    font-size: 12px;
    line-height: 1.6;
}
.inv-tag-label {
    font-family: var(--sd-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-4);
}
.inv-tag--sn {
    white-space: normal;
    word-break: break-word;
}
/* ROK — blizu isteka (jantar) */
.inv-tag--rok-soon {
    background: var(--sd-warn-soft);
    border-color: transparent;
    color: var(--sd-warn-ink);
}
.inv-tag--rok-soon .inv-tag-label { color: var(--sd-warn-ink); opacity: 0.75; }
/* ROK — istekao (crveno) */
.inv-tag--rok-expired {
    background: var(--sd-danger-soft);
    border-color: transparent;
    color: var(--sd-danger-deep);
}
.inv-tag--rok-expired .inv-tag-label { color: var(--sd-danger-deep); opacity: 0.75; }
.inv-position-op-qty {
    flex: 0 0 90px;
    text-align: right;
}
.inv-position-op-disc {
    flex: 0 0 110px;
    text-align: right;
}
.inv-position-op-pill {
    flex: 0 0 auto;
}
.inv-position-op-actions {
    margin-left: auto;
}

/* ── Review summary chips (4-up) ──────────────────────────────────────── */
.sd-review-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.sd-review-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--sd-font);
    font-size: 12.5px;
}
.sd-review-summary-chip strong { font-weight: 700; }
.sd-review-summary-chip-label { font-weight: 500; }

/* ── Inventory detail review summary card spacing ─────────────────────── */
.inv-review-summary {
    padding: 16px 20px;
    /* Ljepljivi sažetak: brojači/filtri ostaju vidljivi dok admin scrolla kroz stavke.
       Offset drži cijelu karticu (s gornjim rubom) jasno ispod app bara, ne samo chipove. */
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) + 22px);
    z-index: 15;
}
/* Pillovi su gumbi-filtri: reset button UA stilova + aktivno stanje. */
button.sd-review-summary-chip {
    cursor: pointer;
    font: inherit;
    border: 1px solid transparent;
    transition: box-shadow 120ms ease;
}
.sd-review-summary-chip.is-active {
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ── Napredak-kartica: kompaktna jedna linija kad je sve prebrojano ───── */
.inv2-collapsed {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}
.inv2-collapsed-text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--sd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv2-collapse-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px 0 0;
}


/* ── Override dialog baseline (WMS vs Skenirano) ──────────────────────── */
.sd-override-baseline {
    display: flex;
    gap: 12px;
    margin: 4px 0 14px;
}
.sd-override-baseline-item {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--sd-radius-lg);
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sd-override-baseline-label {
    font-family: var(--sd-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sd-ink-3);
}
.sd-override-baseline-value {
    font-family: var(--sd-font-mono, var(--sd-font));
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
}

/* ── Field helper text (below textarea) ───────────────────────────────── */
.sd-field-helper {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--sd-ink-3);
}

/* ── Inventory line actions (per-row in PendingReview) ────────────────── */
.inv-line-actions {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

/* Putokaz umjesto "Ispravi" za serijske artikle — pill poravnat s gumbom "Prihvati". */
.inv-line-serial-hint {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    white-space: nowrap;
}


/* ── Delete-item / context-chip meta (sažetak ispod broja) ────────────── */
.sd-delete-item-meta {
    font-family: var(--sd-font);
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-top: 2px;
}
.sd-delete-item-meta strong { color: var(--sd-ink); font-weight: 600; }

/* ── Operator checklist (Assign dialog) ──────────────────────────────── */
.sd-operator-checklist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-card);
    overflow: hidden;
}
.sd-operator-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--sd-hairline-soft);
    transition: background 120ms ease;
}
.sd-operator-row:last-child { border-bottom: 0; }
.sd-operator-row:hover { background: var(--sd-surface); }
.sd-operator-row.is-selected { background: var(--sd-brand-tint); }
.sd-operator-row-check { margin: 0 !important; }
.sd-operator-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--sd-brand);
    color: var(--sd-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}
.sd-operator-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sd-operator-row-name {
    font-family: var(--sd-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.25;
}
.sd-operator-row-email {
    font-family: var(--sd-font);
    font-size: 11.5px;
    color: var(--sd-ink-3);
    line-height: 1.2;
}

.sd-operator-notes-wrap { margin-top: 12px; }
.sd-operator-notes-title {
    font-family: var(--sd-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sd-ink-3);
    margin-bottom: 8px;
}

/* Per-operater konfiguracija (napomena + zone) — svaki operater u vlastitoj kartici */
.sd-assign-config { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.sd-assign-config-title {
    font-family: var(--sd-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sd-ink-3);
}
.sd-assign-op-card {
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-card);
    overflow: hidden;
}
.sd-assign-op-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-hairline);
}
.sd-assign-op-head-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.sd-assign-op-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
}


/* "Aktivan" silent label (text only — spec) */
.sd-status-active-text {
    font-size: 13px;
    color: var(--sd-ink-3);
    font-weight: 500;
}

/* Generic warehouse type pill — skladiste (brand-soft) vs trgovina (surface) */
.sd-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.sd-type-pill--warehouse { background: var(--sd-brand-soft); color: var(--sd-brand-deep); }
.sd-type-pill--retail    { background: var(--sd-surface);    color: var(--sd-ink-2); border: 1px solid var(--sd-hairline); }

/* ════════════════════════════════════════════════════════════════════
   Dialog content extensions (Soft Daylight)
   ════════════════════════════════════════════════════════════════════ */

/* Body intro paragraph (kratak description prije polja) */
.sd-modal-desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--sd-ink-2);
    line-height: 1.55;
}

/* ── Radio button group (Soft Daylight stack) ──────────────────────── */
.sd-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sd-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-xl);
    cursor: pointer;
    font-family: var(--sd-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--sd-ink);
    text-align: left;
    transition: background 120ms, border-color 120ms;
}
.sd-radio-option:hover { background: var(--sd-surface); }
.sd-radio-option.is-selected {
    background: var(--sd-brand-tint);
    border-color: var(--sd-brand-soft);
}
.sd-radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sd-radio-row .sd-radio-option { flex: 1; }
.sd-radio-help {
    color: var(--sd-ink-4);
    cursor: help;
    flex-shrink: 0;
}
.sd-radio-help:hover { color: var(--sd-ink-2); }
.sd-radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--sd-hairline);
    background: var(--sd-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: border-color 120ms;
}
.sd-radio-option.is-selected .sd-radio-circle {
    border-color: var(--sd-brand);
}
.sd-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sd-brand);
}
.sd-radio-label { flex: 1; }
/* Opcija s opisom ispod naslova (npr. vrsta inventure) — krug poravnat s prvim retkom. */
.sd-radio-option--desc { align-items: flex-start; }
.sd-radio-option--desc .sd-radio-circle { margin-top: 1px; }
.sd-radio-hint {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--sd-ink-3);
}
.sd-radio-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sd-radio-option:disabled:hover { background: var(--sd-card); }

/* ── Chip list (selected items in dialog) ──────────────────────────── */
.sd-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -4px;
}
.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.sd-chip.is-invalid {
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    box-shadow: inset 0 0 0 1px var(--sd-warn);
}
.sd-chip.is-invalid .mud-icon-root { color: var(--sd-warn); }

/* Preview summary u CreateInventoryDialog — sažetak što će biti prebrojano. */
.sd-inv-preview-summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: var(--sd-radius-xl);
    font-size: 13px;
    color: var(--sd-ink-2);
    line-height: 1.55;
}
.sd-inv-preview-summary .mud-icon-root {
    color: var(--sd-brand);
    flex-shrink: 0;
    margin-top: 2px;
}
.sd-inv-preview-summary strong { color: var(--sd-ink); font-weight: 600; }

/* ── Help stranice (Vodič, Upute) ───────────────────────────────────── */
.sd-help-content {
    padding: 8px 28px 32px;
    max-width: 760px;
}
.sd-help-section {
    margin-top: 28px;
}
.sd-help-section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}
.sd-help-section p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sd-ink-2);
}
.sd-help-section p:last-child { margin-bottom: 0; }
.sd-help-section p strong { color: var(--sd-ink); font-weight: 600; }
.sd-help-section h3 {
    margin: 22px 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.005em;
}
.sd-help-section ul,
.sd-help-section ol {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sd-ink-2);
}
.sd-help-section li { margin-bottom: 5px; }
.sd-help-section li:last-child { margin-bottom: 0; }
.sd-help-section li strong { color: var(--sd-ink); font-weight: 600; }
.sd-help-section code,
.sd-help-section .sd-kbd {
    font-family: var(--sd-font-mono, ui-monospace, "Cascadia Code", "Consolas", monospace);
    font-size: 12.5px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--sd-brand-deep);
}
.sd-help-note {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--sd-surface);
    border-left: 3px solid var(--sd-brand-soft);
    border-radius: 6px;
    font-size: 13px;
    color: var(--sd-ink-3);
}
.sd-help-placeholder {
    color: var(--sd-ink-4);
    font-style: italic;
}
.sd-help-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
}
.sd-help-toc a {
    font-size: 13px;
    color: var(--sd-brand-deep);
    text-decoration: none;
    padding: 3px 0;
    transition: color 120ms;
}
.sd-help-toc a:hover { color: var(--sd-ink); text-decoration: underline; }
.sd-help-link {
    color: var(--sd-brand-deep);
    font-weight: 600;
    text-decoration: none;
}
.sd-help-link:hover { text-decoration: underline; }

/* FAQ (Česta pitanja) — akordeon, dijeli .sd-help-content/.sd-help-toc */
.sd-faq-category {
    margin-top: 26px;
}
.sd-faq-item {
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    background: var(--sd-card, #fff);
    margin-bottom: 8px;
    overflow: hidden;
}
.sd-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 120ms;
}
.sd-faq-item summary::-webkit-details-marker { display: none; }
.sd-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--sd-brand-deep);
    transition: transform 150ms;
}
.sd-faq-item[open] summary::after { content: "−"; }
.sd-faq-item summary:hover { background: var(--sd-surface); }
.sd-faq-item[open] summary {
    background: var(--sd-surface);
    border-bottom: 1px solid var(--sd-hairline);
}
.sd-faq-answer {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sd-ink-2);
}
.sd-faq-answer strong { color: var(--sd-ink); font-weight: 600; }
.sd-chip-text { line-height: 1.4; }
.sd-chip-close {
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--sd-brand-deep);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
}
.sd-chip-close:hover { background: rgba(63, 122, 85, 0.16); }
.sd-chip-close .mud-icon-root { font-size: 12px !important; width: 12px; height: 12px; }

/* ── QR dialog specifics ───────────────────────────────────────────── */
.sd-qr-frame {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-md);
    align-self: center;
    display: inline-block;
    line-height: 0;
}
.sd-qr-frame img {
    display: block;
    width: 256px;
    height: 256px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.sd-qr-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.sd-qr-status-instructions {
    font-size: 13px;
    color: var(--sd-ink-2);
    font-weight: 500;
    line-height: 1.5;
}
.sd-qr-status-waiting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sd-ink-3);
}
.sd-qr-spinner.mud-progress-circular { color: var(--sd-brand) !important; }
.sd-qr-spinner.mud-progress-circular .mud-progress-circular-svg { width: 16px; height: 16px; }
.sd-qr-status-countdown {
    font-size: 12px;
    color: var(--sd-ink-3);
}
.sd-qr-status-countdown strong { color: var(--sd-ink); font-family: var(--sd-font-mono); }
.sd-qr-manual-toggle {
    font-size: 12px;
    margin-top: 4px;
}
.sd-qr-manual-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    padding: 8px 16px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-md);
}
.sd-qr-manual-label {
    font-size: 11px;
    color: var(--sd-ink-3);
}
.sd-qr-manual-value {
    font-family: var(--sd-font-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sd-ink);
}

/* ── Status banner inside dialog (success/expired) ─────────────────── */
.sd-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--sd-radius-md);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.sd-status-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sd-status-banner-icon .mud-icon-root { font-size: 18px !important; width: 18px; height: 18px; }
.sd-status-banner--brand { background: var(--sd-brand-soft); color: var(--sd-brand-deep); }
.sd-status-banner--warn  { background: var(--sd-warn-soft);  color: var(--sd-warn-ink); }

/* Inline progress bar cell (Inventory list) */
.sd-progress-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.sd-progress-cell-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--sd-font-mono);
    font-size: 12.5px;
    color: var(--sd-ink-2);
}
.sd-progress-cell-text strong { color: var(--sd-ink); font-weight: 600; }
.sd-progress-cell-pct { color: var(--sd-brand-deep); font-weight: 600; }

/* ── Skeleton (Soft Daylight) ──────────────────────────────────────── */
.sd-skeleton {
    background: linear-gradient(90deg,
        var(--sd-surface) 0%,
        var(--sd-surface-hover) 50%,
        var(--sd-surface) 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: sd-skel 1.4s ease-in-out infinite;
}
@keyframes sd-skel { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* ── Zebra Browser Print status — full-width strip with 3 states ─────────────── */
.sd-bp-status-wrap {
    margin: 0 28px;
    flex: 0 0 auto;
}
.sd-bp-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: var(--sd-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sd-ink-2);
}
.sd-bp-status .sd-bp-text {
    flex: 1;
    min-width: 0;
}
.sd-bp-status .sd-bp-text strong { color: var(--sd-ink); font-weight: 600; }
.sd-bp-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sd-ink-3);
    flex: 0 0 auto;
}

/* State: not-running — amber strip with link + action */
.sd-bp-status.is-not-running {
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
}
.sd-bp-status.is-not-running .sd-bp-text strong { color: var(--sd-warn-ink); }
.sd-bp-status.is-not-running .sd-bp-dot { background: var(--sd-warn); }

/* State: running — neutral surface */
.sd-bp-status.is-running {
    background: var(--sd-surface);
    color: var(--sd-ink-2);
}
.sd-bp-status.is-running .sd-bp-dot { background: var(--sd-ink-3); }

/* State: connected — brand-tint strip */
.sd-bp-status.is-connected {
    background: var(--sd-brand-tint);
    color: var(--sd-brand-deep);
}
.sd-bp-status.is-connected .sd-bp-text strong { color: var(--sd-brand-deep); }
.sd-bp-status.is-connected .sd-bp-dot { background: var(--sd-brand); }

/* Inline action button + link inside the strip */
.sd-bp-action {
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--sd-card);
    color: inherit;
    border-radius: 7px;
    font-family: var(--sd-font);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}
.sd-bp-action:hover { background: var(--sd-surface); }
.sd-bp-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    flex: 0 0 auto;
}

/* ── Labels (Etikete): card-pair structure ─────────────────────────────
   Etikete koristi dva .sd-content-card-a koja se vizualno spajaju u jedan.
   - Gornja kartica: breadcrumb + naslov + Zebra status + tab strip.
   - Donja kartica: sadržaj aktivnog taba (settings, toolbar, tablica).
   Spajaju se izravnim doticajem i flat granicama na rubu spoja.
   Razlog: action bar mora ostati sibling kartice (overflow:hidden uništava sticky),
   pa svaka tab komponenta i dalje renderira svoju karticu + action bar — gornja
   "header" kartica je iznad njih u Labels.razor parentu.
   ───────────────────────────────────────────────────────────────────── */
.sd-labels-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 28px 14px;
}
.sd-labels-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.sd-labels-warehouse-info {
    font-size: 13px;
    color: var(--sd-ink-3);
}
.sd-labels-warehouse-info strong { color: var(--sd-ink-1); }

/* Gornja kartica — flat bottom da se vizualno spoji s donjom */
.sd-content-card.sd-labels-card-top {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--sd-shadow-card);
}

/* Donja kartica — flat top, bez gornje sjene da ne stvara liniju spoja */
.sd-content-card.sd-labels-card-bottom {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 8px 24px -12px rgba(60, 55, 40, 0.10);
}

/* Zebra status strip — sjedi između naslova i tab strip-a u gornjoj kartici. */
.sd-labels-card-top .sd-bp-status-wrap {
    margin: 0 28px 2px;
}

/* Tab strip (Artikli / Lokacije) — underline indikator, uppercase oznake. */
.sd-labels-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 28px;
    margin-top: 16px;
    border-bottom: 1px solid var(--sd-hairline);
}
.sd-labels-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--sd-ink-3);
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: color 120ms;
}
.sd-labels-tab:hover {
    color: var(--sd-ink-2);
}
.sd-labels-tab.is-active {
    color: var(--sd-brand-deep);
}
.sd-labels-tab.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--sd-brand);
    border-radius: 2px;
}
.sd-labels-tab .mud-icon-root {
    font-size: 17px !important;
    width: 17px;
    height: 17px;
    color: var(--sd-ink-3);
    transition: color 120ms;
}
.sd-labels-tab.is-active .mud-icon-root {
    color: var(--sd-brand);
}
.sd-labels-tab:focus-visible {
    outline: 2px solid var(--sd-brand-soft);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Tab content wrapper — koristi display:contents da prosvjetli prema flex-u parenta.
   Inactive tab je sakriven, ali instance se ne disposeira (state se čuva). */
.sd-labels-tab-content {
    display: contents;
}
.sd-labels-tab-content:not(.is-active) {
    display: none;
}

/* Section header u donjoj kartici ("Naljepnice artikala / lokacija") — manji h2. */
.sd-labels-section-header {
    padding: 20px 28px 4px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sd-labels-section-header h2 {
    margin: 0;
    font-family: var(--sd-font);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sd-ink);
    line-height: 1.2;
}
.sd-labels-section-header p {
    margin: 4px 0 0;
    font-family: var(--sd-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-ink-3);
    line-height: 1.45;
}

/* Detektirani Browser Print pisači u PrinterSettingsDialog — klikabilni chip-ovi
   ispod input polja koji popunjavaju Default Zebra pisač imenom. */
.sd-printer-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -4px 14px 12px;
}
.sd-printer-suggestions-label {
    font-size: 12.5px;
    color: var(--sd-ink-3);
    margin-right: 2px;
}
.sd-printer-suggestion {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--sd-surface);
    color: var(--sd-ink-2);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: 999px;
    font-size: 12.5px;
    font-family: var(--sd-mono, monospace);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.sd-printer-suggestion:hover {
    background: var(--sd-brand-soft);
    border-color: var(--sd-brand);
}
.sd-printer-suggestion.is-selected {
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-color: var(--sd-brand);
    font-weight: 600;
}

/* Stack cells (naziv + sub-tekst u istom MudTd) — koristi se u Settings/Printers. */
.sd-cell-stacked {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   SYSTEM (super-admin) — Soft Daylight varijanta za /system stranice.
   Identitet: tamni mono "SYSTEM" eyebrow s brand točkom — područje
   sustava se na prvi pogled razlikuje od tenant sučelja.
   ════════════════════════════════════════════════════════════════════ */
.sys-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-family: var(--sd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-page);
    background: var(--sd-ink);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 10px;
}

.sys-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sd-brand);
}

/* Naslov + status pillovi u istom retku */
.sys-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Stat pločice ispod headera */
.sys-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding: 0 28px 20px;
}

.sys-stat {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline-soft);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 0;
}

.sys-stat-value {
    font-family: var(--sd-font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--sd-ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-stat-value--sm { font-size: 14px; padding: 4px 0 5px; }

.sys-stat-label {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}

.sys-stat--warn { background: var(--sd-warn-soft); border-color: transparent; }
.sys-stat--warn .sys-stat-value, .sys-stat--warn .sys-stat-label { color: var(--sd-warn-ink); }

.sys-stat--danger { background: var(--sd-danger-soft); border-color: transparent; }
.sys-stat--danger .sys-stat-value, .sys-stat--danger .sys-stat-label { color: var(--sd-danger-deep); }

/* Panel unutar tabova (zamjena za stare MudPaper + wms-divider kombinacije) */
.sys-panel {
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    padding: 24px;
}

/* Redak "label: value" u panelima (statistika, kalkulator) */
.sys-kv {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sd-hairline-soft);
    font-size: 13.5px;
}

.sys-kv:last-of-type { border-bottom: 0; }
.sys-kv-label { color: var(--sd-ink-3); }
.sys-kv-value { font-weight: 600; color: var(--sd-ink); text-align: right; }
.sys-kv-value--mono { font-family: var(--sd-font-mono); font-weight: 500; }

/* Tabs sjede unutar sd-content-card s istim horizontalnim ritmom */
.sys-tabs { padding: 0 28px 28px; }

/* Klikabilni redovi tablice (lista tenanata) */
.sys-row-click tbody tr { cursor: pointer; }


/* ════════════════════════════════════════════════════════════════
   ERP integracija + read-only napomene (Soft Daylight)
   Neutralni, on-brand info blokovi — crvena/plava se čuva za prave greške.
   ════════════════════════════════════════════════════════════════ */

/* Read-only obavijest (npr. Jedinice mjere kad dolaze iz ERP-a) */
.sd-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 28px 16px;
    padding: 13px 16px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
}
.sd-info-banner__icon {
    width: 26px;
    height: 26px;
    border-radius: 99px;
    flex: 0 0 auto;
    background: var(--sd-brand-tint);
    color: var(--sd-brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-info-banner__text {
    font-size: 13.5px;
    color: var(--sd-ink-2);
    line-height: 1.45;
}

/* ERP postavke — kartice konekcije i sinkronizacije */
.sd-erp-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    align-items: start;
    padding: 22px 28px 28px;
}
@media (max-width: 960px) {
    .sd-erp-grid { grid-template-columns: 1fr; }
}
.sd-erp-card {
    border: 1px solid var(--sd-hairline);
    border-radius: 16px;
    padding: 24px 26px;
}
.sd-erp-card__title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}
.sd-erp-card__lead {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--sd-ink-3);
    line-height: 1.5;
}
.sd-erp-encrypt-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--sd-ink-3);
}

/* Read-only "Swing modul" red — vizualno dio forme (kao Server/Baza), ali nepromjenjiv.
   Surface pozadina + katanac = zaključano/konfigurirano, NE greška (crvena se ne koristi). */
.sd-erp-readonly {
    margin-bottom: 16px;
    padding: 9px 15px 11px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
}
.sd-erp-readonly__label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.sd-erp-readonly__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-deep);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
}

/* Kompaktni neutralni hint (uz disabled gumb) */
.sd-info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 11px;
    font-size: 13px;
    color: var(--sd-ink-3);
    line-height: 1.45;
}
.sd-info-note__icon {
    color: var(--sd-ink-3);
    display: flex;
    margin-top: 1px;
    flex: 0 0 auto;
}

/* Status zadnje sinkronizacije */
.sd-sync-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sd-ink-3);
    text-transform: uppercase;
    margin-bottom: 7px;
}
.sd-sync-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--sd-ink-3);
    font-weight: 500;
}
.sd-sync-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    flex: 0 0 auto;
}
.sd-sync-status__dot--idle { border: 1.5px solid var(--sd-ink-4); background: transparent; }
.sd-sync-status__dot--ok { background: var(--sd-brand); }
.sd-sync-status__dot--error { background: var(--sd-danger); }
.sd-sync-divider { height: 1px; background: var(--sd-hairline-soft); margin: 20px 0; }

/* ════════════════════════════════════════════════════════════════════════════
   Detalj inventure — raspored u tri zone (invd-*): header s izbornikom Izvještaji,
   mreža kartica "Podaci o inventuri", kartica s tabovima pregleda.
   Spec: docs/design/Blazor/Sensiteh Inventura Web/handoff/INVENTURA_DETALJ_SPEC.md
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Izbornik Izvještaji ── */
.invd-menu-anchor { position: relative; }
.invd-spin.mud-progress-circular { width: 16px !important; height: 16px !important; margin-right: 8px; color: var(--sd-ink-3); }
/* Prozirna podloga: klik izvan izbornika ga zatvara. */
.invd-menu-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
.invd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 51;
    width: 340px;
    max-width: calc(100vw - 40px);
    background: var(--sd-card);
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    box-shadow: var(--wms-shadow-pop);
    padding: 8px;
}
.invd-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--sd-hairline-soft); margin-bottom: 6px; }
.invd-menu-head-row { display: flex; align-items: center; gap: 8px; }
.invd-menu-lead { flex: 1; font-size: 13px; color: var(--sd-ink-2); }
.invd-draft-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--sd-warn-soft);
    border: 1px solid var(--sd-warn-border);
    color: var(--sd-warn-ink);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.invd-draft-badge .mud-icon-root { font-size: 13px; width: 13px; height: 13px; }
.invd-menu-warn {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--sd-warn-tint);
    border: 1px solid var(--sd-warn-border);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sd-warn-ink);
}
.invd-menu-item {
    font: inherit;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.invd-menu-item:hover { background: var(--sd-surface); }
.invd-ico-pdf.mud-icon-root { color: var(--sd-danger-deep); }
.invd-ico-xls.mud-icon-root { color: var(--sd-brand-deep); }

/* ── Warn traka (provjera nepopisanih nije uspjela) ── */
.invd-banner-warn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--sd-warn-tint);
    border: 1px solid var(--sd-warn-border);
    border-radius: 14px;
    flex-wrap: wrap;
}
.invd-banner-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.invd-banner-text { flex: 1; min-width: 200px; font-size: 14px; font-weight: 600; color: var(--sd-warn-ink); }
.mud-button-root.invd-warn-text-btn { color: var(--sd-warn-ink) !important; }

/* ── Podaci o inventuri: naslovni red ── */
.invd-sec-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.invd-cap {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-2);
}
.invd-sec-summary { font-size: 13.5px; color: var(--sd-ink-2); }
.invd-sec-line { flex: 1; min-width: 20px; height: 1px; background: var(--sd-hairline-soft); }
.mud-button-root.invd-text-btn { color: var(--sd-ink-2) !important; }

/* ── Mreža kartica: broj stupaca po širini SADRŽAJA (container query), ne prozora ── */
.invd-pwrap { container-type: inline-size; margin-bottom: 16px; }
.invd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.invd-grid > .invd-span2 { grid-column: span 2; }
.invd-grid > .invd-full { grid-column: 1 / -1; }
@container (max-width: 860px) {
    .invd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* span 2 u manje od 3 stupca bi stvorio implicitni stupac → vodoravni scroll. */
    .invd-grid > .invd-span2 { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
    .invd-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Kartica ── */
.invd-card {
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 150px;
    min-width: 0;
}
.invd-card--compact { min-height: 0; }
.invd-card-head { display: flex; align-items: center; gap: 10px; }
.invd-card-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sd-surface);
    color: var(--sd-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.invd-card-cap {
    flex: 1;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.invd-card-aside { font-size: 12.5px; white-space: nowrap; }
.invd-card-body {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--sd-ink);
    overflow-wrap: anywhere;
}
.invd-card-body b { font-weight: 700; }
.invd-card-hint { margin-top: 6px; font-size: 12.5px; color: var(--sd-ink-3); }
.invd-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.invd-card--warn { border-color: var(--sd-warn-border); background: var(--sd-warn-tint); }
.invd-card--warn .invd-card-ico { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
.invd-card--warn .invd-card-cap { color: var(--sd-warn-ink); }
.invd-card--danger { border-color: var(--sd-danger-border); background: var(--sd-danger-tint); }
.invd-card--danger .invd-card-ico { background: var(--sd-danger-soft); color: var(--sd-danger-deep); }
.invd-card--danger .invd-card-cap { color: var(--sd-danger-deep); }
.invd-card--done .invd-card-ico { background: var(--sd-brand-soft); color: var(--sd-brand-deep); }
.invd-done-check {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--sd-brand);
    color: var(--sd-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.invd-done-check .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.invd-warn-text { color: var(--sd-warn-ink); font-weight: 500; }
.invd-neutral-text { color: var(--sd-ink-2); }
.invd-clamp-3,
.invd-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.invd-clamp-3 { -webkit-line-clamp: 3; }
.invd-clamp-4 { -webkit-line-clamp: 4; }

/* Inline editor (kartica tada zauzima cijeli red; akcije kartice su skrivene). */
.invd-editor {
    padding: 16px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.invd-editor-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.invd-editor-fields--dates { max-width: 520px; }
.invd-save-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mud-button-root.invd-push-right { margin-left: auto; }

/* Operateri u kartici */
.invd-card .inv-op-avatar { width: 30px; height: 30px; }
.invd-card .inv-op-summary { flex-wrap: wrap; }
.invd-op-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invd-op-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.invd-card .inv-op-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    max-height: 320px;
    padding: 6px;
    border: 1px solid var(--sd-hairline-soft);
    border-radius: 12px;
}

/* ── Kartica "Operater nije skenirao" (K1) ── */
.invd-unscanned {
    border: 1px solid var(--sd-warn-border);
    border-radius: 16px;
    background: var(--sd-card);
    overflow: hidden;
    margin-bottom: 16px;
}
.invd-unscanned-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    background: var(--sd-warn-tint);
    border-bottom: 1px solid var(--sd-warn-border);
}
.invd-unscanned-titles { flex: 1; min-width: 0; }
.invd-unscanned-title-row { display: flex; align-items: center; gap: 9px; }
.invd-unscanned-title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--sd-ink); }
.invd-count-badge {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--sd-warn-soft);
    color: var(--sd-warn-ink);
    font-family: var(--sd-font-mono);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.invd-unscanned-hint { margin-top: 3px; font-size: 13px; color: var(--sd-ink-2); }
.invd-unscanned-table.is-scroll { max-height: 392px; overflow-y: auto; }
.invd-unscanned-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) 90px minmax(0, 1.5fr);
    gap: 14px;
    align-items: center;
    min-height: 50px;
    padding: 6px 20px;
    font-size: 13.5px;
    color: var(--sd-ink);
}
.invd-unscanned-row + .invd-unscanned-row { border-top: 1px solid var(--sd-hairline-soft); }
.invd-unscanned-table.is-noloc .invd-unscanned-row { grid-template-columns: minmax(0, 1.8fr) 90px minmax(0, 1.5fr); }
.invd-unscanned-row--head {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 0;
    padding: 9px 20px;
    background: var(--sd-surface);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.invd-unscanned-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 6px; }
.invd-num { text-align: right; }
.invd-min0 { min-width: 0; }
.invd-ellip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Kartica s tabovima ── */
/* Bez overflow:hidden — ljepljivi sažetak pregleda (sticky) inače ne radi. */
.invd-tabs-card { border: 1px solid var(--sd-hairline); border-radius: 16px; background: var(--sd-card); }
.invd-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--sd-hairline);
}
.invd-tab {
    font: inherit;
    flex: 0 0 auto;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.invd-tab:hover { background: var(--sd-surface); }
.invd-tab.is-active { background: var(--sd-brand-tint); border-bottom-color: var(--sd-brand); }
.invd-tab-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sd-ink-2);
    white-space: nowrap;
}
.invd-tab.is-active .invd-tab-title { font-weight: 700; color: var(--sd-ink); }
.invd-tab-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sd-warn); flex: none; }
/* Opis samo na aktivnom tabu; ne širi tab preko naziva, ali ne uži od ~220px (odluka 13). */
.invd-tab-desc {
    width: 0;
    min-width: max(100%, 220px);
    font-size: 12px;
    line-height: 1.4;
    color: var(--sd-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.invd-tab-desc.is-warn { color: var(--sd-warn-ink); }
.invd-tab-pane { padding: 16px 20px 20px; }
/* sd-field-input je bez okvira jer ga inače crta SdField omotač; u tabovima stoji sam
   (filteri, pretraga, izbor u retku tablice), pa dobiva vlastiti okvir. */
.invd-tab-pane .sd-field-input:not(.sd-field .sd-field-input) {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    background: var(--sd-card);
    font-size: 13.5px;
}
.invd-tab-pane .sd-field-input:not(.sd-field .sd-field-input):focus { border-color: var(--sd-brand); }
.invd-tab-pane td .sd-field-input:not(.sd-field .sd-field-input) { height: 34px; }
/* Alatne trake u tabovima: polja kao filteri Povijesti (Mud outlined dense, ~40px), gumbi iste visine. */
.invd-toolbar { align-items: center; }
.invd-tab-pane .inv-history-filters .mud-button-root,
.invd-tab-pane .inv-lines-toolbar .mud-button-root { height: 40px; }
.inv-history-filter.invd-filter-wide { flex-basis: 260px; }
/* Grupa gumba desno — prelama se u novi red kao cjelina. */
.invd-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* Mono samo za brojke u stupcu količine, naslov kao ostali naslovi. */
.invd-tab-pane .inv-history-table th.inv-history-qty { font-family: var(--sd-font); }
.invd-tab-pane .inv-history-table th { background: var(--sd-surface); font-size: 10px; }

/* Sažetak pregleda (K2) unutar taba Prebrojane stavke — i dalje ljepljiv. */
.inv-review-summary.invd-review {
    padding: 0 0 14px;
    margin-bottom: 14px;
    background: var(--sd-card);
    border-bottom: 1px solid var(--sd-hairline-soft);
}
.invd-review .sd-review-summary-chip {
    height: 34px;
    padding: 0 6px 0 13px;
    border: 1px solid var(--sd-hairline);
    background: var(--sd-card);
    color: var(--sd-ink);
    font-size: 13px;
}
.invd-review .sd-review-summary-chip-label { font-weight: 600; }
.invd-review .sd-review-summary-chip strong {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sd-surface-hover);
    color: var(--sd-ink-2);
    font-family: var(--sd-font-mono);
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.invd-review .sd-review-summary-chip.is-hot strong { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
/* Aktivni pill: ink pozadina + tekst u boji kartice — u tamnoj temi se sam obrne. */
.invd-review .sd-review-summary-chip.is-active {
    background: var(--sd-ink);
    border-color: var(--sd-ink);
    color: var(--sd-card);
    box-shadow: none;
}
.invd-review .sd-review-summary-chip.is-active strong { background: rgba(127, 127, 127, 0.28); color: var(--sd-card); }
.invd-review-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
}
.invd-review-msg .mud-icon-root { margin-top: 2px; flex: none; }
.invd-review-msg.is-ok { background: var(--sd-brand-tint); border: 1px solid var(--sd-brand-soft); color: var(--sd-brand-deep); }
.invd-review-msg.is-warn { background: var(--sd-warn-tint); border: 1px solid var(--sd-warn-border); color: var(--sd-warn-ink); }

/* Kartice pozicija (review) — usklađeno s karticama mreže. */
.inv-detail-shell .inv-position { border-radius: 14px; }
.inv-detail-shell .inv-position-multi-warn { background: var(--sd-warn-tint); border-color: var(--sd-warn-border); }

/* ════════════════════════════════════════════════════════════════════════════
   Dijalog "Nova inventura" (ci-*). Spec: docs/design/Blazor/Sensiteh Inventura Web/
   handoff/nova-inventura/NOVA_INVENTURA_SPEC.md. Shell (SdDialogShell) se ne mijenja
   globalno — sve iznimke su ograničene na .mud-dialog:has(.ci).
   ════════════════════════════════════════════════════════════════════════════ */
.mud-dialog:has(.sd-dialog-w-620) {
    max-width: min(620px, calc(100vw - 32px)) !important;
    width: 620px !important;
}
.mud-dialog:has(.ci) {
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
}
.mud-dialog:has(.ci) .sd-modal-header {
    padding: 20px 24px 16px;
    align-items: center;
    border-bottom: 1px solid var(--sd-hairline);
}
.mud-dialog:has(.ci) .sd-modal-title { font-size: 21px; }
.mud-dialog:has(.ci) .sd-modal-body { padding: 18px 24px 22px; }
.mud-dialog:has(.ci) .sd-modal-footer {
    margin-top: 0;
    padding: 14px 24px;
    border-top-color: var(--sd-hairline);
    flex-wrap: wrap;
}
html[data-theme="dark"] .mud-dialog:has(.ci) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 28px 70px -12px rgba(0, 0, 0, 0.8) !important;
}
/* Tamniji scrim u tamnoj temi — BackgroundClass postavlja InventoryList samo za ovaj dijalog. */
html[data-theme="dark"] .ci-scrim { background-color: rgba(0, 0, 0, 0.72) !important; }

.ci { display: flex; flex-direction: column; gap: 22px; }
.ci-section { display: flex; flex-direction: column; gap: 10px; }
.ci-cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-ink-2);
}
/* Pomoćni redak ispod naslova sekcije — bez okvira. */
.ci-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: -4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sd-ink-3);
}
.ci-help .mud-icon-root { font-size: 16px; width: 16px; height: 16px; margin-top: 1px; flex: none; }

/* Poslovna jedinica */
.ci-code { font-family: var(--sd-font-mono); font-weight: 700; margin-right: 8px; }
.ci-fixed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    font-size: 14px;
    color: var(--sd-ink-2);
}
.ci-fixed strong { color: var(--sd-ink); font-weight: 700; }
.ci-fixed .mud-icon-root { color: var(--sd-ink-3); }
.ci-loading { display: flex; justify-content: center; padding: 24px 0; }

/* Pločica ikone (poruke, spremnost, konflikt) */
.ci-tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--sd-card);
    color: var(--sd-ink-3);
}

/* Poveznice — brand; u warn/danger bloku poprimaju boju tona. */
.ci-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.ci-link {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--sd-brand-deep);
    text-align: left;
}
.ci-link:hover { text-decoration: underline; }
.ci-link .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

/* Blok poruke: neutral / warn / danger */
.ci-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    background: var(--sd-surface);
}
.ci-msg-main { flex: 1; min-width: 0; min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ci-msg-title { font-size: 14px; font-weight: 700; color: var(--sd-ink); }
.ci-msg-text { font-size: 13.5px; line-height: 1.45; color: var(--sd-ink-2); }
.ci-msg.is-warn { background: var(--sd-warn-tint); border-color: var(--sd-warn-border); }
.ci-msg.is-warn .ci-tile { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
.ci-msg.is-warn .ci-msg-title,
.ci-msg.is-warn .ci-link { color: var(--sd-warn-ink); }
.ci-msg.is-danger { background: var(--sd-danger-tint); border-color: var(--sd-danger-border); }
.ci-msg.is-danger .ci-tile { background: var(--sd-danger-soft); color: var(--sd-danger-deep); }
.ci-msg.is-danger .ci-msg-title,
.ci-msg.is-danger .ci-link { color: var(--sd-danger-deep); }

/* Provjera spremnosti — jedna kartica, redak po uvjetu */
.ci-ready { border: 1px solid var(--sd-hairline); border-radius: 14px; overflow: hidden; }
.ci-ready-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--sd-card); }
.ci-ready-row + .ci-ready-row { border-top: 1px solid var(--sd-hairline); }
.ci-ready-row .ci-tile { background: var(--sd-surface); }
.ci-ready-main { flex: 1; min-width: 0; }
.ci-ready-title { font-size: 13.5px; font-weight: 700; color: var(--sd-ink); }
.ci-ready-text { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--sd-ink-2); }
.ci-ready-row.is-danger { background: var(--sd-danger-tint); }
.ci-ready-row.is-danger .ci-tile { background: var(--sd-danger-soft); color: var(--sd-danger-deep); }
.ci-ready-row.is-danger .ci-ready-title,
.ci-ready-row.is-danger .ci-link { color: var(--sd-danger-deep); }
.ci-ready-row.is-warn { background: var(--sd-warn-tint); }
.ci-ready-row.is-warn .ci-tile { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
.ci-ready-row.is-warn .ci-ready-title,
.ci-ready-row.is-warn .ci-link { color: var(--sd-warn-ink); }

/* Radio krug (vrsta i opseg) */
.ci-radio {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--sd-ink-4);
    border-radius: 999px;
    background: var(--sd-card);
    flex: none;
}
.is-selected > .ci-radio { border-color: var(--sd-brand); }
.is-selected > .ci-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: var(--sd-brand);
}

/* Vrsta inventure — dvije kartice jedna do druge */
.ci-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ci-kind {
    font: inherit;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    background: var(--sd-card);
    color: var(--sd-ink);
    text-align: left;
    cursor: pointer;
}
.ci-kind:hover { border-color: var(--sd-ink-5); }
.ci-kind.is-selected {
    /* 1.5px obrub; padding umanjen za razliku da se sadržaj ne pomakne */
    padding: 13.5px 15.5px;
    border: 1.5px solid var(--sd-brand);
    background: var(--sd-brand-tint);
}
.ci-kind-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ci-kind-title { font-size: 14.5px; font-weight: 700; }
.ci-kind-desc { font-size: 12.5px; line-height: 1.45; color: var(--sd-ink-3); }

/* Opcije opsega */
/* Dva stupca kao na slikama dizajna (skladište 2×2, trgovina 1×2); na uskom ekranu jedan. */
.ci-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ci-scope {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    background: var(--sd-card);
    font-size: 13.5px;
    color: var(--sd-ink);
    cursor: pointer;
    user-select: none;
}
.ci-scope .ci-radio { width: 18px; height: 18px; margin-top: 0; }
.ci-scope:hover { border-color: var(--sd-ink-5); }
.ci-scope.is-selected { border-color: var(--sd-brand); background: var(--sd-brand-tint); }
.ci-scope.is-selected .ci-scope-label { font-weight: 700; }
.ci-scope.is-locked { background: var(--sd-surface); color: var(--sd-ink-4); cursor: not-allowed; }
.ci-scope.is-locked:hover { border-color: var(--sd-hairline); }
.ci-scope.is-locked .ci-radio { border-color: var(--sd-ink-5); background: transparent; }
.ci-scope-label { flex: 1; min-width: 0; }
.ci-scope-help.mud-icon-root { font-size: 17px; width: 17px; height: 17px; color: var(--sd-ink-4); cursor: help; }
.ci-kind:focus-visible,
.ci-scope:focus-visible { outline: 2px solid var(--sd-brand); outline-offset: 2px; }

/* Odabrane zone / artikli / lokacije */
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 30px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--sd-hairline);
    border-radius: 8px;
    background: var(--sd-surface);
    font-size: 13px;
    color: var(--sd-ink);
}
.ci-chip .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }
.ci-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-chip-close {
    display: inline-flex;
    padding: 3px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--sd-ink-3);
    cursor: pointer;
}
.ci-chip-close:hover { background: var(--sd-surface-hover); }
.ci-chip.is-invalid { background: var(--sd-danger-soft); border-color: var(--sd-danger); color: var(--sd-danger-deep); }
.ci-chip.is-invalid .ci-chip-close { color: var(--sd-danger-deep); }

/* Aktivne inventure + konflikt — jedan blok */
.ci-active {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    background: var(--sd-surface);
}
.ci-active.is-conflict { background: var(--sd-warn-tint); border-color: var(--sd-warn-border); }
.ci-conflict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sd-warn-border);
}
.ci-conflict .ci-tile { background: var(--sd-warn-soft); color: var(--sd-warn-ink); }
.ci-conflict-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ci-conflict-title { font-size: 14px; font-weight: 700; color: var(--sd-warn-ink); }
.ci-conflict-text { font-size: 13.5px; line-height: 1.45; color: var(--sd-ink-2); }
.ci-conflict .ci-link { color: var(--sd-warn-ink); margin-top: 4px; }
.ci-active-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--sd-ink); }
.ci-active-title .mud-icon-root { font-size: 16px; width: 16px; height: 16px; color: var(--sd-ink-3); }
.ci-active-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    background: var(--sd-card);
}
.ci-active-main { flex: 1; min-width: 0; }
.ci-active-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ci-active-scope { margin-top: 2px; font-size: 12.5px; color: var(--sd-ink-3); }
.ci-active-note { font-size: 12.5px; color: var(--sd-ink-3); }

/* Sažetak opsega */
.ci-summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--sd-hairline);
    border-radius: 12px;
    background: var(--sd-surface);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sd-ink-2);
}
.ci-summary strong { color: var(--sd-ink); }
.ci-summary .mud-icon-root { color: var(--sd-brand-deep); margin-top: 1px; flex: none; }

/* Datumi — auto-fill: jedno polje (obično brojanje) zauzme pola reda */
.ci-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.ci-warn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--sd-warn-border);
    border-radius: 12px;
    background: var(--sd-warn-tint);
    font-size: 13.5px;
    color: var(--sd-warn-ink);
}
.ci-warn-row .mud-icon-root { flex: none; }

/* Podnožje */
.ci-foot-info { display: flex; align-items: flex-start; gap: 8px; max-width: 320px; font-size: 12.5px; line-height: 1.4; color: var(--sd-ink-3); }
.ci-foot-info .mud-icon-root { font-size: 16px; width: 16px; height: 16px; margin-top: 1px; flex: none; }
.ci-btn-spin.mud-progress-circular { width: 16px !important; height: 16px !important; margin-right: 8px; color: currentColor; }