/* ═══════════════════════════════════════════════════════════════════════════
   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);
}
.mode-switcher .mode-btn.active,
.layout-switcher .layout-btn.active {
    box-shadow: 0 1px 5px rgba(var(--crud-primary-rgb), 0.32);
}

/* ── 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;
}
.table tbody tr {
    transition: background var(--crud-dur) var(--crud-ease),
                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);
    transition: background var(--crud-dur) var(--crud-ease);
}

/* 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: mekši fade-in (već su opacity 0→1; samo ljepši tajming) */
.table tbody td.actions-cell .actions-wrapper {
    transition: opacity var(--crud-dur) var(--crud-ease),
                transform var(--crud-dur) var(--crud-ease);
    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;
    }
}