/*
 * Contentus Core — Filament admin tema.
 *
 * Preslikava "Contentus Admin" dizajn (indigo accent, Manrope + JetBrains
 * Mono, zaobljene kartice, meke sjene, gradijentni gumbi, pilula-badgevi) na
 * Filamentove .fi-* klase. Primarna boja i UI font se postavljaju u
 * AdminPanelProvideru (Color::hex('#4f46e5') + ->font('Manrope')); ovdje je
 * vizualni sloj koji Filamentov API ne pokriva.
 *
 * Učitava se kao registrirani Filament asset (FilamentAsset::register) pa
 * radi na svim host siteovima nakon `php artisan filament:assets`.
 */

/* ---------------------------------------------------------------- tokeni -- */
:root,
.fi-body {
    --ctu-radius: 15px;
    --ctu-radius-sm: 11px;
    --ctu-accent: #4f46e5;
    --ctu-accent-2: #6366f1;
    /* Tamni kraj CTA gradijenta. Bijeli tekst na njemu je 7.90:1. */
    --ctu-accent-deep: #4338ca;
    --ctu-btn-from: var(--ctu-accent);
    --ctu-accent-soft: #eef0fe;
    --ctu-surface: #ffffff;
    --ctu-bg: #f6f7fb;
    /* Topbar i sidebar dijele podlogu; u lightu jednaka surfaceu, u darku
       namjerno TAMNIJA od surfacea (dizajn: kartice "svijetle" nad okvirom). */
    --ctu-topbar: #ffffff;
    --ctu-border: #eef0f5;
    /* Jači obrub za interaktivne elemente (inputi, chip-gumbi) — dizajnov
       --border2. Na kartice ide mekši --ctu-border. */
    --ctu-border-2: #e6e8f0;
    /* Podloga inputa: nijansa tamnija od surfacea, da polje ima tijelo i bez
       fokusa (dizajnov --input). */
    --ctu-input: #f4f5f9;
    --ctu-text: #0f172a;
    --ctu-muted: #9aa4b5;
    --ctu-muted-2: #5b6473;
    --ctu-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --ctu-glow: 0 8px 18px -6px rgba(79, 70, 229, 0.55);
}

.dark,
.dark .fi-body {
    --ctu-accent: #6366f1;
    --ctu-accent-2: #818cf8;
    /* Gumb u dark modeu kreće od #5b54e8, ne od --ctu-accent: bijelo na
       #6366f1 je 4.47:1 i tijesno pada AA. Ovako je 5.41:1 → 6.29:1. */
    --ctu-btn-from: #5b54e8;
    --ctu-accent-deep: #4f46e5;
    --ctu-accent-soft: rgba(99, 102, 241, 0.16);
    --ctu-surface: #0f1524;
    --ctu-bg: #0a0e17;
    --ctu-topbar: #0c111d;
    --ctu-border: #1c2434;
    /* Dizajn u darku ne razlikuje border od border2. */
    --ctu-border-2: #1c2434;
    --ctu-input: #111827;
    --ctu-text: #e8edf7;
    --ctu-muted: #5b6780;
    --ctu-muted-2: #8c98af;
    --ctu-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ctu-glow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}

/* --------------------------------------------------------------- tipografija - */
.fi-body {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--ctu-bg);
}

/* Brojčani/monospace naglasci: statistike, badgevi, tablične ćelije s iznosima. */
.fi-wi-stats-overview-stat-value,
.fi-badge {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------- kartice --- */
/* `.fi-section-not-contained` MORA ostati izuzet. Filament tu sekciju koristi
 * kao prozirni omotač (npr. oko widgeta na dashboardu) i namjerno joj ne daje
 * padding — padding nose tek djeca, `.fi-wi-stats-overview-stat`. Ako je ovdje
 * ne izuzmemo, dobije bijelu podlogu, sjenu i radijus, pa izgleda kao kartica
 * bez ijednog piksela paddinga i sadržaj sjedi na rubu.
 */
:where(
    .fi-section:not(.fi-section-not-contained),
    .fi-wi-stats-overview-stat,
    .fi-ta-ctn,
    .fi-fo-component-ctn > .fi-section:not(.fi-section-not-contained)
) {
    border-radius: var(--ctu-radius);
    box-shadow: var(--ctu-shadow);
    border-color: var(--ctu-border);
}

.fi-section:not(.fi-section-not-contained) {
    background-color: var(--ctu-surface);
}

/* Zaglavlje sekcije: sitna proređena kapitalka poput dizajna. */
.fi-section-header-heading {
    letter-spacing: -0.01em;
}

/* Shema bez Section omotača (pregled stavke, edit/create forma) renderira
 * unose/polja golo na sivoj podlozi stranice — vendor karticu daje samo
 * Sectionu. Ovdje sam top-level grid sheme postane kartica:
 *   - pregled (ViewRecord): .fi-sc-component > .fi-sc (infolist grid)
 *   - forma (Edit/Create):  .fi-sc-component > form.fi-sc-form > .fi-sc
 *     — samo :first-child (grid s poljima); zadnji .fi-sc u formi je blok
 *     sa "Spremi" gumbima i on ostaje izvan kartice.
 * Guard :not(:has(.fi-section)): shema koja sekcije IMA (npr. fondovi) već
 * dobiva kartice po sekcijama i ne smije dobiti duplu okolo. Relation
 * manageri i tabovi su .fi-sc-tabs pa ih .fi-sc ne hvata. */
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc:not(:has(.fi-section)),
.fi-page-content
    > .fi-sc
    > .fi-grid-col
    > .fi-sc-component
    > form.fi-sc-form
    > .fi-sc:first-child:not(:has(.fi-section)) {
    background-color: var(--ctu-surface);
    border: 1px solid var(--ctu-border);
    border-radius: var(--ctu-radius);
    box-shadow: var(--ctu-shadow);
    padding: 1.5rem;
}

/* --------------------------------------------------------------- sidebar --- */
/* Topbar/sidebar na --ctu-topbar, ne --ctu-surface: u lightu je to isto
 * bijelo, ali u darku je okvir tamniji od kartica (dizajn). */
.fi-sidebar,
nav.fi-topbar {
    background-color: var(--ctu-topbar);
    border-color: var(--ctu-border);
}

/* Visina topbara iz dizajna (66px umjesto Filamentovih 64px). */
nav.fi-topbar {
    height: 4.125rem;
}

/* Pretraga u topbaru LIJEVO, ostalo (jezik/tema/user) ostaje desno.
 * Vendor: .fi-topbar-end visi desno preko margin-inline-start:auto, a
 * pretraga je prvo dijete u njemu. Kad blok sadrži pretragu, raširimo ga
 * preko cijelog reda pa pretraga auto-marginom odgurne ostatak na desni rub.
 * :has() čuva stock raspored na panelu bez globalne pretrage. */
.fi-topbar-end:has(> .fi-global-search-ctn) {
    flex: 1;
    margin-inline-start: 0;
}

.fi-topbar-end > .fi-global-search-ctn {
    margin-inline-end: auto;
}

/* Panel rezultata prati pretragu: vendor ga pri >=40rem sidra na DESNI rub
 * polja (inset-inline-end:0), što je imalo smisla dok je pretraga bila
 * desno — sad bi bježao ulijevo ispod sidebara. Sidramo ga na lijevi rub. */
@media (min-width: 40rem) {
    nav.fi-topbar .fi-global-search-results-ctn {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}

/* Razmak između root stavki. Filamentov default je 1.75rem (--spacing * 7):
 * primjereno sitnim grupnim natpisima, ali root stavke time previše razvuče.
 *
 * Pazi na element: grupe su <li> u <ul class="fi-sidebar-nav-groups">, koji
 * ima vlastiti row-gap. Roditeljski <nav class="fi-sidebar-nav"> ima isti
 * gap, ali on razmiče blokove navigacije, ne grupe — override na njemu ne
 * radi ništa vidljivo. */
.fi-sidebar-nav-groups {
    row-gap: 0.375rem;
}

/* "Postavke" na dnu sidebara (SIDEBAR_FOOTER hook, izvan .fi-sidebar-nav):
 * vlastiti padding usklađen s navom + linija koja je odvaja od popisa. */
.ctu-sidebar-settings {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ctu-border);
}

/* Zaglavlje grupe je ROOT STAVKA sidebara: ikona + naziv + chevron, izgledom
 * jednako stavci, ali na klik samo otvara/zatvara djecu i nikamo ne navigira
 * (Filament: .fi-sidebar-group-btn ima x-on:click toggleCollapsedGroup).
 * Hover je zato važan — bez njega izgleda kao mrtav natpis. */
.fi-sidebar-group-btn {
    border-radius: var(--ctu-radius-sm);
    padding: 0.5rem 0.625rem;
    transition: background-color 0.15s;
}

.fi-sidebar-group-btn:hover {
    background-color: var(--ctu-accent-soft);
}

.fi-sidebar-group-label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    opacity: 1;
}

/* Aktivan roditelj = grupa čije je dijete trenutna stranica. Filament na <li>
 * stavi .fi-active kad NavigationGroup::isActive() vrati true.
 *
 * Namjerno samo boja teksta i ikone, BEZ podloge: meku indigo podlogu nosi
 * aktivno dijete (.fi-sidebar-item-active), pa bi ista podloga na roditelju
 * dala dva jednaka bloka i izgubila se informacija koja je stavka otvorena. */
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn,
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-icon {
    color: var(--ctu-accent);
}

.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    font-weight: 700;
}

/* Chevron se okreće prema stanju grupe — Filament ga rotira preko .fi-collapsed
 * na <li>, ali bez tranzicije. */
.fi-sidebar-group-collapse-btn {
    transition: transform 0.2s;
}

/* Djeca su uvučena i bez ikona (ikonu nosi grupa), pa im vertikalna crta daje
 * vizualnu vezu s roditeljem.
 *
 * Uvlači se SAMO grupa s natpisom. Filament sve stavke bez grupe (Dashboard)
 * stavlja u grupu bez natpisa, koja nema zaglavlje — uvučena bi bila u odnosu
 * na ništa. Razlikuje ih data-group-label, koji je za tu grupu prazan. */
.fi-sidebar-group:not([data-group-label='']) > .fi-sidebar-group-items {
    margin-inline-start: 1.1rem;
    padding-inline-start: 0.5rem;
    border-inline-start: 1px solid var(--ctu-border);
}

/* Aktivna stavka: meka indigo pozadina + indigo tekst (dizajn navDash). */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--ctu-accent-soft);
    color: var(--ctu-accent);
    font-weight: 700;
    border-radius: var(--ctu-radius-sm);
}

.fi-sidebar-item-button {
    border-radius: var(--ctu-radius-sm);
    transition: background-color 0.15s, color 0.15s;
}

/* Brand blok u sidebaru — gradijentni logo okvir. */
.fi-sidebar-header {
    border-color: var(--ctu-border);
}

/* --------------------------------------------------- prekidac teme --------- */
/* Pilula sunce/mjesec/sustav u topbaru (dizajn: kapsula na --input podlozi,
 * aktivni gumb "iskoči" na surface s malom sjenom). Iznutra je Filamentova
 * stock .fi-theme-switcher komponenta — ovdje se samo preoblači. */
.ctu-theme-pill .fi-theme-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background-color: var(--ctu-input);
    border: 1px solid var(--ctu-border-2);
    border-radius: 20px;
    padding: 3px;
}

.ctu-theme-pill .fi-theme-switcher-btn {
    width: 30px;
    height: 26px;
    padding: 0;
    align-items: center;
    border-radius: 16px;
    color: var(--ctu-muted);
    background-color: transparent;
}

.ctu-theme-pill .fi-theme-switcher-btn .fi-icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

.ctu-theme-pill .fi-theme-switcher-btn.fi-active {
    color: var(--ctu-accent);
    background-color: var(--ctu-surface);
    box-shadow: var(--ctu-shadow);
}

/* Isti prekidač Filament renderira i u dropdownu korisničkog izbornika —
 * s pilulom u topbaru je to dupla kontrola, pa se tamo skriva. Skriva se
 * cijeli .fi-dropdown-list omot (prekidač mu je jedini sadržaj), inače bi u
 * izborniku ostala prazna pregrada s obrubom. Selektor je siguran: pilula
 * nije u dropdownu, a jedino mjesto gdje Filament stavlja theme-switcher u
 * dropdown jest korisnički izbornik. */
.fi-dropdown-panel .fi-dropdown-list:has(> .fi-theme-switcher) {
    display: none;
}

/* --------------------------------------------------- prekidac jezika ------- */
/* Zastave su 4:3 (flag-icons omjer), a Filamentov .fi-icon omotac je
 * kvadratan — bez eksplicitne sirine SVG bi se rastegnuo u kvadrat. Blagi
 * obrub jer bijele plohe (npr. hrvatska sredina) inace iscure u svijetlu
 * podlogu topbara. */
.ctu-flag {
    display: block;
    width: 1.25rem;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}

/* Filament Htmlable ikonu omota u KVADRATNI span.fi-icon (fi-size-md), a
 * zastava je 4:3 i display:block — bez ovoga sjedne uz vrh spana umjesto u
 * vertikalni centar. (Vrijedi za stavke dropdowna; okidač zastavu renderira
 * bez omota i centrira ju sam.) */
.fi-icon:has(> .ctu-flag) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Okidač: kapsula "zastava + naziv jezika + chevron" — stilski par pilule
 * prekidača teme (ista podloga, obrub i visina: 26px sadržaja + 3px paddinga
 * + 1px obruba = 34px). */
.ctu-locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 34px;
    padding-inline: 0.75rem;
    background-color: var(--ctu-input);
    border: 1px solid var(--ctu-border-2);
    border-radius: 20px;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--ctu-muted-2);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ctu-locale-trigger:hover {
    color: var(--ctu-accent);
    border-color: var(--ctu-accent-2);
}

.ctu-locale-chevron {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--ctu-muted);
}

/* --------------------------------------------------------------- gumbi ----- */
/* Primarni gumb = gradijent accent -> accent-deep + indigo glow (dizajn CTA).
 *
 * Boja teksta MORA ići uz pozadinu. Filament punom primarnom gumbu sam računa
 * svijetlu podlogu i taman tekst (`fi-bg-color-400` + `fi-text-color-950`); ako
 * preko toga stavimo tamni gradijent a tekst ostavimo Filamentu, dobijemo skoro
 * crno na tamnom indigu — 2.54:1, daleko ispod AA. Zato ovdje forsiramo bijelu
 * i držimo gradijent dovoljno tamnim: 6.29:1 na svijetlom kraju, 7.90:1 na
 * tamnom. (Raniji #6366f1 kraj davao je 4.47:1 i tijesno padao AA.)
 *
 * Selektor je `.fi-outlined` — v5 klasa; `.fi-btn-outlined` iz v3 ne postoji,
 * pa je gradijent prije curio i na outlined gumbe.
 */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background-image: linear-gradient(135deg, var(--ctu-btn-from), var(--ctu-accent-deep));
    box-shadow: var(--ctu-glow);
    border: none;
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) > .fi-icon {
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover {
    filter: brightness(1.08);
    color: #fff;
}

.fi-btn {
    border-radius: var(--ctu-radius-sm);
    font-weight: 700;
}

/* --------------------------------------------------------------- inputi ---- */
/* Podloga polja je nijansu tamnija od kartice (--ctu-input), obrub je jači
 * --ctu-border-2 — polje ima tijelo i prije fokusa (dizajn login/forma). */
.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--ctu-radius-sm);
}

.fi-input-wrp {
    background-color: var(--ctu-input);
    --tw-ring-color: var(--ctu-border-2);
}

/* --------------------------------------------------------------- badgevi --- */
.fi-badge {
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------- tablice --- */
/* Zaglavlje kao traka na --ctu-bg podlozi (dizajn: thead sjedi na pozadini,
 * redovi na surfaceu). Boja je --ctu-muted-2, ne dizajnov --muted: #9aa4b5 na
 * #f6f7fb je ~2.4:1 i pada AA čak i za kapitalku; muted-2 drži isti ton uz
 * čitljivost. */
.fi-ta-table thead {
    background-color: var(--ctu-bg);
}

.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ctu-muted-2);
}

.fi-ta-row {
    transition: background-color 0.12s;
}

/* Pretraga u toolbaru tablice LIJEVO, ikone (izvoz/filtri/stupci) desno.
 * Vendor: toolbar je flex s dva bloka — .fi-ta-actions (bulk/reorder/grupiranje)
 * pa neimenovani div s pretragom i ikonama, gurnut desno auto-marginom
 * (.fi-ta-header-toolbar > :nth-child(2)). Taj se blok rastegne preko reda:
 * pretraga vlastitom auto-marginom odgurne ikone na desni rub, a justify-end
 * drži ikone desno i na tablicama bez pretrage. */
.fi-ta-header-toolbar > :nth-child(2) {
    margin-inline-start: 0;
    flex: 1;
    justify-content: flex-end;
}

.fi-ta-header-toolbar .fi-ta-search-field {
    margin-inline-end: auto;
}

/* Gumb izvoza u headeru (.ctu-export-src) se skriva SAMO kad tablica ima i
 * toolbar trigger (.ctu-export-trigger, kraj ikone filtera) — tablica bez
 * pretrage/filtera/stupaca nema toolbar pa zadrži header gumb. */
.fi-ta-ctn:has(.ctu-export-trigger) .fi-dropdown:has(.ctu-export-src) {
    display: none;
}

/* Kad je header gumb izvoza (gore) jedini sadržaj .fi-ta-headera, header
 * ostane prazna traka s paddingom i border-bottomom — "horizontalna linija"
 * iznad toolbara. Skriva se cijeli header, ali SAMO ako nema ni naslova/
 * opisa (relation manageri) ni ijedne druge akcije (npr. Create u RM-u). */
.fi-ta-ctn:has(.ctu-export-trigger)
    .fi-ta-header:not(:has(.fi-ta-header-heading)):not(:has(.fi-ta-header-description)):not(
        :has(.fi-ta-actions > :not(:has(.ctu-export-src)))
    ) {
    display: none;
}

/* ------------------------------------------------------------ paginacija --- */
/* Brojevi stranica na SVIM širinama ekrana. Vendor ih pokazuje tek od 48rem,
 * a ispod nudi velike Prethodna/Sljedeća gumbe — ovdje je obrnuto: gumbi se
 * skrivaju, brojevi ostaju. .fi-simple (simple paginator, bez brojeva) se ne
 * dira — njemu su ti gumbi jedina navigacija. */
.fi-pagination:not(.fi-simple) .fi-pagination-previous-btn,
.fi-pagination:not(.fi-simple) .fi-pagination-next-btn {
    display: none;
}

.fi-pagination:not(.fi-simple) .fi-pagination-items {
    display: flex;
}

/* Kapsula s brojevima u stilu prekidača teme: --ctu-input podloga, aktivna
 * stranica kao izdignuta surface pločica s accent brojem. Vendorove .5px
 * razdjelnice između stavki i sivi ring se skidaju. */
.fi-pagination .fi-pagination-items {
    background-color: var(--ctu-input);
    border-radius: 20px;
    /* Vendorov ring/sjena idu van (box-shadow ih nosi oboje), obrub je pravi
     * border kao na prekidaču teme. */
    box-shadow: none;
    border: 1px solid var(--ctu-border-2);
    padding: 3px;
    gap: 2px;
}

.fi-pagination .fi-pagination-item {
    border: 0;
}

/* 4 klase specifičnosti: vendor kutne radijuse prve/zadnje stavke postavlja
 * s :first-of-type/:last-of-type selektorima iste težine, pa običan
 * .fi-pagination .fi-pagination-item-btn gubi na uglovima. */
.fi-pagination .fi-pagination-items .fi-pagination-item .fi-pagination-item-btn {
    border-radius: 16px;
    min-width: 1.875rem;
    height: 1.625rem;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.fi-pagination .fi-pagination-item-btn .fi-pagination-item-label {
    padding-inline: 0.125rem;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--ctu-muted-2);
    /* Brojčani naglasak kao statistike/badgevi. */
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-feature-settings: 'tnum' 1;
}

@media (hover: hover) {
    .fi-pagination .fi-pagination-items .fi-pagination-item-btn:enabled:hover {
        background-color: var(--ctu-accent-soft);
    }

    .fi-pagination .fi-pagination-items .fi-pagination-item-btn:enabled:hover .fi-pagination-item-label {
        color: var(--ctu-accent);
    }
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--ctu-surface);
    box-shadow: var(--ctu-shadow);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--ctu-accent);
}

/* --------------------------------------------------------------- razmaci --- */
/* Ritam iz dizajna: sadržaj 26px od ruba (Filament: 32px), 22px između
 * blokova stranice (Filament: 32px), sidebar 22px/16px unutarnje. Širinu
 * sidebara (238px) postavlja ->sidebarWidth() u AdminPanelProvideru. */
.fi-main {
    padding-inline: 1.625rem;
}

.fi-page-header-main-ctn {
    padding-block: 1.625rem;
}

.fi-page-content {
    row-gap: 1.375rem;
}

.fi-sidebar-nav {
    padding-inline: 1rem;
    padding-block: 1.375rem;
}

/* --------------------------------------------------------------- login ----- */
/* Brendirana gradijent pozadina + izdignuta kartica (nod na split-screen login). */
.fi-simple-layout {
    background-image: radial-gradient(
            1200px 600px at 15% -10%,
            var(--ctu-accent-soft),
            transparent 60%
        ),
        radial-gradient(900px 500px at 100% 110%, rgba(99, 102, 241, 0.12), transparent 55%);
}

.fi-simple-main {
    border-radius: 18px;
    box-shadow: 0 40px 90px -35px rgba(15, 23, 42, 0.35);
    border: 1px solid var(--ctu-border);
}

.dark .fi-simple-main {
    box-shadow: 0 40px 90px -35px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------- matrica permisija --- */
/* Stranica "Permisije": retci permisije, stupci role. Vlastite ctu- klase
 * jer Filament v5 ne shipa Tailwind utilityje (vidi viewove modula). */
.ctu-perm-hint {
    font-size: 0.8125rem;
    color: var(--ctu-muted-2);
}

.ctu-perm-wrap {
    background-color: var(--ctu-surface);
    border: 1px solid var(--ctu-border);
    border-radius: var(--ctu-radius);
    box-shadow: var(--ctu-shadow);
    overflow-x: auto;
}

.ctu-perm-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ctu-perm-matrix th,
.ctu-perm-matrix td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--ctu-border);
    text-align: center;
}

.ctu-perm-matrix tr:last-child > * {
    border-bottom: 0;
}

.ctu-perm-matrix thead th {
    padding-block: 0.75rem;
    vertical-align: top;
}

.ctu-perm-matrix th[scope='row'] {
    text-align: start;
    font-weight: 500;
}

/* Ime role/permisije: labela + slug u monou ispod (kao dizajnove tablice). */
.ctu-perm-matrix th > code {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--ctu-muted-2);
}

/* Grupa resursa: mono naslov na podlozi inputa, poput zaglavlja sekcija. */
.ctu-perm-matrix .ctu-perm-group th {
    text-align: start;
    background-color: var(--ctu-input);
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ctu-muted-2);
}

.ctu-perm-matrix .fi-checkbox-input {
    cursor: pointer;
}