/* ============================================================
   Nishon -- YANGI dizayn tizimi (2026-09-10, 1-bosqich).
   Notion/Linear uslubidagi zamonaviy, oq/neytral, bitta aniq
   aksent rangli (ishonchli ko'k) tizim. CSS o'zgaruvchilar
   (token) orqali belgilangan -- keyingi bosqichlarda (admin,
   ota-ona, murabbiy, super-admin panellari) shu faylga
   ulanib, xuddi shu token/komponent klasslaridan foydalanadi.

   MUHIM: eski `style.css` (to'q fon, --ink/--surface) ATAYLAB
   TEGILMAGAN va o'chirilmagan -- hali migratsiya qilinmagan
   sahifalar (admin.html, murabbiy.html, super-admin.html,
   ota-ona.html) o'sha faylni ishlatishda davom etadi. Har bir
   sahifa o'z bosqichida shu faylga o'tkaziladi, shunda bir
   vaqtning o'zida ikkita fayl ham "yashab", eski funksionallik
   va Playwright testlari (frontend.spec.js) buzilmaydi.

   Komponent klass nomlari ATAYLAB eskisi bilan bir xil saqlangan
   (.card, .btn, .field, .label, .error-box, .login-wrap va h.k.)
   -- shunda sahifa migratsiya qilinganda faqat <link> almashtiriladi,
   HTML/JS (id, klass nomlari) o'zgarishsiz qoladi.
   ============================================================ */

:root {
    /* -- Ranglar -- */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --surface-hover: #eef0f3;
    --text: #16181d;
    --text-2: #6b7280;
    --text-3: #9aa1ac;

    /* Aksent -- ishonchli ko'k (moliyaviy/sport-akademiya kontekstida
       "professional va barqaror" taassurot beradi; Notion/Linear
       kabi mahsulotlarda ham havola/CTA rangi sifatida shu oiladan
       foydalaniladi). Muqobil variant yashil edi, lekin ko'k
       tanlandi -- yashil ko'proq "muvaffaqiyat/tasdiq" holatlariga
       (masalan pill-faol) ajratib qo'yiladi, aralashmasligi uchun. */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-ink: #ffffff;
    --accent-soft: rgba(37, 99, 235, .08);
    --accent-soft-line: rgba(37, 99, 235, .28);

    /* Gradient oilasi (2026-09-14, "premium" vizual kuchaytirish -- avval
       landing/index.html'da sinalgan, endi umumiy tizimga ko'chirildi, BARCHA
       panellarga qo'llanadi). --accent solid ranggi FUNKSIONAL joylarda (link,
       fokus halqasi, pill-status) o'zgarmasdan qoladi -- gradient FAQAT
       dekorativ sirtlar (tugma, kartochka, icon-chip, sidebar fon) uchun. */
    --accent-via: #4f46e5;
    --accent-to: #7c3aed;
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-via) 55%, var(--accent-to) 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(124, 58, 237, .08));
    --glow: 0 8px 22px rgba(79, 70, 229, .28);
    --radius-pill: 999px;

    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, .1);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, .08);
    --danger-line: rgba(220, 38, 38, .28);
    --warning: #d97706;

    --line: #e6e8ec;
    --line-strong: #d7dae0;

    /* -- Shakl va soya -- */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 2px 8px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);

    /* -- Tipografiya -- */
    --font-head: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* -- Bo'shliq shkalasi (keng, "havodor" Notion-uslubi uchun) -- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* Endi tekis oq emas -- juda yengil, burchaklarda sezilarli gradient
       "nafas" (login-wrap'da avvaldan bor edi, endi butun ilova bo'ylab
       izchil). Matn kontrastiga ta'sir qilmaydigan darajada xira. */
    background:
        radial-gradient(circle at 6% 0%, rgba(37, 99, 235, .045), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(124, 58, 237, .04), transparent 42%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    color: var(--text);
}

h1, h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

p {
    margin: 0 0 8px;
    color: var(--text-2);
    line-height: 1.55;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

/* ---------- Umumiy komponentlar ---------- */

.card {
    /* Tekis oq emas -- yengil gradient fon + binafsha-tint border (2026-09-14,
       premium vizual kuchaytirish). "surface" o'zgaruvchisi o'zi o'zgarmadi
       (boshqa joyda hali ishlatiladi), faqat .card shu ikkitasini birlashtirdi. */
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid rgba(79, 70, 229, .12);
    border-radius: var(--radius);
    padding: var(--sp-6);
    box-shadow: var(--shadow-md);
}

.surface-2 {
    background: var(--surface-2);
}

.label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder, textarea::placeholder {
    color: var(--text-3);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field {
    margin-bottom: var(--sp-4);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:hover {
    background: var(--surface-2);
    border-color: var(--line-strong);
}

.btn:active {
    transform: scale(.98);
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-accent {
    background: var(--accent-gradient);
    background-size: 160% 160%;
    background-position: 0 0;
    border-color: transparent;
    color: var(--accent-ink);
    box-shadow: 0 3px 10px rgba(79, 70, 229, .22);
    transition: box-shadow .2s ease, transform .1s ease, background-position .3s ease;
}

.btn-accent:hover {
    background-position: 100% 100%;
    border-color: transparent;
    box-shadow: var(--glow);
    transform: translateY(-1px);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 13px;
}

.error-box {
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    color: var(--danger);
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: var(--sp-4);
    display: none;
}

.error-box.show {
    display: block;
}

.muted {
    color: var(--text-2);
}

.empty-state {
    color: var(--text-2);
    font-size: 13px;
    padding: 18px 0;
    text-align: center;
}

/* ---------- Login sahifasi ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 10%, var(--accent-soft), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(37, 99, 235, .05), transparent 45%),
        var(--bg);
}

.login-card {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-6);
}

.login-logo .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    /* Nozik, tinch "nafas olish" animatsiyasi -- ilova tirik/faol
       ekanini bildiradi, lekin diqqatni chalg'itmaydigan darajada sekin
       (2.6s) va yumshoq (ease-in-out). Notion-style minimalizm: ko'zga
       tashlanmaydi, faqat diqqat bilan qaralsa sezilarli. */
    animation: login-dot-nafas 2.6s ease-in-out infinite;
}

/* Foydalanuvchi tizimida harakat kamaytirish yoqilgan bo'lsa (masalan
   ko'ngil aynishi/e'tibor buzilishiga moyillik sababli) -- animatsiyani
   butunlay o'chiramiz, statik nuqta qoladi. */
@media (prefers-reduced-motion: reduce) {
    .login-logo .dot {
        animation: none;
    }
}

@keyframes login-dot-nafas {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, .08); }
}

.login-logo span {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .02em;
    color: var(--text);
}

/* ---------- "Powered by Nishon" -- barcha sahifalar (mijoz talabi,
   2026-09-11): platforma brendi mijozning o'z brendlashtirilgan
   panelida ham doim, lekin sezilmaydigan darajada kichik ko'rinib
   tursin. Pastki o'ng burchakda, sahifa skrolidan mustaqil (fixed). ---------- */

.powered-by-nishon {
    position: fixed;
    right: 14px;
    bottom: 10px;
    font-size: 11px;
    color: var(--text-3);
    opacity: .6;
    letter-spacing: .01em;
    z-index: 5;
    pointer-events: none;
    user-select: none;
}

/* ---------- Parolni ko'rsatish/yashirish (ko'zcha) tugmasi ---------- */

.parol-maydon-wrap {
    position: relative;
}

.parol-maydon-input {
    padding-right: 42px;
}

.parol-kozcha {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 8px;
    color: var(--text-3);
}

.parol-kozcha:hover {
    color: var(--text-2);
}

/* ============================================================
   2-bosqich (2026-09-10): tashkilot-admin paneli (admin.html)
   uchun qo'shilgan komponentlar -- ilova qobig'i (topbar/container),
   tablar, jadval, pill, avatar, modal. Keyingi bosqichlarda
   (ota-ona, murabbiy, super-admin) ham xuddi shu klasslar
   ishlatiladi.
   ============================================================ */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
}

.topbar-logo .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* Nishon brend-belgisi (2026-09-14) -- eski oddiy nuqta (.dot) o'rniga,
   Azizbek tasdiqlagan yangi "nishon halqasi + o'q" gradient SVG belgi.
   Inline <svg class="brand-mark"> sifatida qo'yiladi (login/topbar/landing),
   .dot klassi/animatsiyasi ESKI sahifalarda ehtiyot uchun saqlab qolindi,
   lekin endi hech qayerda ishlatilmaydi. */
.brand-mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-logo .brand-mark {
    width: 26px;
    height: 26px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-2);
}

.topbar-user strong {
    color: var(--text);
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--sp-6);
}

.section {
    margin-bottom: var(--sp-6);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}

@media (max-width: 800px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 6px;
    margin-right: 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ---------- Sub-tabs (bitta tab ICHIDAGI ichki bo'limlar, masalan admin
   panelidagi "Baholash" tabi ichida "Mezon bo'yicha / Musobaqa / Oylik
   reyting") -- top-level .tabs/.tab-btn bilan bir xil vizual uslub, lekin
   ataylab ALOHIDA klass nomlari bilan: shu bilan tab almashtiruvchi JS
   (querySelectorAll('.tab-btn') / ('.tab-panel')) sub-tablarga tegmaydi va
   aksincha -- ikkala mexanizm bir-biriga xalaqit bermaydi. ---------- */

.sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.sub-tab-btn {
    background: none;
    border: none;
    color: var(--text-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 4px;
    margin-right: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.sub-tab-btn:hover {
    color: var(--text);
}

.sub-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.sub-tab-panel {
    display: none;
}

.sub-tab-panel.active {
    display: block;
}

/* ---------- Sidebar navigatsiya (admin.html, 2026-09-14) ----------
   Chap tomondagi vertikal, yig'iladigan (collapsible) navigatsiya.
   Sidebar bandlari HAM ".tab-btn" klassini ishlatadi (admin.js'dagi
   mavjud tab-almashtirish mexanizmi o'zgarishsiz ishlashi uchun) --
   shu sabab pastda eski gorizontal ".tab-btn" uslubini (border-bottom,
   margin-right) ".side-link"/".side-group-header" uchun reset qilamiz. */

.app-shell {
    display: flex;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-4);
    border-right: 1px solid var(--line);
    /* Tekis oq emas -- yengil vertikal gradient (2026-09-14, premium
       vizual kuchaytirish, butun ilova bo'ylab izchil). */
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
    padding: var(--sp-4) var(--sp-3);
}

.content-area {
    flex: 1;
    min-width: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-link,
.side-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.side-link:hover,
.side-group-header:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Joriy ochiq/faol sahifa -- yengil aksent fon bilan ajratiladi. */
.side-link.active {
    background: var(--accent-gradient-soft);
    color: var(--accent);
}

/* Icon-chip -- har bir sidebar ikonkasi endi kichik gradient-tint fonli
   "chip" ichida (2026-09-14, premium vizual kuchaytirish). SVG elementning
   o'zi <img> kabi "almashtiriladigan" (replaced) element bo'lgani uchun
   padding to'g'ridan-to'g'ri ishlaydi -- tashqi wrapper <span> shart emas. */
.side-icon {
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 8px;
    background: var(--accent-gradient-soft);
    color: var(--accent-via);
    flex-shrink: 0;
}

.side-group {
    margin-top: 4px;
}

.side-group-header {
    justify-content: space-between;
}

.side-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.side-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .18s ease;
}

/* Yopiq holatda o'ngga qaragan (default), ochiq holatda pastga aylanadi. */
.side-group.open > .side-group-header .side-chevron {
    transform: rotate(90deg);
}

.side-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .2s ease;
}

.side-group.open > .side-group-items {
    max-height: 240px; /* guruhda 2-3 band -- yetarlicha katta chegara */
}

.side-group-items .side-link {
    font-weight: 500;
    font-size: 13px;
    padding: 8px 10px;
}

.side-bottom {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text-2);
    font-size: 13px;
}

.side-profile .side-icon {
    color: var(--text-3);
}

.side-profile-ism {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-profile-actions {
    display: flex;
    gap: 8px;
    padding: 2px 10px 0;
}

.side-profile-actions .btn {
    flex: 1;
}

/* Hamburger tugma -- faqat mobilda ko'rinadi (topbar ichida, o'ng tomonda,
   .topbar'ning justify-content:space-between'i tufayli logotipdan narida
   avtomatik joylashadi). */
.sidebar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-hamburger svg {
    width: 20px;
    height: 20px;
}

/* Sidebar ortidagi qorong'u overlay -- mobilda sidebar ochilganda kontentni
   bosadi, ustiga bosilsa sidebar yopiladi (sidebar-mobil.js). */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 70;
}

.sidebar-backdrop.mobil-ochiq {
    display: block;
}

/* Sidebar ochiq paytda orqa fon scroll bo'lmasligi uchun (sidebar-mobil.js
   body'ga shu klassni qo'shadi/olib tashlaydi). */
body.sidebar-qulflangan {
    overflow: hidden;
}

/* ---------- Sidebar mobil -- TUZATILDI (2026-09-14) ----------
   ESKI yondashuv (gorizontal, flex-wrap qator) guruhlar standart OCHIQ
   bo'lgani uchun ko'p qatorli chalkash blokka aylanib, kontent chapga
   siqilib qolar, o'ngda katta bo'sh joy qolardi (Azizbek skrinshot bilan
   topgan bug, 375px kenglikda ko'rindi). Endi: sidebar mobilda ekrandan
   TASHQARIDA turadi (off-canvas, translateX), hamburger tugma bilan
   qorong'u overlay ustida ochiladi, kontent har doim to'liq kenglikda,
   gorizontal scroll yo'q. */
@media (max-width: 800px) {
    .sidebar-hamburger {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(288px, 84vw);
        flex-direction: column;
        border-right: 1px solid var(--line);
        border-bottom: none;
        box-shadow: 0 12px 36px rgba(15, 23, 42, .22);
        z-index: 80;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .sidebar.mobil-ochiq {
        transform: translateX(0);
    }

    .sidebar-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        flex: initial;
    }

    .side-group {
        margin-top: 4px;
    }

    .side-bottom {
        border-top: 1px solid var(--line);
        flex-direction: column;
        padding-top: var(--sp-3);
    }

    .side-profile-actions {
        padding: 2px 10px 0;
    }
}

/* ---------- Mobil moslashuv (topbar, tablar, konteyner) ---------- */

@media (max-width: 640px) {
    .topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
    }

    .topbar-logo {
        font-size: 15px;
    }

    .topbar-user {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }

    .container {
        padding: var(--sp-4);
    }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .tab-btn {
        flex-shrink: 0;
        margin-right: 14px;
    }

    /* Jadval bor kartochkalar (masalan murabbiyning "ball" ustunlari,
       super-adminning "amallar" tugmalari) 375px kabi tor ekranda
       tabiiy ravishda kengroq bo'lishi mumkin -- butun sahifani
       gorizontal siljitib yuborish o'rniga, FAQAT shu kartochkaning
       o'zi ichida gorizontal scroll qilinadi (2026-09-14, mobil
       gorizontal-overflow bugini tuzatish davomida topilgan/tuzatilgan). */
    .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Jadval ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-2);
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--surface-2);
}

/* ---------- Jadval ustidagi filtr qatori (filial/tug'ilgan yil) ---------- */

.jadval-filtrlar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 14px;
}

.jadval-filtrlar .field {
    margin-bottom: 0;
    min-width: 170px;
}

/* Uzun ro'yxatda sportchilarni tug'ilgan yili bo'yicha ajratib turadigan guruh-sarlavha qatori. */
.jadval-guruh-sarlavha td {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 7px 12px;
    border-bottom: 1px solid var(--accent-soft-line);
}

/* ---------- Pill (holat/daraja belgilari) ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pill-faol {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(22, 163, 74, .25);
}

.pill-nofaol {
    color: var(--text-2);
    border-color: var(--line);
    opacity: .8;
}

.pill-daraja-bronza { color: #a15c1f; background: rgba(161, 92, 31, .08); border-color: rgba(161, 92, 31, .3); }
.pill-daraja-kumush { color: #5b6472; background: rgba(91, 100, 114, .08); border-color: rgba(91, 100, 114, .3); }
.pill-daraja-oltin { color: #b8860b; background: rgba(184, 134, 11, .1); border-color: rgba(184, 134, 11, .35); }
.pill-daraja-platina { color: #1d7a9c; background: rgba(29, 122, 156, .08); border-color: rgba(29, 122, 156, .3); }

/* ---------- Modal (parolni almashtirish va h.k.) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-card {
    width: 100%;
    max-width: 380px;
}

/* ---------- Sportchi avatari (rasm yoki bosh harf bilan fallback) ---------- */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.avatar-fallback {
    color: #fff;
    font-weight: 700;
    font-family: var(--font-head);
}

.avatar-hujayra {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Rasm kadrlash (crop) modali -- sportchi rasmi yuklashda sudrab/yaqinlashtirib
   joylashtirish, 2026-09-12, mijoz shikoyati asosida qo'shildi ---------- */
.rasm-crop-doira {
    width: 260px;
    height: 260px;
    margin: 14px auto 0;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e7eb;
    border: 1px solid var(--line);
    cursor: grab;
}

.rasm-crop-doira:active {
    cursor: grabbing;
}

.rasm-crop-doira canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.rasm-yuklash-btn {
    cursor: pointer;
    font-size: 14px;
    opacity: .5;
    line-height: 1;
}

.rasm-yuklash-btn:hover {
    opacity: 1;
}

/* ---------- Oylik reyting (TOP-2, chegirma) ---------- */

tr.top2-qator {
    background: rgba(184, 134, 11, .06);
}

tr.top2-qator td:first-child {
    border-left: 2px solid #b8860b;
}

.pill-top2 {
    color: #b8860b;
    background: rgba(184, 134, 11, .1);
    border-color: rgba(184, 134, 11, .35);
}

.pill-mos {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(22, 163, 74, .25);
}

.pill-nomos {
    color: var(--text-2);
    opacity: .8;
}

.banner-tabrik {
    background: linear-gradient(135deg, rgba(184, 134, 11, .12), var(--accent-soft));
    border: 1px solid rgba(184, 134, 11, .3);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: var(--sp-4);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* ---------- Muvaffaqiyat matni (yashil -- shared api.js orqali) ---------- */

.text-success {
    color: var(--success);
}

/* ============================================================
   3-bosqich (2026-09-10): ota-ona portali -- "Yutuqlar" (musobaqa
   sertifikatlari) galereyasi.
   ============================================================ */

.yutuqlar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.yutuq-karta {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
    font-size: 12px;
}

.yutuq-karta img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    display: block;
}

.yutuq-karta .yutuq-sertifikat-yoq {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 8px;
    font-size: 28px;
    text-decoration: none;
}

.yutuq-karta .yutuq-nomi {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

/* ============================================================
   4-bosqich (2026-09-10): murabbiy paneli -- mashg'ulot qatnashish
   ball tugmalari (0/2/3/4/5).
   ============================================================ */

.ball-tugmalar {
    display: flex;
    gap: 4px;
}

.ball-tugma {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--text-2);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ball-tugma:hover {
    border-color: var(--text-3);
}

.ball-tugma.tanlangan {
    color: #fff;
    border-color: transparent;
}

.ball-tugma.tanlangan[data-ball="0"] { background: #9aa1ac; }
.ball-tugma.tanlangan[data-ball="2"] { background: #d97706; }
.ball-tugma.tanlangan[data-ball="3"] { background: #0891b2; }
.ball-tugma.tanlangan[data-ball="4"] { background: #16a34a; }

/* ============================================================
   4-bosqich (2026-09-11): Tashkilot brendlashtirish -- topbardagi
   "NISHON" o'rniga tashkilotning logotipi/brend nomi (api.js:
   topbarBrendiniYangila), va admin.html "Sozlamalar" tabidagi
   logotip önizleme kartochkasi.
   ============================================================ */

.topbar-logo-rasm {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}

.logotip-korinish {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.logotip-korinish img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ball-tugma.tanlangan[data-ball="5"] { background: var(--accent); }

/* ============================================================
   5-bosqich (2026-09-12): To'lov holati -- admin va murabbiy panelida
   har bir sportchi uchun oylik "to'landi/to'lanmadi" belgilash tugmasi.
   ============================================================ */

.tolov-holat-btn {
    font-weight: 700;
}

.tolov-holat-btn.tolandi {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(22, 163, 74, .3);
}

.tolov-holat-btn.tolandi:hover {
    background: rgba(22, 163, 74, .18);
}

.tolov-holat-btn.tolanmadi {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger-line);
}

.tolov-holat-btn.tolanmadi:hover {
    background: rgba(220, 38, 38, .16);
}

.tolov-belgilagan {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}

/* ============================================================
   2026-09-13: To'lov SUMMASI -- "to'landi" tugmasi yoniga kichik inline
   maydon (Bunyodbek/Grampus talabi). Ataylab yangi ustun OCHILMAGAN --
   telefon ekraniga sig'ishi uchun mavjud katakcha ichida, tik joylashuv.
   ============================================================ */

.tolov-hujayra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.tolov-summa-blok {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tolov-summa-input {
    width: 64px;
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.tolov-summa-matn {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}