/* =========================================================================
   MODERNA — jedinstveni dizajn sistem za cijelu aplikaciju.
   Učitava se POSLIJE sb-admin-2.min.css i modernizuje izgled bez mijenjanja
   HTML strukture (Bootstrap grid ostaje radi responzivnosti).
   ========================================================================= */

:root {
    --m-primary:    #4f46e5;   /* indigo */
    --m-primary-600:#4338ca;
    --m-primary-050:#eef2ff;
    --m-sidebar:    #0f172a;   /* slate-900 */
    --m-sidebar-2:  #1e293b;
    --m-bg:         #f1f5f9;   /* slate-100 */
    --m-card:       #ffffff;
    --m-text:       #1e293b;   /* slate-800 */
    --m-muted:      #64748b;   /* slate-500 */
    --m-border:     #e2e8f0;   /* slate-200 */
    --m-success:    #059669;
    --m-danger:     #dc2626;
    --m-warning:    #d97706;
    --m-info:       #0891b2;
    --m-radius:     14px;
    --m-radius-sm:  9px;
    --m-shadow:     0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --m-shadow-md:  0 4px 16px rgba(15,23,42,.10);
    --m-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Osnova ---------- */
body {
    font-family: var(--m-font) !important;
    background-color: var(--m-bg) !important;
    color: var(--m-text);
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--m-font) !important; font-weight: 700; color: var(--m-text); letter-spacing: -.01em; }
a { color: var(--m-primary); }
a:hover { color: var(--m-primary-600); }

/* ---------- Sidebar ---------- */
/* Boje/font mijenjamo, ali širinu i collapsed/expanded ponašanje prepuštamo
   SB Admin-u: default je sužen (samo ikone), a dugme dolje ga proširuje. */
.sidebar,
.sidebar.bg-gradient-primary {
    background: var(--m-sidebar) !important;
    background-image: none !important;
    min-height: 100vh;
}
.sidebar .nav-item .nav-link {
    color: #cbd5e1 !important;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.sidebar .nav-item .nav-link i { color: #94a3b8; transition: color .15s; }
.sidebar .nav-item .nav-link:hover { color: #fff !important; }
.sidebar .nav-item .nav-link:hover i { color: #fff; }
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link.active { color: #fff !important; }
.sidebar .nav-item.active .nav-link i,
.sidebar .nav-item .nav-link.active i { color: #fff; }
/* Zaobljeni hover/active samo u proširenom stanju na DESKTOPU. Ova pravila se
   ne smiju primijeniti na mobilnom (<768px) jer je tamo sidebar u icon-modu s
   apsolutnim flyout podmenijima koje bi overflow-x:hidden odrezao. */
@media (min-width: 768px) {
    .sidebar:not(.toggled) { overflow-x: hidden; }
    .sidebar:not(.toggled) .nav-item { width: 100%; }
    .sidebar:not(.toggled) .nav-item .nav-link {
        border-radius: 10px;
        margin: 2px 12px;
        box-sizing: border-box;
        max-width: calc(100% - 24px);   /* highlight ostaje unutar sidebara */
    }
    .sidebar:not(.toggled) .nav-item .nav-link:hover,
    .sidebar:not(.toggled) .nav-item.active .nav-link { background: var(--m-sidebar-2) !important; }
    .sidebar:not(.toggled) .nav-item.active .nav-link { background: var(--m-primary) !important; }
}
.sidebar.toggled .nav-item.active .nav-link,
.sidebar.toggled .nav-item .nav-link:hover { background: var(--m-sidebar-2) !important; }
/* Brand / logo — malo veći */
.sidebar-brand { padding-top: 1.3rem !important; padding-bottom: 1rem !important; }
.sidebar-brand-text { font-weight: 800 !important; letter-spacing: .02em; text-transform: none; }
.sidebar .sidebar-brand .logo img { max-width: 60px; height: auto; }
.sidebar-divider { border-top: 1px solid rgba(148,163,184,.18); }
#sidebarToggle { background: var(--m-sidebar-2); }
#sidebarToggle:hover { background: #334155; }
/* Flyout podmeni u suženom sidebaru — uredan dropdown sa jasnom sjenom */
.sidebar.toggled .nav-item .collapse { z-index: 1000 !important; }
.sidebar.toggled .nav-item .collapse .collapse-inner {
    box-shadow: 0 10px 30px rgba(15,23,42,.25) !important;
    border: 1px solid var(--m-border);
    border-radius: 10px !important;
    min-width: 12.5rem;
    padding: .5rem 0;
}
.sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item { padding: .5rem 1.1rem; }
.sidebar .collapse-inner, .sidebar .collapsing .collapse-inner {
    border-radius: 10px !important; box-shadow: var(--m-shadow-md); margin: 0 12px; padding: .4rem 0;
}
.sidebar .collapse-inner .collapse-item { color: var(--m-text); font-weight: 500; padding: .5rem 1rem; border-radius: 6px; }
.sidebar .collapse-inner .collapse-item:hover { background: var(--m-primary-050); color: var(--m-primary-600); }
.sidebar .collapse-inner .collapse-header { color: var(--m-muted); font-weight: 700; }

/* ---------- Topbar ---------- */
.topbar {
    height: 4.2rem !important;
    background: var(--m-card);
    box-shadow: var(--m-shadow) !important;
    border-bottom: 1px solid var(--m-border);
}
.topbar .nav-link { color: var(--m-muted); font-weight: 600; }
.topbar .nav-link:hover { color: var(--m-primary); }

/* ---------- Kartice ---------- */
.card {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow) !important;
    background: var(--m-card);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 1rem 1.25rem;
    font-weight: 700;
}
.card-header h6, .card-header .m-0 { color: var(--m-text) !important; font-weight: 700 !important; }
/* Statističke kartice — ukloni debeli lijevi border, dodaj čist akcenat gore */
.card.border-left-primary,
.card.border-left-success,
.card.border-left-info,
.card.border-left-warning,
.card.border-left-danger { border-left: 1px solid var(--m-border) !important; position: relative; overflow: hidden; }
.card.border-left-primary::before,
.card.border-left-success::before,
.card.border-left-info::before,
.card.border-left-warning::before,
.card.border-left-danger::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.card.border-left-primary::before { background: var(--m-primary); }
.card.border-left-success::before { background: var(--m-success); }
.card.border-left-info::before    { background: var(--m-info); }
.card.border-left-warning::before { background: var(--m-warning); }
.card.border-left-danger::before  { background: var(--m-danger); }
.text-primary { color: var(--m-primary) !important; }
.text-success { color: var(--m-success) !important; }
.text-info    { color: var(--m-info) !important; }
.text-warning { color: var(--m-warning) !important; }
.text-danger  { color: var(--m-danger) !important; }

/* ---------- Dugmad ---------- */
.btn { border-radius: var(--m-radius-sm); font-weight: 600; letter-spacing: .01em; box-shadow: none !important; }
.btn-primary { background: var(--m-primary); border-color: var(--m-primary); }
.btn-primary:hover { background: var(--m-primary-600); border-color: var(--m-primary-600); }
.btn-success { background: var(--m-success); border-color: var(--m-success); }
.btn-danger  { background: var(--m-danger); border-color: var(--m-danger); }
.btn-info    { background: var(--m-info); border-color: var(--m-info); }
.btn-secondary { background: #64748b; border-color: #64748b; }
.bg-gradient-primary { background: var(--m-primary) !important; background-image: none !important; }

/* ---------- Tabele ---------- */
.table { color: var(--m-text); }
.table thead th, .table thead td {
    background: #f8fafc; color: var(--m-muted); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--m-border) !important;
}
.table td, .table th { border-top: 1px solid #f1f5f9; vertical-align: middle; }
.table-bordered td, .table-bordered th { border: 1px solid var(--m-border); }
.table tbody tr:hover { background: #f8fafc; }
.thead-light th { background: #f8fafc !important; }
/* Liste faktura/predračuna: broj (1.), ID broj, iznos, status i akcije uvijek
   u jednom redu; jedino kolona kupca (4.) se lomi kad je naziv dug. */
#dataTable td:first-child, #dataTable th:first-child { white-space: nowrap; }
#dataTable td:nth-child(n+5), #dataTable th:nth-child(n+5) { white-space: nowrap; }

/* Akcijski gumbi u tabelama — ujednačeni i uredni */
#dataTable td .btn {
    height: 31px;
    border-radius: 8px !important;
    padding: 0 .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    margin: 1px;
    box-shadow: none !important;
    vertical-align: middle;
    line-height: 1;
}
#dataTable td .btn i { margin: 0 !important; }
#dataTable td .btn-circle { width: 31px; padding: 0; }          /* ikon-only → zaobljeni kvadrat */
#dataTable td form { display: inline-block; margin: 0; }
#dataTable td .btn-icon-split { padding: 0 .55rem; }
#dataTable td .btn-icon-split .icon { background: transparent !important; padding: 0; }
#dataTable td .btn-icon-split .text { padding: 0; }
/* Akcije poravnati desno, bez lomljenja */
#dataTable td:last-child { text-align: right; }

/* ---------- Forme ---------- */
.form-control, .custom-select {
    border: 1px solid var(--m-border); border-radius: var(--m-radius-sm);
    color: var(--m-text); font-size: .92rem; padding: .5rem .8rem; height: auto;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--m-primary); box-shadow: 0 0 0 3px var(--m-primary-050);
}
label { font-weight: 600; color: var(--m-text); font-size: .85rem; }
.form-control-user { border-radius: var(--m-radius-sm) !important; padding: .7rem 1rem !important; }

/* ---------- Badge / status ---------- */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 6px; }

/* ---------- Login ---------- */
body.bg-gradient-primary {
    background: linear-gradient(135deg, var(--m-primary) 0%, #7c3aed 100%) !important;
}
.card.o-hidden { border-radius: 18px !important; box-shadow: var(--m-shadow-md) !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- Sitno ---------- */
.text-gray-800 { color: var(--m-text) !important; }
.text-gray-300 { color: #cbd5e1 !important; }
hr { border-top: 1px solid var(--m-border); }
.dropdown-menu { border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); box-shadow: var(--m-shadow-md); }