/* ============================================================
   GLASSMORPHISM — Premium "liquid glass" sayqal qatlami
   ------------------------------------------------------------
   Bu fayl SURFACE'larni qaytadan e'lon qilmaydi (ularni index.css
   aniq, scoped selektorlar bilan beradi: fon + blur + border).
   Bu yerda faqat SAYQAL bor:
     • rangli ambient fon (blur uchun "tagiga" go'zal manzara)
     • frosted chetlardagi yorug'lik chizig'i (rim highlight)
     • nozik sheen (porlash) katta panellarda
     • accent tugmalarda yaltiroq (gloss)
     • hover mikro-interaksiyalari
   Hammasi `body.ui-glass` ostida — oddiy (solid) rejimga tegmaydi.
   ============================================================ */

body.ui-glass {
    /* Sayqal uchun sozlama o'zgaruvchilari */
    --glass-rim: rgba(255, 255, 255, 0.55);          /* yuqori chet yorug'i */
    --glass-rim-2: rgba(255, 255, 255, 0.10);        /* ichki yumshoq nur */
    --glass-edge: color-mix(in srgb, var(--text) 14%, transparent);
    --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 44%);
    --glass-depth: 0 20px 46px -18px rgba(0, 0, 0, 0.55), 0 6px 18px -10px rgba(0, 0, 0, 0.35);
    --glass-depth-hi: 0 28px 60px -16px rgba(0, 0, 0, 0.6), 0 8px 22px -8px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   1. AMBIENT FON — rangli, yumshoq, blur uchun manba
   ============================================================ */
body.ui-glass::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Eng pastki qatlam — mavzu foni (var(--bg)). Shu sabab ambient barcha ekran
       o'lchamlarida o'zini-o'zi ta'minlaydi: to'g'ri asos rang + ustida rangli porlash.
       Animatsiya QO'YILMAYDI: harakatlanuvchi fon + backdrop-filter har kadrda qayta
       hisoblanib, telefonda jank/battareya muammosini keltirib chiqaradi. Statik = silliq. */
    background:
        radial-gradient(42rem 42rem at 10% -10%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 60%),
        radial-gradient(40rem 40rem at 112% 8%,  color-mix(in srgb, #a855f7 40%, transparent),        transparent 60%),
        radial-gradient(48rem 48rem at 90% 116%, color-mix(in srgb, var(--success) 32%, transparent), transparent 62%),
        radial-gradient(30rem 30rem at -8% 88%,  color-mix(in srgb, #f59e0b 26%, transparent),         transparent 60%),
        var(--bg);
}

/* Container va sidebar ambientdan ustun turishi uchun */
body.ui-glass .container,
body.ui-glass .sidebar { position: relative; z-index: 1; }

/* ============================================================
   2. FROSTED PANELLAR — chet yorug'i + chuqurlik + sheen
   ============================================================ */
body.ui-glass :is(
    .nav-header,
    .sidebar,
    .sidebar-panel,
    .form-container,
    .profile-section,
    .quiz-container,
    .quiz-status-card,
    .list-mode-summary,
    .list-row,
    .goal-card,
    .goal-empty,
    .dash-card,
    .stat-box,
    .q-card,
    .settings-card,
    .latex-preview-panel,
    .modal,
    .archive-card,
    .archive-rule-card,
    .ls-card,
    .rus-task-row,
    .rus-hist-card,
    .grammar-item,
    .cl-exercise-card,
    .cl-list-item,
    .kh-day-card,
    .day-module .stat-card,
    .day-module .panel,
    .day-module .item-card,
    .day-module .list-card,
    .sport-summary,
    .sport-dashboard-card,
    .sport-exercise-card,
    .coding-hero,
    .coding-topic-card,
    .coding-detail-card
) {
    background:
        var(--glass-sheen),
        var(--ui-panel-bg) !important;
    border: 1px solid var(--glass-edge) !important;
    box-shadow:
        inset 0 1px 0 var(--glass-rim),
        inset 0 0 0 1px var(--glass-rim-2),
        var(--glass-depth) !important;
}

/* Sidebar — chap panel, o'ng chetida nozik nur */
body.ui-glass .sidebar {
    box-shadow:
        inset 0 1px 0 var(--glass-rim),
        inset -1px 0 0 var(--glass-rim-2),
        12px 0 40px -20px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   3. CONTROLLAR (input, tugma, pill) — yengilroq frosted
   ============================================================ */
body.ui-glass :is(
    .input-field,
    .textarea-field,
    .opt-btn,
    .btn-settings-link,
    .btn-home-side,
    .modern-icon-btn,
    .sb-subject-btn,
    .goal-folder-btn,
    .goal-section-btn,
    .archive-tab,
    .ctx-action-btn,
    .ui-preset-btn,
    .settings-control-row
) {
    box-shadow:
        inset 0 1px 0 var(--glass-rim-2),
        0 6px 16px -10px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--glass-edge) !important;
}

/* Inputlar fokusda — primary halqa */
body.ui-glass :is(.input-field, .textarea-field, .rus-inp, .eng-inp, .ls-input):focus {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent) !important;
    box-shadow:
        inset 0 1px 0 var(--glass-rim-2),
        0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent) !important;
    outline: none !important;
}

/* ============================================================
   4. ACCENT (primary / FAB) — yaltiroq shisha tugma
   ============================================================ */
body.ui-glass :is(
    .btn-primary,
    .fab-goal,
    .fab-add,
    .eng-fab-btn,
    .sport-fab,
    .ls-speaker,
    .spk-play-btn,
    .goal-folder-btn.active,
    .goal-section-btn.active,
    .archive-tab.active,
    .ls-pill.active,
    .nav-item.active,
    .sport-chip.active
) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 46%),
        var(--ui-primary-bg) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 55%, #fff 28%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 6px rgba(0, 0, 0, 0.16),
        0 12px 26px -8px color-mix(in srgb, var(--primary) 60%, transparent) !important;
}

/* To'g'ri javob — yashil yaltiroq */
body.ui-glass :is(.opt-btn.correct, .goal-card.done, .quiz-feedback.correct) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 46%),
        var(--ui-success-bg) !important;
    border: 1px solid color-mix(in srgb, var(--success) 55%, #fff 28%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 12px 26px -10px color-mix(in srgb, var(--success) 55%, transparent) !important;
}

/* Xato javob — qizil yaltiroq */
body.ui-glass :is(.opt-btn.wrong, .quiz-feedback.wrong) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
        color-mix(in srgb, var(--danger) 78%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, #fff 26%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 12px 26px -10px color-mix(in srgb, var(--danger) 55%, transparent) !important;
}

/* ============================================================
   5. MODAL — kuchliroq blur, yorqinroq shisha
   ============================================================ */
body.ui-glass :is(.modal, .custom-modal, .cp-add-modal, .rus-modal) {
    backdrop-filter: blur(calc(var(--ui-blur) + 6px)) saturate(180%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(calc(var(--ui-blur) + 6px)) saturate(180%) brightness(1.04) !important;
    box-shadow:
        inset 0 1px 0 var(--glass-rim),
        inset 0 0 0 1px var(--glass-rim-2),
        var(--glass-depth-hi) !important;
}

/* Modal orqa fon — yengil qoraytirish + blur */
body.ui-glass :is(.modal-wrap, .custom-modal-overlay, .cp-add-modal-overlay, .progress-overlay) {
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

/* ============================================================
   6. HOVER — bosiladigan kartalar mayin ko'tariladi
   ============================================================ */
body.ui-glass :is(
    .dash-card-clickable,
    .goal-card,
    .list-row,
    .sb-subject-btn,
    .cp-item,
    .coding-topic-card,
    .sport-exercise-card,
    .archive-card
):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-edge)) !important;
    box-shadow:
        inset 0 1px 0 var(--glass-rim),
        var(--glass-depth-hi) !important;
}

body.ui-glass :is(.btn-primary, .fab-goal, .fab-add, .eng-fab-btn, .sport-fab):hover {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 16px 32px -8px color-mix(in srgb, var(--primary) 65%, transparent) !important;
}

body.ui-glass :is(
    .dash-card-clickable,
    .goal-card,
    .list-row,
    .btn-primary,
    .fab-goal,
    .sb-subject-btn,
    .opt-btn,
    .coding-topic-card
) {
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease, filter 0.18s ease;
}

/* ============================================================
   7. KICHIK SAYQALLAR
   ============================================================ */
/* Avatar atrofida shisha halqa */
body.ui-glass .avatar {
    box-shadow:
        0 0 0 1px var(--glass-rim-2),
        0 10px 26px -10px rgba(0, 0, 0, 0.5) !important;
}

/* "Tez orada" belgisi glass rejimda yorqinroq */
body.ui-glass .sb-coming-badge {
    background: rgba(245, 158, 11, 0.26);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.4);
}

/* Nozik, shaffof scrollbar (faqat glass rejimda) */
body.ui-glass ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui-glass ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.ui-glass ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text) 34%, transparent);
    background-clip: padding-box;
}
body.ui-glass ::-webkit-scrollbar-track { background: transparent; }