/* ── 0. BOOTSTRAP ICONS FONT-FACE (CDN @font-face + self-hosted fallback) ── */ /* * Primary @font-face declaration. This ensures Bootstrap Icons render even * if the CDN stylesheet's own @font-face is parsed after this file. * font-display:block prevents FOUT — icons go invisible→correct, not □→correct. * * To enable the self-hosted fallback: replace /assets/fonts/bootstrap-icons.woff2 * with the real file from: * https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2 */ @font-face { font-family: "bootstrap-icons"; src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff") format("woff"); font-display: swap; font-weight: normal; font-style: normal; } /* ── 1. TOKENS ───────────────────────────────────────────────────── */ :root { /* Brand — orange gradient */ --primary: #FF6B00; --primary-dark: #E55A00; --primary-light: #FF8C42; --primary-soft: #FFF1E6; --primary-50: #FFF7ED; /* FIX-8: Removed duplicate --brand-50 (was identical to --primary-50) */ --secondary: #FF8C42; --accent: #FFB37A; --grad-primary: linear-gradient(135deg, #FF6B00 0%, #FF8C42 100%); --grad-primary-soft: linear-gradient(135deg, rgba(255,107,0,.10), rgba(255,140,66,.06)); --grad-hero: linear-gradient(135deg, #FF6B00 0%, #FF8C42 50%, #FFB37A 100%); --grad-dark: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%); /* Surfaces */ --body-bg: #F8FAFC; --surface: #F1F5F9; --surface-2: #F8FAFC; --card-bg: #FFFFFF; --glass-bg: rgba(255,255,255,.72); --glass-brd: rgba(255,255,255,.55); --border: #E5E7EB; --border-soft:#EEF1F6; /* Text */ --text: #1A1A1A; --text-secondary: #3F4654; --text-muted: #6B7280; --text-soft: #9AA3B2; /* Status */ --success: #10B981; --success-soft: #D1FAE5; --danger: #EF4444; --danger-soft: #FEE2E2; --warning: #F59E0B; --warning-soft: #FEF3C7; --info: #0EA5E9; --info-soft: #E0F2FE; --purple: #7C3AED; --purple-soft: #EDE9FE; /* Layout */ --sidebar-w: 260px; --sidebar-w-collapsed: 76px; --topbar-h: 0px; /* mobile/top header removed */ /* FIX-6: Chat wrapper content area height as a variable */ --page-header-h: 60px; /* Radius */ --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px; /* Shadow — soft & deep premium */ --shadow-xs: 0 1px 2px rgba(15,23,42,.04); --shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05); --shadow-md: 0 4px 14px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.07); --shadow-lg: 0 10px 30px rgba(15,23,42,.08), 0 30px 60px rgba(15,23,42,.10); --shadow-glow: 0 12px 30px rgba(255,107,0,.30); --shadow-glow-sm: 0 6px 18px rgba(255,107,0,.22); /* Typography */ /* UI-PHASE4: Unified font system — only Plus Jakarta Sans + JetBrains Mono */ --font-base: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Motion */ --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); } /* ── 2. RESET ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* FIX-11: 15.5px → 16px for clean rem math (e.g. 1rem = 16px exactly) */ html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-base); background: var(--body-bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: var(--primary); text-decoration: none; transition: color .15s; } a:hover { color: var(--primary-dark); } img, svg { max-width: 100%; display: block; } button { font-family: inherit; } ::selection { background: rgba(255,107,0,.20); color: var(--text); } /* Premium scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #D5DBE3; border-radius: 999px; border: 2px solid var(--body-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--text); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; z-index: 9999; } .skip-link:focus { left: 0; color: #fff; } /* ── 3. TYPOGRAPHY HELPERS ───────────────────────────────────────── */ .fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600} .fw-700{font-weight:700}.fw-800{font-weight:800} .fst-italic{font-style:italic} .text-muted{color:var(--text-muted)!important} .text-success{color:var(--success)!important} .text-danger{color:var(--danger)!important} .text-warning{color:var(--warning)!important} .text-info{color:var(--info)!important} .text-primary{color:var(--primary)!important} .text-dark{color:var(--text)!important} .text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left} .small{font-size:.85rem} .text-gradient{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .font-display{font-family:var(--font-display)} /* ── 4. SPACING / LAYOUT UTILS ───────────────────────────────────── */ .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem} .mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem} .ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:.75rem}.ms-auto{margin-left:auto} .me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:.75rem}.me-auto{margin-right:auto} .py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem} .py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem} .py-5{padding-top:1.25rem;padding-bottom:1.25rem} .px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem} .gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem} .d-flex{display:flex}.d-block{display:block}.d-inline-block{display:inline-block} .d-grid{display:grid}.d-none{display:none} .align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end} .justify-between{justify-content:space-between}.justify-center{justify-content:center} .justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start} .flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.flex-1{flex:1} .w-100{width:100%}.h-100{height:100%} .rounded{border-radius:var(--radius)}.rounded-sm{border-radius:var(--radius-sm)} .rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)} @media (min-width: 992px){.d-lg-flex{display:flex}.d-lg-block{display:block}.d-lg-none{display:none}} @media (max-width: 991px){.d-md-none{display:none}} /* ── 5. KEYFRAMES ────────────────────────────────────────────────── */ @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes scaleIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } .animate-fade { animation: fadeIn .4s var(--ease-out) both; } /* ── SCROLL ANIMATIONS ──────────────────────────────────────────── */ /* * FIX-2: Two-stage guard system. * Stage 1 — Default: content fully visible (no JS dependency). * Stage 2 — JS adds .js-ready to ONLY after it has set up * IntersectionObserver. At that point elements get opacity:0 * via JS directly (not CSS), so this stylesheet never hides content. * Stage 3 — .visible class is added by JS after reveal completes. * * This means: if JS is slow, blocked, or errors — content stays visible always. * If user has JS disabled — content stays visible always. * If tab is restored from background — .visible class persists, content stays visible. */ .animate-on-scroll { opacity: 1; transform: translateY(0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } /* Only apply hidden state when JS has confirmed it's ready to animate */ body.js-ready .animate-on-scroll:not(.visible) { opacity: 0; transform: translateY(18px); } body.js-ready .animate-on-scroll.visible { opacity: 1 !important; transform: translateY(0) !important; } /* FIX-14: Hard CSS fallback — if JS never calls revealAll, force visibility after 3s so content is NEVER permanently blank */ @keyframes forceReveal { to { opacity: 1; transform: translateY(0); } } body.js-ready .animate-on-scroll:not(.visible) { animation: forceReveal 0.4s ease 3s forwards; } .animate-up { animation: fadeInUp .5s var(--ease-out) both; } .animate-scale{ animation: scaleIn .35s var(--ease-spring) both; } /* ── 6. SIDEBAR ──────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: #fff; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; z-index: 1000; /* above overlay (900), below hamburger (1100) */ pointer-events: auto; /* FIX-LOGOUT: sidebar must NOT scroll itself — overflow:hidden here so only .sidebar-nav (flex:1, overflow-y:auto) handles inner scrolling. Previously overflow-y:auto here competed with sidebar-nav scroll on Android Chrome, pushing logout below the visible viewport. */ overflow: hidden; box-shadow: 0 0 0 1px rgba(15,23,42,.02); transition: transform .32s var(--ease-out), width .28s var(--ease-out); } /* Desktop ≥992px: sidebar is open and pinned */ @media (min-width: 992px) { .sidebar { transform: translateX(0); } } /* Mobile <992px: sidebar slides in via .open */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); width: 288px; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: 12px 0 40px rgba(15,23,42,.18); } } /* Dark variant (teacher) */ .sidebar.sidebar-dark { background: linear-gradient(180deg, #15171C 0%, #1B1E25 100%); border-right-color: rgba(255,255,255,.06); color: #fff; } .sidebar.sidebar-dark .sidebar-brand, .sidebar.sidebar-dark .sidebar-user, .sidebar.sidebar-dark .nav-section { border-color: rgba(255,255,255,.06); } .sidebar.sidebar-dark .brand-name { color: #fff; } .sidebar.sidebar-dark .user-name { color: #fff; } .sidebar.sidebar-dark .user-email, .sidebar.sidebar-dark .user-role, .sidebar.sidebar-dark .nav-section { color: rgba(255,255,255,.42); } .sidebar.sidebar-dark .nav-link { color: rgba(255,255,255,.78); } .sidebar.sidebar-dark .nav-link i { color: rgba(255,255,255,.55); } .sidebar.sidebar-dark .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } .sidebar.sidebar-dark .nav-link:hover i { color: var(--primary-light); } .sidebar.sidebar-dark .nav-link.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow-sm); } .sidebar.sidebar-dark .nav-link.active i { color: #fff; } .sidebar.sidebar-dark .nav-link.nav-logout { color: #FCA5A5; } .sidebar.sidebar-dark .nav-link.nav-logout:hover { background: rgba(239,68,68,.12); color: #FCA5A5; } .sidebar.sidebar-dark .nav-link.nav-logout i { color: #FCA5A5; } /* Collapsed (desktop icons-only) */ body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); } /* FIX-1: All collapsed layout shifts scoped inside the desktop media query to prevent specificity conflicts */ @media (min-width: 992px) { body.sidebar-collapsed .admin-main, body.sidebar-collapsed .teacher-main, body.sidebar-collapsed .main-wrap, body.sidebar-collapsed .global-footer { left: var(--sidebar-w-collapsed); margin-left: var(--sidebar-w-collapsed); } } body.sidebar-collapsed .sidebar .brand-name, body.sidebar-collapsed .sidebar .brand-tag, body.sidebar-collapsed .sidebar .user-info, body.sidebar-collapsed .sidebar .nav-section, body.sidebar-collapsed .sidebar .nav-link span:not(.nav-badge), body.sidebar-collapsed .sidebar .sidebar-admin-badge .badge-text, body.sidebar-collapsed .sidebar .sidebar-wallet, body.sidebar-collapsed .sidebar .sidebar-user > div:last-child { display: none !important; } body.sidebar-collapsed .sidebar .sidebar-brand, body.sidebar-collapsed .sidebar .sidebar-user, body.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .sidebar .nav-link { gap: 0; } body.sidebar-collapsed .sidebar .nav-link[data-nav-label]:hover::after { content: attr(data-nav-label); position: absolute; left: calc(var(--sidebar-w-collapsed) + 10px); top: 50%; transform: translateY(-50%); background: var(--text); color: #fff; padding: 6px 12px; border-radius: var(--radius-xs); font-size: .78rem; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 9999; box-shadow: var(--shadow-md); } /* Brand */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: var(--text); } .brand-logo { width: 38px; height: 38px; background: var(--grad-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; font-weight: 800; box-shadow: var(--shadow-glow-sm); flex-shrink: 0; } .brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .brand-tag { font-size: .62rem; background: var(--grad-primary); color: #fff; padding: 3px 8px; border-radius: var(--radius-full); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* User mini-card */ .sidebar-user { display: flex; align-items: center; gap: 11px; padding: 10px 22px; border-bottom: 1px solid var(--border-soft); } .user-avatar { width: 42px; height: 42px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .95rem; background: var(--grad-primary); flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0 3px rgba(255,107,0,.10); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-info { overflow: hidden; min-width: 0; } .user-name { font-size: .92rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-email, .user-role { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav */ .sidebar-nav { padding: 14px 14px 8px; flex: 1; display: flex; flex-direction: column; list-style: none; /* FIX-LOGOUT: This is the ONE scroll container for nav items. min-height:0 is critical for flex children — without it the flex child ignores overflow and expands, making scroll never trigger. overscroll-behavior:contain stops scroll chaining to body on Android. */ overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .sidebar-nav li { list-style: none; } .nav-section { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); padding: 10px 10px 4px; } .nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: .9rem; font-weight: 500; text-decoration: none; margin-bottom: 2px; transition: background .18s, color .18s, transform .15s; } .nav-link i { font-size: 1.08rem; width: 20px; text-align: center; color: var(--text-soft); transition: color .15s; } .nav-link:hover { background: var(--primary-soft); color: var(--primary-dark); } .nav-link:hover i { color: var(--primary); } .nav-link.active { background: var(--grad-primary); color: #fff; font-weight: 600; box-shadow: var(--shadow-glow-sm); } .nav-link.active i { color: #fff; } .nav-link.nav-logout { color: var(--danger); margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .nav-link.nav-logout i { color: var(--danger); } .nav-link.nav-logout:hover { background: var(--danger-soft); color: var(--danger); } .nav-badge { margin-left: auto; background: var(--grad-primary); color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); letter-spacing: .04em; } .nav-badge.warning { background: var(--warning); } .nav-badge.success { background: var(--success); } .nav-link.active .nav-badge { background: rgba(255,255,255,.25); } /* Sidebar wallet card (user sidebar) */ .sidebar-wallet { margin: 12px 0 8px; padding: 16px; background: var(--grad-primary-soft); border: 1px solid rgba(255,107,0,.18); border-radius: var(--radius); /* FIX-LOGOUT: No side margin here — parent sidebar-nav already has padding. Reduced bottom margin so logout is not pushed off screen. */ flex-shrink: 0; } .sidebar.sidebar-dark .sidebar-wallet { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); } .wallet-lbl { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .sidebar.sidebar-dark .wallet-lbl { color: rgba(255,255,255,.5); } .wallet-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* FIX-3: color fallback for browsers without background-clip:text support */ color: var(--primary); margin: 6px 0 10px; } /* FIX-3: Dark sidebar wallet value — ensure gradient text is visible on dark bg */ .sidebar.sidebar-dark .wallet-val { background: linear-gradient(135deg, #FFB37A 0%, #FF8C42 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--primary-light); } .wallet-action { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 700; color: var(--primary); text-decoration: none; transition: opacity .15s; } .wallet-action:hover { opacity: .75; } .sidebar.sidebar-dark .wallet-action { color: var(--primary-light); } /* ── SECTION TITLE (used inside cards/panels) ────────────────────── */ .section-title { font-family: var(--font-display); font-size: .95rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; margin-bottom: 14px; } .btn-withdraw { display: block; text-align: center; background: var(--grad-primary); color: #fff; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-glow-sm); } .btn-withdraw:hover { color: #fff; filter: brightness(1.05); } .sidebar-admin-badge { display: flex; align-items: center; gap: 8px; margin: 12px 14px 16px; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: .8rem; font-weight: 700; } .badge-icon { font-size: 1rem; } /* Sidebar overlay (mobile) — sits BEHIND sidebar/hamburger, only closes sidebar on click */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); z-index: 900; /* below sidebar (1000) and hamburger (1100) */ pointer-events: none; } .sidebar-overlay.show, .sidebar-overlay.active { display: block; pointer-events: auto; /* only active when sidebar is open */ animation: fadeIn .25s ease; } body.nav-open { overflow: hidden; } /* ── 7. TOPBAR (REMOVED) ─────────────────────────────────────────── */ /* The mobile/top header bar (.topbar, .topbar-title, .topbar-icon, etc.) has been fully removed per design update. Content now starts at the very top of the viewport on all breakpoints. */ .sidebar-toggle, .topbar-hamburger { background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--text); padding: 6px 8px; border-radius: var(--radius-xs); transition: background .15s; } .sidebar-toggle:hover, .topbar-hamburger:hover { background: var(--surface); } @media (min-width: 992px) { .sidebar-toggle { display: none; } } /* ── Animated 3-line hamburger ↔ X toggle ─────────────────────── */ .hamburger-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } .hamburger-box { position: relative; width: 20px; height: 16px; display: inline-block; } .hamburger-line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), top .3s var(--ease-out); } .hamburger-line-top { top: 0; } .hamburger-line-mid { top: 7px; } .hamburger-line-bottom { top: 14px; } /* Open state: morph into X */ .hamburger-btn[aria-expanded="true"] .hamburger-line-top { top: 7px; transform: rotate(45deg); } .hamburger-btn[aria-expanded="true"] .hamburger-line-mid { opacity: 0; transform: scaleX(0); } .hamburger-btn[aria-expanded="true"] .hamburger-line-bottom { top: 7px; transform: rotate(-45deg); } /* ── Mobile top header bar (sticky, replaces floating FAB) ─────── */ .mobile-topbar { display: none; } @media (max-width: 991.98px) { .mobile-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; left: 0; right: 0; z-index: 1100; height: 56px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--border-soft); box-shadow: 0 2px 8px rgba(15,23,42,.08); } .mobile-topbar-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; } /* FIX-HAMBURGER: Previously this rule dropped the ENTIRE .mobile-topbar (including the hamburger button itself, since the button lives inside this element) to z-index:850 — BELOW the sidebar (1000) and overlay (900). That meant once the sidebar opened, the hamburger button became physically unclickable (covered by the sidebar/overlay), so tapping it again to close the menu did nothing. This rule is in the GLOBAL stylesheet loaded by every principal page (including wallet.php) via includes/layout.php, so the bug was never page-specific — it affected the close-tap everywhere once the sidebar was open. The sidebar is an opaque #fff panel that already visually covers the topbar underneath it, so no z-index drop is needed here. Removed: body.sidebar-open .mobile-topbar { z-index: 850; } */ /* Main content needs top push for the sticky header */ .user-main, .admin-main, .teacher-main, .main-wrap { padding-top: 0; } } @media (min-width: 992px) { .mobile-topbar { display: none !important; } } [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 5px 10px; border-radius: var(--radius-xs); font-size: .74rem; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 9999; } /* ── 8. MAIN LAYOUT WRAPPERS ─────────────────────────────────────── */ .admin-main, .teacher-main, .main-wrap, .user-main { margin-left: 0; padding-top: 0; min-height: 100vh; background: var(--body-bg); transition: margin-left .28s var(--ease-out); } @media (min-width: 992px) { .admin-main, .teacher-main, .main-wrap, .user-main { margin-left: var(--sidebar-w); } /* FIX-1: Collapsed main layout also inside media query */ body.sidebar-collapsed .admin-main, body.sidebar-collapsed .teacher-main, body.sidebar-collapsed .main-wrap { margin-left: var(--sidebar-w-collapsed); } } .admin-content, .teacher-content, .content-area, .user-content { padding: 28px; max-width: 1400px; margin: 0 auto; } .user-content { max-width: 980px; } @media (max-width: 991px) { .admin-content, .teacher-content, .content-area { padding: 18px 16px; padding-top: 64px; } .user-content { padding: 18px 14px; padding-top: 64px; } } @media (max-width: 480px) { .admin-content, .teacher-content, .content-area, .user-content { padding: 14px 12px; } } /* Public pages container (when no sidebar) */ .public-wrap { min-height: 100vh; background: var(--body-bg); } .container, .page-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ── 9. PAGE HEADER ──────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } .page-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--text); letter-spacing: -.025em; line-height: 1.2; } .page-subtitle { font-size: .92rem; color: var(--text-muted); margin-top: 4px; } @media (max-width: 640px) { .page-title { font-size: 1.4rem; } } /* ── 10. CARDS ───────────────────────────────────────────────────── */ .card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s, transform .2s; } .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 1rem; color: var(--text); background: linear-gradient(180deg, #fff 0%, #FBFCFE 100%); } .card-body { padding: 22px; } .card-footer { padding: 16px 22px; border-top: 1px solid var(--border-soft); background: var(--surface-2); } .card-glass { background: var(--glass-bg); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border: 1px solid var(--glass-brd); } .card-hover:hover, .card.interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(255,107,0,.18); } /* Stat cards */ .stat-card { position: relative; background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: box-shadow .2s, transform .2s; } .stat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,107,0,.08), transparent 55%); pointer-events: none; } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--grad-primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 10px; } .stat-lbl { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .stat-val, .stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.02em; } /* FIX-10: .sub and .value scoped under .stat-card to avoid global Bootstrap/class collisions */ .stat-card .sub { font-size: .8rem; color: var(--text-muted); margin-top: 4px; } .stat-card .value { font-size: 1.15rem; font-weight: 700; color: var(--primary); } /* ── 11. GRID ────────────────────────────────────────────────────── */ .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } @media (max-width: 991px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── 12. BUTTONS ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: 1.2; white-space: nowrap; transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out), filter .18s var(--ease-out), opacity .18s; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow-sm); } .btn-primary:hover { color: #fff; filter: brightness(1.04); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn-secondary { background: #fff; color: var(--text-secondary); border-color: var(--border); } .btn-secondary:hover { background: var(--surface); border-color: #CBD5E1; color: var(--text); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #059669; color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #DC2626; color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { background: #D97706; color: #fff; } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary-soft); color: var(--primary-dark); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-dark { background: var(--text); color: #fff; } .btn-dark:hover { background: #2A2A2A; color: #fff; } .btn-sm { padding: 7px 14px; font-size: .82rem; } .btn-xs { padding: 5px 11px; font-size: .75rem; } .btn-lg { padding: 13px 28px; font-size: 1rem; } .btn-xl { padding: 16px 34px; font-size: 1.05rem; border-radius: var(--radius); } .btn-pill { border-radius: var(--radius-full); } .btn-block, .btn-w-full { display: flex; width: 100%; } .btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } /* ── 13. BADGES ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .badge-primary { background: var(--primary); color: #fff; } .badge-success { background: var(--success-soft); color: #047857; } .badge-danger { background: var(--danger-soft); color: #B91C1C; } .badge-warning { background: var(--warning-soft); color: #B45309; } .badge-info { background: var(--info-soft); color: #0369A1; } .badge-secondary { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .badge-purple { background: var(--purple-soft); color: var(--purple); } .badge-gradient { background: var(--grad-primary); color: #fff; } .badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full); font-size: .74rem; font-weight: 600; } .status-active, .status-success { background: var(--success-soft); color: #047857; } .status-inactive, .status-cancelled, .status-rejected, .status-failed { background: var(--danger-soft); color: #B91C1C; } .status-pending, .status-processing{ background: var(--warning-soft); color: #B45309; } .status-expired { background: var(--surface); color: var(--text-muted); } .status-open { background: var(--info-soft); color: #0369A1; } .status-closed { background: var(--surface); color: var(--text-muted); } /* ── 14. FORMS ───────────────────────────────────────────────────── */ .sw-label, .form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .sw-input, .sw-select, .sw-textarea, .form-control, .form-select, input[type="text"]:not(.bare), input[type="email"]:not(.bare), input[type="password"]:not(.bare), input[type="tel"]:not(.bare), input[type="number"]:not(.bare), input[type="search"]:not(.bare), input[type="url"]:not(.bare), select:not(.bare), textarea:not(.bare) { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); font-size: .94rem; font-family: var(--font-base); transition: border-color .18s, box-shadow .18s, background .18s; outline: none; } .sw-input:focus, .sw-select:focus, .sw-textarea:focus, .form-control:focus, .form-select:focus, input:focus:not(.bare), select:focus:not(.bare), textarea:focus:not(.bare) { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,107,0,.12); background: #fff; } .sw-input::placeholder, .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-soft); } .sw-textarea, textarea { resize: vertical; min-height: 110px; } .sw-select, .form-select, select { cursor: pointer; } .form-group { margin-bottom: 18px; } /* FIX-5: .form-row gap explicitly set; won't inherit from .grid if both classes used */ .form-row { display: grid; gap: 16px !important; /* explicit override beats .grid's gap:18px */ grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-hint { font-size: .78rem; color: var(--text-muted); margin-top: 5px; } .form-error { font-size: .78rem; color: var(--danger); margin-top: 5px; } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-soft); } .switch-row:last-child { border-bottom: none; } .toggle { position: relative; display: inline-block; width: 44px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px; cursor: pointer; transition: background .2s; } .toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.15); } .toggle input:checked + .toggle-slider { background: var(--grad-primary); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); } /* Checkbox / radio premium */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; } /* ── 15. TABLES ──────────────────────────────────────────────────── */ .table-wrapper, .table-responsive { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-soft); background: var(--card-bg); box-shadow: var(--shadow-xs); } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { background: var(--surface-2); padding: 13px 16px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); border-bottom: 1px solid var(--border-soft); white-space: nowrap; text-align: left; } .table td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text-secondary); } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .15s; } .table-hover tbody tr:hover, .table tbody tr:hover { background: var(--primary-soft); } /* FIX-9: Removed duplicate .biz-table { width:100% } — use .table class instead */ /* ── 16. ALERTS ──────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid transparent; font-size: .9rem; box-shadow: var(--shadow-xs); } .alert-success { background: var(--success-soft); border-color: #A7F3D0; color: #065F46; } .alert-danger { background: var(--danger-soft); border-color: #FECACA; color: #991B1B; } .alert-warning { background: var(--warning-soft); border-color: #FDE68A; color: #92400E; } .alert-info { background: var(--info-soft); border-color: #BAE6FD; color: #075985; } .alert-icon { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; } .alert-body { flex: 1; line-height: 1.5; } /* ── 17. TABS ────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-soft); margin-bottom: 22px; overflow-x: auto; flex-wrap: nowrap; } .tab-btn { padding: 11px 20px; border: none; background: none; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .18s, border-color .18s; } .tab-btn:hover { color: var(--primary); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } /* FIX-4: Unified tab panel display logic. - .tab-panel: custom SW tabs — activated by .active alone - .tab-pane: Bootstrap tabs — activated by both .show and .active Both are hidden by default, shown when active. */ .tab-panel, .tab-pane { display: none; } .tab-panel.active { display: block; animation: fadeIn .25s var(--ease-out); } .tab-pane.show.active { display: block; animation: fadeIn .25s var(--ease-out); } .tab-content { animation: fadeIn .25s var(--ease-out); } /* ── 18. PROGRESS ────────────────────────────────────────────────── */ .progress { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; } .progress-bar { height: 100%; background: var(--grad-primary); border-radius: 999px; transition: width .6s var(--ease-out); } .progress-bar.success { background: var(--success); } .progress-bar.warning { background: var(--warning); } .progress-bar.danger { background: var(--danger); } /* ── 19. SPINNER / LOADING ───────────────────────────────────────── */ .spinner { width: 22px; height: 22px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } .spinner-lg { width: 40px; height: 40px; border-width: 3px; } .loading-overlay { position: fixed; inset: 0; background: rgba(248,250,252,.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; } .skeleton { background: linear-gradient(90deg, #EEF2F6 0%, #F6F8FB 50%, #EEF2F6 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-sm); } /* ── 20. AVATAR ──────────────────────────────────────────────────── */ .avatar { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .95rem; background: var(--grad-primary); flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 36px; height: 36px; font-size: .85rem; border-radius: 50%; object-fit: cover; } .avatar-fallback { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad-primary); color: #fff; font-size: .85rem; font-weight: 700; } .avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; } .avatar-xl { width: 86px; height: 86px; font-size: 1.8rem; } /* ── 21. EMPTY STATE ─────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; padding: 56px 28px; gap: 14px; text-align: center; } .empty-state .empty-icon, .empty-state .es-icon { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--grad-primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2rem; } .es-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--grad-primary-soft); font-size: 1.8rem; margin-bottom: 4px; } .empty-state .empty-title, .empty-state .es-title, .es-title { font-size: 1.05rem; font-weight: 700; color: var(--text); } .empty-state .empty-sub, .empty-state .es-text, .es-text { font-size: .9rem; color: var(--text-muted); max-width: 360px; } /* ── COPY BOX (referral link copy widget) ────────────────────────── */ .copy-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; overflow: hidden; } .copy-text { flex: 1; min-width: 0; font-size: .78rem; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── REFERRAL LEVEL BADGES ───────────────────────────────────────── */ .level-l1, .level-l2, .level-l3 { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; flex-shrink: 0; } .level-l1 { background: rgba(255,107,0,.12); color: var(--primary); } .level-l2 { background: rgba(124,58,237,.12); color: var(--purple); } .level-l3 { background: rgba(16,185,129,.12); color: var(--success); } /* ── 22. MODAL ───────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; animation: fadeIn .2s ease; } .modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; animation: scaleIn .25s var(--ease-spring); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-soft); font-size: 1.05rem; font-weight: 700; } .modal-body { padding: 22px 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; justify-content: flex-end; } .modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); line-height: 1; transition: color .15s; } .modal-close:hover { color: var(--danger); } /* ── 23. DROPDOWN ────────────────────────────────────────────────── */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: fixed; top: 14px; right: 12px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 200px; z-index: 500; animation: fadeIn .2s var(--ease-out); overflow: hidden; padding: 6px; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: .9rem; color: var(--text-secondary); cursor: pointer; transition: background .15s; border-radius: var(--radius-xs); } .dropdown-item:hover { background: var(--primary-soft); color: var(--primary-dark); } .dropdown-divider { height: 1px; background: var(--border-soft); margin: 6px 0; } /* ── 24. TOAST ───────────────────────────────────────────────────── */ .toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9000; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 18px; border-radius: var(--radius); background: var(--text); color: #fff; min-width: 300px; max-width: 400px; box-shadow: var(--shadow-lg); animation: fadeInUp .35s var(--ease-out); font-size: .9rem; } .toast-success { background: var(--success); } .toast-error { background: var(--danger); } .toast-warning { background: var(--warning); } /* ── 25. COURSE CARD ─────────────────────────────────────────────── */ .course-card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s, border-color .2s; display: flex; flex-direction: column; } .course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(255,107,0,.2); } .course-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--grad-hero); } .course-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .course-title { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.35; } .course-meta { font-size: .8rem; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; } /* ── 26. PLAN CARDS ──────────────────────────────────────────────── */ .tp-plan-card { background: var(--card-bg); border: 2px solid var(--border-soft); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; } .tp-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .tp-plan-card.featured-card { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,107,0,.10), var(--shadow-md); } .tp-plan-icon { width: 56px; height: 56px; border-radius: var(--radius); background: var(--grad-primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .tp-feat-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--text-secondary); } .tp-feat-row::before { content: '✓'; color: var(--success); font-weight: 800; } .tp-feat-row.dim { opacity: .4; } .tp-feat-row.dim::before { content: '×'; color: var(--text-soft); } .tp-ribbon { position: absolute; top: 18px; right: -32px; background: var(--grad-primary); color: #fff; font-size: .68rem; font-weight: 800; padding: 5px 40px; transform: rotate(45deg); letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow-glow-sm); } .tp-ribbon.best-ribbon { background: linear-gradient(135deg, #7C3AED, #A855F7); } /* ── 27. FOOTER ──────────────────────────────────────────────────── */ .global-footer { text-align: center; padding: 24px 20px; font-size: .82rem; color: var(--text-muted); border-top: 1px solid var(--border-soft); margin-top: 40px; background: #fff; } .global-footer a { color: var(--primary); text-decoration: none; font-weight: 600; } .global-footer a:hover { color: var(--primary-dark); } @media (min-width: 992px) { .global-footer { margin-left: var(--sidebar-w); } body.sidebar-collapsed .global-footer { margin-left: var(--sidebar-w-collapsed); } } /* ── 29. WALLET TILES ────────────────────────────────────────────── */ .wallet-tile { position: relative; background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); overflow: hidden; } .wallet-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(100% 60% at 100% 0%, rgba(255,107,0,.10), transparent 60%); pointer-events: none; } .wallet-tile .wt-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .wallet-tile .wt-value { font-family: var(--font-display); font-size: 1.95rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* FIX-3: Fallback for browsers without gradient text support */ color: var(--primary); line-height: 1; } .wallet-tile .wt-sub { font-size: .8rem; color: var(--text-muted); } .commission-level { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px; text-align: center; } .commission-level .cl-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .08em; } .commission-level .cl-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-top: 4px; } /* ── 30. REFERRAL ────────────────────────────────────────────────── */ .referral-link-box { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; transition: border-color .2s, box-shadow .2s; } .referral-link-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,107,0,.10); } .referral-link-box input { flex: 1; background: none; border: none; outline: none; font-size: .9rem; color: var(--text); font-family: var(--font-base); } /* ── 31. STREAK ──────────────────────────────────────────────────── */ .streak-days { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .streak-day { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface); border: 1.5px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: var(--text-muted); gap: 2px; } .streak-day.done { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow-sm); } .streak-day.today { border-color: var(--primary); color: var(--primary); } /* ── 32. AI TUTOR CHAT ───────────────────────────────────────────── */ /* FIX-6: Replaced hardcoded 60px with --page-header-h variable for flexibility */ .chat-wrapper { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - var(--page-header-h)); max-width: 880px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .chat-bubble { max-width: 78%; padding: 13px 18px; border-radius: var(--radius); font-size: .94rem; line-height: 1.55; box-shadow: var(--shadow-xs); } .chat-bubble.user { background: var(--grad-primary); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; } .chat-bubble.assistant { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; border: 1px solid var(--border-soft); } .chat-input-bar { display: flex; gap: 10px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--border-soft); } .chat-input-bar textarea { flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; resize: none; font-size: .94rem; font-family: var(--font-base); color: var(--text); background: #fff; outline: none; min-height: 44px; max-height: 130px; transition: border-color .18s, box-shadow .18s; } .chat-input-bar textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,0,.12); } /* ── 33. NOTIFICATION DOT ────────────────────────────────────────── */ .notif-dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(239,68,68,.25); } /* ── 34. SEARCH BOX ──────────────────────────────────────────────── */ .search-box { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; transition: border-color .2s, box-shadow .2s; } .search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,107,0,.10); background: #fff; } .search-box input { border: none; background: none; outline: none; font-size: .9rem; color: var(--text); font-family: var(--font-base); flex: 1; } .search-box i { color: var(--text-soft); } /* ── 35. PAGINATION ──────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 22px; } .page-btn { min-width: 38px; height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-secondary); font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .page-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: rgba(255,107,0,.25); } .page-btn.active { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow-sm); } .page-btn[disabled] { opacity: .45; cursor: not-allowed; } /* ── 36. PUBLIC LANDING ELEMENTS ─────────────────────────────────── */ .hero { position: relative; padding: 80px 0 90px; background: radial-gradient(80% 70% at 0% 0%, rgba(255,107,0,.10), transparent 60%), radial-gradient(60% 60% at 100% 100%, rgba(124,58,237,.08), transparent 60%), var(--body-bg); overflow: hidden; } .hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--text); } .hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-muted); margin-top: 16px; max-width: 640px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-soft); color: var(--primary-dark); padding: 6px 14px; border-radius: var(--radius-full); font-size: .8rem; font-weight: 700; letter-spacing: .04em; border: 1px solid rgba(255,107,0,.18); margin-bottom: 18px; } /* Public navbar */ .public-nav { position: sticky; top: 0; z-index: 100; background: var(--glass-bg); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid var(--border-soft); } .public-nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .public-nav-links { display: flex; gap: 6px; align-items: center; } .public-nav-links a { padding: 8px 14px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; color: var(--text-secondary); } .public-nav-links a:hover { background: var(--primary-soft); color: var(--primary-dark); } /* FIX-7: Mobile nav — hide links on small screens, show when .nav-open is on