/* ============================================================
   MOBIL ILOVA DIZAYNI — faqat talaba, faqat telefon eni (<=767px).
   Bu fayl butunlay `body.mobile-app-student` klassi + max-width
   media so'rovi ichida qamalgan — kompyuterda va boshqa
   rollarda (o'qituvchi/admin/ota-ona) HECH QANDAY ta'sir
   qilmaydi, chunki na klass, na media-so'rov shart bajarilmaydi.
   Ranglar/shrift Claude Design'da tayyorlangan mobil prototipdan
   olindi (Source Serif 4, teal urg'u #0088b0).
   ============================================================ */

/* Pastki tab-bar HAR DOIM shu asosiy qoida bilan yashirilgan boshlanadi —
   media-so'rov ichidagi qoidalar faqat kengroq ekranni TORAYTIRISH uchun
   ishlaydi, uni HECH QACHON qayta ko'rsatib bo'lmaydi (masalan
   `min-width` orqali) desktopda ko'rinib qolmasligi uchun. */
.mobile-tabbar { display: none; }

@media (max-width: 767.98px) {
    body.mobile-app-student {
        --ma-bg: #f3f2f2;
        --ma-surface: #eae9e9;
        --ma-text: #201e1d;
        --ma-text-muted: color-mix(in srgb, #201e1d 55%, transparent);
        --ma-accent: #0088b0;
        --ma-accent-hover: #1186ac;
        --ma-accent-100: #e9f8ff;
        --ma-accent-700: #006786;
        --ma-accent-2-100: #fff1f4;
        --ma-accent-2-700: #aa0b56;
        --ma-divider: color-mix(in srgb, #201e1d 16%, transparent);
        --ma-radius: 4px;
        --ma-font: "Source Serif 4", Georgia, "Times New Roman", serif;

        background: var(--ma-bg) !important;
        color: var(--ma-text);
        font-family: var(--ma-font);
    }

    /* Qorong'i tema — bu fayl dastlab faqat yorug' mobil tajriba uchun
       yozilgan edi (--ma-* hech qachon qayta belgilanmagan), shuning uchun
       .card/.badge/.form-control kabi qoidalar (pastda) doim yorug' fonni
       majburlagan — hatto data-bs-theme="dark" bo'lsa ham (masalan Kabinet
       sahifasidagi "Profil"/"Telegram bildirishnomalari" kartalari qorong'i
       sahifa fonida oq bo'lib qolardi). --ma-* qiymatlarini shu yerda
       almashtirish quyidagi HAMMA qoidani (kartalar, tugmalar, formalar,
       belgilar) bitta joydan to'g'irlaydi. */
    [data-bs-theme="dark"] body.mobile-app-student {
        --ma-bg: #17161a;
        --ma-surface: #201f24;
        --ma-text: #f4f1ee;
        --ma-text-muted: color-mix(in srgb, #f4f1ee 55%, transparent);
        --ma-accent: #62c5ee;
        --ma-accent-hover: #8ad4f5;
        --ma-accent-100: #10333f;
        --ma-accent-700: #b3e4fa;
        --ma-accent-2-100: #3b1626;
        --ma-accent-2-700: #ffc0d0;
        --ma-divider: color-mix(in srgb, #f4f1ee 18%, transparent);
    }

    body.mobile-app-student .app-shell,
    body.mobile-app-student.app-shell { background: var(--ma-bg); }

    body.mobile-app-student h1, body.mobile-app-student h2, body.mobile-app-student h3,
    body.mobile-app-student h4, body.mobile-app-student h5, body.mobile-app-student h6 {
        font-family: var(--ma-font);
        font-weight: 600;
        color: var(--ma-text);
    }
    body.mobile-app-student .text-muted { color: var(--ma-text-muted) !important; }

    /* Sidebar/hamburger butunlay yashiriladi — bosh sahifadagi tab-bar
       o'rnini bosadi. */
    body.mobile-app-student .app-sidebar,
    body.mobile-app-student .app-sidebar-backdrop,
    body.mobile-app-student .app-sidebar-toggle { display: none !important; }

    body.mobile-app-student .app-topbar {
        background: var(--ma-bg);
        border-bottom: 1px solid var(--ma-divider);
        box-shadow: none;
    }
    body.mobile-app-student .app-topbar-user-btn {
        border-color: var(--ma-divider);
        color: var(--ma-text);
        border-radius: var(--ma-radius);
    }
    body.mobile-app-student .app-content {
        padding: 0.85rem 1rem calc(84px + env(safe-area-inset-bottom, 0px));
    }

    /* Kartalar — Broadsheet: tekis, soyasiz, kichik radius */
    body.mobile-app-student .card,
    body.mobile-app-student .glass-card,
    body.mobile-app-student .glass-panel {
        background: var(--ma-surface);
        border: none;
        border-radius: var(--ma-radius);
        box-shadow: none;
        color: var(--ma-text);
        transform: none !important;
    }
    body.mobile-app-student .card:hover { transform: none; box-shadow: none; }

    /* Tugmalar */
    body.mobile-app-student .btn {
        font-family: var(--ma-font);
        font-weight: 600;
        border-radius: var(--ma-radius);
    }
    body.mobile-app-student .btn-primary,
    body.mobile-app-student .btn-success {
        background: var(--ma-accent) !important;
        border-color: var(--ma-accent) !important;
        color: var(--ma-bg) !important;
    }
    body.mobile-app-student .btn-primary:hover,
    body.mobile-app-student .btn-success:hover {
        background: var(--ma-accent-hover) !important;
        border-color: var(--ma-accent-hover) !important;
    }
    body.mobile-app-student .btn-outline-primary,
    body.mobile-app-student .btn-outline-secondary {
        border-color: var(--ma-divider);
        color: var(--ma-text);
    }
    body.mobile-app-student .btn-outline-primary:hover,
    body.mobile-app-student .btn-outline-secondary:hover {
        background: color-mix(in srgb, var(--ma-text) 7%, transparent);
        color: var(--ma-text);
    }

    /* Belgi/teg (badge) — Broadsheet .tag uslubi */
    body.mobile-app-student .badge {
        font-family: var(--ma-font);
        font-weight: 600;
        border-radius: 3px;
        padding: 0.3em 0.6em;
    }
    body.mobile-app-student .badge.bg-info { background: var(--ma-accent-100) !important; color: var(--ma-accent-700) !important; }
    body.mobile-app-student .badge.bg-primary { background: var(--ma-accent) !important; }
    body.mobile-app-student .badge.bg-warning { background: var(--ma-accent-2-100) !important; color: var(--ma-accent-2-700) !important; }

    body.mobile-app-student a { color: var(--ma-accent); }

    /* Forma maydonlari — Broadsheet .input uslubi (tekis, kichik radius) */
    body.mobile-app-student .form-control,
    body.mobile-app-student .form-select {
        background: var(--ma-bg);
        color: var(--ma-text);
        border: 1px solid var(--ma-divider);
        border-radius: var(--ma-radius);
    }
    body.mobile-app-student .form-control:focus,
    body.mobile-app-student .form-select:focus {
        border-color: var(--ma-accent);
        box-shadow: none;
    }

    /* Bosh sahifadagi gradient "hero" banner — Broadsheet uslubida tekis,
       urg'u rangli kartaga aylantiriladi (mockupdagi kabi). */
    body.mobile-app-student .hero-gradient {
        background: var(--ma-accent-100);
        color: var(--ma-text);
        box-shadow: none;
    }
    body.mobile-app-student .hero-gradient * { color: var(--ma-text) !important; }
    body.mobile-app-student .hero-gradient .hero-grid-texture::before { display: none; }
    body.mobile-app-student .hero-gradient-text {
        background: none;
        -webkit-text-fill-color: initial;
        color: var(--ma-accent-700) !important;
    }

    /* ===== Pastki tab-bar — suzuvchi qora "dock", mockupdagi kabi:
       qirralardan ajratilgan, quyuq fon, aktiv bo'lim oq pill ichida
       matn bilan ajralib turadi, qolganlari faqat ikonka. ===== */
    body.mobile-app-student .mobile-tabbar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        position: fixed;
        left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 1050;
        background: #17161a;
        border-radius: 999px;
        padding: 6px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        max-width: calc(100% - 24px);
    }
    .mobile-tabbar-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: none;
        padding: 9px 11px;
        text-decoration: none;
        color: rgba(244, 241, 238, 0.7);
        font-family: var(--ma-font, "Source Serif 4", Georgia, serif);
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 999px;
        white-space: nowrap;
        overflow: hidden;
        max-width: 40px;
        transition: max-width 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .mobile-tabbar-btn svg { display: block; flex-shrink: 0; }
    .mobile-tabbar-btn span { opacity: 0; transition: opacity 0.15s ease; }
    .mobile-tabbar-btn.active {
        background: #f4f1ee;
        color: #17161a;
        max-width: 160px;
    }
    .mobile-tabbar-btn.active span { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
        .mobile-tabbar-btn { transition: none; }
    }
}