/* ==========================================================================
   O'QITUVCHI KABINETI (/oqituvchi/) — teacher.css v2, «Daftar» uslubi
                                                              2026-10 (dizayn)

   `static/css/teacher.css` ni TO'LIQ ALMASHTIRADI (append emas). Mavjud
   shablonlar va JS ishlatayotgan barcha `tc-*`, `tp-*`, `jr-*`, `mc-*`
   klasslari shu yerda qayta uslublangan; yangi komponentlar qo'shilgan.

   G'oya — rasmiy sinf jurnali / daftar:
     * Oq varaq (--surface) stol ustida (--bg). Tuzilma — ingichka chiziqlar,
       soyalar yo'q (faqat ochiladigan menyu va drawer'da).
     * Siyoh (--tc-ink) — sarlavha, raqam va o'qituvchi kiritgan ma'lumot.
     * Brend ko'k (--royal) — faqat havola, fokus va «bugun / hozir».
     * Tanlangan holat — to'q ko'k quyma (--navy-800) + oq matn.
     * Rang FAQAT ma'no: yashil = bajarildi, sariq = kutilmoqda,
       qizil = muammo. Hech bir holat faqat rang bilan berilmaydi: ikonka,
       so'z, harf yoki shakl doim yonida.
     * Imzo element — daftar hoshiyasi: dars raqami turgan chap ustun va
       uning qo'sh chizig'i (.tp-lr__no, .tp-week__time, .tp-dj__no).

   Barcha qiymatlar ui.css tokenlaridan; mahalliy hosilalar 0-bo'limda.
   Istisnolar: (1) fan ranglari (--tc-sN-*) — ma'lumot, token emas;
   (2) tanlangan quyma ustidagi oq matn (#fff, ui.css tugmalaridagi kabi);
   (3) chop etish bloki — qog'oz temaga bog'liq bo'lmasligi uchun
   ataylab qora/kulrang literal qiymatlar.

   Tuzilma:
     0. Mahalliy tokenlar, ohanglar
     1. Karkas: yon menyu, yuqori panel, drawer, pastki panel
     2. Kabinet ichida Bootstrap / ui.css ko'prigi
     3. Sahifa sarlavhasi, amallar, ko'rinish almashtirgich, qadam tugmasi
     4. Panel (karta), havola, ikonka, ohang, belgi, avatar, sinf nishoni
     5. Raqamlar qatori (KPI)
     6. Tablar, segment, filtr, qidiruv
     7. Jadval
     8. Davomat belgilari va baholar
     9. Ro'yxatlar: tp-list, daftar (tp-ledger), bayroqcha, e'tibor ro'yxati
    10. Diagrammalar, progress, mini kalendar
    11. Dars jadvali (hafta to'ri, dars katakchasi)
    12. Jurnal: to'r (jr-grid), haftalik jurnal, dars mavzulari
    13. Kunlik jurnal (tp-dj), sana paneli, davomat sanog'i
    14. Dars sahifasi (jr-roster), materiallar, eski jr-* kartalari
    15. Uy vazifasi: ro'yxat, kengaytiriladigan qator, forma tanlagichlari
    16. Boshqa sahifalar: sinflar, hujjatlar, chat, sozlamalar, hero (eski)
    17. Mentor kabineti (mc-*), kirish sahifasi
    18. Moslashuvchanlik
    19. Chop etish (rangli + oq-qora)
   ========================================================================== */


/* ---------- 0. Mahalliy tokenlar ----------------------------------------- */
.tc-body {
    /* Siyoh va chiziqlar */
    --tc-ink: color-mix(in srgb, var(--heading) 70%, var(--text));
    --tc-quiet: color-mix(in srgb, var(--muted) 70%, var(--text));     /* --bg ustidagi ikkinchi darajali matn (AA) */
    --tc-rule: var(--border-2);                                         /* ichki chiziq */
    --tc-rule-strong: var(--border);                                    /* varaq / bo'lim chegarasi */
    --tc-rule-ink: color-mix(in srgb, var(--text) 22%, var(--surface)); /* --bg ustidagi chiziq, 5-qator chizig'i */
    --tc-margin: color-mix(in srgb, var(--red) 34%, var(--surface));    /* daftar hoshiyasi (qo'sh chiziq) */

    /* Geometriya: ierarxiya bo'yicha uch radius */
    --tc-r: var(--radius-sm);                    /* 12 — varaq, panel */
    --tc-r-ctl: var(--radius-xs);                /* 8 — boshqaruv, katakcha */
    --tc-r-mark: calc(var(--radius-xs) / 2);     /* 4 — belgi, chip, baho */
    --tc-side-w: 248px;
    --tc-top-h: 60px;
    --tc-pad: var(--sp-5);                       /* panel ichki chekinishi */

    /* To'ldirishlar */
    --tc-sel: var(--navy-800);                   /* tanlangan holat quymasi (oq matn) */
    --tc-today-bg: color-mix(in srgb, var(--royal) 6%, var(--surface));
    --tc-hover: color-mix(in srgb, var(--royal) 5%, transparent);
    --tc-missing-bg: color-mix(in srgb, var(--red) 6%, var(--surface));
    --tc-hatch: color-mix(in srgb, var(--red) 24%, transparent);
    --tc-hatch-n: color-mix(in srgb, var(--muted) 22%, transparent);
    --tc-future-bg: color-mix(in srgb, var(--muted) 6%, var(--surface));
    --tc-scroll-shadow: rgba(15, 23, 42, 0.12);  /* ui.css .dg-scroll bilan bir xil */

    /* Ohang (standart — neytral) */
    --tc-tone: var(--muted);
    --tc-tone-text: var(--label);
    --tc-tone-soft: var(--surface-2);

    /* Eski nomlar (boshqa fayllar o'qishi mumkin) — soyasiz */
    --tc-card-shadow: none;
    --tc-card-shadow-hover: none;

    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .tc-body {
    --tc-scroll-shadow: rgba(0, 0, 0, 0.45);
    --tc-margin: color-mix(in srgb, var(--red) 45%, var(--surface));
}

/* Ohanglar: faqat --tc-tone* ni o'rnatadi; komponentlar shundan rang oladi */
.tc-body .is-ok   { --tc-tone: var(--emerald); --tc-tone-text: var(--emerald-text); --tc-tone-soft: var(--emerald-soft); }
.tc-body .is-warn { --tc-tone: var(--amber);   --tc-tone-text: var(--amber-text);   --tc-tone-soft: var(--amber-soft); }
.tc-body .is-err  { --tc-tone: var(--red);     --tc-tone-text: var(--red-text);     --tc-tone-soft: var(--red-soft); }
.tc-body .is-info { --tc-tone: var(--royal);   --tc-tone-text: var(--royal);        --tc-tone-soft: var(--royal-soft); }
:root[data-theme="dark"] .tc-body .is-info { --tc-tone-text: var(--royal-2); }

/* Tonlangan fon ustida (bugun, reja, holatli katak) --muted 4.5:1 dan pastga
   tushadi — o'sha joylarda ikkinchi darajali matn to'qroq --tc-quiet bo'ladi.
   (--tc-quiet .tc-body da hisoblangan qiymat sifatida meros olinadi — sikl yo'q.) */
.tc-body :is(.tp-lr.is-now, .tp-dj tbody tr.is-now, .tp-week .is-today, .jr-grid .is-today,
             .jr-grid .is-future, .tp-kpi.is-warn, .tp-kpi.is-err, .tp-tl.is-now, .jr-lesson.is-now) {
    --muted: var(--tc-quiet);
}

/* Umumiy aktivlar TO'Q karkas uchun chizilgan: `.i` ikonkalari `stroke:#fff` */
.tc-body .i { stroke: currentColor; }

/* Raqamlar ustun bo'yicha tekis */
.tp-num, .tc-body .u-num { font-variant-numeric: tabular-nums; }

/* Fan ranglari — ma'lumot (timetable.css dagi 12 juftlik), o'zgarmagan.
   Kabinetda faqat ingichka chet (--s-edge) va legend kvadratchasi sifatida. */
.tc-body {
    --tc-s0-bg: #dbe7ff; --tc-s0-ink: #173a8a;
    --tc-s1-bg: #d3f1f8; --tc-s1-ink: #0d4f5c;
    --tc-s2-bg: #d6f5e3; --tc-s2-ink: #085d38;
    --tc-s3-bg: #e4f4cf; --tc-s3-ink: #3d5c0b;
    --tc-s4-bg: #fdeec8; --tc-s4-ink: #7a4d05;
    --tc-s5-bg: #ffe4d1; --tc-s5-ink: #8a3c0a;
    --tc-s6-bg: #ffe0e0; --tc-s6-ink: #8f1d1d;
    --tc-s7-bg: #ffe0ef; --tc-s7-ink: #8f1d5b;
    --tc-s8-bg: #ecdffc; --tc-s8-ink: #5b21a8;
    --tc-s9-bg: #e0e4ff; --tc-s9-ink: #3730a3;
    --tc-s10-bg: #d5f0ee; --tc-s10-ink: #0f5f5a;
    --tc-s11-bg: #e6eaf1; --tc-s11-ink: #333f52;
}
:root[data-theme="dark"] .tc-body {
    --tc-s0-bg: #23407f; --tc-s0-ink: #cfe0ff;
    --tc-s1-bg: #123f4a; --tc-s1-ink: #b8ecf7;
    --tc-s2-bg: #0d3f2b; --tc-s2-ink: #a9efcd;
    --tc-s3-bg: #2c3f10; --tc-s3-ink: #d5f0a5;
    --tc-s4-bg: #46350d; --tc-s4-ink: #fcdf9a;
    --tc-s5-bg: #4a2712; --tc-s5-ink: #ffcfae;
    --tc-s6-bg: #4a1a1f; --tc-s6-ink: #ffc2c2;
    --tc-s7-bg: #471a33; --tc-s7-ink: #ffc0dd;
    --tc-s8-bg: #37205b; --tc-s8-ink: #ddc6fb;
    --tc-s9-bg: #272a5e; --tc-s9-ink: #c7ccff;
    --tc-s10-bg: #123c3a; --tc-s10-ink: #aeeae5;
    --tc-s11-bg: #2a3448; --tc-s11-ink: #cdd6e4;
}
.tp-s0 { --s-bg: var(--tc-s0-bg); --s-ink: var(--tc-s0-ink); }
.tp-s1 { --s-bg: var(--tc-s1-bg); --s-ink: var(--tc-s1-ink); }
.tp-s2 { --s-bg: var(--tc-s2-bg); --s-ink: var(--tc-s2-ink); }
.tp-s3 { --s-bg: var(--tc-s3-bg); --s-ink: var(--tc-s3-ink); }
.tp-s4 { --s-bg: var(--tc-s4-bg); --s-ink: var(--tc-s4-ink); }
.tp-s5 { --s-bg: var(--tc-s5-bg); --s-ink: var(--tc-s5-ink); }
.tp-s6 { --s-bg: var(--tc-s6-bg); --s-ink: var(--tc-s6-ink); }
.tp-s7 { --s-bg: var(--tc-s7-bg); --s-ink: var(--tc-s7-ink); }
.tp-s8 { --s-bg: var(--tc-s8-bg); --s-ink: var(--tc-s8-ink); }
.tp-s9 { --s-bg: var(--tc-s9-bg); --s-ink: var(--tc-s9-ink); }
.tp-s10 { --s-bg: var(--tc-s10-bg); --s-ink: var(--tc-s10-ink); }
.tp-s11 { --s-bg: var(--tc-s11-bg); --s-ink: var(--tc-s11-ink); }
/* Yorug' temada chet — siyoh rangi; qorong'ida — fon rangi (yorqinroq ko'rinadi) */
:is(.tp-s0, .tp-s1, .tp-s2, .tp-s3, .tp-s4, .tp-s5, .tp-s6, .tp-s7, .tp-s8, .tp-s9, .tp-s10, .tp-s11) { --s-edge: var(--s-ink); }
:root[data-theme="dark"] .tc-body :is(.tp-s0, .tp-s1, .tp-s2, .tp-s3, .tp-s4, .tp-s5, .tp-s6, .tp-s7, .tp-s8, .tp-s9, .tp-s10, .tp-s11) {
    --s-edge: color-mix(in srgb, var(--s-ink) 70%, var(--s-bg));
}

/* Diagramma ranglari (widgets.donut -> var(--c-*)) — tokenlarga bog'langan */
.tc-body {
    --c-ok: var(--emerald);
    --c-info: var(--royal);
    --c-warn: var(--amber);
    --c-err: var(--red);
    --c-violet: var(--navy-700);
    --c-cyan: var(--cyan);
    --c-rose: color-mix(in srgb, var(--red) 55%, var(--surface));
    --c-slate: color-mix(in srgb, var(--muted) 60%, var(--surface));
}

/* Faqat chop etishda ko'rinadigan bloklar */
.tp-print-only, .tp-print-head, .tp-print-sign { display: none; }

/* Faqat skrinrider uchun yozuv (telefonda tugma yorlig'i va h.k.) */
.tp-vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
}


/* ---------- 1. Karkas ----------------------------------------------------- */
.tc-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* --- Yon menyu --- */
.tc-side {
    width: var(--tc-side-w);
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--tc-rule-strong);
    padding: 0 var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    z-index: var(--z-sidebar);
}
.tc-side nav { display: flex; flex-direction: column; gap: 1px; }

/* Brend qatori yuqori panel bilan bir chiziqda tugaydi (60px) */
.tc-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tc-top-h);
    margin: 0 calc(-1 * var(--sp-3)) var(--sp-3);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--tc-rule-strong);
    color: var(--tc-ink);
    text-decoration: none;
}
.tc-brand:hover { color: var(--tc-ink); }
.tc-brand__mark {
    width: 34px;
    height: 34px;
    border-radius: var(--tc-r-ctl);
    background: var(--navy-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
/* logo.webp — shaffof fondagi OQ tasvir */
.tc-brand__mark img { width: 22px; height: 22px; object-fit: contain; }
.tc-brand__name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: 0.02em;
    line-height: 1.15;
}
.tc-brand__sub { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }

.tc-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--tc-r-ctl);
    color: var(--label);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-md);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tc-link .bi { font-size: 17px; line-height: 1; width: 20px; text-align: center; flex: none; color: var(--muted); }
.tc-link .i { width: 18px; height: 18px; flex: none; color: var(--muted); }
.tc-link__label { flex: 1 1 auto; min-width: 0; }
.tc-link:hover { background: var(--hover); color: var(--tc-ink); }
.tc-link.is-active {
    background: color-mix(in srgb, var(--royal) 8%, var(--surface));
    color: var(--tc-ink);
    font-weight: var(--fw-sb);
}
.tc-link.is-active .bi, .tc-link.is-active .i { color: var(--royal); }
.tc-link.is-active::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-3));
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--royal);
}
.tc-link:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }

/* Hisoblagich (o'qilmagan xabar va h.k.) — son bilan, AA kontrast */
.tc-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--red-text);
    color: var(--surface);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tc-side__foot { margin-top: auto; padding-top: var(--sp-4); }
.tc-help {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    border-top: 1px solid var(--tc-rule);
    color: var(--text);
    text-decoration: none;
}
.tc-help__ic {
    width: 32px;
    height: 32px;
    border-radius: var(--tc-r-ctl);
    border: 1px solid var(--tc-rule-strong);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}
.tc-help b { display: block; font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--tc-ink); }
.tc-help span { font-size: var(--fs-sm); color: var(--royal); font-weight: var(--fw-md); }
.tc-help:hover span { text-decoration: underline; text-underline-offset: 2px; }

/* --- Kontent ustuni va yuqori panel --- */
.tc-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.tc-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tc-top-h);
    padding: 0 var(--sp-8);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-bottom: 1px solid var(--tc-rule-strong);
}
.tc-top__spacer { flex: 1 1 auto; }

.tc-menu-btn {
    display: none;
    width: var(--ctl-lg);
    height: var(--ctl-lg);
    border-radius: var(--tc-r-ctl);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    color: var(--tc-ink);
    font-size: 20px;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Yuqori panel boshqaruvlari — tekis, soyasiz */
.tc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--ctl);
    padding: 0 var(--sp-3);
    border-radius: var(--tc-r-ctl);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    color: var(--tc-ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tc-pill:hover { border-color: var(--tc-rule-ink); background: var(--hover); color: var(--tc-ink); }
.tc-pill:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--royal); }
.tc-pill .bi { font-size: 16px; color: var(--muted); }
.tc-pill__caret { font-size: 11px !important; color: var(--muted) !important; }
.tc-pill--icon { width: var(--ctl); padding: 0; justify-content: center; position: relative; }
.tc-pill--icon .bi { color: var(--label); font-size: 17px; }
.tc-pill--icon .tc-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--surface);
}

/* Profil — o'qituvchining «rekviziti»: ism + lavozim */
.tc-me {
    border-color: transparent;
    background: transparent;
    min-height: 44px;
    padding: 0 var(--sp-2) 0 4px;
    gap: var(--sp-3);
    margin-left: calc(-1 * var(--sp-2));
}
.tc-me:hover { border-color: transparent; }
.tc-me .tp-avatar { width: 34px; height: 34px; font-size: var(--fs-xs); }
.tc-me__text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.tc-me__name { font-weight: var(--fw-sb); font-size: var(--fs-md); color: var(--tc-ink); }
.tc-me__role { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-md); }

.tc-period select {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--fw-sb);
    padding-right: var(--sp-1);
    cursor: pointer;
    max-width: 280px;
}
.tc-period select:focus { outline: none; }
.tc-period:focus-within { box-shadow: var(--ring); border-color: var(--royal); }

/* --- Ochiladigan menyu --- */
.tc-dd { position: relative; }
.tc-dd__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1);
    display: none;
    z-index: var(--z-dropdown);
}
.tc-dd--left .tc-dd__panel { right: auto; left: 0; }
.tc-dd.is-open .tc-dd__panel { display: block; animation: tc-pop var(--dur) var(--ease-out); }
@keyframes tc-pop {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}
.tc-dd__head {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: var(--fw-sb);
}
.tc-dd__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--tc-r-mark);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-md);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    min-height: 40px;
}
.tc-dd__item:hover { background: var(--hover); color: var(--tc-ink); }
.tc-dd__item:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.tc-dd__item .bi { font-size: 16px; color: var(--muted); width: 18px; text-align: center; flex: none; }
.tc-dd__item small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-md); }
.tc-dd__item[aria-pressed="true"], .tc-dd__item[aria-checked="true"] { color: var(--tc-ink); font-weight: var(--fw-sb); }
.tc-dd__item[aria-pressed="true"]::after, .tc-dd__item[aria-checked="true"]::after {
    content: "\2713"; margin-left: auto; color: var(--royal); font-weight: var(--fw-b);
}
.tc-dd__sep { height: 1px; background: var(--tc-rule); margin: var(--sp-1) 0; }
.tc-dd__empty { padding: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }

.tc-notice {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--tc-r-mark);
    color: var(--text);
    text-decoration: none;
}
.tc-notice:hover { background: var(--hover); }
.tc-notice b { display: block; font-size: var(--fs-md); color: var(--tc-ink); font-weight: var(--fw-sb); }
.tc-notice small { color: var(--muted); font-size: var(--fs-sm); }

.tc-main {
    flex: 1 1 auto;
    padding: var(--sp-6) var(--sp-8) var(--sp-12);
    width: 100%;
    max-width: 1560px;
}

/* --- Telefon: drawer + pastki panel --- */
.tc-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: calc(var(--z-sidebar) - 1);
    display: none;
}

.tc-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--tc-rule-strong);
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom);
}
.tc-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-md);
    text-align: center;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-family: inherit;
    min-width: 0;
}
.tc-tab .bi { font-size: 20px; line-height: 1; }
.tc-tab .i { width: 20px; height: 20px; }
.tc-tab.is-active { color: var(--tc-ink); font-weight: var(--fw-sb); }
.tc-tab.is-active .bi { color: var(--royal); }
.tc-tab.is-active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 28px;
    height: 2px;
    margin-left: -14px;
    background: var(--royal);
}
.tc-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-tab .tc-count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
.tc-tab:focus-visible { outline: 2px solid var(--royal); outline-offset: -3px; }


/* ---------- 2. Bootstrap / ui.css ko'prigi (faqat kabinet ichida) -------- */
/* Hover'da «sakrash» va soya yo'q — kabinet tinch. */
.tc-body .btn { box-shadow: none; }
.tc-body .btn:hover, .tc-body .btn:active { transform: none; box-shadow: none; }
.tc-body .btn-light, .tc-body .btn-outline-primary, .tc-body .btn-outline-secondary {
    background: var(--surface);
    border-color: var(--tc-rule-strong);
    color: var(--tc-ink);
    box-shadow: none;
}
.tc-body .btn-light:hover, .tc-body .btn-outline-primary:hover, .tc-body .btn-outline-secondary:hover {
    background: var(--hover) !important;
    border-color: var(--tc-rule-ink) !important;
    color: var(--tc-ink) !important;
}
.tc-body .btn-outline-primary { color: var(--royal); }
.tc-body .btn-light .bi, .tc-body .btn-outline-primary .bi { color: var(--muted); }
/* Asosiy tugma: brend ko'k; hover/qorong'i tema — AA uchun to'qroq navy */
.tc-body .btn-primary:hover, .tc-body .btn-primary:active {
    background: var(--navy-700) !important;
    border-color: var(--navy-700) !important;
}
:root[data-theme="dark"] .tc-body .btn-primary { background: var(--navy-700); border-color: var(--navy-700); }
:root[data-theme="dark"] .tc-body .btn-primary:hover { background: var(--navy-600) !important; border-color: var(--navy-600) !important; }
.tc-body .btn-sm { height: var(--ctl-sm); border-radius: var(--tc-r-ctl); }
.tc-body .btn-ghost:hover { background: var(--hover); color: var(--tc-ink); }

.tc-body .card {
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    box-shadow: none;
    background: var(--surface);
}
.tc-body .card > .card-header, .tc-body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--tc-rule);
    padding: var(--sp-3) var(--tc-pad);
    min-height: 52px;
    border-radius: var(--tc-r) var(--tc-r) 0 0 !important;
}
.tc-body .card-header h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    font-size: var(--fs-lg);
    margin: 0;
}
.tc-body .card-header h6 .bi { color: var(--muted); }
.tc-body .card > .card-body, .tc-body .card-body { padding: var(--tc-pad); }
.tc-body .card > .card-body.p-0, .tc-body .card-body.p-0 { padding: 0; }

.tc-body .dg-card { box-shadow: none; border-radius: var(--tc-r); border-color: var(--tc-rule-strong); }
.tc-body .dg-foot { border-top-color: var(--tc-rule); }

/* ui.css holat chipi — kabinetda to'rtburchak (rasmiy yorliq) */
.tc-body .status { border-radius: var(--tc-r-mark); height: 22px; padding: 0 8px; }
.tc-body .status .bi { font-size: var(--fs-2xs); }
.tc-body .status:has(.bi)::before { display: none; }

.tc-body .alert { border-radius: var(--tc-r-ctl); border: 1px solid var(--tc-rule-strong); font-size: var(--fs-md); }
.tc-body .alert-warning { background: var(--amber-soft); color: var(--amber-text); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.tc-body .alert-success { background: var(--emerald-soft); color: var(--emerald-text); border-color: color-mix(in srgb, var(--emerald) 30%, transparent); }
.tc-body .alert-info { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--royal); }

.tc-body .form-actions { border-top: 1px solid var(--tc-rule-ink); margin-top: var(--sp-5); padding-top: var(--sp-4); }
.tc-body .form-control, .tc-body .form-select { border-radius: var(--tc-r-ctl); }
.tc-body .chip { border-radius: var(--tc-r-mark); }
.tc-body .min-w-0, .min-w-0 { min-width: 0; }


/* ---------- 3. Sahifa sarlavhasi ----------------------------------------- */
/* Hujjatning «titul qatori»: sarlavha, rekvizitlar, amallar va ostida
   ingichka chiziq. Har sahifada bir xil. */
.tp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    margin: 0 0 var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--tc-rule-ink);
}
.tp-head__text { min-width: 0; flex: 1 1 560px; }

.tp-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    letter-spacing: -0.015em;
    line-height: var(--lh-tight);
    margin: 0;
    overflow-wrap: anywhere;
}
.tp-title .tp-title__sep { color: var(--tc-rule-ink); font-weight: var(--fw-md); margin: 0 0.15em; }
.tp-subtitle { color: var(--tc-quiet); font-size: var(--fs-base); margin: var(--sp-1) 0 0; }

/* Rekvizitlar: «Sinf: 8-B», «Chorak: 1-chorak» — ta'rif ro'yxati */
.tp-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-6);
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-md);
    line-height: var(--lh);
}
.tp-head__meta > div { display: inline-flex; gap: 6px; min-width: 0; }
.tp-head__meta dt { color: var(--tc-quiet); font-weight: var(--fw-md); white-space: nowrap; }
.tp-head__meta dt::after { content: ":"; }
.tp-head__meta dd { margin: 0; color: var(--text); font-weight: var(--fw-sb); }

.tp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-quiet);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    margin-bottom: var(--sp-2);
}
.tp-back:hover { color: var(--royal); }
.tp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--tc-quiet); margin-bottom: var(--sp-1); }
.tp-crumbs a { color: var(--tc-quiet); text-decoration: none; }
.tp-crumbs a:hover { color: var(--royal); }

.tp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tp-actions .btn {
    min-height: var(--ctl);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border-radius: var(--tc-r-ctl);
    font-weight: var(--fw-sb);
}
.tp-actions .form-select { min-height: var(--ctl) !important; height: var(--ctl); padding-top: 0; padding-bottom: 0; font-size: var(--fs-md); }
.tp-actions .tc-pill { box-shadow: none; }

/* --- Qadam tugmasi: [‹] 28.09 – 03.10.2026 [›] (hafta / kun / oy) --- */
.tp-stepper {
    display: inline-flex;
    align-items: stretch;
    height: var(--ctl);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    background: var(--surface);
    overflow: hidden;
}
.tp-stepper__btn {
    width: var(--ctl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--label);
    text-decoration: none;
    border: 0;
    background: transparent;
    font-size: 14px;
    flex: none;
}
.tp-stepper__btn:hover { background: var(--hover); color: var(--tc-ink); }
.tp-stepper__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    border-left: 1px solid var(--tc-rule);
    border-right: 1px solid var(--tc-rule);
    color: var(--tc-ink);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    white-space: nowrap;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    font-family: inherit;
    cursor: pointer;
}
.tp-stepper__label small { color: var(--muted); font-weight: var(--fw-md); font-size: var(--fs-sm); }
.tp-stepper__label .bi { color: var(--muted); }
.tp-stepper__label:hover { background: var(--hover); color: var(--tc-ink); }
.tp-stepper :focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }

/* --- Chop etish: [Chop etish · Oq-qora][▾] --- */
.tp-print { display: inline-flex; }
.tp-print > .btn { border-radius: 0; }
.tp-print > .btn:first-child { border-radius: var(--tc-r-ctl) 0 0 var(--tc-r-ctl); }
.tp-print > .tp-print__caret {
    border-radius: 0 var(--tc-r-ctl) var(--tc-r-ctl) 0;
    margin-left: -1px;
    padding: 0 10px !important;
    min-width: 0;
}
.tp-print__mode { color: var(--muted); font-weight: var(--fw-md); }
.tp-print__mode::before { content: "·"; margin: 0 6px 0 2px; }
.tp-print .tc-dd__panel { min-width: 280px; }


/* ---------- 4. Panel, havola, ikonka, ohang, belgi ----------------------- */
.tp-card {
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    box-shadow: none;
    min-width: 0;
}
.tp-card--pad { padding: var(--tc-pad); }

.tp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    min-height: 52px;
    padding: var(--sp-2) var(--tc-pad);
    border-bottom: 1px solid var(--tc-rule);
    flex-wrap: wrap;
}
.tp-card__head + .tp-card__body { padding-top: var(--sp-4); }
.tp-card__body { padding: var(--sp-4) var(--tc-pad) var(--tc-pad); }
.tp-card__body--flush { padding: 0; }

.tp-card__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    letter-spacing: -0.005em;
}
/* Sarlavhadagi ikonka — plitka emas, oddiy belgi (ohang rangi faqat ma'no bo'lsa) */
.tp-card__title .tp-ic {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    font-size: 16px;
    color: var(--tone-fg, var(--muted));
}
.tp-card__count {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-md);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.tp-card__meta { font-size: var(--fs-sm); color: var(--muted); }
.tp-card__meta b { color: var(--label); font-weight: var(--fw-sb); }
.tp-card__head .tp-card__meta { margin-right: auto; }

.tp-link {
    color: var(--royal);
    font-weight: var(--fw-sb);
    font-size: var(--fs-md);
    text-decoration: none;
    white-space: nowrap;
}
.tp-link:hover { text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .tc-body .tp-link { color: var(--royal-2); }

/* --- Ohanglar: faqat uchta semantik ohang (yashil/sariq/qizil) va
       brend ko'k saqlanadi; qolganlari neytral. --- */
.tp-tone--blue   { --tone-bg: var(--royal-soft);   --tone-fg: var(--royal); }
.tp-tone--green  { --tone-bg: var(--emerald-soft); --tone-fg: var(--emerald-text); }
.tp-tone--amber  { --tone-bg: var(--amber-soft);   --tone-fg: var(--amber-text); }
.tp-tone--red    { --tone-bg: var(--red-soft);     --tone-fg: var(--red-text); }
.tp-tone--violet, .tp-tone--rose, .tp-tone--slate, .tp-tone--cyan, .tp-tone-- {
    --tone-bg: var(--surface-2);
    --tone-fg: var(--label);
}
:root[data-theme="dark"] .tc-body .tp-tone--blue { --tone-fg: var(--royal-2); }

/* Ikonka plitkasi — bezak; ohangdan qat'i nazar neytral */
.tp-ic {
    width: 36px;
    height: 36px;
    border-radius: var(--tc-r-ctl);
    background: var(--surface-2);
    border: 1px solid var(--tc-rule);
    color: var(--label);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: none;
}
.tp-ic--sm { width: 30px; height: 30px; font-size: 15px; }
.tp-ic--lg { width: 44px; height: 44px; font-size: 20px; }

/* --- Belgi (badge) — to'rtburchak yorliq, matn bilan --- */
.tp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--tc-r-mark);
    border: 1px solid color-mix(in srgb, var(--tone-fg, var(--label)) 22%, transparent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    white-space: nowrap;
    background: var(--tone-bg, var(--surface-2));
    color: var(--tone-fg, var(--label));
}
.tp-badge .bi { font-size: 11px; }
button.tp-badge { cursor: pointer; font-family: inherit; }

/* Hozir — bitta qattiq ko'k yorliq (sahifadagi yagona quyma ko'k) */
.tp-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--tc-r-mark);
    background: var(--royal);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-b);
    border: 0;
    font-family: inherit;
    white-space: nowrap;
}
:root[data-theme="dark"] .tc-body .tp-now-badge { background: var(--navy-700); }

/* --- Avatar va sinf nishoni: neytral, matn ma'noni beradi --- */
.tp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-b);
    font-size: var(--fs-xs);
    background: var(--surface-2);
    color: var(--tc-ink);
    border: 1px solid var(--tc-rule-strong);
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-avatar--lg { width: 44px; height: 44px; font-size: var(--fs-sm); }
.tp-avatar--xl { width: 80px; height: 80px; font-size: 24px; }

.tp-classmark {
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border-radius: var(--tc-r-ctl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: var(--fw-b);
    font-size: var(--fs-base);
    background: var(--surface-2);
    color: var(--tc-ink);
    border: 1px solid var(--tc-rule-strong);
    flex: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.tp-classmark--sm { min-width: 36px; height: 32px; font-size: var(--fs-md); }
.tp-classmark--lg { min-width: 52px; height: 52px; font-size: var(--fs-lg); }

/* --- Bo'sh holat --- */
.tp-empty {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}
.tp-empty .bi { font-size: 28px; color: var(--tc-rule-ink); }
.tp-empty b { color: var(--tc-ink); font-size: var(--fs-base); font-weight: var(--fw-sb); }
.tp-empty p { max-width: 420px; margin: 0; font-size: var(--fs-md); }
.tp-empty .btn { margin-top: var(--sp-2); }


/* ---------- 5. Raqamlar qatori (KPI) -------------------------------------- */
/* Alohida «app» kartalar o'rniga bitta chiziqli qator: ko'rsatkichlar
   ingichka vertikal chiziq bilan ajraladi (flex + 1px oraliq = chiziq,
   oxirgi qatordagi elementlar cho'ziladi — bo'sh kulrang katak qolmaydi). */
.tp-kpis, .jr-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--tc-rule);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    overflow: hidden;
    margin: 0 0 var(--sp-5);
}
.tp-kpi, .jr-kpi {
    flex: 1 1 180px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "ic    label label"
        "value value side"
        "hint  hint  hint";
    align-items: center;
    column-gap: 6px;
    padding: var(--sp-3) var(--tc-pad) var(--sp-4);
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: background var(--dur-fast) var(--ease);
}
.tp-kpi__text { display: contents; }
a.tp-kpi:hover, a.jr-kpi:hover { background: var(--hover); color: inherit; transform: none; box-shadow: none; }
a.tp-kpi:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.tp-kpi .tp-ic {
    grid-area: ic;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--tc-tone-text, var(--muted));
}
.tp-kpi:not(.is-ok):not(.is-warn):not(.is-err):not(.is-info) .tp-ic { color: var(--muted); }
.tp-kpi__label, .jr-kpi__label {
    grid-area: label;
    font-size: var(--fs-sm);
    font-weight: var(--fw-md);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    letter-spacing: 0;
}
.tp-kpi:not(:has(.tp-ic)) .tp-kpi__label { grid-column: 1 / -1; }
.tp-kpi__value, .jr-kpi__value {
    grid-area: value;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-b);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--tc-ink);
    /* Yakka katta raqam — proporsional (Manrope'da tabular «1» keng bo'shliq beradi);
       ustun/jadval raqamlari esa tabular */
    font-variant-numeric: lining-nums proportional-nums;
    white-space: nowrap;
}
.tp-kpi__value small, .jr-kpi__value small {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-md);
    color: var(--muted);
    letter-spacing: 0;
}
.tp-kpi__hint, .jr-kpi__hint {
    grid-area: hint;
    margin-top: 2px;
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.tp-kpi__side { grid-area: side; justify-self: end; margin-top: 4px; }
/* jr-kpi: label -> value -> hint (eski tartib) */
.jr-kpi { grid-template-areas: "label label label" "value value side" "hint hint hint"; }

/* Holatli ko'rsatkich: qiymat ohang rangida, katak — yengil fon */
.tp-kpi:is(.is-warn, .is-err) { background: color-mix(in srgb, var(--tc-tone-soft) 65%, var(--surface)); }
.tp-kpi:is(.is-ok, .is-warn, .is-err) .tp-kpi__value,
.tp-kpi:is(.is-warn, .is-err) .tp-kpi__hint { color: var(--tc-tone-text); }
.jr-kpi--warn .jr-kpi__value { color: var(--amber-text); }
.jr-kpi--err .jr-kpi__value { color: var(--red-text); }
.jr-kpi--ok .jr-kpi__value { color: var(--emerald-text); }
.tp-kpi.is-active { box-shadow: inset 0 -2px 0 var(--royal); }


/* ---------- 6. Tablar, segment, filtr, qidiruv ---------------------------- */
.tp-tabs, .jr-nav {
    display: flex;
    gap: var(--sp-5);
    border-bottom: 1px solid var(--tc-rule-ink);
    margin-bottom: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
}
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-card .tp-tabs { border-bottom-color: var(--tc-rule); }
.tp-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 2px;
    color: var(--label);
    text-decoration: none;
    font-weight: var(--fw-md);
    font-size: var(--fs-md);
    white-space: nowrap;
    border: 0;
    background: transparent;
    font-family: inherit;
}
.tp-tab:hover { color: var(--tc-ink); }
.tp-tab.is-active { color: var(--tc-ink); font-weight: var(--fw-sb); }
.tp-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--royal);
}
.tp-tab:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.tp-tab .bi { font-size: 15px; color: var(--muted); }
.tp-tab__n { color: var(--muted); font-weight: var(--fw-md); font-variant-numeric: tabular-nums; }
.tp-tab__badge {
    background: var(--red-text);
    color: var(--surface);
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    padding: 1px 7px;
    font-weight: var(--fw-b);
}

/* Segment (Hafta / Oy / Ro'yxat; Kun / Hafta / Chorak) */
.tp-seg {
    display: inline-flex;
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    background: var(--surface);
    overflow: hidden;
    flex: none;
}
.tp-seg a, .tp-seg button {
    padding: 0 var(--sp-3);
    min-height: calc(var(--ctl) - 2px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--label);
    text-decoration: none;
    font-weight: var(--fw-sb);
    font-size: var(--fs-md);
    border: 0;
    background: transparent;
    font-family: inherit;
    white-space: nowrap;
}
.tp-seg a + a, .tp-seg button + button { border-left: 1px solid var(--tc-rule); }
.tp-seg .bi { font-size: 14px; color: var(--muted); }
.tp-seg a.is-active, .tp-seg button.is-active, .tp-seg [aria-current="page"] { background: var(--tc-sel); color: #fff; }
.tp-seg a.is-active .bi, .tp-seg [aria-current="page"] .bi { color: #fff; }
.tp-seg a:not(.is-active):hover { background: var(--hover); color: var(--tc-ink); }
.tp-seg a:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }

/* Pill-filtr (Barchasi / Sinf rahbari) */
.tp-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tp-pills a {
    min-height: var(--ctl-sm);
    padding: 0 var(--sp-3);
    display: inline-flex;
    align-items: center;
    border-radius: var(--tc-r-ctl);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    color: var(--label);
    text-decoration: none;
    font-weight: var(--fw-sb);
    font-size: var(--fs-md);
}
.tp-pills a.is-active { background: var(--tc-sel); border-color: var(--tc-sel); color: #fff; }
.tp-pills a:not(.is-active):hover { border-color: var(--tc-rule-ink); background: var(--hover); color: var(--tc-ink); }

/* Filtrlar paneli — oq varaq ichida, maydonlar ustunlarda */
.tp-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-3) var(--sp-4);
    align-items: end;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
}
.tp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-field > label, .tp-field__label { font-size: var(--fs-sm); color: var(--label); font-weight: var(--fw-sb); }
.tp-field .form-select, .tp-field .form-control {
    min-height: var(--ctl);
    border-radius: var(--tc-r-ctl);
    font-size: var(--fs-md);
    padding-top: 6px;
    padding-bottom: 6px;
}
.tp-field--wide { grid-column: span 2; }
.tp-field .tc-pill { white-space: normal; min-width: 0; justify-content: flex-start; font-weight: var(--fw-md); }

.tp-search { position: relative; }
.tp-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 14px; }
.tp-search .form-control { padding-left: 36px; min-height: var(--ctl); border-radius: var(--tc-r-ctl); font-size: var(--fs-md); }


/* ---------- 7. Jadval ------------------------------------------------------ */
.tp-table-wrap {
    /* Joylashuv bloki: kataklardagi `sr-only` yorliqlar shu yerda qirqiladi */
    position: relative;
    overflow-x: auto;
    border-radius: 0 0 var(--tc-r) var(--tc-r);
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--tc-scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--tc-scroll-shadow), transparent) right center / 12px 100% no-repeat scroll;
}
.tp-table-wrap:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }

.tp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-md);
}
.tp-table thead th {
    background: var(--surface-2);
    color: var(--label);
    font-weight: var(--fw-sb);
    font-size: var(--fs-sm);
    padding: 9px var(--sp-3);
    border-bottom: 1px solid var(--tc-rule-strong);
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
    position: sticky;
    top: 0;
    z-index: 2;
}
.tp-table thead tr + tr th { border-top: 1px solid var(--tc-rule); }
.tp-table thead th:first-child { padding-left: var(--tc-pad); }
.tp-table thead th:last-child { padding-right: var(--tc-pad); }
.tp-table tbody td {
    padding: 10px var(--sp-3);
    height: var(--row-h);
    border-bottom: 1px solid var(--tc-rule);
    vertical-align: middle;
    color: var(--text);
}
.tp-table tbody td:first-child { padding-left: var(--tc-pad); }
.tp-table tbody td:last-child { padding-right: var(--tc-pad); }
.tp-table tbody tr:last-child td { border-bottom: 0; }
/* Reyestr ritmi: har 5-qatordan keyin qalinroq chiziq */
.tp-table--grid tbody tr:nth-child(5n):not(:last-child) td { border-bottom-color: var(--tc-rule-ink); }
.tp-table tbody tr:hover td { background: var(--tc-hover); }
.tp-table tbody tr.is-selected td { background: color-mix(in srgb, var(--royal) 8%, transparent); }
.tp-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.tp-table thead .num { font-variant-numeric: normal; }          /* «1-ch» — Inter tnum defisni kengaytiradi */
.tp-table .end { text-align: right; }
.tp-table .muted { color: var(--muted); }
.tp-table--dense tbody td { padding: 4px 8px; height: var(--row-h-dense); }
.tp-table--dense thead th { padding: 6px 8px; }
.tp-table--grid th, .tp-table--grid td { border-right: 1px solid var(--tc-rule); }
.tp-table--grid th:last-child, .tp-table--grid td:last-child { border-right: 0; }
.tp-table .is-sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); white-space: nowrap; min-width: 220px; }
.tp-table thead th.is-sticky { z-index: 3; background: var(--surface-2); }
.tp-table .is-sticky-num { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 44px; min-width: 44px; color: var(--muted); }
.tp-table thead th.is-sticky-num { z-index: 3; background: var(--surface-2); }
.tp-table .is-sticky.is-after-num { left: 44px; box-shadow: inset -1px 0 0 var(--tc-rule-strong); }
.tp-table tbody tr:hover td.is-sticky, .tp-table tbody tr:hover td.is-sticky-num { background: var(--hover); }
.tp-table .col-today { background: var(--tc-today-bg) !important; }
.tp-table thead th.col-today { box-shadow: inset 0 3px 0 var(--royal); color: var(--tc-ink); }
.tp-table--grid .is-sticky-num, .tp-table--grid .is-sticky.is-after-num { padding-left: var(--sp-3); }
.tp-table--grid thead th.num { text-align: center; }

.tp-row-title { font-weight: var(--fw-sb); color: var(--tc-ink); display: block; }
a.tp-row-title:hover { color: var(--royal); text-decoration: underline !important; text-underline-offset: 2px; }
.tp-row-meta { font-size: var(--fs-sm); color: var(--muted); display: block; }
.tp-cellgrades { display: inline-flex; gap: 3px; flex-wrap: nowrap; }
.tp-col-title { min-width: 260px; }
.tp-table--wide { min-width: 980px; }
.tp-table--wide td, .tp-table--wide th { white-space: nowrap; }
.tp-table--wide .tp-col-title { white-space: normal; }


/* ---------- 8. Davomat belgilari va baholar ------------------------------- */
/* Qoida (study_journal bilan bir xil): DAVOMAT — doira + harf,
   BAHO — kvadrat + raqam. Shakl ma'noni rangsiz ham beradi. */

/* --- Baho kvadrati (Baholar sahifasi, nazorat ishi) --- */
.tp-grade, .jr-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: var(--tc-r-mark);
    font-weight: var(--fw-b);
    font-size: var(--fs-md);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--surface-2);
    color: var(--muted);
}
.tp-grade--5, .jr-value--5 { background: var(--emerald-soft); color: var(--emerald-text); }
.tp-grade--4, .jr-value--4 { background: var(--royal-soft);   color: var(--royal); }
.tp-grade--3, .jr-value--3 { background: var(--amber-soft);   color: var(--amber-text); }
.tp-grade--2, .jr-value--2 { background: var(--red-soft);     color: var(--red-text); }
/* Qorong'i temada --royal to'q fon ustida AA'ga yetmaydi -> --royal-2 */
:root[data-theme="dark"] .tc-body :is(.tp-grade--4, .jr-value--4) { color: var(--royal-2); }
.jr-value--exam, .tp-grade--exam { box-shadow: inset 0 0 0 1.5px currentColor; }
.tp-grade--avg {
    min-width: 44px;
    background: transparent;
    color: var(--tc-ink);
    border: 1px solid var(--tc-rule-strong);
}
.tp-grade--avg.tp-tone--red, .tp-grade--avg.tp-tone--amber { color: var(--tone-fg); border-color: color-mix(in srgb, var(--tone-fg) 35%, transparent); background: var(--tone-bg); }
.tp-grade em, .jr-value em { font-style: italic; font-weight: var(--fw-sb); }

/* --- Davomat belgisi (partial att_mark.html) — doira --- */
.tp-att {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
    background: transparent;
    color: var(--muted);
    border: 0;
    line-height: 1;
}
.tp-att .bi { font-size: 11px; line-height: 1; }
.tp-att--present { color: var(--muted); font-size: var(--fs-md); font-weight: 400; }
.tp-att--absent  { background: var(--red-soft);   color: var(--red-text);   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.tp-att--late    { background: var(--amber-soft); color: var(--amber-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 34%, transparent); }
.tp-att--excused { background: var(--cyan-soft);  color: var(--cyan-text);  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent); }

/* --- Jurnal belgisi (jr-mark) — xuddi shu doira --- */
.jr-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
    line-height: 1;
    color: var(--muted);
    flex: none;
}
.jr-mark--present { color: var(--muted); font-size: var(--fs-md); font-weight: 400; }
.jr-mark--absent  { background: var(--red-soft);   color: var(--red-text);   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); font-size: var(--fs-md); }
.jr-mark--late    { background: var(--amber-soft); color: var(--amber-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 34%, transparent); }
.jr-mark--excused { background: var(--cyan-soft);  color: var(--cyan-text);  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent); }
/* Baho bor katakda «+» ortiqcha — baho bo'lishi o'quvchi darsda bo'lganini bildiradi */
.jr-gc .jr-mark--present:has(~ .jr-value) { display: none; }

/* Davomat sahifasidagi tahrirlanadigan tanlov */
.tp-att-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 46px;
    height: 30px;
    padding: 0 6px;
    border-radius: var(--tc-r-mark);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    color: var(--tc-ink);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    text-align: center;
    cursor: pointer;
}
.tp-att-select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--royal); }
.tp-att-select.is-present { background: var(--surface-2); color: var(--tc-ink); }
.tp-att-select.is-absent  { background: var(--red-soft);     color: var(--red-text);   border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.tp-att-select.is-late    { background: var(--amber-soft);   color: var(--amber-text); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.tp-att-select.is-excused { background: var(--cyan-soft);    color: var(--cyan-text);  border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }

/* --- Shartli belgilar izohi --- */
.tp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; font-size: var(--fs-sm); color: var(--label); }
.tp-legend > span, .tp-legend > div { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-legend > b { font-weight: var(--fw-sb); color: var(--tc-ink); }
.tp-legend__sw {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--s-edge, var(--tone-fg)), inset 0 0 0 1px var(--tc-rule-strong);
}
.tp-legend__group { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; margin: 0; }
.tp-legend__group dt { width: 100%; font-size: var(--fs-xs); font-weight: var(--fw-sb); color: var(--muted); }
.tp-legend__group dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }


/* ---------- 9. Ro'yxatlar ------------------------------------------------- */
.tp-list { display: flex; flex-direction: column; }
.tp-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--tc-pad);
    border-top: 1px solid var(--tc-rule);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.tp-list > .tp-item:first-child { border-top: 0; }
a.tp-item:hover { background: var(--hover); color: inherit; }
.tp-item__main { flex: 1 1 auto; min-width: 0; }
.tp-item__title { display: block; font-weight: var(--fw-sb); color: var(--tc-ink); overflow-wrap: anywhere; }
.tp-item__meta { display: block; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.tp-item__side { flex: none; display: flex; align-items: center; gap: var(--sp-2); text-align: right; }
.tp-item__date {
    flex: none;
    width: 48px;
    text-align: center;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.tp-item__date b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-b); color: var(--tc-ink); }
.tp-item__date small { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* --- Bayroqcha: ikonka + so'z (holat hech qachon faqat rang bilan emas) --- */
.tp-flag {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--tc-tone-text);
    min-width: 0;
}
p.tp-flag, .tp-lr__main p { margin-bottom: 0; }
.tp-flag > .bi { flex: none; margin-top: 1px; font-size: 13px; color: var(--tc-tone-text); }
/* Ism («Karimova N.») va dars havolasi («Ju, 3-dars») qator bo'yicha bo'linmasin */
.tp-nowrap { white-space: nowrap; }
.tp-flag b { font-weight: var(--fw-sb); }
.tp-flag__rest { color: var(--text); }
.tp-flag--chip {
    padding: 2px 8px;
    border-radius: var(--tc-r-mark);
    background: var(--tc-tone-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc-tone) 26%, transparent);
    align-items: center;
}

/* --- DAFTAR: raqamlangan darslar ro'yxati (imzo element) ---
   Chap ustun — dars raqami, uning o'ng chetida daftar hoshiyasining
   qo'sh chizig'i. Bosh sahifa, ro'yxat ko'rinishi va kun bloklarida. */
.tp-ledger { list-style: none; margin: 0; padding: 0; }
.tp-lr {
    position: relative;
    display: grid;
    grid-template-columns: 52px 82px minmax(0, 1fr) auto;
    grid-template-areas: "no time main side";
    column-gap: var(--sp-4);
    border-top: 1px solid var(--tc-rule);
}
.tp-ledger > .tp-lr:first-child { border-top: 0; }
.tp-lr > * { min-width: 0; }
.tp-lr__no {
    grid-area: no;
    align-self: stretch;
    padding-top: 13px;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    line-height: 1.2;
    color: var(--muted);
    border-right: 3px double var(--tc-margin);
    font-variant-numeric: tabular-nums;
}
.tp-lr__no small { display: block; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-md); }
.tp-lr__time {
    grid-area: time;
    padding: var(--sp-3) 0;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.tp-lr__time b { display: block; font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--tc-ink); }
.tp-lr__time span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.tp-lr__main { grid-area: main; padding: var(--sp-3) 0; }
.tp-lr__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--sp-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-sb);
    color: var(--tc-ink);
    line-height: 1.35;
}
.tp-lr__class { font-family: var(--font-display); font-weight: var(--fw-b); }
.tp-lr__room { font-size: var(--fs-sm); font-weight: var(--fw-md); color: var(--muted); white-space: nowrap; }
.tp-lr__topic { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text); overflow-wrap: anywhere; }
.tp-lr__topic.is-none { display: inline-flex; gap: 6px; align-items: center; color: var(--amber-text); font-weight: var(--fw-md); }
.tp-lr__facts {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--muted);
}
.tp-lr__facts li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tp-lr__facts b { color: var(--tc-ink); font-weight: var(--fw-sb); font-variant-numeric: tabular-nums; }
.tp-lr__facts .is-warn, .tp-lr__facts .is-err { color: var(--tc-tone-text); font-weight: var(--fw-sb); }
.tp-lr__main > .tp-flag { display: flex; margin-top: 6px; }
.tp-lr__side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--tc-pad) var(--sp-3) 0;
}
.tp-lr__side form { margin: 0; }
.tp-lr__side .btn { white-space: nowrap; }

/* Holatlar */
.tp-lr.is-now { background: var(--tc-today-bg); }
.tp-lr.is-now::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 3px; background: var(--royal); }
.tp-lr.is-now .tp-lr__no { color: var(--royal); }
.tp-lr.is-past .tp-lr__no { color: color-mix(in srgb, var(--muted) 70%, var(--surface)); }
/* Bekor qilingan: chizilgan + ikonka + so'z */
.tp-lr.is-cancelled :is(.tp-lr__time b, .tp-lr__time span, .tp-lr__title) {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.tp-lr.is-cancelled .tp-lr__no { color: color-mix(in srgb, var(--muted) 60%, var(--surface)); }
/* Darsni boshqa o'qituvchi o'tadi yoki dars ko'chirilgan — xira, amal yo'q */
.tp-lr:is(.is-replaced, .is-moved) :is(.tp-lr__title, .tp-lr__time b) { color: var(--muted); }

/* --- E'tibor talab ro'yxati --- */
.tp-attn { list-style: none; margin: 0; padding: 0; }
.tp-attn__item {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 2px var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--tc-pad);
    border-top: 1px solid var(--tc-rule);
}
.tp-attn__item:first-child { border-top: 0; }
.tp-attn__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--sp-2);
    bottom: var(--sp-2);
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--tc-tone);
}
.tp-attn__item > .bi { color: var(--tc-tone-text); font-size: 15px; align-self: start; margin-top: 2px; }
.tp-attn__main { min-width: 0; line-height: 1.35; }
.tp-attn__main b { display: block; font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--tc-tone-text); }
.tp-attn__main span { display: block; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.tp-attn__item .btn { justify-self: end; }
.tp-attn__item > form { margin: 0; justify-self: end; }
/* 6 tadan ortig'i — «Yana N ta» ostida (alohida sahifa yo'q) */
.tp-attn__more { border-top: 1px solid var(--tc-rule); }
.tp-attn__more > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--tc-pad);
    color: var(--royal);
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    cursor: pointer;
    list-style: none;
}
.tp-attn__more > summary::-webkit-details-marker { display: none; }
.tp-attn__more > summary::after {
    content: "\f282";                                   /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 11px;
    transition: transform var(--dur) var(--ease);
}
.tp-attn__more[open] > summary::after { transform: rotate(180deg); }
.tp-attn__more > summary:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.tp-attn__more > .tp-attn { border-top: 1px solid var(--tc-rule); }
:root[data-theme="dark"] .tc-body .tp-attn__more > summary { color: var(--royal-2); }

/* --- Bosh sahifa tepasi: sentabr darslarini to'ldirish oynasi (2026-10-10) ---
   Ohang `.is-warn` (kamchilik bor) / `.is-ok` (hammasi to'ldirilgan) dan. */
.tp-catchup {
    margin: 0 0 var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--tc-tone) 45%, var(--tc-rule-strong));
    border-left: 4px solid var(--tc-tone);
    border-radius: var(--tc-r);
    background: color-mix(in srgb, var(--tc-tone-soft) 55%, var(--surface));
    overflow: hidden;
}
.tp-catchup__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-4) var(--tc-pad) var(--sp-3);
}
.tp-catchup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--tc-tone-text);
    font-size: 20px;
}
.tp-catchup__title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-sb);
    color: var(--tc-tone-text);
}
.tp-catchup__text p { margin: 0; font-size: var(--fs-md); color: var(--text); }
.tp-catchup__deadline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--tc-r-ctl);
    background: var(--surface);
    line-height: 1.15;
    text-align: center;
}
.tp-catchup__deadline b { font-size: var(--fs-xl); color: var(--tc-tone-text); }
.tp-catchup__deadline span { font-size: var(--fs-sm); color: var(--muted); }
.tp-catchup__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0 var(--tc-pad) var(--sp-3);
}
.tp-catchup__stats li {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--text);
}
.tp-catchup__stats b { color: var(--tc-tone-text); font-weight: var(--fw-sb); }
.tp-catchup__stats .is-key { outline: 1px solid var(--tc-tone); font-weight: var(--fw-sb); }
.tp-catchup__kpi {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    margin: 0;
    padding: 0 var(--tc-pad) var(--sp-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    color: var(--red-text);
}
.tp-catchup__kpi .bi { margin-top: 2px; }
.tp-catchup__ok {
    margin: 0;
    padding: 0 var(--tc-pad) var(--sp-4);
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    color: var(--tc-tone-text);
}
.tp-catchup__list { background: var(--surface); }

/* --- «Hisobot bo'yicha natijam» (2026-10-12): hisobotdagi qatorim + reytingim ---
   O'qituvchi va mentor kabinetlarida bir xil; ohang `.is-warn` / `.is-ok` dan,
   foiz «tabletkalari» hisobot sahifasidagi bilan bir xil (`rep-pct`). */
.tp-stand {
    margin: 0 0 var(--sp-5);
    border: 1px solid var(--tc-rule-strong);
    border-left: 4px solid var(--tc-tone);
    border-radius: var(--tc-r);
    background: var(--surface);
    overflow: hidden;
}
.tp-stand__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-4) var(--tc-pad) var(--sp-3);
}
.tp-stand__title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-sb);
    color: var(--text);
}
.tp-stand__text p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.tp-stand__score,
.tp-stand__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 96px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--tc-r-ctl);
    background: color-mix(in srgb, var(--tc-tone-soft) 55%, var(--surface));
    line-height: 1.15;
    text-align: center;
}
.tp-stand__score .rep-pct { font-size: var(--fs-lg); }
.tp-stand__score span:last-child,
.tp-stand__rank span { font-size: var(--fs-sm); color: var(--muted); }
.tp-stand__rank b { font-size: var(--fs-xl); color: var(--tc-tone-text); font-variant-numeric: tabular-nums; }
.tp-stand__cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0 var(--tc-pad) var(--sp-3);
}
.tp-stand__cells li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--tc-rule);
    border-radius: var(--tc-r-ctl);
    font-size: var(--fs-xs, 12px);
    color: var(--muted);
    line-height: 1.25;
}
.tp-stand__cells .rep-pct,
.tp-stand__cells .rep-ratio { align-self: flex-start; font-size: var(--fs-md); }
.tp-stand .tp-catchup__stats li { background: color-mix(in srgb, var(--tc-tone-soft) 55%, var(--surface)); }
.tp-stand .tp-catchup__list { border-top: 1px solid var(--tc-rule); }
.tp-stand__note {
    margin: 0;
    padding: var(--sp-2) var(--tc-pad) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--muted);
}
@media (max-width: 575.98px) {
    .tp-stand__head { grid-template-columns: 1fr 1fr; }
    .tp-stand__text { grid-column: 1 / -1; }
    .tp-stand__cells { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .tp-catchup__head { grid-template-columns: auto minmax(0, 1fr); }
    .tp-catchup__deadline {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
    }
}

/* Bosh sahifa: karta ichidagi tablar (sarlavha ostida, chiziqsiz) va
   ustunlar oralig'i — maketdagi inline uslublar o'rniga */
.tp-card__tabs { padding: 0 var(--tc-pad); }
.tp-card__tabs > .tp-tabs { margin-bottom: 0; border-bottom: 0; }
.tp-grid--main > .tp-stack { gap: var(--sp-5); }
.tp-hw-class { font-family: var(--font-display); }

/* --- Eski «vaqt o'qi» (dashboard v1) — daftar ko'rinishiga keltirilgan --- */
.tp-timeline { position: relative; padding: 0; }
.tp-tl {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--tc-pad);
    border-top: 1px solid var(--tc-rule);
}
.tp-tl:first-child { border-top: 0; }
.tp-tl.is-now { background: var(--tc-today-bg); box-shadow: inset 3px 0 0 var(--royal); }
.tp-tl__time { font-weight: var(--fw-sb); color: var(--tc-ink); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.tp-tl__title { display: block; font-weight: var(--fw-sb); color: var(--tc-ink); overflow-wrap: anywhere; }
.tp-tl__meta { display: block; font-size: var(--fs-sm); color: var(--muted); }


/* ---------- 10. Diagrammalar, progress, mini kalendar --------------------- */
/* --- Bajarilish chizig'i (uy vazifasi): «Bajarildi: 18 / 27 · Ko'rildi: 22» ---
   Bitta chiziqda ikki qatlam: ko'rilgan (och) va bajarilgan (to'q).
   Raqamlar doim matn bilan yonida turadi; chiziq aria-hidden. */
.hw-progress__bar {
    position: relative;
    display: block;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--tc-rule);
    overflow: hidden;
}
.hw-progress__bar::before, .hw-progress__bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
}
.hw-progress__bar::before { width: var(--seen, 0%); background: color-mix(in srgb, var(--tc-ink) 22%, var(--surface)); }
.hw-progress__bar::after { width: var(--done, 0%); background: var(--tc-ink); }

/* --- Halqa (KTP bajarilishi) --- */
.tp-ring {
    --p: 0;
    --ring: var(--tc-ink);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--tc-rule) 0);
    display: inline-grid;
    place-items: center;
    flex: none;
}
.tp-ring::before {
    content: "";
    grid-area: 1 / 1;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    background: var(--surface);
}
.tp-ring > span {
    grid-area: 1 / 1;
    position: relative;
    font-size: var(--fs-xs);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    font-variant-numeric: tabular-nums;
}
.tp-ring--sm { width: 38px; height: 38px; }
.tp-ring--sm::before { width: calc(100% - 6px); height: calc(100% - 6px); }
.tp-ring--sm > span { font-size: 10px; }
.tp-ring--ok { --ring: var(--emerald); }
.tp-ring--warn { --ring: var(--amber); }
.tp-ring--err { --ring: var(--red); }
.tp-ring--info { --ring: var(--royal); }
.tp-ring--neutral { --ring: var(--muted); }

/* --- Doira diagramma --- */
.tp-donut-wrap { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.tp-donut {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    position: relative;
}
.tp-donut::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--surface); }
.tp-donut__center { position: relative; text-align: center; line-height: 1.15; }
.tp-donut__center b { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-b); color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tp-donut__center span { font-size: var(--fs-xs); color: var(--muted); }
.tp-keys { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 150px; }
.tp-key { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
.tp-key__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--dot); flex: none; }
.tp-key__label { flex: 1 1 auto; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-key__value { font-weight: var(--fw-sb); color: var(--tc-ink); font-variant-numeric: tabular-nums; }

/* --- Kichik statistika (2 x 2) --- */
.tp-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--tc-rule);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    overflow: hidden;
}
.tp-mini__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3);
    background: var(--surface);
}
.tp-mini__item .tp-ic { width: auto; height: auto; background: none; border: 0; font-size: 14px; color: var(--muted); }
.tp-mini__item b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--tc-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-mini__item small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; line-height: 1.25; }

/* --- Mini kalendar --- */
.tp-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.tp-cal__title { font-family: var(--font-display); font-weight: var(--fw-b); color: var(--tc-ink); font-size: var(--fs-lg); }
.tp-cal__nav { display: flex; gap: 4px; }
.tp-cal__nav a {
    width: 32px;
    height: 32px;
    border-radius: var(--tc-r-ctl);
    border: 1px solid var(--tc-rule-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--label);
    text-decoration: none;
}
.tp-cal__nav a:hover { background: var(--hover); color: var(--tc-ink); }
.tp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.tp-cal__dow { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-sb); padding-bottom: 4px; }
.tp-cal__day {
    height: 34px;
    border-radius: var(--tc-r-mark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    position: relative;
    text-decoration: none;
}
a.tp-cal__day:hover { background: var(--hover); color: var(--tc-ink); }
.tp-cal__day.is-other { visibility: hidden; }
.tp-cal__day.is-marked { background: var(--tone-bg); color: var(--tone-fg); font-weight: var(--fw-sb); }
.tp-cal__day.is-today { background: var(--royal); color: #fff; font-weight: var(--fw-b); }
:root[data-theme="dark"] .tc-body .tp-cal__day.is-today { background: var(--navy-700); }
.tp-cal__day.is-selected { box-shadow: inset 0 0 0 2px var(--tc-ink); }
.tp-cal__day.is-rest { color: var(--muted); }
.tp-cal__grid--lg { gap: 4px; }
.tp-cal__day--lg {
    height: 68px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 8px;
    border: 1px solid var(--tc-rule);
    border-radius: var(--tc-r-mark);
}
.tp-cal__day--lg small { margin-top: auto; font-size: var(--fs-xs); color: var(--tc-ink); font-weight: var(--fw-sb); }
.tp-cal__day--lg.is-today small { color: #fff; }
.tp-cal__day--lg.is-rest { background: repeating-linear-gradient(135deg, var(--tc-hatch-n) 0 1px, transparent 1px 6px), var(--surface-2); }
.tp-cal__day--lg.is-rest small { color: var(--muted); }


/* ---------- 11. Dars jadvali (hafta to'ri) -------------------------------- */
.tp-week { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tp-week th, .tp-week td {
    border-bottom: 1px solid var(--tc-rule);
    border-right: 1px solid var(--tc-rule);
    padding: 5px;
    vertical-align: top;
}
.tp-week th:last-child, .tp-week td:last-child { border-right: 0; }
.tp-week tbody tr:last-child > * { border-bottom: 0; }
.tp-week thead th {
    background: var(--surface-2);
    text-align: left;
    font-weight: var(--fw-sb);
    font-size: var(--fs-md);
    color: var(--tc-ink);
    padding: 9px 10px;
    border-bottom-color: var(--tc-rule-strong);
    vertical-align: bottom;
}
.tp-week thead th small { display: block; font-weight: var(--fw-md); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tp-week thead th.is-today { background: var(--tc-today-bg); box-shadow: inset 0 3px 0 var(--royal); }
.tp-week thead th.is-today small { color: var(--royal); font-weight: var(--fw-sb); }
:root[data-theme="dark"] .tc-body .tp-week thead th.is-today small { color: var(--royal-2); }
.tp-week thead th.is-off { color: var(--muted); }
.tp-week td.is-today { background: var(--tc-today-bg); }

/* Vaqt ustuni = daftar hoshiyasi: dars raqami + vaqt, qo'sh chiziq */
.tp-week__time {
    width: 104px;
    text-align: left;
    color: var(--muted);
    font-weight: var(--fw-md);
    font-size: var(--fs-sm);
    white-space: nowrap;
    vertical-align: middle !important;
    font-variant-numeric: tabular-nums;
    border-right: 3px double var(--tc-margin) !important;
    padding-left: 12px !important;
}
.tp-week thead .tp-week__time { vertical-align: bottom !important; color: var(--label); font-size: var(--fs-sm); }
.tp-week__time small { display: block; color: var(--muted); font-weight: var(--fw-md); font-size: var(--fs-xs); }
.tp-week__no {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    line-height: 1.15;
}
.tp-week__no small { display: inline; font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-md); }

/* Dam olish / bayram ustuni (rowspan) — shtrix + sabab */
.tp-week__off {
    vertical-align: middle !important;
    text-align: center;
    background:
        repeating-linear-gradient(135deg, var(--tc-hatch-n) 0 1px, transparent 1px 7px),
        var(--surface-2);
    color: var(--label);
    padding: var(--sp-4) var(--sp-3) !important;
}
.tp-week__off b { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--tc-ink); line-height: 1.3; }
.tp-week__off span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.tp-week__off .bi { display: block; font-size: 18px; color: var(--muted); margin-bottom: 6px; }
/* Ustun oxirgi qatorgacha cho'ziladi — pastki chiziq varaq chegarasi bilan qo'shilmasin */
.tp-week td.tp-week__off { border-bottom: 0; }

/* «Dars jadvali» sahifasi: oldingi inline uslublar o'rniga */
.tp-select-auto { width: auto; min-width: 170px; }
.tp-cal-card { max-width: 760px; }
.tp-days { gap: var(--sp-4); }
.tp-card--link { display: block; color: inherit; text-decoration: none; }
.tp-card--link:hover { border-color: var(--tc-rule-ink); color: inherit; }
.tp-row--nowrap { flex-wrap: nowrap; }

/* --- Dars katakchasi --- */
.tp-lesson {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-height: 66px;
    padding: 6px 8px 7px 11px;
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-mark);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.3;
    text-align: left;
    box-shadow: inset 3px 0 0 var(--s-edge, var(--muted));
    cursor: default;
}
.tp-lesson + .tp-lesson, form + form > .tp-lesson { margin-top: 4px; }
button.tp-lesson, a.tp-lesson { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
button.tp-lesson:hover, a.tp-lesson:hover { border-color: var(--tc-rule-ink); background: var(--hover); color: var(--text); }
button.tp-lesson:focus-visible, a.tp-lesson:focus-visible { outline: 2px solid var(--royal); outline-offset: 1px; }
.tp-lesson > .bi { display: none; }                         /* eski markup: bezak ikonka */
.tp-lesson b { display: block; font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--tc-ink); }
.tp-lesson__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tp-lesson__class { display: inline !important; font-family: var(--font-display); font-weight: var(--fw-b) !important; font-size: var(--fs-md); color: var(--tc-ink); white-space: nowrap; }
.tp-lesson__subj { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tp-lesson__room { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); }
.tp-lesson__room .bi { font-size: 11px; }

/* --- Dars almashtirish belgisi: partials/lesson_change.html ---
   .tp-change > .tp-change__label--{cancelled|substitute|replaced|room|moved}
   + .tp-change__reason. Ikonka CSS'dan (Bootstrap Icons shrifti) — markup
   o'zgarmaydi; ma'no matnda («Bekor qilindi», «O'rinbosar: …»), rang va
   ikonka — qo'shimcha belgi. Katakcha ichida: ustida uzuq chiziq. */
.tp-change {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--tc-rule-strong);
    font-size: var(--fs-xs);
    line-height: 1.3;
    white-space: normal;
    text-align: left;
}
.tp-change__label {
    --tc-tone-text: var(--label);
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
    font-weight: var(--fw-sb);
    color: var(--tc-tone-text);
    overflow-wrap: anywhere;
}
.tp-change__label::before {
    font-family: "bootstrap-icons";
    font-weight: normal;
    font-size: 11px;
    line-height: 1;
    flex: none;
    position: relative;
    top: 1px;
}
.tp-change__label--cancelled  { --tc-tone-text: var(--red-text); }
.tp-change__label--cancelled::before  { content: "\f627"; }   /* bi-x-octagon */
.tp-change__label--substitute { --tc-tone-text: var(--royal); }
.tp-change__label--substitute::before { content: "\f12b"; }   /* bi-arrow-left-right */
.tp-change__label--replaced::before   { content: "\f12b"; }
.tp-change__label--room       { --tc-tone-text: var(--amber-text); }
.tp-change__label--room::before       { content: "\f308"; }   /* bi-door-open */
.tp-change__label--moved      { --tc-tone-text: var(--royal); }
.tp-change__label--moved::before      { content: "\f209"; }   /* bi-calendar2-week */
:root[data-theme="dark"] .tc-body :is(.tp-change__label--substitute, .tp-change__label--moved) { --tc-tone-text: var(--royal-2); }
.tp-change__reason { color: var(--text); font-weight: var(--fw-md); padding-left: 16px; overflow-wrap: anywhere; }
/* Keng qatorda (daftar, kunlik jurnal, ro'yxat, eski vaqt o'qi) — chiziqsiz, bir qatorda */
:is(.tp-lr__main, .tp-dj__topic, .tp-item__main, .tp-tl) .tp-change {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--sp-3);
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
    font-size: var(--fs-sm);
}
:is(.tp-lr__main, .tp-dj__topic, .tp-item__main, .tp-tl) .tp-change__reason { padding-left: 0; }
.tp-tl .u-truncate { white-space: normal; }

.tp-lesson__go {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-sb);
    color: var(--royal);
}
:root[data-theme="dark"] .tc-body .tp-lesson__go { color: var(--royal-2); }

/* Holatlar — teacher_ui.change_css filtridan:
   is-changed (har qanday almashtirish) + is-cancelled | is-substitute (men
   o'rinbosarman) | is-replaced (o'rnimga boshqasi) | is-room-changed | is-moved.
   is-past / is-now — week.py (ixtiyoriy, joriy kun uchun). */
.tp-lesson.is-cancelled,
.tp-lesson.is-replaced,
.tp-lesson.is-moved {
    border-style: dashed;
    background: var(--surface-2);
    box-shadow: none;
}
.tp-lesson.is-cancelled :is(.tp-lesson__class, .tp-lesson__subj, b) { text-decoration: line-through; color: var(--muted); }
.tp-lesson.is-replaced :is(.tp-lesson__class, .tp-lesson__subj, b),
.tp-lesson.is-moved :is(.tp-lesson__class, .tp-lesson__subj, b) { color: var(--muted); }
.tp-lesson.is-substitute { border-color: color-mix(in srgb, var(--royal) 45%, var(--tc-rule-strong)); }
.tp-lesson.is-moved-in { border-color: color-mix(in srgb, var(--royal) 30%, var(--tc-rule-strong)); }
.tp-lesson.is-past:not(:hover) { background: var(--surface); }
.tp-lesson.is-now { border-color: var(--royal); box-shadow: inset 3px 0 0 var(--s-edge, var(--muted)), 0 0 0 1px var(--royal); }
/* Ro'yxat / eski vaqt o'qi qatorlari */
.tp-item.is-cancelled .tp-item__title, .tp-tl.is-cancelled .tp-tl__title { text-decoration: line-through; color: var(--muted); }
.tp-item.is-replaced .tp-item__title, .tp-tl.is-replaced .tp-tl__title { color: var(--muted); }

/* Boshqa o'qituvchining darsi (sinf jadvali) va to'garak */
.tp-lesson--other { background: var(--surface-2); color: var(--muted); box-shadow: none; border-color: var(--tc-rule); }
.tp-lesson--other b { color: var(--label); }
.tp-lesson--club { border-style: dashed; }
.tp-cell-empty {
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-rule-ink);
    font-size: var(--fs-sm);
}
.tp-cell-rest {
    height: 66px;
    border-radius: var(--tc-r-mark);
    background: repeating-linear-gradient(135deg, var(--tc-hatch-n) 0 1px, transparent 1px 7px), var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--label);
    font-size: var(--fs-xs);
    text-align: center;
    padding: 4px;
}

/* --- Eski sinf jadvali (class_schedule.html, class_detail.html) --- */
.jr-week { width: 100%; border-collapse: separate; border-spacing: 0; }
.jr-week th, .jr-week td { border-bottom: 1px solid var(--tc-rule); border-right: 1px solid var(--tc-rule); padding: 4px; vertical-align: top; }
.jr-week thead th { background: var(--surface-2); font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--label); text-align: center; position: sticky; top: 0; z-index: var(--z-sticky); }
.jr-week__time { width: 92px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.jr-cell {
    display: block;
    border-radius: var(--tc-r-mark);
    padding: 6px 8px;
    margin-bottom: 4px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--tc-rule);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.jr-cell:last-child { margin-bottom: 0; }
/* O'z darsingiz: oq fon + ko'k chet (avvalgi yashil quyma o'rniga), so'z «Siz» shablonda */
.jr-cell.is-mine { background: var(--surface); border-color: var(--tc-rule-strong); box-shadow: inset 3px 0 0 var(--royal); }
.jr-cell__subject { font-weight: var(--fw-sb); display: block; color: var(--tc-ink); }
.jr-cell__meta { color: var(--muted); display: block; }


/* ---------- 12. Jurnal (chorak va hafta) ---------------------------------- */
.jr-grid-card { overflow: hidden; }
.jr-grid-scroll {
    --jr-name-w: 300px;
    --jr-col-w: 44px;
    --jr-sum-w: 76px;
    --jr-row-h: 32px;
    overflow: auto;
    max-height: max(440px, calc(100vh - 170px));
    overscroll-behavior-x: contain;
    overflow-anchor: none;
}
.jr-grid-scroll:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }

.jr-grid {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    font-size: var(--fs-sm);
    color: var(--text);
}
.jr-grid th, .jr-grid td {
    padding: 0;
    border-right: 1px solid var(--tc-rule);
    border-bottom: 1px solid var(--tc-rule);
    background-clip: padding-box;
    white-space: nowrap;
}
.jr-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-2);
    border-bottom-color: var(--tc-rule-strong);
    color: var(--muted);
    font-weight: var(--fw-sb);
    vertical-align: bottom;
    text-align: center;
    font-size: var(--fs-2xs);
}

/* --- Sana ustuni sarlavhasi (bosilsa dars ochiladi) ---
   Sana yozuvi tugmadan TASHQARIDA, tugma esa butun katakni qoplaydigan
   shaffof qatlam: Chrome chop etishda takrorlanadigan sarlavhada <button>
   ichini chizmaydi, shu bois sana yozuvi tugmaga qo'yilmaydi. */
.jr-col { width: var(--jr-col-w); min-width: var(--jr-col-w); position: relative; padding: 6px 0 5px !important; line-height: 1.15; }
.jr-col form { margin: 0; }
.jr-col__btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.jr-col__btn:hover { background: color-mix(in srgb, var(--royal) 8%, transparent); }
.jr-col:has(.jr-col__btn:hover) .jr-col__d { color: var(--royal); }
.jr-col__btn:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.jr-col__wd { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-md); color: var(--muted); }
.jr-col__d { display: block; margin-top: 3px; font-size: var(--fs-md); font-weight: var(--fw-b); color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.jr-col__m { display: block; font-size: var(--fs-2xs); color: var(--muted); }
/* O'rinbosar o'tgan dars: harf yorlig'i «O'» (rangsiz ham o'qiladi) */
.jr-col__tag {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 12px;
    height: 12px;
    padding: 0 1px;
    border-radius: 2px;
    border: 1px solid var(--tc-rule-ink);
    background: var(--surface);
    font-size: 8.5px;
    font-weight: var(--fw-b);
    line-height: 10px;
    text-align: center;
    color: var(--label);
    pointer-events: none;
}

/* Ustun holatlari — klass ustunning HAR katagiga (th, td, tfoot) qo'yiladi */
.jr-grid .is-month-start { border-left: 1px solid var(--tc-rule-ink); }
.jr-grid th.is-missing { background: var(--red-soft); box-shadow: inset 0 3px 0 var(--red); }
.jr-grid th.is-missing :is(.jr-col__wd, .jr-col__d, .jr-col__m) { color: var(--red-text); }
.jr-grid td.is-missing {
    background:
        repeating-linear-gradient(135deg, var(--tc-hatch) 0 1px, transparent 1px 6px),
        var(--tc-missing-bg);
}
.jr-grid th.is-draft { box-shadow: inset 0 3px 0 var(--amber); }
.jr-grid th.is-future :is(.jr-col__d) { color: var(--muted); font-weight: var(--fw-md); }
.jr-grid td.is-future { background: var(--tc-future-bg); }
.jr-grid th.is-today .jr-col__d {
    display: inline-block;
    min-width: 24px;
    padding: 1px 4px;
    border-radius: var(--tc-r-mark);
    background: var(--royal);
    color: #fff;
}
:root[data-theme="dark"] .tc-body .jr-grid th.is-today .jr-col__d { background: var(--navy-700); }
.jr-grid td.is-today { background: var(--tc-today-bg); }
.jr-grid th.is-sub { background: color-mix(in srgb, var(--muted) 8%, var(--surface-2)); }

/* --- O'quvchi ustuni (chapda yopishqoq) --- */
.jr-grid .jr-grid__name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--jr-name-w);
    min-width: var(--jr-name-w);
    max-width: var(--jr-name-w);
    text-align: left;
    background: var(--surface);
    border-right: 1px solid var(--tc-rule-strong);
    overflow: hidden;
    text-overflow: ellipsis;
}
.jr-grid thead .jr-grid__name { z-index: 5; background: var(--surface-2); padding: 0 var(--sp-3) 8px 0; font-size: var(--fs-sm); color: var(--label); }
.jr-grid tbody .jr-grid__name {
    height: var(--jr-row-h);
    line-height: calc(var(--jr-row-h) - 1px);
    vertical-align: middle;
    padding-right: var(--sp-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-md);
}
.jr-grid tbody .jr-grid__name a { color: var(--text); text-decoration: none; }
.jr-grid tbody .jr-grid__name a:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
.jr-grid__no {
    display: inline-block;
    width: 44px;
    padding-right: var(--sp-3);
    text-align: right;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-md);
    font-variant-numeric: tabular-nums;
    border-right: 3px double var(--tc-margin);
    margin-right: var(--sp-3);
    line-height: calc(var(--jr-row-h) - 1px);
    vertical-align: top;
}
.jr-grid thead .jr-grid__no { line-height: 1.6; border-right-color: transparent; }
.jr-name__short { display: none; }

/* --- Kataklar --- */
.jr-grid .jr-gc {
    height: var(--jr-row-h);
    text-align: center;
    vertical-align: middle;
    padding: 0 2px;
}
.jr-gc > * { vertical-align: middle; }
.jr-gc > * + * { margin-left: 2px; }
.jr-gc .jr-value { min-width: 18px; height: 18px; padding: 0 3px; font-size: var(--fs-sm); }
.jr-grid tbody tr:hover > * { box-shadow: inset 0 0 0 100vmax var(--tc-hover); }
.jr-grid tbody tr:nth-child(5n):not(:last-child) > * { border-bottom-color: var(--tc-rule-ink); }

/* --- Sarlavha maslahat oynasi (hover + klaviatura fokusi; JS'siz) --- */
.jr-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 6;
    width: max-content;
    max-width: 260px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    box-shadow: var(--shadow);
    text-align: left;
    white-space: normal;
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -2px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
    pointer-events: none;
}
.jr-tip b { display: block; color: var(--tc-ink); font-weight: var(--fw-sb); font-size: var(--fs-sm); }
.jr-tip span { display: block; color: var(--muted); }
.jr-tip em { display: block; margin-top: 2px; font-style: normal; color: var(--text); }
.jr-tip .is-err { color: var(--red-text); font-weight: var(--fw-sb); }
.jr-col:hover .jr-tip, .jr-col:focus-within .jr-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* --- Xulosa ustunlari --- */
.jr-grid .jr-sum {
    width: var(--jr-sum-w);
    min-width: var(--jr-sum-w);
    max-width: var(--jr-sum-w);
    padding: 0 var(--sp-3);
    text-align: right;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    background: var(--surface);
}
.jr-grid thead .jr-sum { padding-bottom: 8px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-sb); color: var(--label); white-space: normal; line-height: 1.25; }
.jr-grid .jr-sum--avg { border-left: 2px solid var(--tc-rule-strong); font-weight: var(--fw-b); color: var(--tc-ink); }
.jr-grid .jr-sum.is-low { background: color-mix(in srgb, var(--red) 8%, var(--surface)); color: var(--red-text); font-weight: var(--fw-b); }
.jr-grid .jr-sum.is-low .bi { font-size: var(--fs-base); vertical-align: -2px; margin-right: -2px; }
.jr-grid .jr-sum.is-empty { color: var(--muted); font-weight: var(--fw-md); }
@media (min-width: 1100px) {
    .jr-grid .jr-sum { position: sticky; z-index: 2; }
    .jr-grid thead .jr-sum { z-index: 4; }
    .jr-grid .jr-sum--avg    { right: calc(var(--jr-sum-w) * 3); box-shadow: -6px 0 8px -6px color-mix(in srgb, var(--text) 30%, transparent); }
    .jr-grid .jr-sum--count  { right: calc(var(--jr-sum-w) * 2); }
    .jr-grid .jr-sum--missed { right: var(--jr-sum-w); }
    .jr-grid .jr-sum--att    { right: 0; }
    .jr-grid tbody tr:hover > .jr-sum--avg { box-shadow: inset 0 0 0 100vmax var(--tc-hover), -6px 0 8px -6px color-mix(in srgb, var(--text) 30%, transparent); }
    /* Haftalik to'rda 3 ta xulosa ustuni */
    .jr-grid--week .jr-sum--avg { right: calc(var(--jr-sum-w) * 2); }
    .jr-grid--week .jr-sum--count { right: var(--jr-sum-w); }
    .jr-grid--week .jr-sum--missed { right: 0; }
}

/* --- Pastki qator: dars bo'yicha jami --- */
.jr-grid tfoot :is(th, td) {
    height: 30px;
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.jr-grid tfoot .jr-grid__name { text-align: left; font-weight: var(--fw-sb); color: var(--label); font-size: var(--fs-xs); background: var(--surface-2); }
.jr-grid tfoot .jr-sum { color: var(--tc-ink); font-weight: var(--fw-sb); text-align: right; font-size: var(--fs-sm); background: var(--surface-2); }
.jr-grid tfoot td.is-missing { color: var(--red-text); font-weight: var(--fw-b); }
.jr-grid tfoot td.is-future { color: transparent; }
.jr-grid tfoot .is-nonzero { color: var(--label); font-weight: var(--fw-sb); }

/* --- Haftalik jurnal: keng ustun, dars raqami ko'rinadi --- */
.jr-grid-scroll:has(.jr-grid--week) { --jr-col-w: 104px; --jr-row-h: 34px; max-height: none; }
.jr-grid--week .jr-col { padding: 8px 4px 6px !important; }
.jr-grid--week :is(.jr-col__wd, .jr-col__d) { display: inline-block; margin: 0 2px; }
.jr-grid--week .jr-col__d { font-size: var(--fs-md); }
.jr-grid--week .jr-col__wd { font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--label); }
.jr-grid--week .jr-col__m { display: block; margin-top: 2px; font-size: var(--fs-xs); }
.jr-grid--week .jr-gc .jr-value { min-width: 20px; height: 20px; }
.jr-grid--week .jr-col__tag { top: 4px; right: 4px; }

/* Shartli belgilar izohi (to'r ostida) */
.jr-key {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-3) var(--sp-8);
    padding: var(--sp-4) var(--tc-pad);
    border-top: 1px solid var(--tc-rule);
    background: var(--surface-2);
    border-radius: 0 0 var(--tc-r) var(--tc-r);
}
.jr-key__sw {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1px solid var(--tc-rule-ink);
    border-radius: var(--tc-r-mark);
    background: var(--surface);
}
.jr-key__sw.is-missing { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: repeating-linear-gradient(135deg, var(--tc-hatch) 0 1px, transparent 1px 5px), var(--tc-missing-bg); }
.jr-key__sw.is-draft { box-shadow: inset 0 3px 0 var(--amber); }
.jr-key__sw.is-future { background: var(--tc-future-bg); }
.jr-key__sw.is-today { background: var(--tc-today-bg); border-color: var(--royal); }
.jr-key .jr-col__tag { position: static; display: inline-block; text-align: center; }

/* --- Dars mavzulari / hafta mavzulari jadvali --- */
.jr-topics td { vertical-align: top; }
.jr-topics .tp-dj__no { width: 52px; }
.jr-topic__date { white-space: nowrap; }
.jr-topic__date b { color: var(--tc-ink); font-weight: var(--fw-sb); font-variant-numeric: tabular-nums; }
.jr-topic__date small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.jr-topic__title { min-width: 240px; color: var(--text); white-space: normal; }
.jr-topic__type {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin-left: 6px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--tc-rule-ink);
    border-radius: var(--tc-r-mark);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-sb);
    color: var(--label);
    background: var(--surface-2);
    vertical-align: 1px;
    white-space: nowrap;
}
.jr-topic__none { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-text); font-weight: var(--fw-md); }
.jr-topic__none.is-err { color: var(--red-text); }
.jr-topic__hw { white-space: normal; min-width: 180px; }
.jr-topic__hw small { display: block; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.jr-topics tbody tr.is-missing td { background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.jr-topics tbody tr.is-missing td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.jr-topics tbody tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--royal); }
.jr-topics tbody tr.is-future td { color: var(--muted); }
.jr-topics tbody tr.is-future .jr-topic__date b { color: var(--muted); font-weight: var(--fw-md); }
.jr-topics small.jr-sub { display: block; color: var(--muted); font-size: var(--fs-xs); }

/* --- Eski jurnal to'ri markup'i (journal_grid.html v1) — o'tish davri uchun --- */
.jr-grid__date { min-width: 44px; text-align: center; }
.jr-grid__date a, .jr-grid__date button { text-decoration: none; color: inherit; display: block; padding: 6px 0; }
.jr-grid__date .jr-grid__day { font-size: var(--fs-md); font-weight: var(--fw-b); color: var(--tc-ink); }
.jr-grid__date .jr-grid__mon { color: var(--muted); }
.jr-grid__date.is-planned .jr-grid__day { color: var(--muted); }
.jr-grid__date.is-future { background: var(--tc-future-bg); }
.jr-cellbox { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 30px; }
.jr-grid td.jr-grid__name { padding: 0 var(--sp-3); height: 32px; }
.jr-grid td.jr-grid__name a { color: var(--text); text-decoration: none; }
/* v1: o'rinbosar yuritgan / bekor qilingan ustun (ochilmaydi) */
.jr-grid__locked { display: block; padding: 6px 0; color: var(--muted); cursor: default; }
.jr-grid__change { display: block; padding-bottom: 4px; font-size: 9.5px; font-weight: var(--fw-sb); line-height: 1.1; color: var(--label); }
.jr-grid__change--substitute { color: var(--royal); }
.jr-grid__change--cancelled { color: var(--red-text); }
:root[data-theme="dark"] .tc-body .jr-grid__change--substitute { color: var(--royal-2); }
.jr-grid__date.is-cancelled .jr-grid__day { text-decoration: line-through; color: var(--muted); }
.jr-grid__date:is(.is-cancelled, .is-substitute) { background: color-mix(in srgb, var(--muted) 8%, var(--surface-2)); }
.jr-lesson.is-cancelled .jr-lesson__title { text-decoration: line-through; color: var(--muted); }
.jr-lesson.is-substitute .jr-lesson__title { color: var(--muted); }

/* v2: bekor qilingan dars ustuni — neytral shtrix, sana chizilgan, yorliq «B» */
.jr-grid th.is-cancelled { background: color-mix(in srgb, var(--muted) 8%, var(--surface-2)); }
.jr-grid th.is-cancelled :is(.jr-col__wd, .jr-col__d, .jr-col__m) { color: var(--muted); text-decoration: line-through; }
.jr-grid td.is-cancelled {
    background:
        repeating-linear-gradient(135deg, var(--tc-hatch-n) 0 1px, transparent 1px 6px),
        var(--surface-2);
}
.jr-grid tfoot td.is-cancelled { color: var(--muted); }
/* Ochib bo'lmaydigan ustun (o'rinbosar yozuvi, bekor dars): tugma yo'q, sarlavha fokuslanadi */
.jr-grid th.jr-col:not(:has(.jr-col__btn)) { cursor: default; }
.jr-grid th.jr-col:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
.jr-key__sw.is-cancelled { background: repeating-linear-gradient(135deg, var(--tc-hatch-n) 0 1px, transparent 1px 5px), var(--surface-2); }


/* ---------- 13. Kunlik jurnal, sana paneli, davomat sanog'i -------------- */
/* Kunlik jurnal — o'qituvchining bir sanadagi barcha darslari, jadval.
   Birinchi ustun — daftar hoshiyasi (dars raqami, qo'sh chiziq). */
.tp-dj { min-width: 1040px; }
.tp-dj td, .tp-dj th { vertical-align: top; }
.tp-dj tbody td { padding-top: 12px; padding-bottom: 12px; }
.tp-dj thead th.tp-dj__no, .tp-dj tbody td.tp-dj__no, .jr-topics .tp-dj__no {
    width: 56px;
    padding-left: 0 !important;
    padding-right: 0;
    text-align: center;
    border-right: 3px double var(--tc-margin);
}
.tp-dj tbody td.tp-dj__no, .jr-topics tbody td.tp-dj__no {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.tp-dj__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-dj__time b { display: block; color: var(--tc-ink); font-weight: var(--fw-sb); }
.tp-dj__time span { display: block; color: var(--muted); font-size: var(--fs-sm); }
.tp-dj__lesson { min-width: 170px; }
.tp-dj__lesson b { font-family: var(--font-display); font-weight: var(--fw-b); color: var(--tc-ink); }
.tp-dj__lesson span { display: block; color: var(--text); }
.tp-dj__lesson small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.tp-dj__topic { min-width: 220px; white-space: normal; }
.tp-dj__topic .tp-flag { margin-top: 4px; }
.tp-dj__action { text-align: right; white-space: nowrap; }
.tp-dj__action form { margin: 0; display: inline; }
.tp-dj tbody tr.is-now td { background: var(--tc-today-bg); }
.tp-dj tbody tr.is-now td:first-child { box-shadow: inset 3px 0 0 var(--royal); color: var(--royal); }
.tp-dj tbody tr.is-cancelled :is(.tp-dj__time, .tp-dj__lesson) :is(b, span) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tp-dj tbody tr:is(.is-replaced, .is-moved) :is(.tp-dj__lesson b, .tp-dj__lesson span) { color: var(--muted); }
.tp-dj .tp-none { color: var(--muted); }

/* --- Sana paneli: [‹] [📅 29.09.2026, seshanba] [›] [Bugun] --- */
.tp-datebar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tp-datebar__date { min-width: 210px; justify-content: flex-start; }
.tp-datebar__date input {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 92px;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.tp-datebar__date input:focus { outline: none; }
.tp-stepper__label:focus-within { box-shadow: inset 0 0 0 2px var(--royal); }

/* --- Davomat sanog'i: ⊕26 ⊖1 Ⓚ1 Ⓢ0 (belgi + son) --- */
.tp-tally { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.tp-dj__att { min-width: 196px; }
.tp-dj__att .tp-tally, .tp-lr__facts .tp-tally { flex-wrap: nowrap; }
.tp-tally__i { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--tc-ink); white-space: nowrap; }
.tp-tally__i.is-zero { color: var(--muted); font-weight: var(--fw-md); }
.tp-tally__i.is-zero .jr-mark { opacity: 0.55; }
.tp-tally .jr-mark--present { box-shadow: inset 0 0 0 1px var(--tc-rule-ink); font-size: var(--fs-sm); }


/* ---------- 14. Dars sahifasi (entry.html) va eski jr-* -------------------- */
.jr-roster { display: flex; flex-direction: column; }
.jr-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    padding: 6px var(--tc-pad) 6px 0;
    border-bottom: 1px solid var(--tc-rule);
    min-height: 52px;
}
.jr-row:nth-child(5n):not(:last-child) { border-bottom-color: var(--tc-rule-ink); }
.jr-row:last-child { border-bottom: 0; }
.jr-row:hover { background: var(--tc-hover); }
.jr-row__num {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    border-right: 3px double var(--tc-margin);
}
.jr-row__name { font-weight: var(--fw-md); min-width: 0; color: var(--text); }
.jr-row__name a { color: inherit; text-decoration: none; }
.jr-row__name a:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
.jr-marks, .jr-grades { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.jr-grades { padding-left: var(--sp-3); border-left: 1px solid var(--tc-rule); }

/* Tugma — yashirin radio ustidagi <label> (JS'siz ishlaydi) */
.jr-btn {
    min-width: 40px;
    height: 34px;
    border-radius: var(--tc-r-mark);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    color: var(--label);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-2);
    margin: 0;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    font-variant-numeric: tabular-nums;
}
.jr-btn:hover { border-color: var(--tc-rule-ink); color: var(--tc-ink); }
.jr-btn:disabled { opacity: .5; cursor: not-allowed; }
.jr-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Tanlangan: davomat — ohang foni + ichki ramka (rang + shakl), baho — to'q quyma */
.jr-radio:checked + .jr-btn { background: var(--surface-2); color: var(--tc-ink); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--tc-ink); }
.jr-radio:checked + .jr-btn--present { background: var(--surface-2); color: var(--tc-ink); box-shadow: inset 0 0 0 1.5px var(--tc-ink); }
.jr-radio:checked + .jr-btn--absent  { background: var(--red-soft);   color: var(--red-text);   box-shadow: inset 0 0 0 1.5px var(--red); }
.jr-radio:checked + .jr-btn--late    { background: var(--amber-soft); color: var(--amber-text); box-shadow: inset 0 0 0 1.5px var(--amber); }
.jr-radio:checked + .jr-btn--excused { background: var(--cyan-soft);  color: var(--cyan-text);  box-shadow: inset 0 0 0 1.5px var(--cyan); }
.jr-radio:checked + .jr-btn--grade   { background: var(--tc-sel); color: #fff; box-shadow: none; }
.jr-radio:focus-visible + .jr-btn { outline: 2px solid var(--royal); outline-offset: 1px; }
.jr-radio:disabled + .jr-btn { opacity: .55; cursor: not-allowed; }

.jr-sticky-save {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    background: var(--surface);
    border-top: 1px solid var(--tc-rule-strong);
    padding: var(--sp-3) var(--tc-pad);
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-radius: 0 0 var(--tc-r) var(--tc-r);
}

/* --- Materiallar / ilovalar --- */
.jr-materials { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--tc-rule-strong); border-radius: var(--tc-r-ctl); overflow: hidden; }
.jr-material {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--tc-rule);
    background: var(--surface);
}
.jr-material:first-child { border-top: 0; }
.jr-material__ic {
    width: 32px;
    height: 32px;
    border-radius: var(--tc-r-mark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--tc-rule);
    color: var(--label);
    flex: none;
}
.jr-material__main { flex: 1 1 auto; min-width: 0; }
.jr-material__title { display: block; font-weight: var(--fw-sb); color: var(--tc-ink); overflow-wrap: anywhere; }
.jr-material__meta { display: block; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.jr-material form { margin: 0; }

/* --- Eski kartalar (journal_classes / journal_subjects / classes) --- */
.jr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.jr-card {
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    padding: var(--sp-4);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease);
}
a.jr-card:hover { border-color: var(--tc-rule-ink); background: var(--hover); color: var(--text); }
a.jr-card:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.jr-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-b); color: var(--tc-ink); }
.jr-card__meta { font-size: var(--fs-sm); color: var(--muted); }
.jr-card__foot { margin-top: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); }
.jr-card .chip { pointer-events: none; }

/* --- Eski ro'yxat qatori (entry: uy vazifasi; jurnal telefon ro'yxati) --- */
.jr-lesson {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--tc-pad);
    border-bottom: 1px solid var(--tc-rule);
    color: inherit;
}
.jr-lesson:last-child { border-bottom: 0; }
a.jr-lesson:hover { background: var(--hover); color: inherit; }
.jr-lesson.is-now { background: var(--tc-today-bg); }
.jr-lesson__time { min-width: 56px; font-variant-numeric: tabular-nums; font-weight: var(--fw-sb); font-size: var(--fs-sm); color: var(--tc-ink); line-height: 1.35; }
.jr-lesson__main { flex: 1 1 auto; min-width: 0; }
.jr-lesson__title { font-weight: var(--fw-sb); display: block; color: var(--tc-ink); overflow-wrap: anywhere; }
.jr-lesson__meta { font-size: var(--fs-sm); color: var(--muted); }
.jr-lesson__flags { display: flex; gap: var(--sp-1); flex-wrap: wrap; }


/* ---------- 15. Uy vazifasi ----------------------------------------------- */
/* --- Kun guruhi: chapda «sana muhri», o'ngda vazifalar varag'i --- */
.tp-daygroup { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); }
.tp-daygroup + .tp-daygroup { margin-top: var(--sp-5); }
.tp-daybox {
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    padding: var(--sp-3) var(--sp-3) 0 0;
    border-right: 3px double var(--tc-margin);
    align-self: stretch;
    min-height: 0;
}
.tp-daybox b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-b); line-height: 1; color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.tp-daybox span { margin-top: 4px; font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--label); text-transform: none; letter-spacing: 0; }
.tp-daybox small { color: var(--tc-quiet); font-size: var(--fs-sm); }
.tp-daybox.is-today b, .tp-daybox.is-today span { color: var(--royal); }

/* --- Eski qator (assignments.html, homework_row v1) --- */
.tp-hw {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--tc-pad);
}
.tp-hw + .tp-hw { border-top: 1px solid var(--tc-rule); }
.tp-hw > .tp-ic { box-shadow: inset 3px 0 0 var(--s-edge, transparent); }
.tp-hw--asg { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.tp-dates { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tp-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    border-radius: var(--tc-r-mark);
    padding: 0 8px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    background: var(--tone-bg, var(--surface-2));
    color: var(--tone-fg, var(--label));
    border: 1px solid color-mix(in srgb, var(--tone-fg, var(--label)) 20%, transparent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Uy vazifasi qatori (partials/homework_row.html) ---
   .tp-hw > [.tp-ic fan rangi] [matn ustuni] [.tp-dates] [tahrirlash].
   Fan plitkasi ingichka rangli chetga aylanadi (jadvaldagi kabi). */
.tp-hw:has(> .tp-ic.tp-s0, > .tp-ic.tp-s1, > .tp-ic.tp-s2, > .tp-ic.tp-s3, > .tp-ic.tp-s4, > .tp-ic.tp-s5,
           > .tp-ic.tp-s6, > .tp-ic.tp-s7, > .tp-ic.tp-s8, > .tp-ic.tp-s9, > .tp-ic.tp-s10, > .tp-ic.tp-s11) {
    grid-template-columns: 3px minmax(0, 1fr) auto auto;
    column-gap: var(--sp-4);
    align-items: start;
}
.tp-hw > .tp-ic[class*=" tp-s"] {
    width: 3px;
    height: auto;
    min-height: 40px;
    align-self: stretch;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--s-edge) !important;            /* shablondagi inline fon ustidan */
    color: transparent !important;
    font-size: 0;
}
.tp-hw .tp-row-title { font-size: var(--fs-base); }
.tp-hw .tp-row-title > .tp-badge {
    margin-left: 6px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
    background: var(--surface-2);
    border-color: var(--tc-rule-strong);
    vertical-align: 1px;
}
.tp-hw .tp-row-meta { margin-top: 2px; }
.tp-hw > .tp-dates, .tp-hw > .btn { margin-top: 2px; }

/* Bajarilishi: [Butun sinf] Bajarildi: 18 / 27  Ko'rildi: 22  [====----] */
.hw-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--sp-4);
    margin-top: var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-sm);
}
.hw-progress__target {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--tc-r-mark);
    border: 1px solid var(--tc-rule-strong);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    color: var(--label);
    white-space: nowrap;
}
.hw-progress__target .bi { font-size: 12px; color: var(--muted); }
.hw-progress__target.is-targeted { border-style: dashed; color: var(--tc-ink); }
.hw-progress__done, .hw-progress__seen { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-progress__done { color: var(--text); font-weight: var(--fw-sb); }
.hw-progress__bar { flex: 1 1 120px; max-width: 220px; min-width: 80px; }
.hw-progress-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-progress-cell .hw-progress { margin-top: 0; }

/* O'quvchilar holati — kengaytiriladigan ro'yxat (<details class="hw-status">) */
.hw-status { margin-top: var(--sp-2); }
.hw-status__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    cursor: pointer;
    list-style: none;
    color: var(--royal);
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
}
.hw-status__toggle::-webkit-details-marker { display: none; }
.hw-status__toggle::after {
    content: "\f282";                                   /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 11px;
    transition: transform var(--dur) var(--ease);
}
.hw-status[open] > .hw-status__toggle::after { transform: rotate(180deg); }
.hw-status__toggle:hover { text-decoration: underline; text-underline-offset: 2px; }
.hw-status__toggle:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 2px; }
:root[data-theme="dark"] .tc-body .hw-status__toggle { color: var(--royal-2); }
.hw-status__list {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: var(--sp-1) 0 0;
    border-top: 1px solid var(--tc-rule);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    column-gap: var(--sp-5);
}
.hw-status__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-width: 0;
    min-height: 32px;
    border-bottom: 1px solid var(--tc-rule);
}
.hw-status__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); color: var(--text); }
.hw-status__item--unseen .hw-status__name { color: var(--muted); }
.hw-status__item .tp-badge { height: 20px; padding: 0 6px; }
/* Holat — so'z + ikonka (rang yolg'iz emas) */
.hw-status__item .tp-badge::before { font-family: "bootstrap-icons"; font-weight: normal; font-size: 11px; }
.hw-status__item--done .tp-badge::before   { content: "\f26a"; }   /* bi-check-circle-fill */
.hw-status__item--open .tp-badge::before   { content: "\f341"; }   /* bi-eye — ko'rdi, bajarmagan */
.hw-status__item--unseen .tp-badge::before { content: "\f2e6"; }   /* bi-dash-circle */

/* --- Forma: «Kimga beriladi» (hw-audience, homework_form.js bilan) --- */
.hw-audience__group { border: 0; margin: 0 0 var(--sp-5); padding: 0; min-width: 0; }
.hw-audience__group:last-child { margin-bottom: 0; }
.hw-audience__group[hidden] { display: none; }
.hw-audience__legend { float: none; width: auto; font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--label); margin-bottom: var(--sp-2); padding: 0; }
.hw-audience__targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2); }
/* Radio — butun yorliq bosiladi; tanlangani siyoh ramka */
.hw-audience__target {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--ctl-lg);
    margin: 0;
    padding: 0 var(--sp-4);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    background: var(--surface);
    cursor: pointer;
    font-weight: var(--fw-sb);
    color: var(--tc-ink);
}
.hw-audience__target:hover { border-color: var(--tc-rule-ink); }
.hw-audience__target:has(input:checked) { border-color: var(--tc-ink); box-shadow: inset 0 0 0 1px var(--tc-ink); }
.hw-audience__target input, .hw-checklist__item input { margin: 0; flex: none; width: 16px; height: 16px; accent-color: var(--tc-sel); float: none; }
/* Formadagi haqiqiy vidjetlarda `form-check-input` klassi bor — Bootstrap'ning
   `.form-check .form-check-input { float:left; margin-left:-1.5em }` qoidasi
   kuchliroq bo'lib, belgini ramkadan tashqariga surardi */
.hw-audience__target .form-check-input, .hw-checklist__item .form-check-input { margin: 0; float: none; }
.hw-audience__target .form-check-label, .hw-checklist__item .form-check-label { cursor: pointer; }
.hw-audience__target input:focus-visible, .hw-checklist__item input:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.hw-audience__empty { margin: 0; padding: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.hw-audience__empty[hidden] { display: none; }
/* Ixtiyoriy qidiruv qatori (shablonga qo'shiladi, README §6.6) */
.hw-audience__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--tc-rule-strong);
    border-bottom: 0;
    border-radius: var(--tc-r-ctl) var(--tc-r-ctl) 0 0;
}
.hw-audience__tools .tp-search { flex: 1 1 220px; }
.hw-audience__count { font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--label); white-space: nowrap; }

/* O'quvchilar ro'yxati — ingichka chiziqli varaq, ikki-uch ustun */
.hw-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    padding: var(--sp-1) 0;
    background: var(--surface);
    align-content: start;
}
.hw-audience__tools + .hw-checklist { border-radius: 0 0 var(--tc-r-ctl) var(--tc-r-ctl); }
.hw-checklist__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    margin: 0;
    padding: 0 var(--sp-3);
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--fs-md);
    color: var(--text);
    cursor: pointer;
}
.hw-checklist__item[hidden] { display: none; }
.hw-checklist__item:hover { background: var(--hover); }
.hw-checklist__item:has(input:checked) { background: color-mix(in srgb, var(--royal) 6%, var(--surface)); color: var(--tc-ink); font-weight: var(--fw-sb); }
/* Boshqa sinflar — chip ko'rinishida (sinf nomi yetarli) */
.hw-checklist--inline {
    grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
    gap: var(--sp-2);
    max-height: none;
    border: 0;
    padding: 0;
    background: none;
}
.hw-checklist--inline .hw-checklist__item {
    min-height: var(--ctl);
    padding: 0 var(--sp-3);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r-ctl);
    background: var(--surface);
    font-family: var(--font-display);
    font-weight: var(--fw-b);
    color: var(--tc-ink);
}
.hw-checklist--inline .hw-checklist__item:has(input:checked) { border-color: var(--tc-ink); box-shadow: inset 0 0 0 1px var(--tc-ink); background: var(--surface); }

/* --- Forma maketi (ixtiyoriy): asosiy ustun + «Xulosa» yon panel --- */
.tp-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.tp-form__main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.tp-form__main > .card + .card, .tp-form__main > .card.mt-3 { margin-top: 0 !important; }
.tp-section-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--tc-rule-ink);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    color: var(--label);
    font-variant-numeric: tabular-nums;
    flex: none;
}
/* Darsdan berilgan vazifa rekvizitlari (alert-info o'rniga) */
.tp-fixed {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--tc-rule);
    border-radius: var(--tc-r-ctl);
    background: var(--surface-2);
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-4);
}
.tp-fixed > div { display: inline-flex; gap: 6px; }
.tp-fixed dt { color: var(--muted); font-weight: var(--fw-md); }
.tp-fixed dt::after { content: ":"; }
.tp-fixed dd { margin: 0; color: var(--tc-ink); font-weight: var(--fw-sb); }

/* Fayl tashlash maydoni */
.tp-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px dashed var(--tc-rule-ink);
    border-radius: var(--tc-r-ctl);
    background: var(--surface-2);
    color: var(--label);
    font-size: var(--fs-md);
}
.tp-drop > .bi { font-size: 20px; color: var(--muted); }
.tp-drop b { color: var(--tc-ink); font-weight: var(--fw-sb); }
.tp-drop small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.tp-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tp-drop:focus-within { outline: 2px solid var(--royal); outline-offset: 2px; }
.tp-drop + .jr-materials { margin-top: var(--sp-3); }

/* Formaning pastki yopishqoq amallar qatori */
.tp-formbar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--tc-pad);
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
}
.tp-formbar__note { margin-right: auto; font-size: var(--fs-sm); color: var(--muted); }
.tp-formbar__note b { color: var(--tc-ink); }


/* ---------- 16. Boshqa sahifalar ------------------------------------------ */
/* --- Kartochkali to'r (sinflar, to'garaklar) --- */
.tp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.tp-cards--sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
a.tp-card:hover { border-color: var(--tc-rule-ink); }
.tp-class { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--tc-pad); }
.tp-class__top { display: flex; align-items: flex-start; gap: var(--sp-4); }
.tp-class__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-b); color: var(--tc-ink); margin: 0; }
.tp-class__lead { color: var(--muted); font-size: var(--fs-md); }
.tp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--tc-rule);
    border: 1px solid var(--tc-rule);
    border-radius: var(--tc-r-ctl);
    overflow: hidden;
}
.tp-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    min-width: 0;
}
.tp-stat .bi { color: var(--muted); font-size: 13px; }
.tp-stat > span { display: contents; }
.tp-stat b { font-family: var(--font-display); color: var(--tc-ink); font-size: var(--fs-lg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-stat small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.tp-btnrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.tp-btnrow .btn { min-height: var(--ctl); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: var(--fw-sb); font-size: var(--fs-md); border-radius: var(--tc-r-ctl); }

/* --- Tezkor havolalar: plitkalar o'rniga ixcham ro'yxat --- */
.tp-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
.tp-quick a, .tp-quick button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    min-height: 42px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--tc-rule);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    text-align: left;
    font-size: var(--fs-md);
    font-weight: var(--fw-md);
    line-height: 1.25;
    font-family: inherit;
    transform: none;
}
.tp-quick a:hover, .tp-quick button:hover { color: var(--royal); border-color: var(--tc-rule); transform: none; }
.tp-quick .bi { font-size: 15px; color: var(--muted); width: 18px; text-align: center; flex: none; }
.tp-quick a:hover .bi { color: var(--royal); }

/* --- Umumiy tartib yordamchilari --- */
.tp-grid { display: grid; gap: var(--sp-5); }
.tp-grid--main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.tp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-grid--docs { grid-template-columns: minmax(0, 1fr) 340px; }
.tp-side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.tp-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.tp-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tp-muted { color: var(--muted); }
.tp-ink { color: var(--tc-ink); }
.tp-mb { margin-bottom: var(--sp-5); }
.tp-mt { margin-top: var(--sp-5); }
.tp-sep { height: 1px; background: var(--tc-rule); margin: var(--sp-4) 0; border: 0; }
.tp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--tc-pad);
    border-top: 1px solid var(--tc-rule);
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* --- Tafsilot paneli (KTP, hujjat) --- */
.tp-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px var(--sp-4); margin: 0; font-size: var(--fs-md); }
.tp-detail dt { color: var(--muted); font-weight: var(--fw-md); display: flex; gap: 6px; align-items: center; }
.tp-detail dd { margin: 0; color: var(--tc-ink); font-weight: var(--fw-sb); overflow-wrap: anywhere; }
.tp-note { background: var(--surface-2); border: 1px solid var(--tc-rule); border-radius: var(--tc-r-ctl); padding: var(--sp-3); font-size: var(--fs-md); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.tp-h { font-size: var(--fs-md); font-weight: var(--fw-b); color: var(--tc-ink); margin: var(--sp-4) 0 var(--sp-2); }
.tp-preview { border-radius: var(--tc-r-ctl); border: 1px solid var(--tc-rule); background: var(--surface-2); overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.tp-preview iframe, .tp-preview img { width: 100%; height: 100%; border: 0; object-fit: contain; background: #fff; }
.tp-preview .bi { font-size: 56px; color: var(--muted); }

/* Fayl turi — neytral plitka (turi kengaytma va ikonka shaklidan o'qiladi) */
.tp-file {
    width: 32px;
    height: 32px;
    border-radius: var(--tc-r-mark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
    background: var(--surface-2);
    border: 1px solid var(--tc-rule);
    color: var(--label);
}
/* Turi modifikatorlari (messages/documents: tp-file--{{ kind }}) ataylab neytral */
.tp-file--pdf, .tp-file--word, .tp-file--excel, .tp-file--slides, .tp-file--image, .tp-file--text { background: var(--surface-2); color: var(--label); }

/* --- Yozishmalar (chat) --- */
.tp-chat { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - 230px); min-height: 520px; overflow: hidden; }
.tp-chat__list { border-right: 1px solid var(--tc-rule-strong); display: flex; flex-direction: column; min-height: 0; }
.tp-chat__threads { overflow-y: auto; flex: 1 1 auto; }
.tp-thread {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--tc-rule);
    color: inherit;
    text-decoration: none;
    align-items: start;
}
.tp-thread:hover { background: var(--hover); color: inherit; }
.tp-thread.is-active { background: color-mix(in srgb, var(--royal) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--royal); }
.tp-thread__name { font-weight: var(--fw-sb); color: var(--tc-ink); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tp-thread__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.tp-thread__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-chat__pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tp-chat__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--tc-rule-strong); }
.tp-chat__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg); }
.tp-chat__day { align-self: center; font-size: var(--fs-xs); color: var(--muted); background: var(--surface); border: 1px solid var(--tc-rule-strong); border-radius: var(--tc-r-mark); padding: 2px 10px; font-variant-numeric: tabular-nums; }
.tp-msg {
    max-width: min(560px, 80%);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--tc-r) var(--tc-r) var(--tc-r) var(--tc-r-mark);
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    color: var(--text);
    overflow-wrap: anywhere;
    font-size: var(--fs-base);
    line-height: 1.45;
}
.tp-msg__text { white-space: pre-line; }
.tp-msg--out { align-self: flex-end; background: var(--royal-soft); border-color: color-mix(in srgb, var(--royal) 22%, transparent); border-radius: var(--tc-r) var(--tc-r) var(--tc-r-mark) var(--tc-r); }
.tp-msg__time { display: block; text-align: right; font-size: var(--fs-2xs); color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tp-msg__file { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--tc-r-mark); background: var(--surface-2); border: 1px solid var(--tc-rule); color: inherit; text-decoration: none; white-space: normal; }
.tp-msg__file img { max-width: 220px; max-height: 180px; border-radius: var(--tc-r-mark); display: block; }
.tp-chat__composer { display: flex; gap: var(--sp-2); align-items: flex-end; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--tc-rule-strong); background: var(--surface); }
.tp-chat__composer textarea { resize: none; min-height: var(--ctl-lg); max-height: 160px; border-radius: var(--tc-r-ctl); }
.tp-chat__composer .btn { min-width: var(--ctl-lg); min-height: var(--ctl-lg); border-radius: var(--tc-r-ctl); display: inline-flex; align-items: center; justify-content: center; }
.tp-chat__attach { position: relative; overflow: hidden; }
.tp-chat__attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tp-chat__filename { font-size: var(--fs-xs); color: var(--muted); padding: 0 var(--sp-4) var(--sp-2); background: var(--surface); }

/* --- Sozlamalar --- */
.tp-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--tc-rule); }
.tp-setting > :last-child { flex: none; flex-wrap: nowrap; }
.tp-setting:first-child { border-top: 0; }
.tp-setting__text b { display: block; color: var(--tc-ink); font-weight: var(--fw-sb); }
.tp-setting__text small { color: var(--muted); }

/* --- ESKI «Salom» banneri (dashboard/classes v1): illyustratsiya va iqtibos
       yashiriladi, blok oddiy sarlavhaga aylanadi. Shablonlar standart
       `.tp-head` ga o'tkazilgach bu blok o'chiriladi. --- */
.tp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    margin: 0 0 var(--sp-5);
    padding: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--tc-rule-ink);
    background: none;
    border-radius: 0;
}
.tp-hero__art, .tp-hero__quote { display: none !important; }
.tp-hero__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-b); color: var(--tc-ink); margin: 0; letter-spacing: -0.015em; line-height: var(--lh-tight); }
.tp-hero__sub { color: var(--tc-quiet); margin: var(--sp-1) 0 0; }
.tp-hero__date { line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums; }
.tp-hero__date small { display: inline; color: var(--tc-quiet); font-size: var(--fs-md); }
.tp-hero__date b { display: inline; font-size: var(--fs-md); color: var(--tc-ink); margin: 0 6px; }


/* ---------- 17. Mentor kabineti va kirish sahifasi ------------------------ */
.mc-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--tc-rule);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    overflow: hidden;
}
.mc-kpi {
    flex: 1 1 150px;
    background: var(--surface);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    color: var(--muted);
    font-size: var(--fs-sm);
    min-width: 0;
}
.mc-kpi__num { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-b); color: var(--tc-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mc-kpi.is-bad { background: color-mix(in srgb, var(--red-soft) 65%, var(--surface)); }
.mc-kpi.is-bad .mc-kpi__num { color: var(--red-text); }

.mc-slots { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--tc-rule-strong); border-radius: var(--tc-r); overflow: hidden; background: var(--surface); }
.mc-slot {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
    border-top: 1px solid var(--tc-rule);
    background: var(--surface);
    position: relative;
}
.mc-slot:first-child { border-top: 0; }
.mc-slot--now { background: var(--tc-today-bg); box-shadow: inset 3px 0 0 var(--royal); }
.mc-slot--past:not(.is-done) { box-shadow: inset 3px 0 0 var(--red); }
.mc-slot.is-done { box-shadow: inset 3px 0 0 var(--emerald); }
.mc-slot__num {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: var(--fw-b);
    font-variant-numeric: tabular-nums;
    border-right: 3px double var(--tc-margin);
}
.mc-slot__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-slot__title { font-weight: var(--fw-sb); color: var(--tc-ink); overflow-wrap: anywhere; }
.mc-slot__meta { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mc-slot__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.mc-slot__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.mc-slot__side .btn { min-height: var(--ctl-lg); display: inline-flex; align-items: center; }
.mc-row { grid-template-columns: 40px minmax(0, 1fr) auto minmax(120px, 200px); }
.mc-comment { min-width: 0; }

.tc-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    background: var(--bg);
}
.tc-auth__sheet {
    background: var(--surface);
    border: 1px solid var(--tc-rule-strong);
    border-radius: var(--tc-r);
    padding: var(--sp-8);
    width: min(440px, 100%);
    box-shadow: var(--shadow-sm);
}


/* ---------- 18. Moslashuvchanlik ------------------------------------------ */
@media screen and (max-width: 1399.98px) {
    .tp-grid--main, .tp-grid--docs { grid-template-columns: minmax(0, 1fr) 300px; }
    .tp-form { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media screen and (max-width: 1199.98px) {
    /* Yon menyu — chiqib keladigan drawer */
    .tc-side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease-out);
        box-shadow: var(--shadow-lg);
        width: min(300px, 86vw);
    }
    .tc-body.is-drawer-open .tc-side { transform: none; }
    .tc-body.is-drawer-open .tc-scrim { display: block; }
    .tc-link { min-height: var(--ctl-lg); }
    .tc-menu-btn { display: inline-flex; }
    .tc-top { padding: 0 var(--sp-5); gap: var(--sp-2); }
    .tc-main { padding: var(--sp-5) var(--sp-5) calc(var(--sp-8) + 64px); }
    .tc-tabs { display: grid; }

    .tp-grid--main, .tp-grid--3, .tp-grid--docs, .tp-form { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 991.98px) {
    .tp-head { align-items: flex-start; }
    .tp-head > .tp-actions { width: 100%; }
    .tp-chat { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .tp-chat.has-thread .tp-chat__list { display: none; }
    .tp-chat:not(.has-thread) .tp-chat__pane { display: none; }
    .tp-chat__body { min-height: 55vh; max-height: 65vh; }

    /* Kunlik jurnal: jadval -> kartalar (har katak o'z yorlig'i bilan) */
    .tp-dj { min-width: 0; }
    .tp-dj thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .tp-dj, .tp-dj tbody { display: block; }
    .tp-dj tbody tr {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas:
            "no time   state"
            "no lesson lesson"
            "no topic  topic"
            "no att    att"
            "no grades hw"
            "no action action";
        column-gap: var(--sp-3);
        border-bottom: 1px solid var(--tc-rule-strong);
        position: relative;
    }
    .tp-dj tbody tr:last-child { border-bottom: 0; }
    .tp-dj tbody td { display: block; height: auto; border: 0; padding: 4px 0 !important; min-width: 0; }
    .tp-dj tbody td.tp-dj__no { grid-area: no; padding-top: 12px !important; border-right: 3px double var(--tc-margin); }
    .tp-dj tbody td.tp-dj__time { grid-area: time; padding-top: 12px !important; display: flex; gap: 6px; align-items: baseline; }
    .tp-dj tbody td.tp-dj__time span { font-size: var(--fs-sm); }
    .tp-dj tbody td.tp-dj__time span::before { content: "– "; }
    .tp-dj tbody td.tp-dj__lesson { grid-area: lesson; }
    .tp-dj tbody td.tp-dj__topic { grid-area: topic; min-width: 0; }
    .tp-dj tbody td.tp-dj__att { grid-area: att; }
    .tp-dj tbody td.tp-dj__grades { grid-area: grades; text-align: left; }
    .tp-dj tbody td.tp-dj__hw { grid-area: hw; text-align: right; padding-right: var(--sp-4) !important; }
    .tp-dj tbody td.tp-dj__state { grid-area: state; padding-top: 12px !important; padding-right: var(--sp-4) !important; text-align: right; }
    .tp-dj tbody td.tp-dj__action { grid-area: action; text-align: left; padding: 6px var(--sp-4) 14px 0 !important; }
    .tp-dj tbody td.tp-dj__action .btn { width: 100%; justify-content: center; min-height: var(--ctl-lg); }
    .tp-dj tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: var(--fw-md);
        margin-bottom: 2px;
    }
    .tp-dj tbody td.tp-dj__grades[data-label]::before, .tp-dj tbody td.tp-dj__hw[data-label]::before { display: inline; margin-right: 6px; }
    .tp-dj tbody td:empty { display: none; }
    .tp-dj tbody tr.is-now { background: var(--tc-today-bg); box-shadow: inset 3px 0 0 var(--royal); }
    .tp-dj tbody tr.is-now td { background: transparent; box-shadow: none !important; }
    .tp-dj tbody tr:hover td { background: transparent; }
}

@media screen and (max-width: 767.98px) {
    .tc-me__text, .tc-me .tc-pill__caret { display: none; }
    .tc-hide-sm, .tp-hide-sm { display: none !important; }
    .tc-top { min-height: 56px; padding: 0 var(--sp-3); }
    .tc-main { padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + 64px); }
    .tc-body { --tc-pad: var(--sp-4); }

    .tp-title, .tp-hero__title { font-size: var(--fs-xl); }
    .tp-head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); }
    .tp-head__meta { gap: 0 var(--sp-4); font-size: var(--fs-sm); }
    /* Ikkinchi darajali tugmalar — faqat ikonka (yozuv skrinrider uchun qoladi);
       asosiy (btn-primary) tugma yozuvi bilan qoladi va qatorni to'ldiradi */
    .tp-actions .btn:not(.btn-primary) .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tp-actions .btn:not(.btn-primary):has(.btn-label) { padding: 0; width: var(--ctl-lg); justify-content: center; }
    .tp-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
    .tp-actions .btn, .tp-actions .form-select, .tp-stepper, .tp-seg a { min-height: var(--ctl-lg); height: auto; }
    .tp-stepper { height: var(--ctl-lg); }
    .tp-stepper__btn { width: var(--ctl-lg); }
    .tp-print__mode { display: none; }

    .tp-kpis > .tp-kpi { flex-basis: calc(50% - 1px); padding: var(--sp-3) var(--sp-4); }
    /* Ish sahifalarida (jurnal, jadval) raqamlar qatori bitta gorizontal
       lenta bo'ladi — asosiy jadval birinchi ekranga sig'adi */
    .tp-kpis--row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
    .tp-kpis--row::-webkit-scrollbar { display: none; }
    .tp-kpis--row > .tp-kpi { flex: 0 0 40%; scroll-snap-align: start; }
    .tp-kpis--row .tp-kpi__hint { display: none; }

    /* Kunlik jurnal sarlavhasi: segment + chop etish bir qatorda, sana paneli to'liq kenglikda */
    .tp-actions > .tp-datebar { order: 5; width: 100%; flex-wrap: nowrap; }
    .tp-datebar .tp-stepper { flex: 1 1 auto; min-width: 0; }
    .tp-datebar__date { flex: 1 1 auto; min-width: 0; justify-content: center; }
    .tp-kpi__label { white-space: normal; line-height: 1.3; }
    .tp-kpi__value { font-size: var(--fs-lg); }
    .tp-kpi__hint { white-space: normal; }

    .tp-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .tp-quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tp-field--wide { grid-column: auto; }
    .tp-field .form-select, .tp-field .form-control, .tp-search .form-control { min-height: var(--ctl-lg); }
    .tp-filters { padding: var(--sp-3); }

    /* Daftar qatori: raqam | vaqt / mazmun / amal */
    .tp-lr {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas: "no time" "no main" "no side";
        column-gap: var(--sp-3);
    }
    .tp-lr__no { grid-row: 1 / span 3; padding-top: 11px; font-size: var(--fs-base); }
    .tp-lr__time { padding: var(--sp-3) var(--tc-pad) 0 0; display: flex; gap: 6px; align-items: baseline; }
    .tp-lr__time span::before { content: "– "; }
    .tp-lr__main { padding: 2px var(--tc-pad) 0 0; }
    .tp-lr__side { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--tc-pad) var(--sp-3) 0; }
    .tp-lr__side .btn { flex: 1 1 auto; justify-content: center; min-height: var(--ctl-lg); }
    .tp-lr__side form { flex: 1 1 auto; display: flex; }
    .tp-lr__side:empty { display: none; }
    .tp-attn__item { grid-template-columns: 20px minmax(0, 1fr); }
    .tp-attn__item .btn, .tp-attn__item > form { grid-column: 2; justify-self: start; }

    .tp-tl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time side" "main main"; row-gap: 4px; }
    .tp-tl__time { grid-area: time; }
    .tp-tl > .u-truncate { grid-area: main; }
    .tp-tl > form { grid-area: side; }

    .jr-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--sp-2); padding-right: var(--sp-4); }
    .jr-row__num { grid-row: 1 / span 3; }
    .jr-marks, .jr-grades { grid-column: 2; }
    .jr-grades { padding-left: 0; border-left: 0; }
    .jr-btn { min-width: 44px; height: var(--ctl-lg); }

    .jr-grid-scroll { --jr-name-w: 156px; --jr-col-w: 40px; --jr-sum-w: 64px; max-height: 70vh; }
    .jr-grid-scroll:has(.jr-grid--week) { --jr-col-w: 76px; }
    .jr-name__full { display: none; }
    .jr-name__short { display: inline; }
    .jr-grid__no { width: 30px; padding-right: var(--sp-2); margin-right: var(--sp-2); }
    .jr-grid tbody .jr-grid__name { font-size: var(--fs-sm); }
    .jr-key { gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) var(--tc-pad); }

    .tp-daygroup { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .tp-daybox { flex-direction: row; align-items: baseline; gap: var(--sp-2); padding: 0; border-right: 0; text-align: left; }
    .tp-daybox b { font-size: var(--fs-xl); }
    .tp-hw { grid-template-columns: auto minmax(0, 1fr); }
    .tp-hw > :nth-child(3), .tp-hw > :nth-child(4) { grid-column: 2; }
    .tp-hw--asg { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tp-hw--asg > :nth-child(3) { grid-column: 2 / -1; }
    .tp-hw--asg > :nth-child(4) { grid-column: 2; }

    /* Uy vazifasi qatori: sana chiplari va tahrirlash matn ostiga tushadi */
    .tp-hw:has(> .tp-ic[class*=" tp-s"]) { grid-template-columns: 3px minmax(0, 1fr) auto; }
    .tp-hw:has(> .tp-ic[class*=" tp-s"]) > .tp-dates { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
    .tp-hw:has(> .tp-ic[class*=" tp-s"]) > .btn { grid-column: 3; grid-row: 1; }
    .hw-status__list { grid-template-columns: minmax(0, 1fr); }
    .hw-checklist__item { min-height: var(--ctl-lg); }
    .hw-audience__targets { grid-template-columns: minmax(0, 1fr); }
    .tp-form { grid-template-columns: minmax(0, 1fr); }
    .tp-formbar { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); border-radius: 0; border-left: 0; border-right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); }
    .tp-formbar__note { flex: 1 1 100%; }
    .tp-formbar .btn { flex: 1 1 auto; justify-content: center; min-height: var(--ctl-lg); }

    .tp-card__head, .tp-card__body, .tp-item, .tp-foot { padding-left: var(--tc-pad); padding-right: var(--tc-pad); }
    .tp-cal__day--lg { height: 54px; padding: 4px 5px; }

    /* Jadval -> kartalar (umumiy): <table class="tp-table tp-table--cards">,
       har <td data-label="…">. Birinchi katak — qator sarlavhasi. */
    .tp-table--cards, .tp-table--cards tbody { display: block; }
    .tp-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .tp-table--cards tbody tr {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        column-gap: var(--sp-3);
        padding: var(--sp-3) var(--tc-pad);
        border-bottom: 1px solid var(--tc-rule);
    }
    .tp-table--cards tbody tr:last-child { border-bottom: 0; }
    .tp-table--cards tbody td { display: block; height: auto; padding: 2px 0 !important; border: 0; grid-column: 2; min-width: 0 !important; }
    .tp-table--cards tbody td:first-child { grid-column: 1; grid-row: 1 / span 6; padding-top: 0 !important; }
    .tp-table--cards tbody td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--fs-sm); }
    .tp-table--cards tbody td[data-label] > .tp-row-meta { display: inline; margin-left: 4px; }
    .tp-table--cards tbody td[data-label] > b { display: inline; }
    .tp-table--cards tbody td .hw-progress { margin-top: 4px; }
    .tp-cal__day--lg small { font-size: 9.5px; }
}

@media screen and (max-width: 575.98px) {
    .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-cards { grid-template-columns: minmax(0, 1fr); }
    .tp-btnrow { grid-template-columns: minmax(0, 1fr); }
    .mc-slot { grid-template-columns: 36px minmax(0, 1fr); }
    .mc-slot__side { grid-column: 2; justify-content: flex-start; padding-bottom: var(--sp-2); }
    .mc-row { grid-template-columns: 32px minmax(0, 1fr); }
    .mc-row .mc-comment { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-side, .tc-dd.is-open .tc-dd__panel, .jr-tip, .hw-status__toggle::after, .tc-link, .tc-pill { transition: none; animation: none; }
}


/* ---------- 19. Chop etish --------------------------------------------------
   A4 albom. Ikki rejim:
     * Rangli  — ekrandagi ma'no-ranglar saqlanadi (baholar, belgilar, shtrix).
     * Oq-qora — `<html class="tc-print-bw">` (chop etish tugmasi qo'yadi):
       barcha fon/rang olinadi; belgi — doira + harf, baho — kvadrat + raqam,
       «2» qalin, nazorat ishi qo'sh ramka, ochilmagan dars — kulrang shtrix.
   Qog'oz temaga bog'liq emas: qora/kulrang literal qiymatlar ataylab. */
@media print {
    @page { size: A4 landscape; margin: 10mm 9mm; }

    :root, :root[data-theme="dark"] {
        /* Qorong'i temada ham qog'oz oq — tokenlarni yorug' qiymatlarga qaytaramiz */
        --bg: #fff; --surface: #fff; --surface-2: #f4f4f4; --hover: transparent;
        --text: #000; --muted: #444; --heading: #000; --label: #222;
        --border: #8a8a8a; --border-2: #b5b5b5;
        --royal: #1f4fd6; --royal-2: #1f4fd6; --royal-soft: #e8eefc;
        --emerald-text: #0a6b3f; --emerald-soft: #e3f4ea;
        --amber-text: #7d5300; --amber-soft: #fbf0d9;
        --red-text: #a61b1b; --red-soft: #fbe6e6;
        --cyan-text: #0b5d73; --cyan-soft: #e1f2f6;
    }
    .tc-body {
        --tc-ink: #000; --tc-quiet: #333;
        --tc-rule: #b5b5b5; --tc-rule-strong: #6f6f6f; --tc-rule-ink: #000;
        --tc-margin: #000; --tc-today-bg: #fff; --tc-hover: transparent;
        --tc-future-bg: #fff;
        background: #fff !important;
        color: #000;
        font-size: 9pt;
    }
    .tc-body * { box-shadow: none !important; text-shadow: none !important; }
    body, .tc-shell, .tc-col, .tc-main { background: #fff !important; }

    .tc-side, .tc-top, .tc-tabs, .tc-scrim, .impersonate-bar, .skip-link, .messages,
    .tp-actions, .tp-filters, .tp-no-print, .tp-tabs, .tp-seg, .tp-stepper, .tp-datebar,
    .tp-print, .jr-tip, .tp-formbar, .tp-back, .tc-dd__panel, .jr-sticky-save,
    .tp-card__head .btn, .tp-hw > .btn, .hw-status__toggle, .tp-lr__side .btn, .tp-dj__action { display: none !important; }
    .tc-main { padding: 0 !important; max-width: none; }
    .tp-print-only { display: block !important; }

    /* Hujjat sarlavhasi va imzo qatori */
    .tp-print-head { display: block !important; margin: 0 0 3mm; padding-bottom: 2mm; border-bottom: 1.5pt solid #000; break-inside: avoid; }
    .tp-print-head__org { font-size: 8pt; color: #000; display: flex; justify-content: space-between; gap: 6mm; }
    .tp-print-head__title { margin: 1mm 0 0; font-family: var(--font-display); font-size: 14pt; font-weight: 700; color: #000; }
    .tp-print-head__meta { display: flex; flex-wrap: wrap; gap: 0 7mm; margin: 1mm 0 0; font-size: 8.5pt; }
    .tp-print-head__meta > div { display: inline-flex; gap: 1.5mm; }
    .tp-print-head__meta dt { font-weight: 400; }
    .tp-print-head__meta dt::after { content: ":"; }
    .tp-print-head__meta dd { margin: 0; font-weight: 700; }
    .tp-head { display: none !important; }
    .tp-print-sign {
        display: flex !important;
        gap: 12mm;
        margin-top: 8mm;
        font-size: 8.5pt;
        color: #000;
        break-inside: avoid;
    }
    .tp-print-sign span { flex: 1; border-top: 0.75pt solid #000; padding-top: 1mm; }

    /* Varaqlar: ramka ingichka, radius yo'q */
    .tp-card, .card, .dg-card, .tp-kpis, .jr-key, .tp-table-wrap { border-radius: 0 !important; }
    .tp-card, .card, .dg-card { border-color: #6f6f6f !important; break-inside: auto; }
    .tp-card__head { min-height: 0; padding: 1.5mm 2.5mm; border-bottom-color: #000; }
    .tp-card__title { font-size: 10.5pt; }
    .tp-kpis { margin-bottom: 3mm; border-color: #000; background: #8a8a8a; break-inside: avoid; }
    .tp-kpi { padding: 1.5mm 3mm; background: #fff !important; }
    .tp-kpi__value { font-size: 11pt; color: #000 !important; }
    .tp-kpi__label, .tp-kpi__hint { font-size: 7pt; color: #000 !important; }
    .tp-table-wrap, .jr-grid-scroll { overflow: visible !important; max-height: none !important; background: none !important; }

    /* Jurnal to'ri */
    .jr-grid-scroll { --jr-name-w: 56mm; --jr-col-w: 6.2mm; --jr-sum-w: 14mm; --jr-row-h: 5.4mm; }
    .jr-grid-scroll:has(.jr-grid--week) { --jr-col-w: 24mm; --jr-row-h: 6.2mm; }
    .jr-grid { width: 100%; font-size: 7.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .jr-grid :is(th, td) { position: static !important; color: #000; border-color: #9a9a9a; }
    .jr-grid th.jr-col { position: relative !important; }
    .jr-grid .jr-col__tag { position: static; display: block; width: max-content; margin: 0.5mm auto 0; }   /* tor ustunda oy ostida */
    .jr-grid tfoot :is(th, td), .jr-grid tfoot .jr-sum { font-size: 7pt; height: 5mm; }
    .tp-table tbody td.tp-dj__no, .jr-topics tbody td.tp-dj__no { font-size: 9pt; }
    .jr-key .is-print-hidden { display: none !important; }
    /* Shakl belgilari soyasiz qoladi — ramka bilan qaytariladi */
    .tc-body :is(.jr-value--exam, .tp-grade--exam) { box-shadow: inset 0 0 0 1.2pt currentColor !important; }
    .tc-body :is(.jr-mark--absent, .jr-mark--late, .jr-mark--excused, .tp-att--absent, .tp-att--late, .tp-att--excused) { box-shadow: inset 0 0 0 0.6pt currentColor !important; }
    .jr-grid thead th { background: #fff !important; border-bottom-color: #000; }
    .jr-grid :is(th, td).is-future { display: none; }
    .jr-grid .jr-grid__name { border-right-color: #000; font-size: 7.5pt !important; }
    .jr-grid__no { width: 7mm; padding-right: 1.5mm; margin-right: 1.5mm; line-height: 5.2mm; }
    .jr-grid .jr-col { padding: 0.8mm 0 !important; }
    .jr-grid :is(.jr-col__btn, .jr-col form) { display: none !important; }
    .jr-grid tfoot { display: table-row-group; }            /* jami qatorlar faqat oxirida, har sahifada emas */
    .jr-grid .jr-col__d { font-size: 8pt; }
    .jr-grid :is(.jr-col__wd, .jr-col__d, .jr-col__m) { color: #000 !important; }
    .jr-grid th.is-today .jr-col__d { background: none; color: #000; padding: 0; }
    .jr-grid thead .jr-sum { font-size: 6.5pt; padding-bottom: 1mm; }
    .jr-grid .jr-sum { font-size: 7.5pt; padding: 0 1.5mm; }
    .jr-grid .jr-sum--avg { border-left-color: #000; }
    .jr-grid tbody tr:nth-child(5n):not(:last-child) > * { border-bottom-color: #000; }
    .jr-key { background: #fff !important; padding: 2mm 0; gap: 1mm 6mm; border-top: 0; font-size: 7pt; }
    .jr-key .tp-legend__group dt, .jr-key .tp-legend__group dd { color: #000; font-size: 7pt; }
    .jr-gc .jr-value, .jr-gc .jr-mark { width: auto; min-width: 3.4mm; height: 3.4mm; font-size: 7pt; padding: 0 0.6mm; }
    .jr-grid--week .jr-gc .jr-value, .jr-grid--week .jr-gc .jr-mark { min-width: 4.2mm; height: 4.2mm; font-size: 8pt; }

    .tp-table { font-size: 8pt; }
    .tp-table thead th { position: static; background: #fff !important; color: #000; border-bottom: 1pt solid #000; padding: 1mm 1.5mm; }
    .tp-table tbody td { height: auto; padding: 1mm 1.5mm; color: #000; }
    .tp-table .is-sticky, .tp-table .is-sticky-num { position: static; }
    .tp-table thead th:first-child, .tp-table tbody td:first-child { padding-left: 1.5mm; }

    /* Rangli rejimda ham ma'no-ranglar qog'ozga tushsin */
    .jr-mark, .jr-value, .tp-grade, .tp-att, .status, .tp-flag--chip, .tp-badge,
    td.is-missing, th.is-missing, .jr-key__sw, .tp-week__off, .tp-cell-rest {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .jr-topics-card, .tp-week-topics, .tp-print-break { break-before: page; }
    .tp-print-break { margin-top: 0 !important; }
    .tp-att-select { appearance: none; border: 0; background: none !important; padding: 0; height: auto; min-width: 0; font-weight: 700; }
    .jr-topics tbody tr.is-future { display: none; }
    .hw-status:not([open]) .hw-status__list { display: none; }

    /* ===== Oq-qora rejim ===== */
    html.tc-print-bw .tc-body *,
    html.tc-print-bw .tc-body *::before,
    html.tc-print-bw .tc-body *::after { color: #000 !important; }
    html.tc-print-bw .jr-grid td.is-missing { background: repeating-linear-gradient(135deg, #8a8a8a 0 0.6pt, transparent 0.6pt 4pt) !important; }
    html.tc-print-bw .jr-grid th.is-missing { background: #e2e2e2 !important; }
    html.tc-print-bw :is(.jr-grid td.is-today, .jr-grid td.is-future, .jr-grid th.is-sub, .tp-kpi, .jr-sum.is-low, .tp-table .col-today) { background: #fff !important; }
    html.tc-print-bw .jr-grid th.is-draft { border-top: 1.5pt solid #000; }
    html.tc-print-bw .jr-grid td.is-cancelled { background: repeating-linear-gradient(135deg, #c4c4c4 0 0.6pt, transparent 0.6pt 4pt) !important; }
    html.tc-print-bw .jr-grid th.is-cancelled { background: #f0f0f0 !important; }

    /* Davomat belgisi: oq doira, qora ingichka chiziq, harf */
    html.tc-print-bw :is(.jr-mark, .tp-att) {
        background: #fff !important;
        border: 0.6pt solid #000;
        border-radius: 50%;
        font-weight: 700;
    }
    html.tc-print-bw :is(.jr-mark--present, .tp-att--present) { border: 0; font-weight: 400; color: #555 !important; }
    html.tc-print-bw .tp-att:not([class*="--"]) { border: 0; }
    /* Baho: oq kvadrat, ingichka ramka, raqam; «2» qalin ramka + qalin */
    html.tc-print-bw :is(.jr-value, .tp-grade) {
        background: #fff !important;
        border: 0.5pt solid #000;
        border-radius: 0;
        font-weight: 600;
    }
    html.tc-print-bw :is(.jr-value--2, .tp-grade--2) { border-width: 1.4pt; font-weight: 800; }
    html.tc-print-bw :is(.jr-value--exam, .tp-grade--exam) { border: 2pt double #000; box-shadow: none !important; }
    html.tc-print-bw .tc-body :is(.jr-mark--absent, .jr-mark--late, .jr-mark--excused, .tp-att--absent, .tp-att--late, .tp-att--excused) { box-shadow: none !important; }
    html.tc-print-bw .tp-grade--avg { border: 0; font-weight: 700; }
    html.tc-print-bw .jr-sum.is-low { font-weight: 800; text-decoration: underline; }
    html.tc-print-bw :is(.status, .tp-badge, .tp-flag--chip, .hw-progress__target, .jr-topic__type) { background: #fff !important; border: 0.6pt solid #000 !important; }
    html.tc-print-bw :is(.jr-key__sw) { background: #fff !important; border-color: #000 !important; }
    html.tc-print-bw .jr-key__sw.is-cancelled { background: repeating-linear-gradient(135deg, #c4c4c4 0 0.6pt, transparent 0.6pt 3pt) !important; }
    html.tc-print-bw .jr-key__sw.is-missing { background: repeating-linear-gradient(135deg, #8a8a8a 0 0.6pt, transparent 0.6pt 3pt) !important; }
    html.tc-print-bw .jr-key__sw.is-draft { border-top: 1.5pt solid #000 !important; }
    html.tc-print-bw .jr-key__sw.is-today, html.tc-print-bw .jr-key__sw.is-future { display: none; }
    html.tc-print-bw .jr-key .is-print-hidden { display: none !important; }
    html.tc-print-bw :is(.tp-lesson) { background: #fff !important; border-color: #000; }
    html.tc-print-bw .tp-legend__group:has(.tp-legend__sw) { display: none; }      /* fan ranglari oq-qorada ma'nosiz */
    html.tc-print-bw :is(.tp-week__off, .tp-cell-rest) { background: repeating-linear-gradient(135deg, #b0b0b0 0 0.6pt, transparent 0.6pt 4pt) !important; }
    html.tc-print-bw .hw-progress__bar::before { background: #c8c8c8; }
    html.tc-print-bw .hw-progress__bar::after { background: #000; }
    html.tc-print-bw .hw-progress__bar { background: #fff; border: 0.5pt solid #000; }
}