/* ==========================================================
   ALUMAX - NOVI IZGLED (21.10.2026.)  ·  minimalistički, pregledan, boje loga (crna + crvena)
   Učitava se na svim stranicama POSLIJE tailwind.css i mijenja samo izgled (boje, fontove, razmake, ivice).
   Raspored, podaci i rad aplikacije ostaju isti; štampa (PDF, nalozi, putni nalozi) se ne mijenja.

   VRAĆANJE NA STARI IZGLED: na server prepisati ovaj fajl praznim fajlom izgled.css (nalazi se u folderu
   "VRATI_STARI_IZGLED" u paketu). Ništa drugo se ne mijenja.

   Sistem: neutralne sive (zinc), crna #0b0b0c za navigaciju, crvena loga #e30613 samo za glavne akcije i aktivno stanje,
   tanke ivice umjesto sjena, manji radijusi (kartice 14 px, polja 10 px, oznake 6 px), Inter sa umjerenim debljinama.
   ========================================================== */
@media screen {

:root {
    --iz-brand: #e30613; --iz-brand-h: #c40511; --iz-brand-t: #d10512; --iz-brand-soft: #fff1f1; --iz-brand-ring: rgba(227, 6, 19, .16);
    --iz-ink: #18181b; --iz-ink-2: #52525b; --iz-ink-3: #71717a; --iz-ink-4: #8b8b94;
    --iz-bg: #f4f4f5; --iz-surface: #ffffff; --iz-surface-2: #fafafa; --iz-field: #ffffff;
    --iz-line: #e4e4e7; --iz-line-2: #d4d4d8; --iz-hover: #f4f4f5;
    --iz-chrome: #0b0b0c; --iz-chrome-2: #161618; --iz-chrome-3: #232326; --iz-chrome-line: #222225; --iz-chrome-ink: #a1a1aa;
    --iz-r-card: 14px; --iz-r-ctl: 10px; --iz-r-chip: 6px;
    --iz-pop: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px -12px rgba(0, 0, 0, .22);
    --iz-fast: 150ms;
}
.dark {
    --iz-brand-t: #ff5a5f; --iz-brand-soft: rgba(227, 6, 19, .14); --iz-brand-ring: rgba(255, 90, 95, .28);
    --iz-ink: #f4f4f5; --iz-ink-2: #c4c4cc; --iz-ink-3: #a1a1aa; --iz-ink-4: #8b8b94;
    --iz-bg: #0a0a0b; --iz-surface: #141416; --iz-surface-2: #18181b; --iz-field: #18181b;
    --iz-line: #27272a; --iz-line-2: #3a3a3f; --iz-hover: #1f1f22;
    --iz-pop: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px -12px rgba(0, 0, 0, .75);
}

/* ---------------- osnova ---------------- */
body { letter-spacing: -.011em !important; }
::selection { background: var(--iz-brand-ring); }
:focus-visible { outline: 2px solid var(--iz-brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
@media (hover: hover) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--iz-line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* debljine fonta: umjereniji, čitljiviji tekst (umjesto "sve podebljano") */
.font-black { font-weight: 720; }
.font-extrabold { font-weight: 680; }
.font-bold { font-weight: 600; }
.font-semibold { font-weight: 560; }
.tracking-widest { letter-spacing: .12em; }
.tracking-wider { letter-spacing: .06em; }
/* premali tekst je teško čitljiv na telefonu */
.text-\[9px\] { font-size: 10px; }
.text-\[10px\] { font-size: 11px; }

/* ---------------- svijetle površine i tekst (neutralne sive umjesto plavkastih) ---------------- */
:where(html:not(.dark)) .bg-gray-100 { background-color: var(--iz-bg); }
:where(html:not(.dark)) .bg-gray-50 { background-color: var(--iz-surface-2); }
:where(html:not(.dark)) .bg-gray-200 { background-color: #e7e7ea; }
:where(html:not(.dark)) .border-gray-100 { border-color: #efeff1; }
:where(html:not(.dark)) .border-gray-200 { border-color: var(--iz-line); }
:where(html:not(.dark)) .border-gray-300 { border-color: var(--iz-line-2); }
:where(html:not(.dark)) .text-gray-900 { color: var(--iz-ink); }
:where(html:not(.dark)) .text-gray-800 { color: #27272a; }
:where(html:not(.dark)) .text-gray-700 { color: #3f3f46; }
:where(html:not(.dark)) .text-gray-600 { color: var(--iz-ink-2); }
:where(html:not(.dark)) .text-gray-500 { color: var(--iz-ink-3); }
:where(html:not(.dark)) .text-gray-400 { color: var(--iz-ink-4); }
:where(html:not(.dark)) .hover\:bg-gray-100:hover { background-color: #ececee; }
:where(html:not(.dark)) .hover\:bg-gray-50:hover { background-color: var(--iz-hover); }
:where(html:not(.dark)) .divide-gray-100 > :not([hidden]) ~ :not([hidden]), :where(html:not(.dark)) .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--iz-line); }

/* tamna tema */
.dark .dark\:bg-darker { background-color: var(--iz-bg); }
.dark .dark\:bg-carddark { background-color: var(--iz-surface); }
.dark .dark\:border-borderdark { border-color: var(--iz-line); }
.dark .dark\:bg-zinc-900 { background-color: #18181b; }

/* ---------------- tamna navigacija: crna kao logo ---------------- */
.bg-slate-900 { background-color: var(--iz-chrome); }
.bg-slate-900\/90 { background-color: rgba(11, 11, 12, .92); }
.bg-slate-800 { background-color: var(--iz-chrome-2); }
.bg-slate-700, .hover\:bg-slate-700:hover, .active\:bg-slate-700:active { background-color: var(--iz-chrome-3); }
.border-slate-800 { border-color: var(--iz-chrome-line); }
.border-slate-700 { border-color: #2c2c30; }
.text-slate-300 { color: #d4d4d8; }
.text-slate-400 { color: var(--iz-chrome-ink); }

/* ---------------- crvena loga (samo glavne akcije i aktivno stanje) ---------------- */
.bg-red-600 { background-color: var(--iz-brand); }
.hover\:bg-red-700:hover, .active\:bg-red-700:active, .bg-red-700 { background-color: var(--iz-brand-h); }
.text-red-600 { color: var(--iz-brand-t); }
.border-red-600, .border-red-500 { border-color: var(--iz-brand); }
.ring-red-600, .focus\:ring-red-600:focus { --tw-ring-color: var(--iz-brand); }
.focus\:ring-2:focus { --tw-ring-color: var(--iz-brand-ring); }
:where(html:not(.dark)) .bg-red-50 { background-color: var(--iz-brand-soft); }
[class*="shadow-red-"] { box-shadow: none !important; }   /* bez "sjaja" oko crvenih dugmadi */

/* ---------------- oblici: manji radijusi, tanke ivice umjesto sjena ---------------- */
.rounded-3xl { border-radius: 18px; }
.rounded-2xl { border-radius: var(--iz-r-card); }
.rounded-xl { border-radius: var(--iz-r-ctl); }
.rounded-lg { border-radius: 8px; }
.shadow-sm, .shadow, .shadow-md { box-shadow: none; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--iz-pop); }
html .bg-white.rounded-2xl:not([class*="shadow-"]), html .dark .bg-carddark.rounded-2xl:not([class*="shadow-"]) { box-shadow: none; }
tbody tr { transition: background-color var(--iz-fast); }
html tbody tr:hover { box-shadow: none; background-color: var(--iz-hover); }
html thead th { font-weight: 600; color: var(--iz-ink-3); letter-spacing: .04em; }

/* ---------------- zajedničke komponente modula ---------------- */
/* dugmad */
.btn { font-weight: 640; letter-spacing: -.005em; border-radius: var(--iz-r-ctl); transition: background-color var(--iz-fast), border-color var(--iz-fast), color var(--iz-fast), transform 80ms; }
.btn:active { transform: scale(.98); }
.btn-red { background: var(--iz-brand); color: #fff; box-shadow: none; }
.btn-red:hover { background: var(--iz-brand-h); }
.btn-green { box-shadow: none; }
.btn-line { background: var(--iz-surface); border: 1px solid var(--iz-line-2); color: var(--iz-ink); }
.btn-line:hover { background: var(--iz-hover); }
.dark .btn-line { background: var(--iz-surface-2); border-color: var(--iz-line-2); color: var(--iz-ink); }
.btn-warn { border-width: 1px; }
.btn.sm { border-radius: 9px; }

/* polja za unos */
.inp { background: var(--iz-field); border: 1px solid var(--iz-line-2); border-radius: var(--iz-r-ctl); color: var(--iz-ink); transition: border-color var(--iz-fast), box-shadow var(--iz-fast); }
.inp:hover { border-color: #a1a1aa; }
.inp:focus { background: var(--iz-field); border-color: var(--iz-brand); box-shadow: 0 0 0 3px var(--iz-brand-ring); }
.dark .inp { background: var(--iz-field); border-color: var(--iz-line-2); color: var(--iz-ink); }
.dark .inp:focus { background: var(--iz-field); border-color: #ff5a5f; }
.inp::placeholder { color: #a1a1aa; }
.lbl { font-weight: 600; letter-spacing: .04em; color: var(--iz-ink-3); }
.dark .lbl { color: var(--iz-ink-3); }
.hint { color: var(--iz-ink-3); }

/* oznake (status, vrsta) */
.chip { border-radius: var(--iz-r-chip); font-weight: 600; letter-spacing: 0; }

/* kartice i sekcije */
.kp-sec, .card { background: var(--iz-surface); border: 1px solid var(--iz-line); border-radius: var(--iz-r-card); box-shadow: none; }
.dark .kp-sec, .dark .card { background: var(--iz-surface); border-color: var(--iz-line); }
.kp-h, .h-sec { font-weight: 650; letter-spacing: .05em; color: var(--iz-ink-3); }
.dark .kp-h, .dark .h-sec { color: var(--iz-ink-3); }
.kp-hero, .hp-hero { background: #111113; border: 1px solid #1f1f22; border-radius: 18px; box-shadow: inset 0 3px 0 var(--iz-brand); }

/* filteri / kartice u obliku dugmadi ("Sve 15", "Ovaj mjesec") */
.kp-chip, .st-chipbtn, .po-fil button, .ot-fil button, .bn-pre button, .bn-snz button {
    border-radius: 999px; border-width: 1px; font-weight: 600; background: var(--iz-surface); border-color: var(--iz-line-2); color: var(--iz-ink-2);
}
.kp-chip.on, .st-chipbtn.on, .po-fil button.on, .ot-fil button.on {
    background: var(--iz-chrome); border-color: var(--iz-chrome); color: #fff;
}
.dark .kp-chip, .dark .st-chipbtn, .dark .po-fil button, .dark .ot-fil button, .dark .bn-pre button, .dark .bn-snz button { background: var(--iz-surface-2); border-color: var(--iz-line-2); color: var(--iz-ink-2); }
.dark .kp-chip.on, .dark .st-chipbtn.on, .dark .po-fil button.on, .dark .ot-fil button.on { background: #f4f4f5; border-color: #f4f4f5; color: #0b0b0c; }

/* segmentirane kartice unutar stranice */
.kp-tabs, .st-tabs, .ot-tabs { background: #ececee; border-radius: 12px; }
.dark .kp-tabs, .dark .st-tabs, .dark .ot-tabs { background: var(--iz-surface-2); }
.kp-tab, .st-tab, .ot-tabs button { font-weight: 600; border-radius: 9px; }
.kp-tab.on, .st-tab.on, .ot-tabs button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* liste kartica u modulima */
.po-card, .ot-k, .ot-st, .fk-row, .bn-it, .st-row, .rp-kpi { border-radius: var(--iz-r-card); border-color: var(--iz-line); box-shadow: none; }
.dark .po-card, .dark .ot-k, .dark .ot-st, .dark .fk-row, .dark .bn-it, .dark .st-row, .dark .rp-kpi { border-color: var(--iz-line); background: var(--iz-surface); }
.po-card::before, .ot-k::before, .ot-st::before { width: 4px; }
@media (hover: hover) {
    .po-card:hover, .ot-k:hover, .fk-row:hover, .bn-it:hover, .st-row:hover { border-color: var(--iz-line-2); }
}
.bn-tool { border-width: 1px; border-color: var(--iz-line-2); border-radius: var(--iz-r-ctl); }
.bn-tool.on { border-color: var(--iz-brand); }
.kp-search input { border-radius: 12px; }
.ot-day { border-radius: var(--iz-r-card); }

/* ---------------- zaglavlje (shell.js) ---------------- */
html #shellRoot header { background: var(--iz-chrome); border-bottom: 1px solid var(--iz-chrome-line); box-shadow: none; }
html #shellRoot .sh-bar2 { background: var(--iz-surface); border-bottom-color: var(--iz-line); }
html #shellRoot .sh-bar2 .bg-red-50 { background: var(--iz-brand-soft); }
html #shellRoot #shUserBtn, html #shellRoot #shTheme, html #shellRoot #shBell { background: var(--iz-chrome-2); border-color: #26262a; border-radius: 10px; }
html #shellRoot #shUserBtn:hover, html #shellRoot #shTheme:hover, html #shellRoot #shBell:hover { background: var(--iz-chrome-3); }
html #shellRoot #shAction { border-radius: 10px; font-weight: 640; box-shadow: none; }
html #shellRoot button[data-tab] { font-weight: 560; }
/* naziv modula: obična slova umjesto VELIKIH (mirnije i čitljivije) */
html #shellRoot .uppercase.tracking-wider { text-transform: none; letter-spacing: -.012em; font-size: 15px; font-weight: 700; }
html #shellRoot .sh-bar2 .uppercase.tracking-wider { font-size: 17px; }
html #shellRoot .sh-bar2 .bg-red-50 { border-radius: 9px; }
html #shUserMenu, html #shMoreMenu, html #shNotifPanel > div { border-radius: 12px; box-shadow: var(--iz-pop); }
html .sh-mi { border-radius: 8px; font-weight: 560; font-size: 13px; padding: 9px 12px; }

/* bočna traka (računar / tablet) */
html #shSide { background: var(--iz-chrome); border-right-color: var(--iz-chrome-line); color: var(--iz-chrome-ink); }
html #shSide .sh-brand { border-bottom-color: var(--iz-chrome-line); }
html #shSide .sh-brand img.mark { border-radius: 8px; }
html .sh-it { color: var(--iz-chrome-ink); border-radius: 10px; font-weight: 560; }
html .sh-it:hover { background: var(--iz-chrome-2); color: #fff; }
html .sh-it.on, html .sh-it.on:hover { background: rgba(227, 6, 19, .16); color: #fff; box-shadow: inset 3px 0 0 var(--iz-brand); }
html .sh-it.on .ic { color: #ff4d55; }
html .sh-it .bd { background: var(--iz-brand); box-shadow: 0 0 0 2px var(--iz-chrome); font-weight: 700; }
html .sh-it.on .bd { background: var(--iz-brand); color: #fff; }
html .sh-gh, html .sh-dr-gh { color: #6b6b74; font-weight: 650; border-top-color: var(--iz-chrome-line); }
html #shSide .sh-foot { border-top-color: var(--iz-chrome-line); }
html #shSide .sh-pin { color: #6b6b74; border-radius: 10px; }
html #shSide .sh-pin:hover { background: var(--iz-chrome-2); color: #e4e4e7; }
html #shSide:hover { box-shadow: 12px 0 32px rgba(0, 0, 0, .35); }

/* donja traka (telefon u pregledniku): crna, aktivni modul = crvena linija i bijela ikona (umjesto crvenog bloka) */
html #shellBottom { background: var(--iz-chrome); border-top-color: var(--iz-chrome-line); padding-bottom: env(safe-area-inset-bottom); }
html #shellBottom > a, html #shellBottom > button { color: var(--iz-chrome-ink); font-weight: 560; }
html #shellBottom > a.bg-red-600 { background: transparent; color: #fff; box-shadow: inset 0 2px 0 var(--iz-brand); }
html #shellBottom > a.bg-red-600 svg { color: #ff4d55; }

/* izbornik sa strane (aplikacija na telefonu) */
html #shDrawerWrap .sh-panel { background: var(--iz-chrome); }
html .sh-dr-item { border-radius: 12px; font-weight: 600; color: #d4d4d8; }
html .sh-dr-item.on { background: rgba(227, 6, 19, .18); color: #fff; box-shadow: inset 3px 0 0 var(--iz-brand); }
html .sh-dr-item:active { background: var(--iz-chrome-2); }

/* kartice modula u aplikaciji (kompaktno zaglavlje) */
html.sh-compact #shellRoot button[data-tab] { font-weight: 600; }

/* skočne obavijesti (toast) */
#toastContainer > div, #toastBox > div { border-radius: 12px !important; box-shadow: var(--iz-pop) !important; }

/* ---------------- prijava (app.php) ---------------- */
#vLogin input { border-radius: var(--iz-r-ctl) !important; }
#vLogin #loginBtn { border-radius: var(--iz-r-ctl) !important; letter-spacing: .02em; text-transform: none; font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
}