/* Typography adopts the crisp, lighter system-font look (à la Catechism): native font stack, slightly smaller base, restrained weights. This is a look-and-feel change only — no layout, colour or behaviour is altered. */ :root{ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; --night:#0A0F1E; --asphalt:#0C1426; --surface:#121B31; --surface-2:#18233E; --line:#243150; --line-soft:#1C2740; --text:#EAF0FF; --text-soft:#AEBAD6; --muted:#7787A8; --lane:#F7B733; --lane-d:#E39A12; --lane-wash:rgba(247,183,51,.14); --green:#2FD6A5; --cyan:#38BDF8; --violet:#8098FF; --rose:#FF5B7B; } *{box-sizing:border-box} html,body{margin:0} body{ font-family:var(--font-sans);color:var(--text); font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background: radial-gradient(1100px 420px at 78% -8%, rgba(247,183,51,.10), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(56,132,248,.08), transparent 55%), var(--night); background-attachment:fixed; } /* Display font now shares the system stack; weight/tracking give the "sharp" heading feel without the heavier geometric Sora face. */ .font-display{font-family:var(--font-sans);font-weight:600;letter-spacing:-.011em} .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums} /* --- Catechism-style refinement pass (look & feel only) ------------------- Many headings are inline-styled font-weight:700/800; soften the display face to a crisp 600 and trim the very largest sizes so the UI reads sharp and light rather than bulky. Scoped to .font-display so body copy, badges and buttons are untouched. */ .font-display{font-weight:600 !important} .font-display[style*="font-weight:800"], .font-display[style*="font-weight: 800"]{font-weight:650 !important} /* Trim oversized display numbers a step (32→28, 26→23, 24→22) for balance. */ .font-display[style*="font-size:32px"]{font-size:28px !important} .font-display[style*="font-size:30px"]{font-size:27px !important} .font-display[style*="font-size:28px"]{font-size:25px !important} .font-display[style*="font-size:26px"]{font-size:23px !important} .font-display[style*="font-size:24px"]{font-size:22px !important} .font-display[style*="font-size:22px"]{font-size:20px !important} /* Section titles set via h1/h2 utility sizes stay, just lighter tracking. */ h1,h2,h3{letter-spacing:-.01em} .card{background:var(--surface);border:1px solid var(--line);border-radius:16px} .card-2{background:var(--surface-2);border:1px solid var(--line);border-radius:14px} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .875rem;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .08s,filter .15s;text-decoration:none;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn:hover{filter:brightness(1.08)} .btn[disabled]{opacity:.55;cursor:not-allowed} .btn-primary{background:var(--lane);color:#3a2600;border-color:var(--lane-d)} .btn-dark{background:#1D2947;color:var(--text);border:1px solid var(--line)} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)} .btn-ghost:hover{background:rgba(255,255,255,.04);filter:none} /* Inputs */ .input,select.input,textarea.input{width:100%;padding:.55rem .75rem;border-radius:12px;font-size:.875rem;color:var(--text);background:var(--asphalt);border:1px solid var(--line);outline:none} .input:focus{border-color:var(--lane)} select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237787A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.8rem} label .lbl{font-size:.72rem;font-weight:600;color:var(--text-soft)} /* Sidebar */ .sidebar{background:linear-gradient(180deg,#0C1426,#0A101F);border-right:1px solid var(--line-soft)} .ov-topbar{background:rgba(10,15,30,.82)} /* The top bar stays dark navy in BOTH themes, so its contents must be light to stay readable. Force the school name + city (and any icon buttons) to light. */ .ov-topbar .font-semibold{color:#EAF0FF} .ov-topbar .ov-top-city{color:#9AA6C4} /* Icon buttons on the dark bar (hamburger, bell) stay light in both themes. */ .ov-topbar .btn-ghost{color:#EAF0FF} .ov-topbar .ov-drawer-open-btn{color:#EAF0FF} .navlink{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:12px;font-size:.875rem;font-weight:500;color:#AEBAD6;text-decoration:none;transition:background .15s,color .15s} .navlink:hover{background:rgba(255,255,255,.05);color:#fff} .navlink-active{background:var(--lane);color:#3a2600;font-weight:600} /* ---------- Grouped sidebar navigation ---------- */ .ov-nav-group{margin-bottom:.35rem} .ov-nav-group + .ov-nav-group{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line-soft)} .ov-nav-head{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);padding:.35rem .75rem .3rem;opacity:.8} .ov-nav-group .navlink{margin-bottom:2px} .ov-nav-toggle{width:100%;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left} .ov-nav-caret{margin-left:auto;display:flex;transition:transform .2s ease} .ov-nav-parent.open .ov-nav-caret{transform:rotate(180deg)} .ov-nav-sub{margin:2px 0 4px .9rem;padding-left:.6rem;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;gap:1px} .ov-nav-subitem{padding:.4rem .6rem;font-size:.82rem;color:#9aa6c4} .ov-nav-subitem:hover{background:rgba(255,255,255,.05);color:#fff} .ov-nav-subitem.navlink-active{background:rgba(56,189,248,.14);color:var(--cyan);font-weight:600} .lane-strip{height:3px;background:repeating-linear-gradient(90deg,var(--lane) 0 14px,transparent 14px 26px);opacity:.7} /* Table */ .tbl{width:100%;font-size:.875rem;border-collapse:collapse} .tbl th{text-align:left;font-weight:600;color:var(--text-soft);padding:.75rem 1rem;border-bottom:1px solid var(--line)} .tbl td{padding:.65rem 1rem;border-bottom:1px solid var(--line-soft)} .tbl tr:last-child td{border-bottom:none} .row-hover:hover{background:rgba(255,255,255,.025)} /* Modal */ .modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(4,8,18,.66);backdrop-filter:blur(3px)} .modal{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;max-height:90vh;overflow-y:auto} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)} /* Misc */ .scroll-thin::-webkit-scrollbar{width:8px;height:8px} .scroll-thin::-webkit-scrollbar-thumb{background:#2A385C;border-radius:8px} /* App-wide themed scrollbars */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} *::-webkit-scrollbar-thumb:hover{background:#33456e} *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} /* Tall dropdown panels scroll instead of overflowing the viewport */ details > form.card,details > .card{max-height:82vh;overflow-y:auto} .chip{font-family:'Spline Sans Mono',monospace;font-weight:600} .fade-in{animation:fade .25s ease both} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} a{color:inherit} .bar-track{background:var(--line);border-radius:99px;overflow:hidden} .divider{height:1px;background:var(--line)} input[type=number]::-webkit-inner-spin-button{opacity:.4} /* Print (report cards / payslips) */ @media print{ body{background:#fff;color:#111} .no-print{display:none !important} .print-card{border:1px solid #ccc !important} } /* ---------- AI Assistant ---------- */ .ai-shell{display:grid;grid-template-columns:250px 1fr;gap:14px;height:calc(100vh - 150px);min-height:520px} .ai-side{display:flex;flex-direction:column;overflow:hidden} .ai-convs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px} .ai-conv{display:block;padding:8px 10px;border-radius:9px;transition:.15s;border:1px solid transparent} .ai-conv:hover{background:var(--surface-2)} .ai-conv.on{background:var(--surface-2);border-color:var(--violet)} .ai-main{display:flex;flex-direction:column;overflow:hidden;position:relative} .ai-main::before{content:'';position:absolute;inset:0;background:radial-gradient(1200px 300px at 50% -80px,rgba(128,152,255,.16),transparent 70%);pointer-events:none} .ai-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);position:relative;z-index:1} .ai-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(128,152,255,.25),rgba(192,132,252,.25));display:flex;align-items:center;justify-content:center;flex:none} .ai-avatar.sm{width:26px;height:26px;border-radius:8px;font-size:11px;color:var(--violet)} .ai-avatar-lg{width:92px;height:92px;border-radius:28px;margin:0 auto;background:linear-gradient(135deg,rgba(128,152,255,.28),rgba(192,132,252,.28));display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(128,152,255,.07)} .ai-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1} .ai-empty{margin:auto;text-align:center;max-width:520px;padding:20px 0} .ai-sugs{display:flex;flex-direction:column;gap:9px;margin-top:24px;width:100%;max-width:420px;margin-left:auto;margin-right:auto} .ai-sug{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left; background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:12px; padding:13px 16px;font-size:13.5px;cursor:pointer;transition:.15s} .ai-sug:hover{border-color:var(--violet);background:rgba(128,152,255,.10);transform:translateX(2px)} .ai-sug-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ai-sug-go{color:var(--violet);flex:none;display:flex} .ai-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; color:var(--text-soft);background:transparent;border:none;cursor:pointer;transition:.15s} .ai-icon:hover{background:var(--surface-2);color:var(--violet)} .ai-clip{color:var(--muted);display:flex;flex:none;cursor:default} .ai-row{display:flex;gap:9px;align-items:flex-start;max-width:min(760px,92%)} .ai-row.user{margin-left:auto;justify-content:flex-end} .ai-bubble{border-radius:14px;padding:11px 14px;font-size:14px;line-height:1.6} .ai-bubble.user{background:linear-gradient(135deg,var(--violet),#6f7ff0);color:#0B1020;font-weight:500;border-bottom-right-radius:5px} .ai-bubble.bot{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px} .ai-bubble code{background:rgba(0,0,0,.28);padding:1px 5px;border-radius:4px;font-size:12.5px} .ai-ul{margin:2px 0 2px 2px;padding-left:14px;list-style:none} .ai-ul li{position:relative;padding-left:12px;margin:2px 0} .ai-ul li::before{content:'•';position:absolute;left:0;color:var(--violet)} .ai-meta{font-size:10.5px;color:var(--muted);margin-top:7px;padding-top:6px;border-top:1px solid var(--line-soft)} .ai-foot{padding:12px 16px 14px;border-top:1px solid var(--line);position:relative;z-index:1} .ai-inputbar{display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:6px 6px 6px 16px;transition:.15s} .ai-inputbar:focus-within{border-color:var(--violet)} .ai-input{flex:1;background:transparent;border:none;color:var(--text);font-size:14px;padding:9px 0;outline:none;font-family:inherit} .ai-send{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--violet),#6f7ff0);color:#0B1020;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex:none} .ai-send:hover{filter:brightness(1.1)}.ai-send:disabled{opacity:.5;cursor:not-allowed} .ai-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 11px;border-radius:99px;background:rgba(128,152,255,.14);color:var(--violet);border:1px solid rgba(128,152,255,.3)} .ai-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--violet)} .dot-green{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block} .ai-dots{display:inline-flex;gap:4px;padding:3px 0} .ai-dots i{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:aiblink 1.3s infinite} .ai-dots i:nth-child(2){animation-delay:.18s}.ai-dots i:nth-child(3){animation-delay:.36s} @keyframes aiblink{0%,60%,100%{opacity:.25}30%{opacity:1}} @media (max-width:820px){.ai-shell{grid-template-columns:1fr;height:auto}.ai-side{max-height:210px}.ai-main{height:calc(100vh - 300px);min-height:440px}} /* ---------- School cards: keep actions inside the card ---------- */ .sc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sc-actions form{display:block;min-width:0} .sc-btn{width:100%;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:.4rem;padding-right:.4rem} /* ---------- Super Admin card-first navigation ---------- */ .sc-pick{transition:border-color .18s, transform .18s, box-shadow .18s} .sc-pick:hover{border-color:var(--lane);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.3)} /* Tab buttons on the Academic Management screen */ .tab-btn{padding:.5rem .9rem;border-radius:.5rem;font-size:.875rem;color:var(--text-soft); background:transparent;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s} .tab-btn:hover{background:var(--surface-2);color:var(--text)} .tab-btn.is-active{background:rgba(247,183,51,.14);color:var(--lane);font-weight:600;border-color:rgba(247,183,51,.28)} /* ---------- Navigation drawer ---------- Two behaviours share one button. Below 768px the sidebar slides in over the page as a drawer. At 768px and above it is a permanent column, and the same button collapses it to an icon rail instead. Previously the button was simply hidden here and the sidebar pinned with transform:none !important, so on a desktop browser the menu appeared to do nothing at all — the rule below is what that !important was overriding. The rail keeps navigation reachable while giving the content the width back. */ @media (max-width: 767.98px){ #ov-sidebar{transform:translateX(-100%)} #ov-sidebar.ov-drawer-open{transform:translateX(0)} } @media (min-width: 768px){ /* Desktop: never translated off-screen; width is what changes. */ #ov-sidebar{transform:none !important;transition:width .2s ease} #ov-sidebar .ov-drawer-close{display:none !important} body.ov-rail #ov-sidebar{width:74px} body.ov-rail #ov-sidebar .ov-nav-label, body.ov-rail #ov-sidebar .ov-brand-text, body.ov-rail #ov-sidebar .ov-user-text{display:none} body.ov-rail #ov-sidebar .navlink{justify-content:center;padding-left:.5rem;padding-right:.5rem} /* In rail mode, hide section headers and any expanded sub-menus. */ body.ov-rail #ov-sidebar .ov-nav-head{display:none} body.ov-rail #ov-sidebar .ov-nav-sub{display:none !important} body.ov-rail #ov-sidebar .ov-nav-group + .ov-nav-group{border-top:none;margin-top:.25rem;padding-top:.25rem} body.ov-rail #ov-sidebar .ov-brand{justify-content:center;padding-left:0;padding-right:0} body.ov-rail #ov-sidebar .ov-user{justify-content:center} body.ov-rail #ov-sidebar .lane-strip{opacity:.35} /* Hovering a collapsed item names it, so the rail stays usable. */ body.ov-rail #ov-sidebar .navlink{position:relative} body.ov-rail #ov-sidebar .navlink:hover::after{ content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:var(--surface-2);border:1px solid var(--line);color:var(--text); padding:.35rem .6rem;border-radius:8px;font-size:12px;white-space:nowrap;z-index:70; box-shadow:0 8px 22px rgba(2,6,16,.5);pointer-events:none} } /* ---------- Floating AI assistant ---------- Present on every page. The launcher stays clear of the content; the panel is a fixed sheet on small screens and a docked card on larger ones. */ .ov-ai-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%; border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0A1020; background:linear-gradient(135deg,#5B8CFF,#3A6BE0);box-shadow:0 10px 26px rgba(59,110,224,.45); transition:transform .15s ease,box-shadow .15s ease} .ov-ai-fab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(59,110,224,.55)} .ov-ai-fab-icon{display:flex;color:#fff} .ov-ai-panel{position:fixed;right:18px;bottom:84px;z-index:61;width:min(380px,calc(100vw - 36px)); max-height:min(560px,calc(100vh - 120px));display:none;flex-direction:column;overflow:hidden; background:var(--surface);border:1px solid var(--line);border-radius:18px; box-shadow:0 24px 60px rgba(2,6,16,.6)} .ov-ai-panel.open{display:flex} .ov-ai-head{display:flex;align-items:center;gap:10px;padding:12px 14px; background:linear-gradient(135deg,#243352,#1A2540);border-bottom:1px solid var(--line)} .ov-ai-badge{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#5B8CFF,#3A6BE0);color:#fff;flex:none} .ov-ai-title{font-weight:700;font-size:14px} .ov-ai-status{font-size:11px;color:var(--green);display:flex;align-items:center;gap:5px} .ov-ai-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block} .ov-ai-icbtn{background:transparent;border:none;color:var(--text-soft);cursor:pointer;padding:5px;border-radius:8px;display:flex} .ov-ai-icbtn:hover{background:rgba(255,255,255,.08);color:var(--text)} .ov-ai-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)} .ov-ai-empty{text-align:center;padding:18px 10px} .ov-ai-empty-icon{width:46px;height:46px;border-radius:14px;margin:0 auto 10px;display:flex;align-items:center; justify-content:center;background:rgba(91,140,255,.16);color:#7FA6FF} .ov-ai-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px} .ov-ai-chip{font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer; background:var(--surface-2);border:1px solid var(--line);color:var(--text-soft)} .ov-ai-chip:hover{border-color:var(--lane);color:var(--lane)} .ov-ai-row{display:flex} .ov-ai-row.me{justify-content:flex-end} .ov-ai-bubble{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5; background:var(--surface-2);border:1px solid var(--line);color:var(--text);word-break:break-word} .ov-ai-row.me .ov-ai-bubble{background:linear-gradient(135deg,#5B8CFF,#3A6BE0);border-color:transparent;color:#fff} .ov-ai-bubble p{margin:0 0 6px} .ov-ai-bubble p:last-of-type{margin-bottom:0} .ov-ai-time{font-size:10px;opacity:.65;margin-top:5px} .ov-ai-typing{display:inline-flex;gap:4px;padding:3px 0} .ov-ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block; animation:ovAiBlink 1.2s infinite ease-in-out} .ov-ai-typing i:nth-child(2){animation-delay:.18s} .ov-ai-typing i:nth-child(3){animation-delay:.36s} @keyframes ovAiBlink{0%,80%,100%{opacity:.25}40%{opacity:1}} .ov-ai-bar{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--surface)} .ov-ai-input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:999px; padding:10px 14px;color:var(--text);font-size:13px;outline:none} .ov-ai-input:focus{border-color:var(--lane)} .ov-ai-send{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex:none; display:flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(135deg,#5B8CFF,#3A6BE0)} /* On small screens the panel fills the width and the launcher tucks in. */ @media (max-width:520px){ .ov-ai-panel{right:10px;left:10px;bottom:78px;width:auto;max-height:calc(100vh - 100px)} .ov-ai-fab{right:14px;bottom:14px;width:50px;height:50px} } /* Printed pages should never carry the assistant. */ @media print{ .ov-ai-fab,.ov-ai-panel{display:none !important} } /* Sticky account block — pinned to the bottom of the sidebar, always visible */ .ov-account-sticky{margin-top:auto;position:sticky;bottom:0;padding:10px 12px;background:var(--sidebar-bg,var(--asphalt));backdrop-filter:blur(4px)} body.ov-rail .ov-account-sticky .ov-user-text{display:none} body.ov-rail .ov-account-sticky .ov-user{justify-content:center;padding-left:0;padding-right:0} /* ============================================================ LIGHT THEME Toggled by data-theme="light" on . Overrides the colour tokens plus the few places that hardcode dark backgrounds (body, sidebar, fab). Everything else uses the CSS variables, so it follows automatically. ============================================================ */ html[data-theme="light"]{ --night:#F4F6FB; --asphalt:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F7FC; --line:#DDE3EF; --line-soft:#E9EDF6; --text:#1A2233; --text-soft:#48566F; --muted:#8A94A9; --lane:#E39A12; --lane-d:#C9820A; --lane-wash:rgba(227,154,18,.12); --green:#0FA678; --cyan:#0C86C4; --violet:#5568E0; --rose:#E03A5C; } html[data-theme="light"] body{ color:var(--text); background: radial-gradient(1100px 420px at 78% -8%, rgba(227,154,18,.07), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(56,132,248,.06), transparent 55%), var(--night); } html[data-theme="light"] .sidebar{ background:linear-gradient(180deg,#FFFFFF,#F5F7FC); border-right:1px solid var(--line); } html[data-theme="light"] .navlink{color:var(--text-soft)} html[data-theme="light"] .navlink-active{color:var(--text)} html[data-theme="light"] .btn-dark{background:#EEF1F8;color:var(--text)} html[data-theme="light"] .ov-ai-panel, html[data-theme="light"] .modal{box-shadow:0 20px 60px rgba(20,30,60,.14)} html[data-theme="light"] *::-webkit-scrollbar-thumb{background:#CBD3E3} /* Theme toggle control (sits in the sidebar account area / header) */ .ov-theme-toggle{ display:inline-flex;align-items:center;gap:.4rem;cursor:pointer; border:1px solid var(--line);border-radius:999px;padding:.3rem .6rem; background:var(--surface-2);color:var(--text-soft);font-size:.75rem;font-weight:600; transition:.15s; } .ov-theme-toggle:hover{color:var(--text);border-color:var(--lane)} .ov-theme-toggle .dot{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center} /* ============================================================ MOBILE NATIVE-APP REFINEMENTS (phones ≤ 640px) Smaller base type, tighter rhythm and larger tap targets so the web app reads like a real native mobile app, with all bottom tabs fitting comfortably. Loaded from the static stylesheet so it ships permanently (ovium-ui.css owns the tab-bar layout). ============================================================ */ @media (max-width:640px){ html{font-size:13.5px} /* scales rem-based spacing down */ body{font-size:13px;line-height:1.5} /* Headings sit closer to native app sizes. */ h1,.font-display{font-size:1.28rem !important;line-height:1.25} h2{font-size:1.1rem !important} h3{font-size:1rem !important} /* Cards: less chrome, tighter padding, phone-friendly radius. */ .card,.card-2{border-radius:14px} .card{padding:14px !important} .p-4{padding:.85rem !important} .p-6,.sm\:p-6{padding:1rem !important} /* Comfortable, thumb-sized controls. */ .btn{padding:.5rem .8rem;font-size:.82rem;border-radius:10px} .btn-primary,.btn-dark{min-height:40px} .input,select.input,textarea.input{font-size:16px;min-height:42px;border-radius:10px} /* 16px inputs stop iOS Safari auto-zooming on focus — a key native feel. */ /* Stat tiles and grids stack to a single clean column. */ .grid-cols-2{grid-template-columns:1fr 1fr} .grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr) !important} /* Tables scroll horizontally instead of breaking the layout. */ .ov-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} table{font-size:.82rem} /* Modals become bottom-sheets — the expected native pattern. */ .modal-backdrop{align-items:flex-end !important;padding:0 !important} .modal{max-width:100% !important;width:100%;border-radius:18px 18px 0 0 !important; max-height:92vh;animation:ovSheetUp .22s cubic-bezier(.2,.8,.2,1)} @keyframes ovSheetUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}} /* Slightly larger tab icons + safe label sizing so 5 tabs always fit. */ #ov-tabbar .ov-tab{font-size:10px} #ov-tabbar .ov-tab .ov-tab-ic{height:26px} /* The dark top bar stays compact on phones. */ .ov-topbar{height:56px} } /* Extra-small phones (≤ 380px): trim a touch more so nothing clips. */ @media (max-width:380px){ html{font-size:13px} #ov-tabbar .ov-tab{font-size:9px} #ov-tabbar .ov-tab .ov-tab-lb{letter-spacing:0} } /* ============================================================ APP SHELL — the sidebar stays fixed while only the main content scrolls. Without a bounded shell height the whole page scrolls and the (static) sidebar scrolls away with it. ============================================================ */ .ov-shell{height:100vh;height:100dvh;overflow:hidden} @media (min-width:768px){ /* Desktop: sidebar is a fixed-height column that never scrolls with the page; its inner