/* Škafetin - dopune uz MudBlazor temu.
   Sve boje dolaze iz MudBlazor varijabli koje generira SkafetinTheme,
   da svijetla i tamna tema ostanu usklađene bez dupliciranja vrijednosti. */

html, body {
    margin: 0;
}

/* ── Navigacijski stup ────────────────────────────────────────────────── */

/* Aktivna stavka: zlatna oznaka lijevo. Sjena umjesto obruba da se
   sadržaj ne pomakne za 3px kad stavka postane aktivna.

   Selektor mora biti specifičniji od MudBlazorovog
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...)` (0,5,0),
   koji aktivnoj stavci postavlja color: var(--mud-palette-primary).
   U svijetloj temi to je tamnoplava na tamnoplavom stupcu - 1,25:1. */
.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(227, 180, 87, .13);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-secondary);
    color: #FFFFFF;
}

.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: #FFFFFF;
}

.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mud-palette-secondary);
}

.mud-drawer .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
    background-color: rgba(255, 255, 255, .06);
    color: #FFFFFF;
}

/* Naslovi cjelina u izborniku (Typo.overline). */
.mud-drawer .nav-group-label {
    display: block;
    padding: 18px 16px 6px;
    color: var(--mud-palette-drawer-icon);
}

.mud-drawer .mud-divider {
    border-color: rgba(255, 255, 255, .09);
}

/* ── Gornja traka ─────────────────────────────────────────────────────── */

/* Traka je svijetla, pa joj treba crta umjesto sjene. */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ── Kartica sažetka ──────────────────────────────────────────────────── */

/* Traka nosi značenje statusa. Kroz ::before, a ne border-left, da se
   sadržaj kartice ne pomakne i da radius ostane netaknut. */
.skf-card {
    position: relative;
    overflow: hidden;
    padding-left: 16px !important;
}

.skf-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--skf-stripe, var(--mud-palette-lines-default));
}

/* ── Zaglavlje stranice ───────────────────────────────────────────────── */

.skf-page-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-secondary);
    display: grid;
    place-items: center;
}

.skf-page-icon .mud-icon-root {
    color: inherit;
}

/* ── Prazno stanje ────────────────────────────────────────────────────── */

.skf-empty {
    text-align: center;
}

.skf-empty-mark {
    width: 52px;
    height: 52px;
    opacity: .28;
}

/* ── Ploha s glavnom brojkom ──────────────────────────────────────────── */

/* Namjerno ista ploha kao navigacijski stup, a ne Primary: u tamnoj temi
   Primary postane svijetloplav, pa bi zlatna brojka na njemu pala u kontrastu.
   drawer-background je taman u obje teme. */
.skf-highlight {
    background: var(--mud-palette-drawer-background);
    color: #FFFFFF;
}

.skf-highlight .skf-highlight-label {
    color: rgba(255, 255, 255, .72);
}

.skf-highlight .skf-highlight-value {
    color: var(--mud-palette-secondary);
}

/* ── Tablice ──────────────────────────────────────────────────────────── */

/* Zaglavlje kao oznaka, ne kao redak podataka: sitno, verzalno, prorijeđeno.
   Plava crta odvaja zaglavlje od tijela jače nego obična linija tablice. */
.mud-table-head .mud-table-cell,
.mud-table-head .mud-table-cell .mud-table-sort-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mud-table-head .mud-table-cell {
    border-bottom: 2px solid var(--mud-palette-primary);
    white-space: nowrap;
}

/* Tablica unutar plohe koja već ima obrub ne treba i vlastiti okvir. */
.mud-table.mud-table-outlined {
    border: none;
}

/* Prazno stanje popunjava širinu tablice, bez razmaka reda. */
.mud-table .mud-table-empty-row td {
    padding: 0;
}

/* ── Brojke ───────────────────────────────────────────────────────────── */

/* Brojke koje se poravnavaju u koloni - iznosi, količine, inventarni brojevi.
   Koristi se kao Class="num" na MudText. */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Prijava ──────────────────────────────────────────────────────────── */

.skf-auth {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--mud-palette-background);
}

.skf-auth-theme {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    color: var(--mud-palette-text-secondary);
}

/* Ploha marke je tamnoplava u obje teme - isto kao navigacijski stup. */
.skf-auth-brand {
    background: var(--mud-palette-drawer-background);
    color: #FFFFFF;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.skf-auth-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.skf-auth-claim {
    margin: 0;
    max-width: 34ch;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #C9D8E6;
}

.skf-auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .875rem;
    color: #A9BDD1;
}

.skf-auth-points li {
    padding-left: 20px;
    position: relative;
}

.skf-auth-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--mud-palette-secondary);
}

.skf-auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.skf-auth-card {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 900px) {
    .skf-auth {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Na uskom zaslonu ploha marke postaje zaglavlje, bez nabrajanja. */
    .skf-auth-brand {
        padding: 32px 24px;
        gap: 16px;
    }

    .skf-auth-logo {
        max-width: 240px;
    }

    .skf-auth-points {
        display: none;
    }

    .skf-auth-form {
        padding: 32px 20px 48px;
    }
}

/* ── Pristupačnost ────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

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