/* ==========================================================
   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;
}

/* ==========================================================
   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;
}

/* 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(--nexus-slate-100) !important;
    font-weight: 700 !important;
    color: var(--nexus-slate-800) !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: rgba(59, 130, 246, 0.08) !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: #ffecb3 !important; /* Jača narančasto-žuta */
    border-left: 3px solid #ff9800 !important; /* Narančasti border za dodatni naglasak */
}

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

/* Ćelije u selektiranom retku */
body .mud-table-row.selected-row .mud-table-cell {
    color: #5d4037 !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: #546e7a !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: #ffffff !important;
}

.mud-picker-calendar-header-switch,
.mud-popover-provider .mud-picker-calendar-header-switch,
.mud-popover .mud-picker-calendar-header-switch {
    background-color: #ffffff !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: #1565c0 !important;
}

/* Dani u tjednu (header) */
.mud-picker-calendar-header-day,
.mud-popover .mud-picker-calendar-header-day {
    color: #666666 !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: #333333 !important;
    font-size: var(--nexus-text-sm);
    background-color: #ffffff !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(--nexus-primary-100) !important;
    color: var(--nexus-primary-700) !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: #cccccc !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(--nexus-gray-600);
    transition: var(--nexus-transition-base);
}

body .mud-tabs .mud-tab:hover {
    color: var(--nexus-primary-600);
}

body .mud-tabs .mud-tab.mud-tab-active {
    color: var(--nexus-primary-700);
    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(--nexus-gray-900);
}

.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: #757575 !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: #1e293b !important;
}

.mud-table-pagination-display {
    color: #1e293b !important;
}

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

/* Fiksiranje Šifre (Lijevo 0) */
.sticky-column-sifra {
    position: sticky !important;
    left: 0 !important;
    z-index: 40 !important;
    background-color: #f1f5f9 !important;
}

/* Fiksiranje Naziva (Lijevo 80px) */
.sticky-column-naziv {
    position: sticky !important;
    left: 80px !important;
    z-index: 40 !important;
    background-color: #f1f5f9 !important;
    border-right: 2px solid #e2e8f0 !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: #f1f5f9 !important;
    border-left: 2px solid #e2e8f0 !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: white !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: #f8fafc !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: #e2e8f0 !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: #ffecb3 !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: #ffe082 !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: #fdfaf5 !important;
    color: #a68b6d !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: #a68b6d !important;
}

/* 2. NEAKTIVAN RED - HOVER */
.mud-table-row.mud-theme-warning:hover,
.mud-table-row.mud-theme-warning:hover > td {
    background-color: #fff1d6 !important; /* Jasna krem/narančasta */
    color: #d35400 !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: #d35400 !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: #616161 !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: #757575 !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: #d32f2f !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: #616161 !important;
}

/* Search ikona u MudAutocomplete/MudTextField */
.mud-input-adornment-start .mud-icon-root {
    color: #757575 !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: #9e9e9e !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: #616161 !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(--nexus-gray-100);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--nexus-gray-400);
}

/* ==========================================================
   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;
}