/* ═══════════════════════════════════════════════════════════════════════════
   crud-ux-v3.css  —  CRUD pro polish pass (kc t_896)
   ---------------------------------------------------------------------------
   Subtilan "modern SaaS" sloj iznad crud-engine.css / crud-ux-v2.css.
   Cilj: jasnija hijerarhija, mekše interakcije, profi mikro-animacije —
   BEZ promjene layouta/markupa i BEZ hardkodiranih boja (samo CSS vars).
   Sve radi u light I dark temi (oslanja se na --crud-* tokene koji se
   prebacuju u [data-theme="dark"]). Učitava se POSLIJE svih ostalih CSS-ova.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lokalni elevation + easing tokeni (dark-safe) ───────────────────────── */
:root {
    --crud-elev-1: 0 1px 2px rgba(20, 42, 62, 0.06), 0 1px 3px rgba(20, 42, 62, 0.05);
    --crud-elev-2: 0 4px 14px rgba(20, 42, 62, 0.10), 0 2px 5px rgba(20, 42, 62, 0.06);
    --crud-elev-3: 0 14px 34px rgba(20, 42, 62, 0.16), 0 4px 10px rgba(20, 42, 62, 0.08);
    --crud-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --crud-dur: 160ms;
    --crud-primary-rgb: 38, 133, 241;
}

[data-theme="dark"] {
    --crud-elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --crud-elev-2: 0 4px 16px rgba(0, 0, 0, 0.50);
    --crud-elev-3: 0 16px 38px rgba(0, 0, 0, 0.62);
}

/* ── Toolbar: mekša ljepljiva traka s hairline odvajanjem ────────────────── */
.crud-toolbar {
    border-bottom: 1px solid var(--crud-border);
    transition: box-shadow var(--crud-dur) var(--crud-ease);
}

/* ── Dugmad: ujednačen hover lift + press feedback ───────────────────────── */
.crud-toolbar .btn,
.crud-toolbar .btn-sm,
.btn-col-picker,
.btn-export,
.btn-filter {
    transition: background var(--crud-dur) var(--crud-ease),
                border-color var(--crud-dur) var(--crud-ease),
                color var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease),
                transform var(--crud-dur) var(--crud-ease);
}

.crud-toolbar .btn-sm:hover,
.btn-col-picker:hover,
.btn-export:hover,
.btn-filter:hover {
    box-shadow: var(--crud-elev-1);
}

.crud-toolbar .btn-sm:active,
.btn-col-picker:active,
.btn-export:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Primarno "Novi zapis" — najača akcija dobija suptilnu dubinu */
.btn-new-record,
.crud-toolbar .btn-primary {
    box-shadow: 0 1px 2px rgba(var(--crud-primary-rgb), 0.30);
}
.btn-new-record:hover,
.crud-toolbar .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(var(--crud-primary-rgb), 0.34);
}
.btn-new-record:active,
.crud-toolbar .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(var(--crud-primary-rgb), 0.30);
}
.btn-new-record .btn-icon-glyph {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

/* Konzistentni focus-visible prstenovi (a11y — nikad se ne uklanjaju) */
.crud-toolbar .btn:focus-visible,
.crud-toolbar .btn-sm:focus-visible,
.mode-switcher .mode-btn:focus-visible,
.layout-switcher .layout-btn:focus-visible,
.crud-table-footer button:focus-visible {
    outline: 2px solid var(--crud-primary);
    outline-offset: 2px;
}

/* ── Mode / layout switcher: mekši aktivni prelaz ────────────────────────── */
.mode-switcher .mode-btn,
.layout-switcher .layout-btn {
    transition: background var(--crud-dur) var(--crud-ease),
                color var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease);
}
.mode-switcher .mode-btn:hover:not(.active),
.layout-switcher .layout-btn:hover:not(.active) {
    background: var(--crud-table-hover);
    color: var(--crud-text);
}
/* C144: bilo 0 1px 5px/.32 — Radula: "bezveze izgleda sa ovim glowom".
   Ovo pravilo (kasnije u kaskadi, ista specificnost 0-3-0) GAZI suptilnije
   .mode-switcher .mode-btn.active pravilo iz infos-list.css:407 (box-shadow
   se ne sabira, samo zamjenjuje) — omeksano umjesto obrisano, jer
   .layout-switcher .layout-btn.active nema NIKAKAV drugi izvor sjenke u
   citavom css/ stablu; brisanje bi ga ostavilo bez ikakvog signala. */
.mode-switcher .mode-btn.active,
.layout-switcher .layout-btn.active {
    box-shadow: 0 1px 3px rgba(var(--crud-primary-rgb), 0.18);
}

/* ── Search: malo mekši fokus + clear dugme animacija ────────────────────── */
.search-input {
    transition: border-color var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease),
                background var(--crud-dur) var(--crud-ease);
}
.search-clear-btn {
    transition: background var(--crud-dur) var(--crud-ease),
                transform var(--crud-dur) var(--crud-ease);
}
.search-clear-btn:hover {
    transform: translateY(-50%) scale(1.08);
}
.search-input-wrapper.has-value .search-clear-btn {
    animation: crudClearPop 140ms var(--crud-ease);
}
@keyframes crudClearPop {
    from { opacity: 0; transform: translateY(-50%) scale(0.6); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ── KPI / summary strip: kompaktniji, profi look ────────────────────────── */
.crud-summary-strip {
    gap: 12px;
    padding: 14px 16px 4px;
}
.crud-summary-card {
    /* lone KPI više ne razvlači cijelu širinu — poravnat lijevo kao SaaS metric */
    flex: 1 1 170px;
    max-width: 280px;
    border-left-width: 3px;
    transition: box-shadow var(--crud-dur) var(--crud-ease),
                transform var(--crud-dur) var(--crud-ease),
                border-color var(--crud-dur) var(--crud-ease);
}
.crud-summary-card:hover {
    box-shadow: var(--crud-elev-2);
    transform: translateY(-1px);
}
.crud-summary-card-value {
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.crud-summary-card-label {
    letter-spacing: 0.07em;
}

/* ── Tabela: čvršći header + mekše, "skener-friendly" redove ─────────────── */
.table thead th {
    font-weight: 600;
    letter-spacing: 0.05em;
}
/* [1248] 17.09.2026, Radulina treca prijava iste pojave, odluka nosioca (uiux): NEMA FEJDA
   POZADINE NA REDOVIMA LISTE UOPSTE — `background` skinut sa liste tranzicija, `box-shadow`
   ostaje (elevacija kartica u cards modu se na njega oslanja).
   Razlog: klik uvijek stize dok je red pod hoverom, a hover ne-sticky celija nosi NEPROZIRAN
   background-image gradijent koji se gasi u istom kadru kad padne klasa stanja. Sto god fejduje
   ispod njega, otkrije se na pola puta. Izmjereno: odjava selekcije 133 ms na ostatku reda
   naspram 0 ms na zalijepljenim celijama. Vidi vault
   [[neproziran-hover-sloj-se-sklanja-na-t0-i-otkrije-stanje-koje-tek-krece]]. */
.table tbody tr {
    transition: box-shadow var(--crud-dur) var(--crud-ease);
}

/* State colour has to animate in exactly one layer, or the two halves of the
   table drift apart mid-fade. Sticky cells (status, document number) must be
   opaque — scrolled content would show through them otherwise — so they fade
   alone, surface → selected. A transparent cell instead shows its own fade
   composited over the <tr> fading the same colour underneath it; two stacked
   layers reach full saturation as 1-(1-a)², so at the midpoint they sit at 75%
   while the sticky cells sit at 50%. Same duration, visibly different colour.
   Giving every cell an opaque background hides the row and puts them all on the
   single-layer curve. Cards mode keeps transparent cells — there the card's own
   background is meant to show through.
   Element specificity is kept low (0,3,1) so every state rule still wins over
   it: hover, checked, selected, sum cells, and the inline-edit cell-dirty /
   cell-error highlights. */
.crud-table-area:not(.cards-mode) .table td {
    background-color: var(--ib-surface);
    /* [1248] 17.09.2026: `transition: background …` UKLONJEN. Neprozirna pozadina ostaje — ona
       i dalje drzi sve celije na istoj krivoj i sakriva <tr> ispod. Fejda vise nema ni u jednom
       smjeru: ovo je pravilo koje je nosilo ODJAVU selekcije i cekiranja (tranzicija se bira po
       ODREDISNOM stanju), pa je red koji se napusta gasio boju 133 ms dok su zalijepljene celije
       padale odmah. Izmjereno prije/poslije na tri ekrana. */
}

/* Hover is a pointer echo, not a state — the checkbox's own colour flips
   with no transition at all, so the row background must land the instant
   the pointer does, in both directions, or a fast sweep across rows shows
   it trailing behind. :not(:first-child): check-col's own accent-stripe
   transition (t1200, below) already outranks the base rule above on
   specificity, so its background was never fading anyway — leave that
   rule alone rather than fight it. Scoped to `background` (not a blanket
   `none`) because leaving hover lands on the exact same computed style as
   deselecting/unchecking — CSS can't tell those two apart by origin, only
   by destination.
   ⚠ STANJE POSLIJE [1248]/2393e035 (17.09.2026) — ostatak ovog pasusa je opisivao zateceno
   stanje i vise NE VAZI, pa se ne cita kao brana koja postoji. Pisalo je da
   `selected-row/checked-row/list-edit-row` nose vlastitu `!important` tranziciju u
   infos-list.css koja prezivljava ovo pravilo kad se hover i stanje poklope.
   Danas: `.selected-row` i `.row-checked` u infos-list.css nose `transition: none !important`
   — dakle jesu `!important`, ali gase fejd umjesto da ga cuvaju. `list-edit-row` NEMA
   nijedno pravilo sa `transition` ni sa pozadinom nigdje u wwwroot (provjereno grepom nad
   cijelim folderom i mjereno na predracunu: 8 inputa, 0 animacija, boja se ne mijenja);
   ta trecina recenice nije prestala vaziti nego nikad nije ni vazila.
   ⇒ Pozadina reda u listi vise NE FEJDUJE ni u jednom smjeru; ovo pravilo zato ne mora
   nista da preZivi. Ostaje jer hover mora biti trenutan i kad se sve ostalo ugasi. */
.crud-table-area:not(.cards-mode) .table tbody tr:hover,
.crud-table-area:not(.cards-mode) .table tbody tr:hover td:not(:first-child) {
    transition: background 0s;
}

/* [1183] Radula 17.09.2026: pravilo iznad gasi fade samo DOK je red hovered, pa
   hvata ULAZ — izlaz se bira po ODREDISNOM stanju i pada nazad na baznu td
   tranziciju (160ms). Ostale celije to ne osjete: njihov hover ide kroz
   background-IMAGE gradijent (infos-list.css), koji se u ovom enginu ne
   interpolira. Zaljepljene celije (td:first-child, .sticky-col, .actions-cell)
   hover nose kroz background-COLOR (crud-engine.css), pa jedine fejduju — i to
   pri IZLASKU, zbog cega hover prethodnog reda ostaje vidljiv dok je pokazivac
   vec na sljedecem. Na brzom prelasku kroz lager listu to su dva osvijetljena
   reda odjednom.
   Gasi se bezuslovno, u oba smjera, da hover na tim kolonama bude isto sto i
   hover na ostatku reda. Ugasen je i box-shadow (akcentna traka na prvoj
   celiji, .18s) — iz istog razloga: traka je dio hovera i kasnila je jednako.
   ⚠ STANJE POSLIJE [1248]/2393e035 (17.09.2026): ovdje je pisalo da „traka selekcije pali i
   gasi trenutno, dok pozadina selekcije i dalje fejduje kroz vlastito `transition ...
   !important` (infos-list.css), pa selected-row/row-checked/list-edit-row ostaju netaknuti".
   TO VISE NE VAZI i ne smije se citati kao da fejd postoji. Danas i traka i pozadina padaju
   ODMAH: `.selected-row` i `.row-checked` u infos-list.css nose `transition: none !important`,
   bazna td tranzicija je uklonjena (l.184 ispod), a `tr.clickable-row` u crud-ux-v2.css:504
   vise ne tranzicionira `background`. `list-edit-row` nikad nije imao vlastitu tranziciju.
   Specificnosti su i dalje tacne i bitne: ovo pravilo (0,4,2) tuce infos-list-ovu box-shadow
   tranziciju na td:first-child (0,3,3), a `.bulk-toggling` iznad (!important) i dalje
   pobjedjuje — samo sada sva tri mjesta govore isto, umjesto da se nadglasavaju. */
.crud-table-area:not(.cards-mode) .table tbody td:first-child,
.crud-table-area:not(.cards-mode) .table tbody td.sticky-col,
.crud-table-area:not(.cards-mode) .table tbody td.actions-cell {
    transition: none;
}

/* [1183] Isto vazi i za SADRZAJ tih kolona. Sifra artikla i broj dokumenta nisu
   goli tekst nego pilula (.badge-code / .badge-docnum, crud-engine.css:9167) koja
   na `tr:hover` mijenja pozadinu i ivicu kroz vlastitu tranziciju od 150ms — pa je
   ona nastavila da fejduje i kad su celije oko nje vec bile trenutne. Na lager
   listi je to bas kolona artikla, koju je Radula i prijavio.
   Izmjereno u pregledacu (getAnimations() nad tabelom, odmah po prelasku sa reda na
   red): 10 zivih tranzicija, sve na .badge-code, po pet na redu koji se napusta i
   redu u koji se ulazi. Poslije ovog pravila: nijedna. */
.crud-table-area .table tbody .badge-code,
.crud-table-area .table tbody .badge-docnum {
    transition: none;
}

/* [839] Masovna promjena klase (check-all) NE SMIJE pokretati tranzicije: jedna
   klasa .row-checked na 550 redova pokrene 9.915 CSS animacija (tr, svaki td,
   plus 7 svojstava na svakom input.check-row iz Bootstrapa), Chromium ih stvara
   u paint fazi 1,4 s i ceka compositor commit 1,2 s — stranica stoji 3,3 s
   POSLIJE sto su kvacice vec iscrtane; nad 1.300 redova 16,8 s (superlinearno).
   Izmjereno CDP trace-om, ~/Developer/ruflo/docs/kartica-839/, vault
   bulk-promjena-klase-pokrece-tranziciju-na-svakoj-celiji-pa-compositor-stoji-sekundama.
   Klasu .bulk-toggling stavlja check-all handler (data-table.js) na
   .crud-table-area PRIJE petlje i skida je dva kadra kasnije — pojedinacni klik
   na red ZADRZAVA fade (nije pod ovom klasom). Specificnost (0,4,3) + !important
   namjerno: mora pobijediti `tr.row-checked td { transition … !important }`
   (infos-list.css, (0,3,3)) u ON smjeru i baznu td tranziciju iznad u OFF smjeru
   (tranzicija se bira po ODREDISNOM stanju). */
.crud-table-area.bulk-toggling .table tbody tr.row-checked,
.crud-table-area.bulk-toggling .table tbody tr.row-checked td,
.crud-table-area.bulk-toggling .table tbody tr,
.crud-table-area.bulk-toggling .table tbody tr td,
.crud-table-area.bulk-toggling .table tbody tr .check-row {
    transition: none !important;
}

/* Hover: stabilna pozadina + suptilan lijevi akcent (kroz prvu ćeliju da
   poštuje sticky kolone). */
.table-hover tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--crud-primary);
}
/* Selektovan red: trajni lijevi akcent + lagano jača pozadina */
.table tbody tr.selected-row td:first-child {
    box-shadow: inset 3px 0 0 var(--crud-primary);
}

/* Sortabilni header: jasniji hover affordance */
.sortable-header {
    transition: background var(--crud-dur) var(--crud-ease),
                color var(--crud-dur) var(--crud-ease);
}
.sort-arrow {
    transition: opacity var(--crud-dur) var(--crud-ease),
                color var(--crud-dur) var(--crud-ease);
}

/* Akcije u redu: dugmad se pale i gase zajedno sa redom.
   [1183] Radula 17.09.2026: fade-in od 160ms (opacity + transform) drzao je
   dugmad prethodnog reda vidljivim jos 160ms poslije sto je pokazivac presao na
   sljedeci — isti kvar kao na zaljepljenim kolonama, samo na drugom svojstvu.
   Skinuto skroz, ne skraceno: hover je odjek pokazivaca, ne stanje. `transform`
   ostaje (dugme sjedne na svoje mjesto odmah, bez klizanja); pravilo ispod koje
   ga vraca na nulu time postaje trenutno. Ovo pravilo tuce isti selektor u
   crud-engine.css (`transition: opacity var(--crud-transition)`) pozicijom u
   CSS_ORDER (crud-engine.css je PRVI u nizu, crud-ux-v3.css dolazi poslije). */
.table tbody td.actions-cell .actions-wrapper {
    transition: none;
    transform: translateX(4px);
}
.table tbody tr:hover td.actions-cell .actions-wrapper,
.table tbody tr.selected-row td.actions-cell .actions-wrapper {
    transform: translateX(0);
}

/* ── Kartice (cards view): hover elevacija ───────────────────────────────── */
.crud-table-area.cards-mode .table tbody tr {
    transition: box-shadow var(--crud-dur) var(--crud-ease),
                transform var(--crud-dur) var(--crud-ease),
                border-color var(--crud-dur) var(--crud-ease);
}
.crud-table-area.cards-mode .table tbody tr:hover {
    box-shadow: var(--crud-elev-2);
    transform: translateY(-2px);
}

/* ── Pagination: jasnija aktivna stranica ────────────────────────────────── */
.crud-table-footer .page-btn,
.crud-table-footer .pagination button,
.crud-table-footer .pagination .page-link {
    transition: background var(--crud-dur) var(--crud-ease),
                color var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease);
}

/* ── Floating "+" FAB (mobile/quick add): hover lift ─────────────────────── */
.crud-fab,
.fab-add,
.quick-add-fab {
    transition: transform var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease);
}
.crud-fab:hover,
.fab-add:hover,
.quick-add-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--crud-elev-3);
}

/* ── Forme / inputi (modal + detail): mekši fokus prsten ─────────────────── */
.crud-form input:not([type="checkbox"]):not([type="radio"]),
.crud-form textarea,
.form-modal input:not([type="checkbox"]):not([type="radio"]),
.form-modal textarea {
    transition: border-color var(--crud-dur) var(--crud-ease),
                box-shadow var(--crud-dur) var(--crud-ease),
                background var(--crud-dur) var(--crud-ease);
}
.crud-form input:focus-visible,
.crud-form textarea:focus-visible {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-input-focus-shadow);
}

/* ── Tanji, mekši scrollbar u tabeli (WebKit) ────────────────────────────── */
.crud-table-area::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
.crud-table-area::-webkit-scrollbar-thumb {
    background: var(--crud-scrollbar-thumb);
    border-radius: 7px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.crud-table-area::-webkit-scrollbar-thumb:hover {
    background: var(--crud-border-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
}
.crud-table-area::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Poštuj prefers-reduced-motion (a11y) ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .crud-toolbar .btn,
    .crud-toolbar .btn-sm,
    .mode-switcher .mode-btn,
    .layout-switcher .layout-btn,
    .table tbody tr,
    .crud-summary-card,
    .crud-table-area.cards-mode .table tbody tr,
    .crud-fab,
    .search-clear-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}