/* ==========================================================
   NEXUS UI - CENTRALIZIRANI STILOVI
   ========================================================== */

/* ==========================================================
   GLOBALNE CSS VARIJABLE - DIZAJN SISTEM
   ========================================================== */
:root {
    /* Primarne boje - Indigo paleta */
    --nexus-primary-50: #eef2ff;
    --nexus-primary-100: #e0e7ff;
    --nexus-primary-200: #c7d2fe;
    --nexus-primary-300: #a5b4fc;
    --nexus-primary-400: #818cf8;
    --nexus-primary-500: #6366f1;
    --nexus-primary-600: #4f46e5;
    --nexus-primary-700: #4338ca;
    --nexus-primary-800: #3730a3;
    --nexus-primary-900: #312e81;

    /* Neutralne boje - Gray paleta */
    --nexus-gray-50: #f9fafb;
    --nexus-gray-100: #f3f4f6;
    --nexus-gray-200: #e5e7eb;
    --nexus-gray-300: #d1d5db;
    --nexus-gray-400: #9ca3af;
    --nexus-gray-500: #6b7280;
    --nexus-gray-600: #4b5563;
    --nexus-gray-700: #374151;
    --nexus-gray-800: #1f2937;
    --nexus-gray-900: #111827;

    /* Slate boje (za headers, sidebars) */
    --nexus-slate-50: #f8fafc;
    --nexus-slate-100: #f1f5f9;
    --nexus-slate-200: #e2e8f0;
    --nexus-slate-700: #334155;
    --nexus-slate-800: #1e293b;

    /* Success boje */
    --nexus-success-500: #10b981;
    --nexus-success-600: #059669;

    /* Info boje */
    --nexus-info-500: #3b82f6;
    --nexus-info-600: #2563eb;

    /* Warning boje */
    --nexus-warning-500: #f59e0b;
    --nexus-warning-600: #d97706;

    /* Error boje */
    --nexus-error-500: #ef4444;
    --nexus-error-600: #dc2626;

    /* Spacing sistem (8px baseline) */
    --nexus-spacing-1: 0.25rem;  /* 4px */
    --nexus-spacing-2: 0.5rem;   /* 8px */
    --nexus-spacing-3: 0.75rem;  /* 12px */
    --nexus-spacing-4: 1rem;     /* 16px */
    --nexus-spacing-5: 1.25rem;  /* 20px */
    --nexus-spacing-6: 1.5rem;   /* 24px */
    --nexus-spacing-8: 2rem;     /* 32px */

    /* Border radius */
    --nexus-radius-sm: 0.375rem;  /* 6px */
    --nexus-radius-md: 0.5rem;    /* 8px */
    --nexus-radius-lg: 0.75rem;   /* 12px */
    --nexus-radius-xl: 1rem;      /* 16px */
    --nexus-radius-full: 9999px;  /* Potpuno zaobljeno */

    /* Shadows */
    --nexus-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nexus-shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --nexus-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --nexus-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    /* Font sizes */
    --nexus-text-xs: 0.75rem;     /* 12px */
    --nexus-text-sm: 0.875rem;    /* 14px */
    --nexus-text-base: 1rem;      /* 16px */
    --nexus-text-lg: 1.125rem;    /* 18px */
    --nexus-text-xl: 1.25rem;     /* 20px */
    --nexus-text-2xl: 1.5rem;     /* 24px */

    /* Transitions */
    --nexus-transition-fast: 150ms ease;
    --nexus-transition-base: 200ms ease;
    --nexus-transition-slow: 300ms ease;
}

/* ==========================================================
   TEMA - SVIJETLA / TAMNA (--gp-*)
   Svijetle vrijednosti = dosadašnje fiksne boje (svijetla tema se ne mijenja).
   Tamne se uključuju s html[data-tema="dark"] (nexusTema u nexus-ui.js, izbor po aplikaciji).
   U .razor datotekama koristiti ove varijable umjesto fiksnih hex boja.
   Ispisi (HTML/PDF) NE koriste ove varijable - uvijek su "bijeli papir".
   ========================================================== */
:root {
    /* površine */
    --gp-bg: #f5f7fa;              /* pozadina stranice */
    --gp-surface: #ffffff;         /* kartice, tablice, dijalozi */
    --gp-surface-2: #fafafa;       /* blago istaknuta površina (zaglavlja sekcija, sažeci) */
    --gp-surface-3: #f5f5f5;       /* jače istaknuta površina */
    --gp-line: #e2e8f0;            /* rubovi i crte */
    --gp-line-2: #e0e0e0;          /* MudBlazor siva crta */
    --gp-line-soft: #e5e7eb;
    --gp-line-strong: #cbd5e1;     /* isprekidani rubovi, isključeno */

    /* tekst */
    --gp-tx: #1a1a2e;
    --gp-tx-muted: #546e7a;
    --gp-tx-faint: #757575;
    --gp-tx-slate: #64748b;
    --gp-tx-off: #94a3b8;          /* nedostupno / isključeno */
    --gp-tx-info: #1565c0;
    --gp-tx-ok: #2e7d32;
    --gp-tx-warn: #e65100;
    --gp-tx-err: #d32f2f;
    --gp-tx-err-2: #c62828;
    --gp-brand: #1e3a5f;           /* tamnoplava GP-Nexus (naslovi, akcenti) */
    --gp-brand-bg: #1e3a5f;        /* tamnoplava kao POZADINA s bijelim tekstom (traka kase, gumbi prijave) */

    /* statusne pozadine (chipovi, alerti, istaknuti redovi) */
    --gp-bg-info: #e3f2fd;
    --gp-bg-ok: #e8f5e9;
    --gp-bg-warn: #fff3e0;
    --gp-bg-err: #ffebee;
    --gp-bg-neutral: #eceff1;
    --gp-chip-err-bg: #fee2e2;
    --gp-chip-err-tx: #991b1b;
    --gp-chip-warn-bg: #fef3c7;
    --gp-chip-warn-tx: #92400e;
    --gp-bg-purple: #ede7f6;
    --gp-tx-purple: #4527a0;

    /* forme (modal dokumenta) */
    --gp-forma-traka-bg: #f2e4d7;  /* bež traka s nazivom dokumenta */
    --gp-forma-traka-tx: #404040;
    --gp-tx-sekcija: #2c3e50;      /* naslovi sekcija u formi */
    --gp-tx-sub: #888888;          /* sitni opisni tekst (#888) */

    /* pickeri (odabir artikla, mjesta, vozila...) */
    --gp-tx-dim: #666666;          /* sporedni stupci (katalog, barkod) */
    --gp-tx-dim-2: #555555;
    --gp-tx-faint-2: #aaaaaa;
    --gp-tx-info-strong: #0d47a1;
    --gp-line-info: #bbdefb;       /* rub informativne trake */
    --gp-line-warn: #ffe0b2;       /* rub trake s odabranim */
    --gp-line-faint: #f0f0f0;      /* razdjelnik stavki u padajućem popisu */

    /* rjeđe nijanse iz pojedinih ekrana (ime prati namjenu; svijetla = izvorna boja) */
    --gp-bg-info-2: #f2faff;
    --gp-bg-info-3: #f5f8ff;
    --gp-bg-warn-2: #fff2d7;
    --gp-bg-warn-3: #fff8e1;
    --gp-bg-yellow: #fff9db;
    --gp-bg-cream: #fffdf5;
    --gp-bg-ok-2: #ebfbee;
    --gp-bg-teal: #e0f7fa;
    --gp-bg-purple-2: #f3e5f5;
    --gp-bg-indigo: #e8eaf6;
    --gp-surface-4: #eef1f6;
    --gp-surface-5: #eeeeee;
    --gp-line-3: #dde3ec;
    --gp-line-4: #cfd8dc;
    --gp-line-5: #dddddd;
    --gp-line-6: #cccccc;
    --gp-line-7: #bbbbbb;
    --gp-line-8: #d0d0d0;
    --gp-tx-2: #3d4455;
    --gp-tx-3: #333333;
    --gp-tx-4: #424242;
    --gp-tx-5: #444444;
    --gp-tx-6: #263238;
    --gp-tx-indigo: #1a237e;
    --gp-tx-muted-2: #78909c;
    --gp-tx-info-2: #1976d2;
    --gp-tx-teal: #00838f;
    --gp-tx-purple-2: #7b1fa2;
    --gp-tx-purple-3: #6a1b9a;
    --gp-tx-err-3: #b3261e;

    /* tablice */
    --gp-tbl-head-bg: #f1f5f9;
    --gp-tbl-head-tx: #1e293b;
    --gp-tbl-alt: #f8fafc;
    --gp-tbl-hover: rgba(59, 130, 246, 0.08);
    --gp-tbl-sticky-hover: #e2e8f0;
    --gp-sel-bg: #ffecb3;
    --gp-sel-hover: #ffe082;
    --gp-sel-tx: #5d4037;
    --gp-sel-border: #ff9800;
    --gp-inakt-bg: #fdfaf5;
    --gp-inakt-tx: #a68b6d;
    --gp-inakt-hover-bg: #fff1d6;
    --gp-inakt-hover-tx: #d35400;

    /* ikone */
    --gp-icon: #616161;
    --gp-icon-soft: #757575;
    --gp-icon-disabled: #9e9e9e;

    /* date picker */
    --gp-picker-bg: #ffffff;
    --gp-picker-day: #333333;
    --gp-picker-head: #666666;
    --gp-picker-other: #cccccc;
    --gp-picker-hover-bg: #e0e7ff;
    --gp-picker-hover-tx: #4338ca;

    /* tabovi */
    --gp-tab-tx: #4b5563;
    --gp-tab-hover: #4f46e5;
    --gp-tab-active: #4338ca;

    /* scrollbar */
    --gp-scroll-track: #f3f4f6;
    --gp-scroll-thumb: #d1d5db;
    --gp-scroll-thumb-hover: #9ca3af;
}

html[data-tema="dark"] {
    color-scheme: dark;

    --gp-bg: #11161d;
    --gp-surface: #1a212b;
    --gp-surface-2: #1d2530;
    --gp-surface-3: #212a36;
    --gp-line: #2c3644;
    --gp-line-2: #323c4a;
    --gp-line-soft: #2c3644;
    --gp-line-strong: #3a4554;

    --gp-tx: #e3e8ef;
    --gp-tx-muted: #9aa6b6;
    --gp-tx-faint: #7d8898;
    --gp-tx-slate: #94a0b0;
    --gp-tx-off: #5f6b7a;
    --gp-tx-info: #7fb3e8;
    --gp-tx-ok: #7fd498;
    --gp-tx-warn: #f5a35c;
    --gp-tx-err: #ef8a8a;
    --gp-tx-err-2: #ef8a8a;
    --gp-brand: #9cc3ec;
    --gp-brand-bg: #1f3b6b;

    --gp-bg-info: #18304a;
    --gp-bg-ok: #17321f;
    --gp-bg-warn: #3a2a12;
    --gp-bg-err: #3b1a1a;
    --gp-bg-neutral: #252e3a;
    --gp-chip-err-bg: #3b1a1a;
    --gp-chip-err-tx: #f3a5a5;
    --gp-chip-warn-bg: #3a2e10;
    --gp-chip-warn-tx: #f5c26b;
    --gp-bg-purple: #2a2240;
    --gp-tx-purple: #b9a6f0;

    --gp-forma-traka-bg: #2e2820;
    --gp-forma-traka-tx: #e3d6c8;
    --gp-tx-sekcija: #b8c7d6;
    --gp-tx-sub: #8d98a6;

    --gp-tx-dim: #9aa6b6;
    --gp-tx-dim-2: #b0bac6;
    --gp-tx-faint-2: #6f7a88;
    --gp-tx-info-strong: #9cc3ec;
    --gp-line-info: #24486e;
    --gp-line-warn: #5a3d14;
    --gp-line-faint: #252e3a;

    /* rep jednokratnih boja: u .razor zapisano kao var(--gp-auto-bg, #izvorna) — u svijetloj temi ove varijable
       NISU definirane pa vrijedi izvorna boja; u tamnoj temi svijetla pozadina/rub/tamni tekst postaju tamni/svijetli */
    --gp-auto-bg: var(--gp-surface-3);
    --gp-auto-line: var(--gp-line-5);
    --gp-auto-tx: var(--gp-tx-2);

    --gp-bg-info-2: #16283a;
    --gp-bg-info-3: #1a2233;
    --gp-bg-warn-2: #33281a;
    --gp-bg-warn-3: #332c16;
    --gp-bg-yellow: #332e14;
    --gp-bg-cream: #1f1d17;
    --gp-bg-ok-2: #16301f;
    --gp-bg-teal: #123236;
    --gp-bg-purple-2: #2c1f33;
    --gp-bg-indigo: #232845;
    --gp-surface-4: #222b37;
    --gp-surface-5: #262f3b;
    --gp-line-3: #2f3947;
    --gp-line-4: #3a4554;
    --gp-line-5: #333d4b;
    --gp-line-6: #3f4a5a;
    --gp-line-7: #4a5566;
    --gp-line-8: #3d4756;
    --gp-tx-2: #c7d0dc;
    --gp-tx-3: #dbe2ea;
    --gp-tx-4: #cfd6df;
    --gp-tx-5: #c9d1dc;
    --gp-tx-6: #e3e8ef;
    --gp-tx-indigo: #a9b4f5;
    --gp-tx-muted-2: #8d9cab;
    --gp-tx-info-2: #7fb3e8;
    --gp-tx-teal: #4dd0e1;
    --gp-tx-purple-2: #ce93d8;
    --gp-tx-purple-3: #c39ad6;
    --gp-tx-err-3: #ef8a8a;

    --gp-tbl-head-bg: #232c38;
    --gp-tbl-head-tx: #dbe2ea;
    --gp-tbl-alt: #1d2530;
    --gp-tbl-hover: rgba(127, 179, 232, 0.08);
    --gp-tbl-sticky-hover: #263140;
    /* selektirani redak: plavi akcent #4F7EFE (prozirna nijansa na površini + puni rub) */
    --gp-sel-bg: #26365a;
    --gp-sel-hover: #2a3d6a;
    --gp-sel-tx: #ffffff;
    --gp-sel-border: #4f7efe;
    --gp-inakt-bg: #1f1b14;
    --gp-inakt-tx: #b49a7a;
    --gp-inakt-hover-bg: #33281a;
    --gp-inakt-hover-tx: #f0a060;

    --gp-icon: #aab4c0;
    --gp-icon-soft: #8d98a6;
    --gp-icon-disabled: #5f6875;

    --gp-picker-bg: #212a36;
    --gp-picker-day: #e3e8ef;
    --gp-picker-head: #9aa6b6;
    --gp-picker-other: #4f5966;
    --gp-picker-hover-bg: #2a3a52;
    --gp-picker-hover-tx: #cfe1f5;

    --gp-tab-tx: #9aa6b6;
    --gp-tab-hover: #cfe1f5;
    --gp-tab-active: #7fb3e8;

    --gp-scroll-track: #161c25;
    --gp-scroll-thumb: #333e4d;
    --gp-scroll-thumb-hover: #475365;
}

/* Tamna tema: app bar ostaje tamnoplav (Color.Primary bi ga inače obojao svijetlo plavom primarnom bojom) */
html[data-tema="dark"] .mud-appbar.mud-theme-primary {
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* Tamna tema: JEDNA selekcija retka u svim tablicama. Mnogi ekrani imaju svoj lokalni .selected-row (plavi/narančasti,
   u svijetloj temi ostaje kako je); html[data-tema] ima veću specifičnost pa u tamnoj temi uvijek vrijedi plavi #4F7EFE. */
html[data-tema="dark"] .selected-row,
html[data-tema="dark"] .mud-table-row.selected-row,
html[data-tema="dark"] .picker-selected-row {
    background-color: var(--gp-sel-bg) !important;
    border-left-color: var(--gp-sel-border) !important;
}
html[data-tema="dark"] .selected-row:hover,
html[data-tema="dark"] .mud-table-row.selected-row:hover,
html[data-tema="dark"] .picker-selected-row:hover {
    background-color: var(--gp-sel-hover) !important;
}
html[data-tema="dark"] .selected-row > td,
html[data-tema="dark"] .picker-selected-row > td {
    color: var(--gp-sel-tx) !important;
    background-color: transparent;
}
html[data-tema="dark"] .picker-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--gp-sel-border);
}

/* Tamna tema: plavi rub selektiranog retka na prvoj ćeliji (border-left na <tr> se u tablici ne iscrtava pouzdano) */
html[data-tema="dark"] .mud-table-row.selected-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--gp-sel-border);
}

/* Tamna tema: pozadina i prije nego MudThemeProvider postavi paletu (bez bijelog bljeska) */
html[data-tema="dark"] body {
    background-color: var(--gp-bg);
}

/* ==========================================================
   1. DRAWER - OSNOVNA NAVIGACIJA (Glavne stavke i Headeri grupa)
   ========================================================== */
body .mud-navmenu .mud-nav-item .mud-nav-link,
body .mud-navmenu .mud-nav-group .mud-nav-group-header {
    font-size: var(--nexus-text-xs) !important;
    padding: 4px 16px !important;
    min-height: 32px !important;
}

/* Stil za ikone u glavnom izborniku */
body .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    font-size: 1.1rem !important;
}

/* Strelica za otvaranje/zatvaranje grupe — boja ikona izbornika (bijela), ne zadana crna */
body .mud-navmenu .mud-nav-link-expand-icon,
body .mud-navmenu .mud-nav-link-expand-icon.mud-transform {
    color: var(--mud-palette-drawer-icon) !important;
    fill: var(--mud-palette-drawer-icon) !important;
}

/* Stil za tekst naslova grupe (npr. Regionalna podjela) */
body .mud-nav-group .mud-nav-group-text {
    font-size: var(--nexus-text-xs) !important;
    font-weight: 700 !important;
}

/* ==========================================================
   2. DRAWER - POD-STAVKE (Uvlačenje za Države, Regije itd.)
   ========================================================== */
body .mud-nav-group-items .mud-nav-item .mud-nav-link {
    padding-left: 36px !important;
    font-size: 0.72rem !important;
    min-height: 28px !important;
    background-color: rgba(0, 0, 0, 0.03);
}

body .mud-nav-group-items .mud-nav-link-icon {
    transform: scale(0.85);
    margin-right: 8px !important;
}

/* ==========================================================
   3. TABLICE - Dizajn zaglavlja i redova
   ========================================================== */
body .mud-table-head .mud-table-cell {
    background-color: var(--gp-tbl-head-bg) !important;
    font-weight: 700 !important;
    color: var(--gp-tbl-head-tx) !important;
    font-size: 0.8rem !important;
    height: 36px !important;
}

body .mud-table-row .mud-table-cell {
    font-size: var(--nexus-text-sm) !important;
    height: 32px !important;
    padding: 4px 12px !important;
}

body .mud-table-row:not(.selected-row):hover {
    background-color: var(--gp-tbl-hover) !important;
}

/* ==========================================================
   SELEKTIRANI REDAK - Topla narančasta boja (VRAĆENO IZ STAROG CSS-a)
   ========================================================== */

/* Osnovni stil selektiranog retka - topla narančasta */
body .mud-table-row.selected-row,
.selected-row {
    background-color: var(--gp-sel-bg) !important; /* Jača narančasto-žuta */
    border-left: 3px solid var(--gp-sel-border) !important; /* Narančasti (tamna tema: plavi) border za dodatni naglasak */
}

/* Hover na selektiranom retku - ostaje vidljiv */
body .mud-table-row.selected-row:hover,
.selected-row:hover {
    background-color: var(--gp-sel-hover) !important; /* Još jača žuta na hover */
}

/* Ćelije u selektiranom retku */
body .mud-table-row.selected-row .mud-table-cell {
    color: var(--gp-sel-tx) !important; /* Tamno smeđa za dobar kontrast */
}

/* ==========================================================
   FAVORITE ROW - Favoriti (KDP klasifikacija)
   ========================================================== */
.favorite-row {
    background-color: rgba(76, 175, 80, 0.08) !important; /* blijedo zelena */
    border-left: 3px solid var(--mud-palette-success) !important;
}

.favorite-row:hover {
    background-color: rgba(76, 175, 80, 0.15) !important;
}

/* ==========================================================
   MUD DATA GRID - jači kontrast
   ========================================================== */
.mud-table-head .mud-icon-button .mud-icon-root {
    color: var(--gp-tx-muted) !important;
}

.mud-table-head .mud-icon-button:hover .mud-icon-root {
    color: var(--nexus-info-600) !important;
}

/* ==========================================================
   MUD DATE PICKER - KOMPLETAN FIX (Inline + Dialog)
   ========================================================== */
.mud-picker-inline-paper,
.mud-picker-container,
.mud-picker-content,
.mud-picker-calendar-content,
.mud-picker-calendar,
.mud-popover-provider .mud-picker-inline-paper,
.mud-popover-provider .mud-picker-container,
.mud-popover .mud-picker-inline-paper,
.mud-popover .mud-picker-container {
    background-color: var(--gp-picker-bg) !important;
}

.mud-picker-calendar-header-switch,
.mud-popover-provider .mud-picker-calendar-header-switch,
.mud-popover .mud-picker-calendar-header-switch {
    background-color: var(--gp-picker-bg) !important;
}

.mud-picker-calendar-header-switch .mud-icon-button,
.mud-popover-provider .mud-picker-calendar-header-switch .mud-icon-button,
.mud-popover .mud-picker-calendar-header-switch .mud-icon-button {
    color: var(--gp-tx-info) !important;
}

/* Dani u tjednu (header) */
.mud-picker-calendar-header-day,
.mud-popover .mud-picker-calendar-header-day {
    color: var(--gp-picker-head) !important;
    font-weight: 600;
    font-size: var(--nexus-text-xs);
}

/* Svi datumi (brojevi u kalendaru) */
.mud-picker-calendar-day,
.mud-popover .mud-picker-calendar-day {
    color: var(--gp-picker-day) !important;
    font-size: var(--nexus-text-sm);
    background-color: var(--gp-picker-bg) !important;
}

/* Odabrani datum */
.mud-picker-calendar-day.mud-selected,
.mud-popover .mud-picker-calendar-day.mud-selected {
    background-color: var(--nexus-primary-600) !important;
    color: white !important;
    font-weight: 600;
}

/* Hover efekt na datume */
.mud-picker-calendar-day:hover:not(.mud-selected),
.mud-popover .mud-picker-calendar-day:hover:not(.mud-selected) {
    background-color: var(--gp-picker-hover-bg) !important;
    color: var(--gp-picker-hover-tx) !important;
}

/* Današnji datum (tanka plava rub) */
.mud-picker-calendar-day.mud-current,
.mud-popover .mud-picker-calendar-day.mud-current {
    border: 1px solid var(--nexus-primary-500) !important;
}

/* Datumi izvan trenutnog mjeseca */
.mud-picker-calendar-day.mud-other-month,
.mud-popover .mud-picker-calendar-day.mud-other-month {
    color: var(--gp-picker-other) !important;
}

/* ==========================================================
   MUD TABS - POBOLJŠANI DIZAJN
   ========================================================== */
body .mud-tabs .mud-tab {
    font-size: var(--nexus-text-xs);
    text-transform: none !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
    color: var(--gp-tab-tx);
    transition: var(--nexus-transition-base);
}

body .mud-tabs .mud-tab:hover {
    color: var(--gp-tab-hover);
}

body .mud-tabs .mud-tab.mud-tab-active {
    color: var(--gp-tab-active);
    font-weight: 600;
}

/* ==========================================================
   MUD DIALOG - KONZISTENTNI STILOVI
   ========================================================== */
.mud-dialog {
    border-radius: var(--nexus-radius-lg);
    box-shadow: var(--nexus-shadow-xl);
}

.mud-dialog-title {
    font-size: var(--nexus-text-lg);
    font-weight: 600;
    color: var(--gp-tx);
}

.mud-dialog .mud-input-control {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* ==========================================================
   MUD BUTTON - DODATNI STILOVI
   ========================================================== */
.mud-button-filled-primary {
    background-color: var(--nexus-primary-600);
    transition: var(--nexus-transition-base);
}

.mud-button-filled-primary:hover {
    background-color: var(--nexus-primary-700);
}

.mud-button-filled-success {
    background-color: var(--nexus-success-500);
}

.mud-button-filled-success:hover {
    background-color: var(--nexus-success-600);
}

/* ==========================================================
   MUD ICON BUTTON - HOVER EFFECTS
   ========================================================== */
.mud-icon-button {
    transition: var(--nexus-transition-base);
}

.mud-icon-button:hover {
    transform: scale(1.05);
}

/* Jače vidljive disabled ikone */
.mud-icon-button.mud-disabled .mud-icon-root,
.mud-button.mud-disabled .mud-icon-root,
.mud-button.mud-disabled {
    color: var(--gp-icon-soft) !important;
    opacity: 0.7 !important;
}

/* ==========================================================
   MUD CARD - KONZISTENTNI BORDER RADIUS I SHADOWS
   ========================================================== */
.mud-card {
    border-radius: var(--nexus-radius-lg);
    box-shadow: var(--nexus-shadow-md);
}

/* ==========================================================
   MUD TEXT FIELD - FOKUS STILOVI
   ========================================================== */
.mud-input-control.mud-input-outlined:focus-within {
    border-color: var(--nexus-primary-500);
}

/* ==========================================================
   MUD SNACKBAR - POZICIJA I STILOVI
   ========================================================== */
.mud-snackbar {
    border-radius: var(--nexus-radius-md);
    box-shadow: var(--nexus-shadow-lg);
}

/* ==========================================================
   TABLE PAGINATION - Vidljivost
   ========================================================== */
.mud-table-pagination-actions .mud-button-root {
    color: var(--gp-tbl-head-tx) !important;
}

.mud-table-pagination-display {
    color: var(--gp-tbl-head-tx) !important;
}

/* ==========================================================
   STICKY STUPCI 
   ========================================================== */

/* Fiksiranje Šifre (Lijevo 0) */
.sticky-column-sifra {
    position: sticky !important;
    left: 0 !important;
    z-index: 40 !important;
    background-color: var(--gp-tbl-head-bg) !important;
}

/* Fiksiranje Naziva (Lijevo 80px) */
.sticky-column-naziv {
    position: sticky !important;
    left: 80px !important;
    z-index: 40 !important;
    background-color: var(--gp-tbl-head-bg) !important;
    border-right: 2px solid var(--gp-line) !important;
    box-shadow: 4px 0 8px -4px rgba(0,0,0,0.1);
}

/* Fiksiranje Akcija (Desno 0) */
.sticky-column-actions {
    position: sticky !important;
    right: 0 !important;
    z-index: 40 !important;
    background-color: var(--gp-tbl-head-bg) !important;
    border-left: 2px solid var(--gp-line) !important;
    box-shadow: -4px 0 8px -4px rgba(0,0,0,0.1);
}

/* Body redovi - bijela pozadina */
body .mud-table-row .sticky-column-sifra,
body .mud-table-row .sticky-column-naziv,
body .mud-table-row .sticky-column-actions {
    background-color: var(--gp-surface) !important;
    z-index: 30 !important;
}

/* Striped rows podrška */
body .mud-table-row:nth-child(even) .sticky-column-sifra,
body .mud-table-row:nth-child(even) .sticky-column-naziv,
body .mud-table-row:nth-child(even) .sticky-column-actions {
    background-color: var(--gp-tbl-alt) !important;
}

/* Hover efekt za sticky stupce (osim selektiranih) */
body .mud-table-row:not(.selected-row):hover .sticky-column-sifra,
body .mud-table-row:not(.selected-row):hover .sticky-column-naziv,
body .mud-table-row:not(.selected-row):hover .sticky-column-actions {
    background-color: var(--gp-tbl-sticky-hover) !important;
}

/* SELEKTIRANI REDAK - Sticky stupci */
body .mud-table-row.selected-row .sticky-column-sifra,
body .mud-table-row.selected-row .sticky-column-naziv,
body .mud-table-row.selected-row .sticky-column-actions {
    background-color: var(--gp-sel-bg) !important; /* Ista boja kao ostatak retka */
    border-left-color: transparent !important; /* Ukloni dupli border */
}

/* Hover na selektiranom retku - sticky stupci */
body .mud-table-row.selected-row:hover .sticky-column-sifra,
body .mud-table-row.selected-row:hover .sticky-column-naziv,
body .mud-table-row.selected-row:hover .sticky-column-actions {
    background-color: var(--gp-sel-hover) !important;
}

/* Horizontal Scrollbar */
.mud-table-container {
    overflow-x: auto !important;
}

/* Header sticky */
.mud-table-head {
    position: sticky;
    top: 0;
    z-index: 50 !important;
}

/* Header sticky stupci - najveći prioritet */
.mud-table-head .sticky-column-sifra,
.mud-table-head .sticky-column-naziv,
.mud-table-head .sticky-column-actions {
    z-index: 60 !important;
    top: 0;
}

/* ==========================================================
   NEAKTIVNI REDOVI - Warning Theme
   ========================================================== */

/* 1. NEAKTIVAN RED - MIROVANJE */
.mud-table-row.mud-theme-warning {
    background-color: var(--gp-inakt-bg) !important;
    color: var(--gp-inakt-tx) !important; /* Zagasita oker/smeđa */
}

/* Osiguravamo da i svi tekstualni elementi unutar reda naslijede tu boju */
.mud-table-row.mud-theme-warning td,
.mud-table-row.mud-theme-warning .mud-text {
    color: var(--gp-inakt-tx) !important;
}

/* 2. NEAKTIVAN RED - HOVER */
.mud-table-row.mud-theme-warning:hover,
.mud-table-row.mud-theme-warning:hover > td {
    background-color: var(--gp-inakt-hover-bg) !important; /* Jasna krem/narančasta */
    color: var(--gp-inakt-hover-tx) !important; /* Snažna topla narančasta */
    font-weight: 500;
}

/* Osiguravamo da i tekst unutar ćelija na hoveru promijeni boju */
.mud-table-row.mud-theme-warning:hover .mud-text {
    color: var(--gp-inakt-hover-tx) !important;
}

/* 3. POPRAVAK PORAVNANJA */
.mud-table-row.mud-theme-warning .mud-table-cell {
    display: table-cell !important;
}

/* ==========================================================
   INPUT POLJA - VIDLJIVE IKONE (Adornments, Clear, Dropdown)
   ========================================================== */

/* Sve ikone u input poljima - tamno siva */
.mud-input-adornment .mud-icon-root,
.mud-input-adornment .mud-icon-button .mud-icon-root,
.mud-input .mud-icon-button .mud-icon-root,
.mud-input-slot .mud-icon-button .mud-icon-root,
.mud-select .mud-icon-button .mud-icon-root {
    color: var(--gp-icon) !important; /* Tamno siva - uvijek vidljiva */
}

/* Hover na ikone - postaje primary color */
.mud-input-adornment .mud-icon-button:hover .mud-icon-root,
.mud-input .mud-icon-button:hover .mud-icon-root,
.mud-input-slot .mud-icon-button:hover .mud-icon-root,
.mud-select .mud-icon-button:hover .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Clear button (X) - specifično ciljanje */
.mud-input-adornment-end .mud-icon-button .mud-icon-root,
button.mud-icon-button[aria-label*="clear"] .mud-icon-root {
    color: var(--gp-icon-soft) !important; /* Malo svjetlija siva */
}

.mud-input-adornment-end .mud-icon-button:hover .mud-icon-root,
button.mud-icon-button[aria-label*="clear"]:hover .mud-icon-root {
    color: var(--gp-tx-err) !important; /* Crvena na hover - jasna akcija brisanja */
}

/* Dropdown strelica u MudSelect */
.mud-select .mud-input-adornment .mud-select-input .mud-icon-root,
.mud-select-input .mud-icon-root {
    color: var(--gp-icon) !important;
}

/* Search ikona u MudAutocomplete/MudTextField */
.mud-input-adornment-start .mud-icon-root {
    color: var(--gp-icon-soft) !important;
}

/* Disabled ikone ostaju vidljive ali blijeđe */
.mud-input-adornment .mud-icon-button.mud-disabled .mud-icon-root,
.mud-input .mud-icon-button.mud-disabled .mud-icon-root {
    color: var(--gp-icon-disabled) !important;
    opacity: 0.6 !important;
}

/* ==========================================================
   KEBAB MENU - PORAVNANJE I VIDLJIVOST
   ========================================================== */

/* MudMenu button u tablici - poravnanje sa edit/delete ikonama */
.mud-table-cell .mud-menu > button.mud-button-root {
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 6px !important;
}

/* Kebab ikona u tablici - ista visina kao ostale ikone */
.mud-table-cell .mud-menu .mud-icon-root {
    vertical-align: middle !important;
}

/* MudMenu ikona vidljivost - za SVE MudMenu buttone */
.mud-menu > button.mud-button-root .mud-icon-root {
    color: var(--gp-icon) !important; /* Default grey - ALWAYS VISIBLE */
}

.mud-menu > button.mud-button-root:hover .mud-icon-root {
    color: var(--mud-palette-primary) !important; /* Primary on hover */
}

/* ==========================================================
   SCROLLBAR STYLING - GLOBALNO
   ========================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gp-scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--gp-scroll-thumb);
    border-radius: var(--nexus-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gp-scroll-thumb-hover);
}

/* ==========================================================
   POLJA FORMI (gp-input-*) - zajedničko za sve forme dokumenata
   Prije kopirano u ~35 <style> blokova; MudBlazor varijable -> rade u svijetloj i tamnoj temi.
   Ekran smije lokalno nadjačati (lokalni <style> dolazi nakon ovoga).
   ========================================================== */
.gp-input-readonly .mud-input,
.gp-input-base .mud-input,
.gp-input-tax.gp-input-readonly .mud-input {
    background-color: var(--mud-palette-background-grey) !important;
}
.gp-input-base input { font-weight: 600 !important; }

.gp-input-highlight-primary .mud-input { background-color: var(--mud-palette-primary-hover) !important; }
.gp-input-highlight-primary input { color: var(--mud-palette-primary-darken) !important; font-weight: 700 !important; }

.gp-input-highlight-info .mud-input,
.gp-input-highlight-standard .mud-input,
.gp-input-highlight-standard-porez .mud-input { background-color: var(--mud-palette-info-hover) !important; }
.gp-input-highlight-info input,
.gp-input-highlight-standard input { color: var(--mud-palette-info-darken) !important; font-weight: 700 !important; }
.gp-input-highlight-standard-porez input { color: var(--mud-palette-error) !important; font-weight: 700 !important; }

.gp-input-highlight-success .mud-input { background-color: var(--mud-palette-success-hover) !important; }
.gp-input-highlight-success input { color: var(--mud-palette-success-darken) !important; font-weight: 700 !important; }

.gp-input-tax input { color: var(--mud-palette-error) !important; font-weight: 600 !important; }
.gp-input-quantity input { color: var(--mud-palette-warning) !important; font-weight: 600 !important; }
.gp-input-storno .mud-input { background-color: var(--mud-palette-error-hover) !important; }
.gp-input-storno input { color: var(--mud-palette-error) !important; font-weight: 700 !important; }
.gp-text-bold-primary input { color: var(--mud-palette-primary) !important; font-weight: 700 !important; }

/* Tamna tema: *-darken nijanse su na tamnoj podlozi pretamne -> svijetle varijante */
html[data-tema="dark"] .gp-input-highlight-primary input { color: var(--mud-palette-primary-lighten) !important; }
html[data-tema="dark"] .gp-input-highlight-info input,
html[data-tema="dark"] .gp-input-highlight-standard input { color: var(--mud-palette-info-lighten) !important; }
html[data-tema="dark"] .gp-input-highlight-success input { color: var(--mud-palette-success-lighten) !important; }

/* ==========================================================
   UTILITY KLASE
   ========================================================== */

/* Spacing utilities */
.nx-p-2 { padding: var(--nexus-spacing-2); }
.nx-p-3 { padding: var(--nexus-spacing-3); }
.nx-p-4 { padding: var(--nexus-spacing-4); }
.nx-m-2 { margin: var(--nexus-spacing-2); }
.nx-m-3 { margin: var(--nexus-spacing-3); }
.nx-m-4 { margin: var(--nexus-spacing-4); }

/* Text utilities */
.nx-text-xs { font-size: var(--nexus-text-xs); }
.nx-text-sm { font-size: var(--nexus-text-sm); }
.nx-text-base { font-size: var(--nexus-text-base); }
.nx-text-lg { font-size: var(--nexus-text-lg); }

/* Color utilities */
.nx-text-primary { color: var(--nexus-primary-600); }
.nx-text-gray { color: var(--nexus-gray-600); }
.nx-bg-primary { background-color: var(--nexus-primary-600); }
.nx-bg-gray-50 { background-color: var(--nexus-gray-50); }

/* Shadow utilities */
.nx-shadow-sm { box-shadow: var(--nexus-shadow-sm); }
.nx-shadow-md { box-shadow: var(--nexus-shadow-md); }
.nx-shadow-lg { box-shadow: var(--nexus-shadow-lg); }

/* Border radius utilities */
.nx-rounded-sm { border-radius: var(--nexus-radius-sm); }
.nx-rounded-md { border-radius: var(--nexus-radius-md); }
.nx-rounded-lg { border-radius: var(--nexus-radius-lg); }

/* Generic utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gap-1 {
    gap: 4px;
}

/* Opcijski: hover efekt na redove */
.mud-table-row:hover {
    cursor: pointer;
}

/* ==========================================================================================
   Ugostiteljstvo na kasi (.ugo) — stolovi, kartice narudžbi, podjela računa, tlocrt dvorane.
   Komponente u GP-Nexus.Common/POS (PosStoloviMreza, PosNarudzbeStolaPanel, PosNarudzbeDodirDialog,
   PosStolovi, PosTlocrtDvorane). Paleta = dodirna kasa (MaloprodajniRacunStavkeDodirni.razor.css).
   ========================================================================================== */
.ugo {
    --ugo-ground: #f5f7fa;
    --ugo-surface: #ffffff;
    --ugo-surface-2: #eef1f5;
    --ugo-ink: #1c2733;
    --ugo-ink-soft: #5b6b7d;
    --ugo-ink-faint: #93a2b2;
    --ugo-accent: #1e3a5f;
    --ugo-accent-soft: #dde6ef;
    --ugo-line: #e2e8f0;
    --ugo-free: #e7f0ec;      --ugo-free-ink: #2f6b52;
    --ugo-busy: #e4ecf5;      --ugo-busy-ink: #28527e;
    --ugo-bill: #f3ecdf;      --ugo-bill-ink: #8a6a2c;
    --ugo-late: #f8e1df;      --ugo-late-ink: #a23b32;
    --ugo-lock: #efe6ee;      --ugo-lock-ink: #75447a;
    color: var(--ugo-ink);
    font-variant-numeric: tabular-nums;
}
.ugo button { font: inherit; color: inherit; }

/* Tamna tema - ista .ugo paleta s tamnim vrijednostima */
html[data-tema="dark"] .ugo {
    --ugo-ground: #11161d;
    --ugo-surface: #1a212b;
    --ugo-surface-2: #212a36;
    --ugo-ink: #e3e8ef;
    --ugo-ink-soft: #9aa6b6;
    --ugo-ink-faint: #6f7a88;
    --ugo-accent: #4f7efe;
    --ugo-accent-soft: #26365a;
    --ugo-line: #2c3644;
    --ugo-free: #17302a;      --ugo-free-ink: #8fd3b6;
    --ugo-busy: #1c2d42;      --ugo-busy-ink: #9cc3ec;
    --ugo-bill: #33291a;      --ugo-bill-ink: #e3c27a;
    --ugo-late: #3b1d1b;      --ugo-late-ink: #f0a39c;
    --ugo-lock: #2d2030;      --ugo-lock-ink: #d8a6dc;
}
html[data-tema="dark"] .ugo .ugo-kartica-napomena { background: #332c16; color: #e9cf86; }
html[data-tema="dark"] .ugo .ugo-stavka.odabrana { background: #26365a; }
html[data-tema="dark"] .ugo .ugo-stepper { background: var(--ugo-surface); }
html[data-tema="dark"] .ugo .ugo-tlocrt { background-color: #151b23; }
html[data-tema="dark"] .ugo .ugo-tlocrt .t-stol.oblik-S { background: #2e2820; color: #e3d6c8; }

/* dvorane — vodoravne kartice */
.ugo-dvorane { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.ugo-dvorana {
    flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border-radius: 12px;
    border: 1px solid var(--ugo-line); background: var(--ugo-surface); cursor: pointer; font-weight: 600;
}
.ugo-dvorana.on { background: var(--ugo-accent); color: #fff; border-color: var(--ugo-accent); }
.ugo-dvorana .broj { margin-left: 6px; font-size: 12px; opacity: .75; }

/* mreža stolova */
.ugo-stolovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ugo-stol {
    position: relative; min-height: 96px; padding: 10px; border-radius: 14px; cursor: pointer; text-align: left;
    border: 2px solid transparent; background: var(--ugo-free); color: var(--ugo-free-ink);
    display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
    transition: transform .08s ease, box-shadow .12s ease;
}
.ugo-stol:active { transform: scale(.97); }
.ugo-stol.busy { background: var(--ugo-busy); color: var(--ugo-busy-ink); }
.ugo-stol.bill { background: var(--ugo-bill); color: var(--ugo-bill-ink); }
.ugo-stol.late { background: var(--ugo-late); color: var(--ugo-late-ink); }
.ugo-stol.lock { background: var(--ugo-lock); color: var(--ugo-lock-ink); }
.ugo-stol.on { border-color: var(--ugo-accent); box-shadow: 0 0 0 3px rgba(30, 58, 95, .18); }
.ugo-stol.disabled { opacity: .45; cursor: not-allowed; }
.ugo-stol .naziv { font-weight: 700; font-size: 16px; line-height: 1.15; }
.ugo-stol .meta { font-size: 12px; opacity: .85; }
.ugo-stol .iznos { font-weight: 700; font-size: 14px; }
.ugo-stol .badge {
    position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    background: var(--ugo-accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* legenda */
.ugo-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ugo-ink-soft); margin-top: 8px; }
.ugo-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }

/* traka alata */
.ugo-traka { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ugo-gumb {
    min-height: 40px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--ugo-line);
    background: var(--ugo-surface); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.ugo-gumb.on, .ugo-gumb.primarni { background: var(--ugo-accent); border-color: var(--ugo-accent); color: #fff; }
.ugo-gumb:disabled { opacity: .5; cursor: not-allowed; }
.ugo-gumb.mali { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* kartice narudžbi */
.ugo-narudzbe { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.ugo-kartica {
    background: var(--ugo-surface); border: 1px solid var(--ugo-line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 39, 51, .06);
}
.ugo-kartica.zakljucana { opacity: .8; }
.ugo-kartica-glava {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
    background: var(--ugo-surface-2); border-bottom: 1px solid var(--ugo-line);
}
.ugo-kartica-glava .naslov { font-weight: 700; flex: 1; }
.ugo-kartica-glava .vrijeme { font-size: 12px; color: var(--ugo-ink-soft); }
.ugo-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ugo-busy); color: var(--ugo-busy-ink); }
.ugo-status.racun { background: var(--ugo-bill); color: var(--ugo-bill-ink); }
.ugo-status.zakljucana { background: var(--ugo-lock); color: var(--ugo-lock-ink); }
.ugo-kartica-napomena { padding: 6px 12px; font-size: 13px; background: #fff8e6; color: #7a5b12; border-bottom: 1px solid var(--ugo-line); }
.ugo-kartica-dno { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ugo-line); align-items: center; }
.ugo-kartica-dno .ukupno { margin-left: auto; font-weight: 700; }

.ugo-stavka {
    display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--ugo-line); cursor: pointer; min-height: 44px;
}
.ugo-stavka:last-child { border-bottom: 0; }
.ugo-stavka.odabrana { background: #e8f0fa; }
.ugo-stavka.fakturirana { color: var(--ugo-ink-faint); cursor: default; text-decoration: line-through; }
.ugo-stavka .oznaka { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ugo-ink-faint); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.ugo-stavka.odabrana .oznaka { background: var(--ugo-accent); border-color: var(--ugo-accent); color: #fff; }
.ugo-stavka .naziv { line-height: 1.2; }
.ugo-stavka .naziv small { display: block; color: var(--ugo-ink-soft); font-size: 12px; }
.ugo-stavka .odjel { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--ugo-surface-2); color: var(--ugo-ink-soft); margin-left: 4px; }
.ugo-stavka .kol { font-weight: 700; white-space: nowrap; }
.ugo-stavka .izn { min-width: 64px; text-align: right; white-space: nowrap; }

.ugo-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ugo-line); border-radius: 10px; overflow: hidden; background: #fff; }
.ugo-stepper button { width: 34px; height: 34px; border: 0; background: var(--ugo-surface-2); cursor: pointer; font-size: 18px; font-weight: 700; }
.ugo-stepper span { min-width: 54px; text-align: center; font-weight: 700; font-size: 13px; }

/* zbroj odabranog */
.ugo-zbroj {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 12px;
    background: var(--ugo-accent); color: #fff; border-radius: 14px;
}
.ugo-zbroj .iznos { font-size: 20px; font-weight: 800; margin-left: auto; }

.ugo-prazno { padding: 28px 12px; text-align: center; color: var(--ugo-ink-soft); }

/* raspored dvije kolone (stolovi | narudžbe) */
.ugo-dvije { display: grid; grid-template-columns: minmax(260px, 34%) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ugo-dvije { grid-template-columns: 1fr; } }
.ugo-panel { background: var(--ugo-surface); border: 1px solid var(--ugo-line); border-radius: 16px; padding: 12px; }
.ugo-panel h3 { margin: 0 0 10px; font-size: 15px; }

/* tlocrt dvorane */
.ugo-tlocrt {
    position: relative; width: 100%; container-type: inline-size; border-radius: 14px; overflow: hidden;
    background-color: #fbfcfd; border: 1px solid var(--ugo-line);
    background-image: linear-gradient(var(--ugo-line) 1px, transparent 1px), linear-gradient(90deg, var(--ugo-line) 1px, transparent 1px);
    background-size: 5% 8.333%;
    touch-action: none; user-select: none;
}
.ugo-tlocrt .pozadina { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.ugo-tlocrt .t-stol {
    position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    border-radius: 12px; background: var(--ugo-free); color: var(--ugo-free-ink); border: 2px solid rgba(0,0,0,.08);
    font-size: clamp(9px, 1.7cqw, 18px); line-height: 1.1; cursor: pointer; overflow: hidden; padding: 2px;
    box-shadow: 0 1px 3px rgba(28,39,51,.15); transition: box-shadow .1s ease;
}
.ugo-tlocrt .t-stol.oblik-O { border-radius: 50%; }
.ugo-tlocrt .t-stol.oblik-P { border-radius: 8px; }
.ugo-tlocrt .t-stol.oblik-S { border-radius: 999px; background: #e8e2d6; color: #5a4a2c; }
.ugo-tlocrt .t-stol.busy { background: var(--ugo-busy); color: var(--ugo-busy-ink); }
.ugo-tlocrt .t-stol.bill { background: var(--ugo-bill); color: var(--ugo-bill-ink); }
.ugo-tlocrt .t-stol.late { background: var(--ugo-late); color: var(--ugo-late-ink); }
.ugo-tlocrt .t-stol.lock { background: var(--ugo-lock); color: var(--ugo-lock-ink); }
.ugo-tlocrt .t-stol.on { border-color: var(--ugo-accent); box-shadow: 0 0 0 3px rgba(30,58,95,.25); z-index: 2; }
.ugo-tlocrt .t-stol.vuce { box-shadow: 0 8px 24px rgba(28,39,51,.35); z-index: 3; opacity: .92; }
.ugo-tlocrt .t-stol .naziv { font-weight: 800; }
.ugo-tlocrt .t-stol .meta { font-size: .78em; opacity: .85; }
.ugo-tlocrt .t-stol .broj {
    position: absolute; top: 3px; right: 5px; min-width: 1.4em; height: 1.4em; border-radius: .7em; padding: 0 .3em;
    background: var(--ugo-accent); color: #fff; font-size: .75em; font-weight: 800; display: grid; place-items: center;
}
.ugo-tlocrt .t-stol [data-resize] {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--ugo-accent) 50%);
}
.ugo-tlocrt .t-stol.oblik-O [data-resize] { right: 12%; bottom: 12%; border-radius: 3px; }
.ugo-tlocrt .t-stol.oblik-S [data-resize] { right: 8px; }
.ugo-ladica { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ugo-ladica .ugo-gumb { min-height: 34px; }

/* gumb na tamnoj traci (zaglavlje ekrana Stolovi) */
.ugo .ugo-gumb.na-traci { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.65); }
.ugo .ugo-gumb.na-traci:hover { background: rgba(255,255,255,.24); }