/* BK Baza: tema bilijar kluba. Zelena čoja, tamno drvo, mesing, slonovača kugle. */
:root {
    --coja: #0e5c36;
    --coja-svetla: #1f8a55;
    --coja-tamna: #073a22;
    --drvo: #2a1810;
    --drvo-srednje: #3b2314;
    --drvo-svetlo: #5a3620;
    --mesing: #c9a227;
    --mesing-tamni: #9c7a12;
    --slonovaca: #f6efdc;
    --slonovaca-tamna: #e6dcc0;
    --kreda: #3d7fbf;          /* plava kreda */
    --tekst: #1d1a14;
    --tekst-blag: #6b6150;
    /* boje kugli */
    --k1-zuta: #f2c12e;
    --k2-plava: #1f4fa3;
    --k3-crvena: #c62828;
    --k5-narandzasta: #e8741e;
    --k7-bordo: #7a1f2b;
    --k8-crna: #111;
    --senka: 0 6px 18px rgba(0, 0, 0, .35);
    --radijus: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tekst);
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--drvo);
    /* tamno drvo sa blagim šarama */
    background-image:
        repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(88deg, rgba(0,0,0,.12) 0 1px, transparent 1px 23px),
        linear-gradient(180deg, var(--drvo-srednje), var(--drvo));
    background-attachment: fixed;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; margin: 0 0 .6rem; }
h1:focus { outline: none; }
a { color: var(--coja); }

/* ---------- Okvir aplikacije ---------- */
.zaglavlje {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1rem;
    padding-top: max(.6rem, env(safe-area-inset-top));
    background: linear-gradient(180deg, var(--coja-svetla), var(--coja) 60%, var(--coja-tamna));
    border-bottom: 4px solid var(--drvo-svetlo);
    box-shadow: inset 0 -2px 0 var(--mesing-tamni), var(--senka);
    color: var(--slonovaca);
}
.zaglavlje .logo { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.zaglavlje .logo img { width: 34px; height: 34px; border-radius: 8px; }
.zaglavlje .logo span { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; }
.zaglavlje .korisnik { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.zaglavlje .korisnik .ime { opacity: .9; }

.sadrzaj { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 6rem; }

/* donja navigacija kao na telefonu, drvena ivica stola */
.donja-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; justify-content: space-around;
    padding: .35rem .5rem;
    padding-bottom: max(.35rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--drvo-svetlo), var(--drvo-srednje));
    border-top: 2px solid var(--mesing-tamni);
    box-shadow: 0 -4px 14px rgba(0,0,0,.35);
}
.donja-nav a {
    flex: 1; max-width: 120px;
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .35rem 0; border-radius: 10px;
    color: var(--slonovaca-tamna); text-decoration: none; font-size: .75rem;
}
.donja-nav a .kuglica { width: 22px; height: 22px; }
.donja-nav a.active { color: var(--mesing); background: rgba(0,0,0,.2); }

/* ---------- Kartice (slonovača, kao kugla) ---------- */
.kartica {
    background: var(--slonovaca);
    border-radius: var(--radijus);
    box-shadow: var(--senka);
    padding: 1.1rem;
    margin-bottom: 1rem;
    border-top: 4px solid var(--mesing);
}
.kartica.coja {
    background: radial-gradient(ellipse at 50% 30%, var(--coja-svetla), var(--coja) 60%, var(--coja-tamna));
    color: var(--slonovaca);
    border: 6px solid var(--drvo-svetlo);
    box-shadow: inset 0 0 0 2px var(--mesing-tamni), var(--senka);
}
.naslov-strane { color: var(--slonovaca); text-shadow: 0 2px 4px rgba(0,0,0,.5); }

.plocice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.plocica {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1rem .5rem; text-align: center;
    background: var(--slonovaca); border-radius: var(--radijus);
    box-shadow: var(--senka); text-decoration: none; color: var(--tekst); font-weight: 600;
    border-bottom: 4px solid var(--mesing);
    transition: transform .12s;
}
.plocica:active { transform: scale(.97); }
.plocica .kuglica { width: 46px; height: 46px; }

/* ---------- Kuglica (SVG ikonica) ---------- */
.kuglica { display: inline-block; flex: none; }

/* ---------- Forme ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: .6rem 0 .25rem; }
input, select {
    width: 100%; font: inherit; padding: .65rem .75rem;
    border: 1px solid var(--slonovaca-tamna); border-radius: 10px;
    background: #fffdf6;
}
input:focus, select:focus { outline: 2px solid var(--coja-svetla); outline-offset: 1px; border-color: transparent; }
.cekboks { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.cekboks input { width: auto; }
.validation-message, .greska { color: var(--k3-crvena); font-size: .85rem; margin-top: .25rem; }
.greska { background: #fbe4e4; border-left: 4px solid var(--k3-crvena); padding: .6rem .8rem; border-radius: 8px; }
.uspeh { background: #e1f3e8; border-left: 4px solid var(--coja-svetla); padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; }
.red-dugmadi { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Dugmad ---------- */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: inherit; font-weight: 600; cursor: pointer;
    padding: .65rem 1.1rem; border-radius: 999px; border: none;
    background: linear-gradient(180deg, var(--coja-svetla), var(--coja));
    color: var(--slonovaca);
    box-shadow: 0 3px 0 var(--coja-tamna), 0 4px 10px rgba(0,0,0,.25);
    text-decoration: none;
}
.dugme:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coja-tamna); }
.dugme:disabled { opacity: .55; cursor: default; }
.dugme.mesing { background: linear-gradient(180deg, #e0bd45, var(--mesing)); color: var(--drvo); box-shadow: 0 3px 0 var(--mesing-tamni), 0 4px 10px rgba(0,0,0,.25); }
.dugme.crveno { background: linear-gradient(180deg, #d84a3a, var(--k3-crvena)); box-shadow: 0 3px 0 #7a1414, 0 4px 10px rgba(0,0,0,.25); }
.dugme.tiho { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.dugme.malo { padding: .35rem .8rem; font-size: .85rem; }
.dugme.puno { width: 100%; }

/* ---------- Bedževi u boji kugli ---------- */
.bedz {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.bedz::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--slonovaca); }
.uloga-SuperAdmin { background: var(--k8-crna); }
.uloga-Vlasnik { background: var(--k3-crvena); }
.uloga-Clan { background: var(--k2-plava); }
.uloga-Gost { background: var(--k1-zuta); color: var(--tekst); }
.status-Aktivan { background: var(--coja-svetla); }
.status-Suspendovan { background: var(--k5-narandzasta); }
.status-Iskljucen { background: var(--k7-bordo); }

/* ---------- Lista članova ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .25rem; border-bottom: 1px dashed var(--slonovaca-tamna);
}
.lista li:last-child { border-bottom: none; }
.lista .info { flex: 1; min-width: 0; }
.lista .info .ime { font-weight: 700; }
.lista .info .kontakt { font-size: .85rem; color: var(--tekst-blag); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .bedzevi { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.lista select { width: auto; padding: .25rem .4rem; font-size: .8rem; }
.inicijali {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    color: var(--tekst);
    background: radial-gradient(circle at 35% 30%, #fff, var(--slonovaca) 45%, var(--slonovaca-tamna));
    box-shadow: inset 0 0 0 3px var(--k2-plava);
}
.inicijali.prsten-SuperAdmin { box-shadow: inset 0 0 0 3px var(--k8-crna); }
.inicijali.prsten-Vlasnik { box-shadow: inset 0 0 0 3px var(--k3-crvena); }
.inicijali.prsten-Gost { box-shadow: inset 0 0 0 3px var(--k1-zuta); }

/* ---------- Prijava ---------- */
.prijava-pozadina { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.prijava-sto {
    width: 100%; max-width: 380px;
    padding: 1.6rem 1.4rem;
    border-radius: 22px;
    background: radial-gradient(ellipse at 50% 25%, var(--coja-svetla), var(--coja) 55%, var(--coja-tamna));
    border: 12px solid var(--drvo-svetlo);
    box-shadow: inset 0 0 0 2px var(--mesing-tamni), inset 0 0 30px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5);
    color: var(--slonovaca);
    position: relative;
}
.prijava-sto::before, .prijava-sto::after {
    content: ""; position: absolute; top: -14px; width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a;
}
.prijava-sto::before { left: -14px; }
.prijava-sto::after { right: -14px; }
.prijava-sto .logo-veliki { display: block; width: 92px; height: 92px; margin: 0 auto .6rem; border-radius: 20px; box-shadow: var(--senka); }
.prijava-sto h1 { text-align: center; font-size: 1.7rem; margin-bottom: .2rem; }
.prijava-sto .podnaslov { text-align: center; opacity: .8; margin: 0 0 1rem; font-size: .9rem; }
.prijava-sto input { background: var(--slonovaca); }
.prijava-sto .greska { color: var(--tekst); }

.blago { color: var(--tekst-blag); font-size: .9rem; }
.kartica.coja .blago { color: var(--slonovaca-tamna); }

/* ---------- Tabovi (kao dugmad na stolu) ---------- */
.tabovi { display: flex; gap: .4rem; margin-bottom: 1rem; overflow-x: auto; }
.tabovi button {
    flex: none; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
    padding: .45rem .9rem; border-radius: 999px; border: 2px solid var(--mesing-tamni);
    background: transparent; color: var(--slonovaca-tamna);
}
.tabovi button.aktivan { background: var(--mesing); color: var(--drvo); border-color: var(--mesing); }

.red-izbor { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.red-izbor strong { font-family: Georgia, serif; font-size: 1.1rem; }
.red-izbor input { width: auto; flex: 1; }

.statistika { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.statistika > div {
    background: #fffdf6; border: 1px solid var(--slonovaca-tamna); border-radius: 10px;
    padding: .5rem .6rem; display: flex; flex-direction: column;
}
.statistika span { font-size: .75rem; color: var(--tekst-blag); }
.statistika strong { font-size: 1.05rem; }
.statistika .minus strong { color: var(--k3-crvena); }
.statistika .plus strong { color: var(--coja); }

/* ---------- Stolovi: mali bilijar stolovi ---------- */
.stolovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.sto-kartica { background: var(--slonovaca); border-radius: var(--radijus); box-shadow: var(--senka); padding: .7rem; }
.sto-crtez {
    position: relative; padding: 10px; border-radius: 14px;
    background:
        radial-gradient(circle at 9px 9px, #0a0a0a 6px, transparent 7px),
        radial-gradient(circle at calc(100% - 9px) 9px, #0a0a0a 6px, transparent 7px),
        radial-gradient(circle at 9px calc(100% - 9px), #0a0a0a 6px, transparent 7px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #0a0a0a 6px, transparent 7px),
        radial-gradient(circle at 50% 5px, #0a0a0a 5px, transparent 6px),
        radial-gradient(circle at 50% calc(100% - 5px), #0a0a0a 5px, transparent 6px),
        linear-gradient(180deg, var(--drvo-svetlo), var(--drvo-srednje));
}
.coja-sto {
    aspect-ratio: 2 / 1; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-align: center;
    background: radial-gradient(ellipse at 50% 40%, var(--coja-svetla), var(--coja) 65%, var(--coja-tamna));
    box-shadow: inset 0 0 0 2px var(--mesing-tamni), inset 0 0 18px rgba(0,0,0,.4);
    color: var(--slonovaca); padding: .4rem;
}
.coja-sto strong { font-family: Georgia, serif; font-size: 1.2rem; }
.coja-sto span { font-size: .85rem; }
.sto-crtez.zauzet .coja-sto { background: radial-gradient(ellipse at 50% 40%, #a33a2f, #7a1f2b 70%, #4a0f18); }
.sto-crtez.uskoro .coja-sto { background: radial-gradient(ellipse at 50% 40%, #d39a1c, #a8740f 70%, #6e4a07); }
.sto-info { font-size: .85rem; margin-top: .5rem; }
.podnaslov-sto { font-size: 1rem; margin: .6rem 0 .1rem; color: var(--coja); }
.lista li.moje { background: #eef6ef; border-radius: 8px; padding-left: .5rem; }

.brojac { display: flex; align-items: center; gap: .4rem; }
.brojac span { min-width: 1.4rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.brojac .dugme.malo { width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1.2rem; }
.korpa { position: sticky; bottom: 4.8rem; margin-top: .75rem; padding: .75rem; border-radius: 12px; background: #fffdf6; border: 2px solid var(--mesing); display: grid; gap: .5rem; }

/* ---------- Turniri ---------- */
a.turnir-kartica { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: inherit; }
.turnir-datum {
    flex: none; width: 58px; height: 58px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    background: radial-gradient(circle at 35% 30%, #3a6fd0, var(--k2-plava) 55%, #0f2f6b); color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.turnir-datum strong { font-size: 1.3rem; font-family: Georgia, serif; }
.turnir-datum span { font-size: .7rem; text-transform: uppercase; }
.pobednik { margin: .7rem 0 0; font-size: 1.05rem; }
.lista li.mec { flex-wrap: wrap; }
.mec-dugmad { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: .4rem; }
.rezultat { flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; min-width: 0; }
.rezultat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rezultat span:last-child { text-align: right; }
.rezultat strong { font-family: Georgia, serif; font-size: 1.1rem; background: var(--drvo-srednje); color: var(--slonovaca); padding: .1rem .55rem; border-radius: 8px; }
.rezultat .pobeda { font-weight: 700; color: var(--coja); }
.unos-rezultata { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.unos-rezultata input { width: 4rem; text-align: center; }
.tabela-omot { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .4rem .3rem; text-align: center; border-bottom: 1px dashed var(--slonovaca-tamna); }
.tabela th { font-size: .75rem; color: var(--tekst-blag); }
.tabela .levo { text-align: left; }
.rang-vrednost { font-family: Georgia, serif; font-size: 1.3rem; color: var(--coja); }
textarea { width: 100%; font: inherit; padding: .65rem .75rem; border: 1px solid var(--slonovaca-tamna); border-radius: 10px; background: #fffdf6; }

/* ---------- Obaveštenja ---------- */
.zvonce { position: relative; font-size: 1.3rem; text-decoration: none; line-height: 1; padding: .2rem; }
.zvonce .broj {
    position: absolute; top: -.35rem; right: -.45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
    border-radius: 999px; background: var(--k3-crvena); color: #fff; font-size: .7rem; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--coja);
}
.lista li.obavestenje { cursor: pointer; align-items: flex-start; }
.lista li.obavestenje.novo { background: #fff6d8; border-radius: 8px; padding-left: .5rem; }
.traka-upozorenja { background: var(--k5-narandzasta); color: #fff; text-align: center; padding: .45rem 1rem; font-weight: 600; font-size: .9rem; }
.donja-nav a { font-size: .7rem; }

.prazno { text-align: center; color: var(--tekst-blag); padding: 1rem 0; }
.razmak-gore { margin-top: 1rem; }
.mreza-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pretraga { margin-bottom: .75rem; }

/* ---------- Učitavanje: kugla koja se kotrlja ---------- */
.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; inset: 30vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: rgba(246,239,220,.2); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: var(--mesing);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(30vh + 3.25rem) 0 auto .2rem; color: var(--slonovaca); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Učitavanje"); }

#blazor-error-ui {
    background: var(--k1-zuta); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }