/* ============================================================ MODERN — «Тонг ўрмони» / Morning Forest kliniki.uz + online.kliniki.uz uchun 4-tema Tabiat palitrasi: shudring, emerald, teal, lime, amber Faollashadi: ============================================================ */ html.modern { /* ---------- NEYTRAL: yashil nafasli kul rang ---------- */ --gray-50: oklch(0.984 0.008 158); --gray-100: oklch(0.964 0.013 158); --gray-200: oklch(0.924 0.018 158); --gray-300: oklch(0.868 0.022 159); --gray-400: oklch(0.706 0.026 160); --gray-500: oklch(0.558 0.028 161); --gray-600: oklch(0.452 0.030 162); --gray-700: oklch(0.374 0.030 163); --gray-800: oklch(0.282 0.028 164); --gray-900: oklch(0.218 0.024 165); --gray-950: oklch(0.148 0.020 166); /* ---------- PRIMARY: o'rmon emeraldi ---------- */ --primary-50: oklch(0.972 0.030 158); --primary-100: oklch(0.942 0.060 158); --primary-200: oklch(0.892 0.100 157); --primary-300: oklch(0.820 0.140 156); --primary-400: oklch(0.735 0.158 156); --primary-500: oklch(0.672 0.155 157); --primary-600: oklch(0.588 0.142 158); --primary-700: oklch(0.494 0.120 159); --primary-800: oklch(0.412 0.098 160); --primary-900: oklch(0.352 0.080 161); --primary-950: oklch(0.228 0.056 163); /* ---------- SUCCESS: yosh barg ---------- */ --success-50: oklch(0.975 0.032 145); --success-100: oklch(0.948 0.062 145); --success-200: oklch(0.900 0.104 145); --success-300: oklch(0.834 0.146 144); --success-400: oklch(0.756 0.170 144); --success-500: oklch(0.692 0.168 145); --success-600: oklch(0.600 0.150 146); --success-700: oklch(0.502 0.126 147); --success-800: oklch(0.418 0.102 148); --success-900: oklch(0.356 0.084 149); --success-950: oklch(0.232 0.058 150); /* ---------- INFO: ko'l suvi (teal-cyan) ---------- */ --info-50: oklch(0.972 0.026 205); --info-100: oklch(0.940 0.050 205); --info-200: oklch(0.888 0.082 204); --info-300: oklch(0.812 0.110 203); --info-400: oklch(0.726 0.126 220); --info-500: oklch(0.652 0.136 226); --info-600: oklch(0.566 0.140 232); --info-700: oklch(0.480 0.124 234); --info-800: oklch(0.404 0.100 234); --info-900: oklch(0.348 0.080 234); --info-950: oklch(0.232 0.056 236); /* ---------- WARNING: kuz quyoshi ---------- */ --warning-50: oklch(0.978 0.026 85); --warning-100: oklch(0.950 0.056 85); --warning-200: oklch(0.906 0.100 83); --warning-300: oklch(0.856 0.140 80); --warning-400: oklch(0.804 0.158 74); --warning-500: oklch(0.752 0.158 66); --warning-600: oklch(0.660 0.152 55); --warning-700: oklch(0.548 0.132 48); --warning-800: oklch(0.456 0.108 46); --warning-900: oklch(0.392 0.088 46); --warning-950: oklch(0.256 0.060 46); /* ---------- DANGER: gul marjoni ---------- */ --danger-50: oklch(0.972 0.020 20); --danger-100: oklch(0.940 0.042 20); --danger-200: oklch(0.890 0.076 20); --danger-300: oklch(0.816 0.120 21); --danger-400: oklch(0.716 0.176 24); --danger-500: oklch(0.648 0.214 26); --danger-600: oklch(0.586 0.224 28); --danger-700: oklch(0.512 0.196 28); --danger-800: oklch(0.448 0.162 27); --danger-900: oklch(0.398 0.130 26); --danger-950: oklch(0.262 0.086 26); /* ---------- Tema aksentlari (o'z komponentlarimiz uchun) ---------- */ --mo-ink: oklch(0.248 0.030 163); --mo-muted: oklch(0.552 0.026 160); --mo-line: oklch(0.906 0.020 158); --mo-line-soft: oklch(0.940 0.014 158); --mo-surface: oklch(0.998 0.003 158); --mo-surface-2: oklch(0.986 0.008 158); --mo-emerald: oklch(0.588 0.142 158); --mo-emerald-lt: oklch(0.672 0.155 157); --mo-teal: oklch(0.650 0.118 195); --mo-lime: oklch(0.760 0.152 132); --mo-amber: oklch(0.762 0.152 68); --mo-coral: oklch(0.688 0.170 28); --mo-iris: oklch(0.612 0.132 278); --mo-shadow-sm: 0 1px 2px oklch(0.30 0.04 160 / 0.06), 0 1px 3px oklch(0.30 0.04 160 / 0.05); --mo-shadow: 0 2px 4px oklch(0.30 0.04 160 / 0.05), 0 8px 20px -6px oklch(0.30 0.05 160 / 0.10); --mo-shadow-lg: 0 4px 10px oklch(0.30 0.04 160 / 0.06), 0 18px 40px -12px oklch(0.30 0.06 160 / 0.16); --mo-glow: 0 6px 18px -4px oklch(0.588 0.142 158 / 0.40); /* Filament barcha oq yuzalarni shu o'zgaruvchi bilan chizadi — nozik mint nafas */ --color-white: oklch(0.997 0.0025 158); color-scheme: light; scrollbar-color: oklch(0.800 0.040 158) transparent; } /* ============================================================ 1. FON — tong shudringi ustida tabiat nurlari ============================================================ */ html.modern body { background-color: oklch(0.972 0.013 156); background-image: radial-gradient(ellipse 90% 55% at 12% -5%, oklch(0.900 0.090 158 / 0.55), transparent 60%), radial-gradient(ellipse 70% 50% at 88% 2%, oklch(0.906 0.070 198 / 0.45), transparent 58%), radial-gradient(ellipse 80% 60% at 78% 96%, oklch(0.926 0.070 128 / 0.42), transparent 60%), radial-gradient(ellipse 65% 45% at 8% 92%, oklch(0.944 0.055 78 / 0.38), transparent 58%); background-attachment: fixed; background-repeat: no-repeat; color: var(--mo-ink); } /* nozik "shudring" donadorligi — tekis gradientni jonlantiradi */ html.modern body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: radial-gradient(oklch(0.60 0.06 158 / 0.055) 1px, transparent 1px), radial-gradient(oklch(0.60 0.06 158 / 0.035) 1px, transparent 1px); background-size: 34px 34px, 34px 34px; background-position: 0 0, 17px 17px; } /* ============================================================ 2. SIDEBAR — shishasimon, o'ng chetida nur chizig'i ============================================================ */ html.modern .fi-sidebar { background-color: oklch(1 0 0 / 0.72); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-inline-end: 1px solid oklch(0.900 0.022 158 / 0.85); box-shadow: 1px 0 0 oklch(1 0 0 / 0.6) inset; } html.modern .fi-sidebar-header { background-color: transparent; border-bottom: 1px solid var(--mo-line-soft); box-shadow: none; } /* nav elementlari */ html.modern .fi-sidebar-item-btn, html.modern .fi-sidebar-item > a { border-radius: 11px; transition: background-color .18s ease, color .18s ease, transform .18s ease; } html.modern .fi-sidebar-item:not(.fi-active) > a:hover, html.modern .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover { background-color: oklch(0.588 0.142 158 / 0.075); transform: translateX(2px); } html.modern .fi-sidebar-item.fi-active > a, html.modern .fi-sidebar-item.fi-active .fi-sidebar-item-btn { position: relative; background-image: linear-gradient(95deg, oklch(0.588 0.142 158 / 0.16), oklch(0.650 0.118 195 / 0.10) 55%, transparent); color: oklch(0.452 0.116 159); font-weight: 700; box-shadow: inset 0 0 0 1px oklch(0.588 0.142 158 / 0.14); } html.modern .fi-sidebar-item.fi-active > a::before, html.modern .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before { content: ''; position: absolute; inset-inline-start: -2px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--mo-emerald-lt), var(--mo-teal)); box-shadow: 0 0 10px oklch(0.588 0.142 158 / 0.55); } html.modern .fi-sidebar-item.fi-active .fi-icon, html.modern .fi-sidebar-item.fi-active svg { color: var(--mo-emerald); } html.modern .fi-sidebar-group-label { color: var(--mo-muted); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; font-weight: 800; } /* ============================================================ 3. TOPBAR + brend ============================================================ */ html.modern .fi-topbar, html.modern .fi-topbar > nav { background-color: oklch(1 0 0 / 0.68); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid oklch(0.906 0.020 158 / 0.8); box-shadow: 0 1px 0 oklch(1 0 0 / 0.7) inset, 0 6px 24px -18px oklch(0.30 0.05 160 / 0.5); } html.modern .fi-logo { color: oklch(0.494 0.120 159); font-weight: 900; letter-spacing: -.015em; } @supports (-webkit-background-clip: text) or (background-clip: text) { html.modern .fi-logo { background-image: linear-gradient(100deg, var(--mo-emerald) 8%, var(--mo-teal) 58%, var(--mo-lime) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* ============================================================ 4. SAHIFA SARLAVHASI ============================================================ */ html.modern .fi-header-heading { color: var(--mo-ink); letter-spacing: -.02em; font-weight: 800; } html.modern .fi-header-subheading { color: var(--mo-muted); } /* ============================================================ 5. KARTALAR / SEKSIYALAR / JADVALLAR ============================================================ */ html.modern .fi-section, html.modern .fi-section-content-ctn, html.modern .fi-wi-stats-overview-stat, html.modern .fi-ta-ctn, html.modern .fi-fo-component-ctn > .fi-section { background-color: var(--mo-surface); border: 1px solid var(--mo-line); border-radius: 16px; box-shadow: var(--mo-shadow); } html.modern .fi-section-header { border-bottom: 1px solid var(--mo-line-soft); } html.modern .fi-section-header-heading { color: var(--mo-ink); font-weight: 750; } html.modern .fi-ta-header, html.modern .fi-ta-header-ctn { background-color: oklch(0.988 0.010 158); border-bottom: 1px solid var(--mo-line-soft); } html.modern .fi-ta-header-cell { color: var(--mo-muted); font-weight: 750; letter-spacing: .025em; text-transform: uppercase; font-size: .7rem; } html.modern .fi-ta-row { transition: background-color .15s ease; } html.modern .fi-ta-row:hover { background-color: oklch(0.588 0.142 158 / 0.045); } html.modern .fi-ta-row:not(:last-child) { border-bottom: 1px solid var(--mo-line-soft); } /* statistika kartalari — yuqorida rangli chiziq */ html.modern .fi-wi-stats-overview-stat { position: relative; overflow: hidden; } html.modern .fi-wi-stats-overview-stat::after { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--mo-emerald), var(--mo-teal) 45%, var(--mo-lime) 80%, var(--mo-amber)); opacity: .85; } /* widget kartalari (dashboard) */ html.modern .fi-wi-widget > .fi-section, html.modern .fi-wi-widget > .fi-section-content-ctn { border-radius: 16px; } html.modern .fi-topbar-ctn { backdrop-filter: none; } /* ============================================================ 6. TUGMALAR ============================================================ */ html.modern .fi-btn { border-radius: 11px; font-weight: 650; transition: all .18s cubic-bezier(.2,.8,.3,1); } html.modern .fi-btn.fi-color-primary, html.modern .fi-btn-primary, html.modern .fi-ac-btn-action.fi-color-primary { background-image: linear-gradient(135deg, oklch(0.640 0.152 156), oklch(0.548 0.134 162)); box-shadow: var(--mo-glow), inset 0 1px 0 oklch(1 0 0 / 0.22); border: 0; } html.modern .fi-btn.fi-color-primary:hover, html.modern .fi-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 26px -6px oklch(0.588 0.142 158 / 0.48), inset 0 1px 0 oklch(1 0 0 / 0.24); } html.modern .fi-btn.fi-color-primary:active, html.modern .fi-btn-primary:active { transform: translateY(0); filter: brightness(.98); } /* ikonka tugmalar */ html.modern .fi-icon-btn { border-radius: 10px; transition: background-color .15s ease, color .15s ease; } html.modern .fi-icon-btn:hover { background-color: oklch(0.588 0.142 158 / 0.10); color: var(--mo-emerald); } /* ============================================================ 7. FORMALAR ============================================================ */ html.modern .fi-input-wrp { border-radius: 11px; background-color: var(--mo-surface); box-shadow: 0 0 0 1px var(--mo-line), var(--mo-shadow-sm); transition: box-shadow .18s ease, background-color .18s ease; } html.modern .fi-input-wrp:hover { box-shadow: 0 0 0 1px oklch(0.860 0.036 158), var(--mo-shadow-sm); } html.modern .fi-input-wrp:focus-within { background-color: oklch(1 0 0); box-shadow: 0 0 0 2px var(--mo-emerald-lt), 0 0 0 6px oklch(0.588 0.142 158 / 0.13), var(--mo-shadow-sm); } html.modern .fi-fo-field-wrp label, html.modern .fi-fo-field-lbl, html.modern .fi-fo-field-lbl-content { color: var(--mo-ink); font-weight: 650; } /* ============================================================ 8. BADGE / STATUS — rang-barang ============================================================ */ html.modern .fi-badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 0 0 1px oklch(0.30 0.05 160 / 0.06); } /* ============================================================ 9. MODAL / DROPDOWN ============================================================ */ html.modern .fi-modal-window { border-radius: 20px; border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow-lg); } html.modern .fi-modal-close-overlay { background-color: oklch(0.30 0.05 162 / 0.32); backdrop-filter: blur(5px); } html.modern .fi-dropdown-panel { border-radius: 14px; border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow-lg); background-color: var(--mo-surface); } html.modern .fi-dropdown-list-item { border-radius: 9px; transition: background-color .13s ease; } html.modern .fi-dropdown-list-item:hover { background-color: oklch(0.588 0.142 158 / 0.10); } /* ============================================================ 10. TEMA TANLAGICH — Modern tugmasi ajralib tursin ============================================================ */ html.modern .fi-theme-switcher-btn.fi-active { color: var(--mo-emerald); background-color: oklch(0.588 0.142 158 / 0.12); } .fi-theme-switcher-btn[data-theme-mode='modern'] { position: relative; } .fi-theme-switcher-btn[data-theme-mode='modern'].fi-active { color: oklch(0.588 0.142 158); background-image: linear-gradient(135deg, oklch(0.588 0.142 158 / 0.18), oklch(0.650 0.118 195 / 0.14)); box-shadow: inset 0 0 0 1px oklch(0.588 0.142 158 / 0.28); } .dark .fi-theme-switcher-btn[data-theme-mode='modern'].fi-active { color: oklch(0.760 0.140 156); } /* ============================================================ 11. LOGIN (simple layout) ============================================================ */ html.modern .fi-simple-main { background-color: oklch(1 0 0 / 0.86); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border: 1px solid oklch(1 0 0 / 0.9); border-radius: 22px; box-shadow: var(--mo-shadow-lg), inset 0 1px 0 oklch(1 0 0 / 0.85); } /* ============================================================ 12. SCROLLBAR / TANLASH / FOKUS ============================================================ */ html.modern ::-webkit-scrollbar { width: 11px; height: 11px; } html.modern ::-webkit-scrollbar-track { background: transparent; } html.modern ::-webkit-scrollbar-thumb { background: oklch(0.800 0.045 158); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } html.modern ::-webkit-scrollbar-thumb:hover { background: oklch(0.700 0.075 158); background-clip: content-box; } html.modern ::selection { background: oklch(0.588 0.142 158 / 0.22); color: var(--mo-ink); } /* ============================================================ 13. ONLINE JURNAL (.ond-*) — modern uslubda ============================================================ */ html.modern .ond-panel { background: oklch(0.998 0.003 158); color: var(--mo-ink); border: 1px solid var(--mo-line); border-radius: 20px; box-shadow: var(--mo-shadow-lg); } /* --- QATLAM IERARXIYASI (blade: fsov 50 < ov 60 < stm 90). fsov topbar ustida turishi uchun ko'tarildi -> qolganlari ham mutanosib ko'tariladi, aks holda modal va dropdownlar popup ORTIDA qolib ochilmaydi. --- */ html.modern .ond-fsov { background: oklch(0.28 0.05 162 / 0.42); z-index: 100; } html.modern .ond-ov { z-index: 120; } /* yozuv qo'shish/tahrirlash modali */ html.modern .ond-stm { z-index: 140; } /* status + doktor tanlash dropdownlari */ html.modern .ond-md { background: var(--mo-surface); color: var(--mo-ink); border: 1px solid var(--mo-line); border-radius: 18px; box-shadow: var(--mo-shadow-lg); } html.modern .ond-f label { color: var(--mo-muted); } html.modern .ond-f input, html.modern .ond-f select, html.modern .ond-f textarea { background: var(--mo-surface); color: var(--mo-ink); border-color: var(--mo-line); border-radius: 10px; } html.modern .ond-f input:focus, html.modern .ond-f select:focus, html.modern .ond-f textarea:focus { border-color: var(--mo-emerald-lt); box-shadow: 0 0 0 4px oklch(0.588 0.142 158 / 0.13); outline: none; } /* kalendar + kun bloklari */ html.modern .ond-colh { color: oklch(0.494 0.120 159); border-bottom-color: oklch(0.588 0.142 158 / 0.32); } html.modern .ond-doc { background: var(--mo-surface); border: 1px solid var(--mo-line); border-radius: 15px; box-shadow: var(--mo-shadow-sm); transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease; } html.modern .ond-doc:hover { border-color: oklch(0.588 0.142 158 / 0.45); box-shadow: var(--mo-shadow); transform: translateY(-2px); } html.modern .ond-dn { color: var(--mo-ink); } html.modern .ond-dn small { color: var(--mo-muted); } html.modern .ond-hours { background: linear-gradient(135deg, oklch(0.588 0.142 158 / 0.14), oklch(0.760 0.152 132 / 0.14)); color: oklch(0.452 0.116 159); border: 1px solid oklch(0.588 0.142 158 / 0.22); } html.modern .ond-hours.off { background: oklch(0.90 0.012 158); color: var(--mo-muted); border-color: var(--mo-line); } html.modern .ond-plus { border-color: oklch(0.588 0.142 158 / 0.35); color: var(--mo-emerald); } html.modern .ond-plus:hover { background: oklch(0.588 0.142 158 / 0.10); } /* vaqt slotlari */ html.modern .ond-tt { color: oklch(0.494 0.120 159); background: oklch(0.588 0.142 158 / 0.10); border-radius: 9px; } html.modern .ond-tt.odd { color: oklch(0.548 0.132 48); background: oklch(0.762 0.152 68 / 0.14); } html.modern .ond-free { border: 1px dashed oklch(0.588 0.142 158 / 0.34); color: var(--mo-muted); border-radius: 11px; background: oklch(0.588 0.142 158 / 0.035); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } html.modern .ond-free:hover { background: oklch(0.588 0.142 158 / 0.10); color: oklch(0.452 0.116 159); border-color: oklch(0.588 0.142 158 / 0.55); } html.modern .ond-e { background: oklch(0.996 0.004 158); border: 1px solid var(--mo-line); border-radius: 13px; box-shadow: var(--mo-shadow-sm); } html.modern .ond-tel { color: var(--mo-teal); } html.modern .ond-note { color: var(--mo-muted); } html.modern .ond-nm { color: var(--mo-ink); } /* navigatsiya, tugmalar */ html.modern .ond-btn { border-color: var(--mo-line); background: var(--mo-surface); box-shadow: var(--mo-shadow-sm); border-radius: 11px; } html.modern .ond-btn:hover { border-color: var(--mo-emerald-lt); color: var(--mo-emerald); } /* «Календарь» tugmasi — o'z gradientini saqlaydi (ond-btn qoidasi uni bosmasin) */ html.modern .ond-btn.ond-back, html.modern .ond-back { background-image: linear-gradient(135deg, oklch(0.600 0.128 178), oklch(0.640 0.140 200)); background-color: transparent; border: 0; color: #fff; box-shadow: 0 5px 16px -4px oklch(0.600 0.128 190 / 0.45); } html.modern .ond-btn.ond-back:hover, html.modern .ond-back:hover { color: #fff; filter: brightness(1.07); transform: translateY(-1px); } html.modern .ond-add { background-image: linear-gradient(135deg, oklch(0.640 0.152 156), oklch(0.548 0.134 162)); box-shadow: var(--mo-glow); } html.modern .ond-add:hover { filter: brightness(1.06); transform: translateY(-1px); } html.modern .ond-x:hover { border-color: var(--mo-coral); color: var(--mo-coral); } html.modern .ond-dnav { border-color: var(--mo-line); background: var(--mo-surface); box-shadow: var(--mo-shadow-sm); } html.modern .ond-nb:hover { background: oklch(0.588 0.142 158 / 0.10); color: var(--mo-emerald); } html.modern .ond-pickb:hover { background: oklch(0.588 0.142 158 / 0.10); color: var(--mo-emerald); } html.modern .ond-stm { background: var(--mo-surface); color: var(--mo-ink); border-color: var(--mo-line); box-shadow: var(--mo-shadow-lg); } html.modern .ond-sto:hover { background: oklch(0.588 0.142 158 / 0.10); } html.modern .ond-sto.on { background: oklch(0.588 0.142 158 / 0.13); } html.modern .ond-pickqi { background: oklch(0.984 0.008 158); border-color: var(--mo-line); } html.modern .ond-pickqi:focus { border-color: var(--mo-emerald-lt); background: oklch(1 0 0); } html.modern .ond-mini { border-color: var(--mo-line); color: var(--mo-muted); } html.modern .ond-mini:hover { border-color: var(--mo-emerald-lt); color: var(--mo-emerald); } html.modern .ond-mini.del:hover { border-color: var(--mo-coral); color: var(--mo-coral); } /* ============================================================ 13b. YON-KALENDAR (kun sahifasi chapida) ============================================================ */ /* butun ONLINE bloki modern'da yashil aksent bilan izchil bo'lsin */ html.modern .ond { --acc: oklch(0.588 0.142 158); --acc2: oklch(0.650 0.118 195); } html.modern .ond-cal { background: var(--mo-surface); border: 1px solid var(--mo-line); border-radius: 16px; box-shadow: var(--mo-shadow-sm); } html.modern .ond-calt { color: var(--mo-ink); } html.modern .ond-calnav:hover { background: oklch(0.588 0.142 158 / 0.12); color: var(--mo-emerald); } html.modern .ond-caltd { border-color: var(--mo-line); color: var(--mo-muted); background: oklch(0.588 0.142 158 / 0.05); } html.modern .ond-caltd:hover { border-color: var(--mo-emerald-lt); color: var(--mo-emerald); background: oklch(0.588 0.142 158 / 0.11); } html.modern .ond-calwd span { color: var(--mo-muted); } html.modern .ond-cald { color: var(--mo-ink); } html.modern .ond-cald:hover { background: oklch(0.588 0.142 158 / 0.13); } html.modern .ond-cald.has { color: oklch(0.452 0.116 159); } html.modern .ond-cald.today { box-shadow: inset 0 0 0 1.5px var(--mo-emerald-lt); } html.modern .ond-cald.sel, html.modern .ond-cald.sel:hover { background-image: linear-gradient(135deg, oklch(0.640 0.152 156), oklch(0.548 0.134 162)); color: #fff; box-shadow: 0 3px 10px -2px oklch(0.588 0.142 158 / 0.45); } html.modern .ond-caldot { background: var(--mo-teal); } html.modern .ond-cald.sel .ond-caldot { background: #fff; } /* ============================================================ 14. ONLINE kalendar (oylik ko'rinish) ============================================================ */ html.modern .onl-cell, html.modern .onl-day { transition: background-color .15s ease, box-shadow .18s ease; } html.modern .onl-cell:hover { background-color: oklch(0.588 0.142 158 / 0.06); } /* ============================================================ 15. HARAKAT — nafis kirish ============================================================ */ @media (prefers-reduced-motion: no-preference) { html.modern .fi-section, html.modern .fi-ta-ctn, html.modern .fi-wi-stats-overview-stat { animation: moIn .38s cubic-bezier(.22,.85,.3,1) both; } @keyframes moIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { html.modern * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* klinika tanlash (kun sahifasi, kalendar tepasida) */ html.modern .ond-clinic { background: var(--mo-surface); border-color: var(--mo-line); color: var(--mo-ink); box-shadow: var(--mo-shadow-sm); } html.modern .ond-clinic:hover { border-color: var(--mo-emerald-lt); } html.modern .ond-clinic:focus { border-color: var(--mo-emerald-lt); box-shadow: 0 0 0 4px oklch(0.588 0.142 158 / 0.13); } /* ============================================================ TEPA "НАСТРОЙКИ" tugmasi (avatar oldida) — barcha temalarda ============================================================ */ .tset { position: relative; display: inline-flex; } .tset-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #6b7280; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; } .tset-btn svg { width: 21px; height: 21px; } .tset-btn:hover { background: rgba(148,163,184,.18); color: #374151; } .tset-btn:active { transform: scale(.94); } .tset-btn-on { background: rgba(148,163,184,.2); color: #374151; } .dark .tset-btn { color: #9ca3af; } .dark .tset-btn:hover, .dark .tset-btn-on { background: rgba(255,255,255,.08); color: #e5e7eb; } .tset-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 210px; padding: .35rem; background: #fff; color: #111827; border: 1px solid rgba(148,163,184,.28); border-radius: 14px; box-shadow: 0 18px 44px rgba(2,8,20,.18), 0 2px 8px rgba(2,8,20,.06); display: flex; flex-direction: column; gap: .1rem; } .dark .tset-menu { background: #18212f; color: #f3f4f6; border-color: rgba(148,163,184,.24); box-shadow: 0 20px 50px rgba(0,0,0,.55); } .tset-head { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; padding: .35rem .55rem .3rem; } .tset-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem; border-radius: 9px; font-size: .86rem; font-weight: 600; color: inherit; text-decoration: none; transition: background-color .13s, color .13s; } .tset-item svg { width: 18px; height: 18px; flex: none; opacity: .75; } .tset-item:hover { background: rgba(148,163,184,.16); } .dark .tset-item:hover { background: rgba(255,255,255,.07); } .tset-item.tset-on { background: rgba(148,163,184,.14); font-weight: 700; } .tset-item.tset-on svg { opacity: 1; } @keyframes tsetIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } } .tset-in { animation: tsetIn .15s cubic-bezier(.2,.8,.3,1); } /* modern tema — yashil aksent */ html.modern .tset-btn { color: var(--mo-muted); } html.modern .tset-btn:hover, html.modern .tset-btn-on { background: oklch(0.588 0.142 158 / 0.12); color: var(--mo-emerald); } html.modern .tset-menu { background: var(--mo-surface); color: var(--mo-ink); border-color: var(--mo-line); box-shadow: var(--mo-shadow-lg); } html.modern .tset-head { color: var(--mo-muted); } html.modern .tset-item:hover { background: oklch(0.588 0.142 158 / 0.11); color: var(--mo-emerald); } html.modern .tset-item.tset-on { background: oklch(0.588 0.142 158 / 0.13); color: oklch(0.452 0.116 159); }