/* ============================================================
   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);

    --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;
    background: var(--bg);
    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);
}

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 {
    background: var(--surface);
    border: 1px solid var(--line);
    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-sm);
    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);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.btn-accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.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);
}

.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;
}

/* ---------- 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 ---------- */

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);
}

/* ---------- 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-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); }