/* Digitalni zapisnik – dopuna MudTheme (DzTema.cs). Opis: docs/dizajn.md §3–5.
   site.css se ne menja; pravila za okvir (AppBar, Drawer, meni, footer) zato imaju veću specifičnost. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

:root {
    --dz-radius-card: 16px;
    --dz-radius-pill: 999px;
    --dz-grad-hero: linear-gradient(135deg, #002D71 0%, #003B83 55%, #0C4076 100%);
    --dz-grad-glow: radial-gradient(60% 80% at 100% 0%, rgba(198,54,60,.28) 0%, rgba(198,54,60,0) 60%);
    --dz-grad-drawer: linear-gradient(180deg, #002D71 0%, #00245C 100%);
    --dz-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.dz-card { border-radius: var(--dz-radius-card) !important; border: 1px solid var(--mud-palette-lines-default); }
.dz-num, .mud-table-cell, .mud-chip { font-feature-settings: "tnum" 1, "lnum" 1; }
.dz-hero { background: var(--dz-grad-glow), var(--dz-grad-hero); color: #fff; border-radius: var(--dz-radius-card); }
.mud-drawer { background: var(--dz-grad-drawer) !important; }
.dz-nav-active { background: rgba(255,255,255,.10); color: #fff !important; box-shadow: inset 4px 0 0 #C6363C; }
.mud-chip.dz-pill { border-radius: var(--dz-radius-pill); }

/* ===== Okvir: font =====
   site.css ima html, body { font-family: Roboto Condensed !important }. Okvir dobija Inter;
   strane ostaju na starom fontu do migracije (13.x/14). */
.dz-appbar, .dz-appbar *,
.dz-drawer, .dz-drawer *,
.dz-footer, .dz-footer *,
.dz-user-menu, .dz-user-menu * {
    font-family: var(--dz-font) !important;
}

/* ===== AppBar ===== */
.mud-appbar.dz-appbar { border-bottom: 1px solid #E2E8F0; }
.dz-appbar .mud-toolbar { gap: 12px; padding-left: 16px; padding-right: 16px; }
.dz-appbar .dz-meni-dugme { color: #475569; }
.dz-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.dz-brand img { height: 40px; width: auto; flex: none; }
.dz-brand-tekst { min-width: 0; }
.dz-naslov {
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #0F1B2D;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-podnaslov { font-size: 12px; font-weight: 500; line-height: 1.3; color: #475569; }

/* Korisnik (MudMenu aktivator) */
.dz-appbar a, .dz-appbar a:hover { color: inherit; }
.dz-korisnik {
    display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px;
    border: 1px solid #E2E8F0; border-radius: var(--dz-radius-pill); background: #fff;
    cursor: pointer; color: #0F1B2D; flex: none;
}
.dz-korisnik:hover { background: #EEF3FA; }
.dz-korisnik .mud-avatar { width: 32px; height: 32px; font-size: 12px; font-weight: 700; }
.dz-korisnik-ime { font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dz-korisnik-strelica { color: #94A3B8; }
.dz-prijava.mud-button-root { flex: none; }

/* Stavka "Odjava" u meniju (šalje formu #dz-odjava-forma: POST na Identity/Account/Logout) */
.dz-user-menu .dz-odjava {
    display: flex; align-items: center; gap: 12px; width: 100%; min-width: 180px;
    padding: 10px 16px; border: 0; background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 500; color: #0F1B2D; text-align: left;
}
.dz-user-menu .dz-odjava:hover { background: #EEF3FA; }
.dz-user-menu .dz-odjava .mud-icon-root { color: #475569; }

/* ===== Drawer i meni ===== */
.dz-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.dz-meni-naslov { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FA6CC; padding: 24px 26px 8px; }
.dz-drawer .mud-navmenu { padding: 0 12px; position: relative; z-index: 1; }
.dz-drawer .mud-nav-link,
.dz-drawer .mud-nav-link:hover,
.dz-drawer .mud-nav-link:focus {
    color: #C9D6EA; text-decoration: none;
}
.dz-drawer .mud-nav-link {
    border-radius: 10px; padding: 11px 14px; margin: 0 0 2px; font-size: 14px; font-weight: 500;
}
.dz-drawer .mud-nav-link .mud-nav-link-icon { color: #AFC3E3; }
.dz-drawer .mud-nav-link:hover { background: rgba(255,255,255,.06); }
/* MudNavLink stavlja Class na omotač (.mud-nav-item), pa se aktivna stavka boji preko njega. */
.dz-drawer .mud-nav-item.dz-nav-active { background: none; box-shadow: none; }
.dz-drawer .mud-nav-item.dz-nav-active > .mud-nav-link,
.dz-drawer .mud-nav-item.dz-nav-active > .mud-nav-link:hover {
    background: rgba(255,255,255,.10); color: #fff; font-weight: 600; box-shadow: inset 4px 0 0 #C6363C;
}
.dz-drawer .mud-nav-item.dz-nav-active > .mud-nav-link .mud-nav-link-icon { color: #fff; }
.dz-drawer-talas { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; width: 100%; pointer-events: none; }
.dz-verzija { position: absolute; left: 26px; bottom: 18px; font-size: 11px; color: #8FA6CC; }

/* ===== Sadržaj i footer ===== */
.dz-sadrzaj.mud-container { padding: 24px; min-height: calc(100vh - var(--mud-appbar-height)); display: flex; flex-direction: column; }
.dz-strana { flex: 1 0 auto; }
.dz-footer { margin-top: 28px; padding: 8px 0; font-size: 12px; color: #475569; text-align: center; }

@media (max-width: 599.98px) {
    .dz-podnaslov, .dz-korisnik-ime, .dz-korisnik-strelica { display: none; }
    .dz-korisnik { padding: 4px; }
    .dz-appbar .mud-toolbar { gap: 8px; padding-left: 8px; padding-right: 8px; }
    .dz-brand { gap: 8px; }
    .dz-brand img { height: 32px; }
    .dz-naslov { font-size: 16px; }
    .dz-sadrzaj.mud-container { padding: 16px; }
}

/* ===== MudDataGrid: izabrane vrednosti filtera ispod naslova kolone (Shared/KolonaFilter) ===== */
.dz-filter-vrednosti {
    display: inline-block; max-width: 220px; margin-top: 2px; padding: 0 8px; border-radius: var(--dz-radius-pill);
    background: #E6EEF8; color: #003B83; font-size: 11px; font-weight: 600; line-height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Takmicenje_list: broj kreiranih kola ===== */
.dz-broj-kola {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 8px;
    border-radius: var(--dz-radius-pill); background: #E6EEF8; color: #003B83; font-size: 12px; font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.dz-broj-kola.nula { background: #EEF2F7; color: #94A3B8; }

/* ===== Zaglavlje strana (task 40, Shared/DzZaglavlje): sive veze iznad, tamnoplava traka sa naslovom, oznakama i brojevima.
   Koriste ga Kola, Lista kola, Klubovi takmičenja, Utakmice kola, Takmičenja, Korisnici i Utakmice (Klub).
   .kola-chip i .kola-talas koristi i hero na Utakmica_update. ===== */
.dz-zaglavlje {
    font-family: var(--dz-font);
}

.dz-zaglavlje-veze {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
    margin: 0 2px 10px;
    font-size: 13px;
    color: #64748B;
}

.dz-putanja a,
.dz-linkovi a {
    color: #64748B;
    text-decoration: none;
}

    .dz-putanja a:hover,
    .dz-linkovi a:hover {
        color: #0F1B2D;
    }

.dz-putanja .odvojnik {
    margin: 0 6px;
    color: #94A3B8;
}

.dz-linkovi {
    display: flex;
    gap: 20px;
}

    .dz-linkovi a {
        padding-bottom: 2px;
        border-bottom: 2px solid transparent;
        font-weight: 500;
    }

        .dz-linkovi a.aktivan {
            color: #003B83;
            font-weight: 600;
            border-bottom-color: #003B83;
        }

.kola-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 20px 24px;
    border-radius: 10px;
    border-left: 3px solid #C6363C;
    background: linear-gradient(90deg, #002D71 0%, #003B83 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16,35,70,.12);
}

.kola-hero-tekst {
    flex: 1 1 280px;
    min-width: 0;
}

.kola-talas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    width: 100%;
    height: 70px;
    opacity: .10;
    pointer-events: none;
}

.kola-naslov {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: #fff;
}

.kola-naslov-prazan {
    height: 32px;
    width: 320px;
    max-width: 70%;
    border-radius: 6px;
    background: rgba(255,255,255,.12);
}

.kola-chipovi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    position: relative;
}

.kola-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Brojevi (Shared/DzBroj): naziv iznad, vrednost ispod, razdvojeni tankom linijom. */
.dz-brojevi {
    display: flex;
}

.dz-broj {
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,.18);
}

    .dz-broj:first-child {
        border-left: none;
        padding-left: 0;
    }

    .dz-broj:last-child {
        padding-right: 0;
    }

    .dz-broj .l {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #C9D6EA;
        white-space: nowrap;
    }

    .dz-broj .v {
        margin-top: 2px;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.15;
        font-feature-settings: "tnum" 1, "lnum" 1;
    }

@media (max-width: 599.98px) {
    .kola-hero {
        padding: 16px;
    }

    .kola-naslov {
        font-size: 21px;
    }

    .dz-broj {
        padding: 0 14px;
    }

        .dz-broj .v {
            font-size: 19px;
        }
}

/* ===== Klub: unos utakmice (docs/dizajn.md §6.6, docs/dizajn-prikaz.html #klub) =====
   Koriste ih Utakmica_update i Klub komponente (igrači, treneri, službena lica), i u Utakmica_organizator. */
.dz-font { font-family: var(--dz-font); }

/* Tabovi kao segmentirane pilule: aktivni tab ispunjen primarnom bojom */
.dz-tabovi .mud-tabs-tabbar {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 4px;
}
.dz-tabovi .mud-tabs-tabbar .mud-tabs-tabbar-inner { min-height: 0; }
.dz-tabovi .mud-tab {
    width: auto; min-width: 0 !important; min-height: 42px; padding: 8px 16px; margin-right: 4px; border-radius: 10px;
    font-family: var(--dz-font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: #475569; transition: background-color .15s ease, color .15s ease;
}
.dz-tabovi .mud-tab:last-child { margin-right: 0; }
.dz-tabovi .mud-tab:hover:not(.mud-tab-active) { background: #EEF3FA; color: #003B83; }
.dz-tabovi .mud-tab.mud-tab-active { background: #003B83; color: #fff; box-shadow: 0 2px 8px rgba(0,59,131,.25); }
.dz-tabovi .mud-tab .mud-icon-root { font-size: 20px; }
.dz-tabovi .mud-tab-slider { display: none; }

/* Traka sa pravilima i brojačem */
.dz-pravila {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px;
    border-radius: 12px; background: #E6F2FB; color: #08568D; font-family: var(--dz-font); font-size: 13px; font-weight: 500;
}
.dz-pravila .mud-icon-root { flex: none; }
.dz-pravila-brojac {
    margin-left: auto; white-space: nowrap; font-size: 16px; font-weight: 800; color: #003B83;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Zaglavlje liste: naslov + "Dodaj" */
.dz-lista-zaglavlje { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--dz-font); }
.dz-lista-naslov { font-size: 15px; font-weight: 700; color: #0F1B2D; }
.dz-lista-naslov span { margin-left: 6px; color: #64748B; font-weight: 600; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Red-kartica (igrač, trener, službeno lice) */
.dz-red {
    display: flex; align-items: center; gap: 12px; min-height: 64px; margin-bottom: 8px; padding: 8px 6px 8px 12px;
    border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; font-family: var(--dz-font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dz-red:hover { border-color: #C9D6EA; box-shadow: 0 2px 10px rgba(16,35,70,.06); }
.dz-kapica {
    flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: #003B83; color: #fff; font-size: 16px; font-weight: 800; font-feature-settings: "tnum" 1, "lnum" 1;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.dz-kapica.golman { background: #C6363C; }
.dz-kapica.inicijali { background: #E6EEF8; color: #003B83; font-size: 14px; box-shadow: none; }
.dz-red-tekst { flex: 1; min-width: 0; }
.dz-red-ime { font-size: 15px; font-weight: 600; color: #0F1B2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-red-opis { margin-top: 1px; font-size: 12px; font-weight: 500; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-oznaka {
    flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--dz-radius-pill);
    background: #E6EEF8; color: #003B83; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.dz-oznaka.gk { background: #FDECEA; color: #B42318; }
.dz-red .mud-icon-button { width: 44px; height: 44px; flex: none; }

/* Prazno stanje (§7.5) */
.dz-prazno {
    padding: 32px 16px; border: 1px dashed #CBD5E1; border-radius: var(--dz-radius-card); background: #fff;
    text-align: center; font-family: var(--dz-font);
}
.dz-prazno-ikona {
    display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 12px;
    border-radius: 50%; background: #E6EEF8; color: #003B83;
}
.dz-prazno-naslov { font-size: 16px; font-weight: 600; color: #0F1B2D; }
.dz-prazno-opis { margin: 4px 0 16px; font-size: 14px; color: #64748B; }

/* "Dodaj": dugme u zaglavlju na desktopu, FAB dole desno na telefonu */
.dz-fab.mud-fab { display: none; }
@media (max-width: 599.98px) {
    .dz-lista-dodaj { display: none !important; }
    .dz-fab.mud-fab {
        display: inline-flex; position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1100;
        border-radius: 18px; box-shadow: 0 10px 24px rgba(198,54,60,.35);
    }
    .dz-red { padding-left: 10px; }
    .dz-tabovi .mud-tab { padding: 8px 10px; font-size: 13px; }
    .dz-tabovi .mud-tab .mud-icon-root { font-size: 18px; }
    .dz-lista { padding-bottom: 72px; }
}

/* Broj unetih stavki u tabu (npr. Igrači 12) */
.dz-tab-broj {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px;
    border-radius: var(--dz-radius-pill); background: #C6363C; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Male pomoćne klase umesto Bootstrap-ovih (task 14) */
.dz-krug { border-radius: 50%; }
.dz-centar { text-align: center; }
.dz-nema-strane { color: #842029; background-color: #f8d7da; }