/* ARIA School OS: light and dark themes, the app shell, and a compatibility layer that restyles the Tailwind classes app.js renders (dashboard-*, gray/slate, emerald/cyan accents) without touching logic. The theme itself (data-theme on ) is set by /js/aria-ui.js. */ :root { --sos-bg-rgb: 238 242 247; --sos-panel-rgb: 255 255 255; --sos-panel2-rgb: 246 248 251; --sos-ink-rgb: 15 23 42; --sos-ink2-rgb: 71 85 105; --sos-ink3-rgb: 100 116 139; --sos-border-rgb: 226 232 240; --sos-border2-rgb: 203 213 225; --sos-accent-rgb: 17 17 17; --sos-on-accent-rgb: 255 255 255; --sos-fill: rgba(118, 118, 128, 0.1); --sos-fill-2: rgba(118, 118, 128, 0.17); --sos-line: rgb(var(--sos-border-rgb)); --sos-line-2: rgb(var(--sos-border2-rgb)); --sos-ok: #15803d; --sos-ok-soft: rgba(22, 163, 74, 0.12); --sos-warn: #b45309; --sos-warn-soft: rgba(245, 158, 11, 0.14); --sos-bad: #dc2626; --sos-bad-soft: rgba(220, 38, 38, 0.1); --sos-overlay: rgba(15, 23, 42, 0.32); --sos-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 28px rgba(15, 23, 42, 0.07); --sos-shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.06), 0 24px 60px rgba(15, 23, 42, 0.14); --sos-ease: cubic-bezier(0.32, 0.72, 0, 1); --sos-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --sos-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; color-scheme: light; } html[data-theme="dark"] { --sos-bg-rgb: 11 13 18; --sos-panel-rgb: 21 24 31; --sos-panel2-rgb: 27 31 39; --sos-ink-rgb: 241 245 249; --sos-ink2-rgb: 203 213 225; --sos-ink3-rgb: 148 163 184; --sos-border-rgb: 38 43 54; --sos-border2-rgb: 58 64 78; --sos-accent-rgb: 245 245 245; --sos-on-accent-rgb: 11 13 18; --sos-fill: rgba(255, 255, 255, 0.06); --sos-fill-2: rgba(255, 255, 255, 0.1); --sos-ok: #4ade80; --sos-ok-soft: rgba(74, 222, 128, 0.14); --sos-warn: #fbbf24; --sos-warn-soft: rgba(251, 191, 36, 0.14); --sos-bad: #f87171; --sos-bad-soft: rgba(248, 113, 113, 0.14); --sos-overlay: rgba(0, 0, 0, 0.55); --sos-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35); --sos-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.55); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body.sos-app { margin: 0; overflow: hidden; background: rgb(var(--sos-bg-rgb)); color: rgb(var(--sos-ink-rgb)); font: 15px/1.5 var(--sos-font); -webkit-font-smoothing: antialiased; } body.sos-app .font-mono { font-family: var(--sos-font) !important; font-variant-numeric: tabular-nums; } .material-symbols-outlined { font-size: 22px; line-height: 1; flex-shrink: 0; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } :focus-visible { outline: 2px solid rgb(var(--sos-accent-rgb)); outline-offset: 2px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--sos-fill-2); border-radius: 99px; } ::-webkit-scrollbar-track { background: transparent; } [hidden] { display: none !important; } /* Layout */ .sos-layout { display: flex; height: 100vh; height: 100dvh; } .sos-col { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin-right 0.55s var(--sos-ease); } @media (min-width: 1280px) { body.sos-copilot-open .sos-col { margin-right: 444px; } } /* Sidebar */ .sos-side { position: relative; z-index: 40; flex-shrink: 0; width: 280px; display: flex; flex-direction: column; margin: 12px 0 12px 12px; padding: 18px 14px; overflow: hidden; border-radius: 24px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow); transition: width 0.45s var(--sos-ease), padding 0.45s var(--sos-ease), transform 0.5s var(--sos-ease); view-transition-name: sos-side; } @media (max-width: 899px) { .sos-side { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); margin: 0; border-radius: 0 24px 24px 0; transform: translateX(-105%); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } .sos-side.mobile-open { transform: none; } } @media (min-width: 900px) { body.sos-rail .sos-side { width: 84px; padding: 18px 12px; } } #sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: var(--sos-overlay); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #sidebar-backdrop.visible { opacity: 1; pointer-events: auto; } @media (min-width: 900px) { #sidebar-backdrop { display: none; } } .sos-side-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 6px; } .sos-logo { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: rgb(var(--sos-accent-rgb)); color: rgb(var(--sos-on-accent-rgb)); font-weight: 800; font-size: 15px; text-decoration: none; } .sos-brand { flex: 1; min-width: 0; line-height: 1.15; white-space: nowrap; transition: opacity 0.25s ease; } .sos-brand strong { display: block; font-size: 16px; font-weight: 700; } .sos-brand small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: rgb(var(--sos-ink3-rgb)); } .sos-icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--sos-ink2-rgb)); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .sos-icon-btn:hover { background: var(--sos-fill); color: rgb(var(--sos-ink-rgb)); } @media (min-width: 900px) { body.sos-rail .sos-brand { width: 0; flex: 0; opacity: 0; pointer-events: none; } body.sos-rail .sos-collapse { display: none; } body.sos-rail .sos-side-head { justify-content: center; padding: 0; } } @media (max-width: 899px) { .sos-collapse { display: none; } } .sos-search { display: flex; align-items: center; gap: 10px; height: 46px; margin: 18px 0 6px; padding: 0 12px; border-radius: 14px; background: var(--sos-fill); color: rgb(var(--sos-ink3-rgb)); cursor: text; } html body .sos-search input { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; font-size: 15px; color: rgb(var(--sos-ink-rgb)) !important; } .sos-kbd { padding: 2px 7px; border-radius: 7px; border: 1px solid var(--sos-line); background: rgb(var(--sos-panel-rgb)); font: 600 12px var(--sos-font); color: rgb(var(--sos-ink3-rgb)); white-space: nowrap; } @media (min-width: 900px) { body.sos-rail .sos-search { justify-content: center; padding: 0; cursor: pointer; } body.sos-rail .sos-search input, body.sos-rail .sos-kbd { display: none; } } @media (max-width: 899px) { .sos-kbd { display: none; } } .sos-nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; scrollbar-width: none; } .sos-nav::-webkit-scrollbar { display: none; } .sos-group { display: flex; align-items: center; height: 36px; margin-top: 12px; padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--sos-ink3-rgb)); white-space: nowrap; } @media (min-width: 900px) { body.sos-rail .sos-group { justify-content: center; padding: 0; font-size: 0; } body.sos-rail .sos-group::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--sos-ink3-rgb)); } } .sos-nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 2px 0; padding: 0 12px; border: 0; border-radius: 13px; background: transparent; color: rgb(var(--sos-ink2-rgb)); font: 500 15px var(--sos-font); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .sos-nav-item:hover { background: var(--sos-fill); color: rgb(var(--sos-ink-rgb)); } .sos-nav-item.is-active { background: var(--sos-fill-2); color: rgb(var(--sos-ink-rgb)); font-weight: 600; } .sos-nav-item.is-active .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .sos-nav-item.is-danger { color: var(--sos-bad); } .sos-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 900px) { body.sos-rail .sos-nav-item { justify-content: center; padding: 0; } body.sos-rail .sos-label { display: none; } } .sos-side-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--sos-line); } /* Hover previews */ .sos-peek { position: fixed; z-index: 95; width: 290px; padding: 14px; border-radius: 20px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow-lg); color: rgb(var(--sos-ink-rgb)); pointer-events: none; opacity: 0; transform: translateX(-8px) scale(0.97); transform-origin: left center; transition: opacity 0.2s ease, transform 0.35s var(--sos-ease); } .sos-peek.is-on { opacity: 1; transform: none; } .sos-peek-viz { display: flex; align-items: flex-end; height: 104px; margin-bottom: 12px; padding: 12px; overflow: hidden; border-radius: 14px; background: rgb(var(--sos-panel2-rgb)); border: 1px solid var(--sos-line); } .sos-peek h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; } .sos-peek p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: rgb(var(--sos-ink2-rgb)); } .sos-peek-foot { display: inline-flex; margin-top: 10px; font-size: 12px; font-weight: 600; color: rgb(var(--sos-ink3-rgb)); } .sos-v-bars { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 7px; } .sos-v-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--sos-fill-2); } .sos-v-bars i.hi { background: rgb(var(--sos-accent-rgb)); } .sos-v-donut { display: grid; place-items: center; width: 84px; height: 84px; margin: auto; border-radius: 50%; background: conic-gradient(rgb(var(--sos-accent-rgb)) 0 78%, var(--sos-fill-2) 78% 100%); } .sos-v-donut b { width: 60px; height: 60px; border-radius: 50%; background: rgb(var(--sos-panel2-rgb)); } .sos-v-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; } .sos-v-grid.is-month { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(4, 1fr); } .sos-v-grid i { border-radius: 5px; background: var(--sos-fill-2); } .sos-v-grid i.hi { background: rgb(var(--sos-accent-rgb)); } .sos-v-list { width: 100%; display: flex; flex-direction: column; gap: 9px; } .sos-v-list i { display: flex; align-items: center; gap: 8px; height: 18px; } .sos-v-list i::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--sos-fill-2); } .sos-v-list i::after { content: ""; flex: 1; height: 7px; border-radius: 4px; background: var(--sos-fill-2); } .sos-v-list i.hi::before { background: rgb(var(--sos-accent-rgb)); } .sos-v-prog { width: 100%; display: flex; flex-direction: column; gap: 11px; } .sos-v-prog i { position: relative; height: 9px; overflow: hidden; border-radius: 99px; background: var(--sos-fill-2); } .sos-v-prog i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: rgb(var(--sos-accent-rgb)); } .sos-v-tree { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around; } .sos-v-tree span { display: flex; flex-direction: column; align-items: center; gap: 6px; } .sos-v-tree b { width: 34px; height: 22px; border-radius: 6px; background: rgb(var(--sos-accent-rgb)); } .sos-v-tree i { width: 26px; height: 14px; border-radius: 5px; background: var(--sos-fill-2); } .sos-v-spark { width: 100%; height: 100%; } /* Top bar */ .sos-top { position: relative; z-index: 30; flex-shrink: 0; display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 10px 16px; view-transition-name: sos-top; } @media (min-width: 900px) { .sos-top { padding: 14px 40px 6px; } } .sos-title { flex: 1; min-width: 0; line-height: 1.2; } #role-badge:not(.hidden) { display: block; font-size: 13px; color: rgb(var(--sos-ink3-rgb)); } #school-name { margin: 0; overflow: hidden; font-size: 18px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .sos-top-actions { display: flex; align-items: center; gap: 8px; } .sos-ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sos-line-2); border-radius: 999px; background: rgb(var(--sos-panel-rgb)); color: rgb(var(--sos-ink-rgb)); font: 600 14px var(--sos-font); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s var(--sos-ease); } .sos-ask:hover { border-color: rgb(var(--sos-accent-rgb)); } .sos-ask:active { transform: scale(0.97); } .sos-ask .material-symbols-outlined { font-size: 20px; } .sos-ask-label { display: none; } @media (min-width: 640px) { .sos-ask-label { display: inline; } } .sos-dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--sos-bad); } .sos-user { display: none; align-items: center; gap: 10px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--sos-line); } @media (min-width: 1024px) { .sos-user { display: flex; } } .sos-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sos-fill-2); color: rgb(var(--sos-ink2-rgb)); } .sos-user-name { max-width: 170px; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } @media (min-width: 900px) { .sos-only-mobile { display: none !important; } } .sos-progress { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: rgb(var(--sos-accent-rgb)); opacity: 0; pointer-events: none; } body.sos-leaving .sos-progress, body.sos-nav-line .sos-progress { animation: sos-line 0.9s var(--sos-ease) forwards; } @keyframes sos-line { 0% { width: 0; opacity: 1; } 100% { width: 82%; opacity: 1; } } /* Main area & motion */ main.sos-main { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 128px; view-transition-name: sos-main; } @media (min-width: 900px) { main.sos-main { padding: 16px 40px 64px; } } body.sos-leaving main.sos-main { animation: sos-out 0.18s ease both; } .fade-in { animation: sos-in 0.5s var(--sos-ease) both; } #widget-grid { gap: 20px !important; } @media (min-width: 900px) { #widget-grid { gap: 24px !important; } } #widget-grid > * { animation: sos-in 0.55s var(--sos-ease) both; } #widget-grid > *:nth-child(2) { animation-delay: 0.05s; } #widget-grid > *:nth-child(3) { animation-delay: 0.1s; } #widget-grid > *:nth-child(4) { animation-delay: 0.15s; } #widget-grid > *:nth-child(n+5) { animation-delay: 0.2s; } @keyframes sos-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes sos-out { to { opacity: 0; transform: translateY(-6px); } } @view-transition { navigation: auto; types: sos-nav; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(sos-side), ::view-transition-new(sos-side), ::view-transition-old(sos-top), ::view-transition-new(sos-top) { animation: none; } html:active-view-transition-type(sos-nav)::view-transition-old(sos-main) { animation: sos-out 0.18s ease both; } html:active-view-transition-type(sos-nav)::view-transition-new(sos-main) { animation: sos-in 0.45s var(--sos-ease) both; } /* Phone bottom bar */ #school-bottom-nav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 24px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow-lg); } @media (min-width: 900px) { #school-bottom-nav { display: none; } } body.sos-copilot-open #school-bottom-nav { display: none; } #school-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border: 0; border-radius: 18px; background: transparent; color: rgb(var(--sos-ink3-rgb)); font: 600 12px var(--sos-font); cursor: pointer; } #school-bottom-nav button.active { background: var(--sos-fill); color: rgb(var(--sos-ink-rgb)); } #school-bottom-nav .material-symbols-outlined { font-size: 25px; } /* Co-pilot panel */ #school-copilot-drawer.sos-copilot { position: fixed; z-index: 90; top: 12px; right: 12px; bottom: 12px; width: 420px; max-width: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow-lg); color: rgb(var(--sos-ink-rgb)); transform: none; transition: transform 0.55s var(--sos-ease); } #school-copilot-drawer.sos-copilot.translate-x-full { transform: translateX(calc(100% + 24px)); } @media (max-width: 899px) { #school-copilot-drawer.sos-copilot { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 88vh; height: 88dvh; border-radius: 28px 28px 0 0; } #school-copilot-drawer.sos-copilot.translate-x-full { transform: translateY(104%); } } #school-copilot-drawer #copilot-messages { font-size: 15px !important; line-height: 1.6; } #school-copilot-drawer #copilot-messages [class*="bg-emerald-600/"] { background: rgb(var(--sos-accent-rgb)) !important; border-color: transparent !important; color: rgb(var(--sos-on-accent-rgb)) !important; } .sos-spark { position: relative; display: inline-block; flex-shrink: 0; width: 1em; height: 1em; font-size: 18px; color: rgb(var(--sos-ink-rgb)); } .sos-spark i { position: absolute; left: 50%; top: 50%; width: 0.14em; height: 0.36em; margin: -0.5em 0 0 -0.07em; border-radius: 0.1em; background: currentColor; transform-origin: 50% calc(100% + 0.14em); transform: rotate(calc(var(--n) * 45deg)) scaleY(0.85); animation: sos-chase 0.67s linear infinite; animation-delay: calc(var(--n) * 0.084s - 0.67s); } @keyframes sos-chase { 0% { transform: rotate(calc(var(--n) * 45deg)) scaleY(1); opacity: 1; } 70%, 100% { transform: rotate(calc(var(--n) * 45deg)) scaleY(0.55); opacity: 0.16; } } .sos-thinking-text { font-weight: 600; background: linear-gradient(90deg, rgb(var(--sos-ink3-rgb)) 0%, rgb(var(--sos-ink-rgb)) 45%, rgb(var(--sos-ink3-rgb)) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sos-shimmer 1.3s linear infinite; } @keyframes sos-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } .sos-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 120; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: rgb(var(--sos-accent-rgb)); color: rgb(var(--sos-on-accent-rgb)); font: 500 14px var(--sos-font); text-align: center; box-shadow: var(--sos-shadow-lg); transform: translateX(-50%); animation: sos-toast-in 0.45s var(--sos-ease) both; transition: opacity 0.3s ease; } @media (min-width: 900px) { .sos-toast { bottom: 32px; } } @keyframes sos-toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Components used across app.js */ .dashboard-card { padding: 22px; border-radius: 22px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow); color: rgb(var(--sos-ink-rgb)); transition: box-shadow 0.3s var(--sos-ease); } .dashboard-card:hover { box-shadow: var(--sos-shadow-lg); } @media (min-width: 900px) { .dashboard-card { padding: 24px; } } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 14px var(--sos-font); text-decoration: none; cursor: pointer; transition: transform 0.2s var(--sos-ease), opacity 0.2s ease, border-color 0.2s ease; } .btn-primary { border: 1px solid transparent; background: rgb(var(--sos-accent-rgb)); color: rgb(var(--sos-on-accent-rgb)) !important; } .btn-primary:hover { opacity: 0.88; } .btn-secondary { border: 1px solid var(--sos-line-2); background: rgb(var(--sos-panel-rgb)); color: rgb(var(--sos-ink-rgb)) !important; } .btn-secondary:hover { border-color: rgb(var(--sos-accent-rgb)); } .btn-primary:active, .btn-secondary:active { transform: scale(0.97); } .btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } html body .input-field, html body select, html body textarea, html body input[type="text"], html body input[type="email"], html body input[type="number"], html body input[type="date"], html body input[type="time"], html body input[type="password"], html body input[type="tel"], html body input[type="url"], html body input:not([type]) { min-height: 44px; padding: 10px 14px; border: 1px solid var(--sos-line-2) !important; border-radius: 14px; background: rgb(var(--sos-panel-rgb)) !important; color: rgb(var(--sos-ink-rgb)) !important; font: 400 15px/1.4 var(--sos-font); outline: none; box-shadow: none; } html body textarea { min-height: 96px; } html body .input-field:focus, html body select:focus, html body textarea:focus, html body input:not(#sos-search):focus { border-color: rgb(var(--sos-accent-rgb)) !important; box-shadow: 0 0 0 4px var(--sos-fill) !important; } html body select option { background: rgb(var(--sos-panel-rgb)); color: rgb(var(--sos-ink-rgb)); } html body input::placeholder, html body textarea::placeholder { color: rgb(var(--sos-ink3-rgb)) !important; opacity: 1; } html body input[type="checkbox"], html body input[type="radio"] { width: 18px; height: 18px; accent-color: rgb(var(--sos-accent-rgb)); } @media (max-width: 768px) { html body input, html body select, html body textarea { font-size: 16px !important; } } html body table { width: 100%; border-collapse: collapse; } html body th { padding: 12px 14px; border-bottom: 1px solid var(--sos-line); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; white-space: nowrap; color: rgb(var(--sos-ink3-rgb)); } html body td { padding: 12px 14px; border-bottom: 1px solid var(--sos-line); vertical-align: middle; color: rgb(var(--sos-ink-rgb)); } html body tbody tr:last-child td { border-bottom: 0; } html body tbody tr:hover td { background: var(--sos-fill); } .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } main.sos-main h2.text-2xl { font-family: var(--sos-display); font-size: clamp(26px, 3.4vw, 34px) !important; letter-spacing: -0.025em; line-height: 1.12; } #aria-dialog > div { border-radius: 24px !important; background: rgb(var(--sos-panel-rgb)) !important; border: 1px solid var(--sos-line) !important; box-shadow: var(--sos-shadow-lg) !important; color: rgb(var(--sos-ink-rgb)); } #modal-overlay { background: var(--sos-overlay); } /* Compatibility: restyle the dark classes app.js renders */ html body .text-\[9px\], html body .text-\[10px\], html body .text-\[10\.5px\], html body .text-\[11px\], html body .text-\[11\.5px\] { font-size: 12.5px !important; } html body .text-xs { font-size: 13px !important; } html body .text-white, html body .text-gray-100, html body .text-dashboard-text, html body .hover\:text-white:hover { color: rgb(var(--sos-ink-rgb)) !important; } html body .text-gray-200, html body .text-gray-300, html body .text-dashboard-secondary, html body .text-cyan-300, html body .text-cyan-400 { color: rgb(var(--sos-ink2-rgb)) !important; } html body .text-gray-400, html body .text-gray-500, html body .text-gray-600, html body .text-dashboard-textMuted, html body .text-white\/60 { color: rgb(var(--sos-ink3-rgb)) !important; } html body .text-dashboard-accent, html body .hover\:text-dashboard-accent:hover { color: rgb(var(--sos-ink-rgb)) !important; font-weight: 600; } html body .text-emerald-300, html body .text-emerald-400, html body .text-green-400 { color: var(--sos-ok) !important; } html body .text-orange-200, html body .text-orange-300, html body .text-orange-400, html body .text-amber-400, html body .text-yellow-400, html body .text-dashboard-high { color: var(--sos-warn) !important; } html body .text-red-300, html body .text-red-400, html body .text-red-500, html body .text-rose-300, html body .text-rose-400 { color: var(--sos-bad) !important; } html body .bg-dashboard-accent, html body .bg-emerald-600 { background-color: rgb(var(--sos-accent-rgb)) !important; color: rgb(var(--sos-on-accent-rgb)) !important; } html body .bg-dashboard-accent .text-white, html body .bg-emerald-600 .text-white, html body .bg-dashboard-accent.text-white, html body .bg-emerald-600.text-white { color: rgb(var(--sos-on-accent-rgb)) !important; } html body .bg-red-600.text-white, html body .bg-orange-500.text-white, html body .bg-red-600 .text-white { color: #ffffff !important; } html body .bg-emerald-400, html body .bg-green-400 { background-color: var(--sos-ok) !important; } html body .bg-cyan-400, html body .bg-indigo-400 { background-color: rgb(var(--sos-ink3-rgb)) !important; } html body .bg-gray-700, html body .bg-gray-800, html body .bg-gray-900, html body .bg-slate-800, html body .bg-slate-900, html body [class*="bg-slate-900/"], html body [class*="bg-slate-950"], html body [class*="bg-white/"], html body .hover\:bg-gray-700:hover, html body .hover\:bg-slate-800:hover { background-color: var(--sos-fill) !important; } html body [class*="bg-emerald-950"], html body [class*="bg-emerald-900"], html body [class*="bg-green-900"], html body [class*="bg-emerald-500/"], html body [class*="bg-emerald-600/"] { background-color: var(--sos-ok-soft) !important; } html body [class*="bg-cyan-950"], html body [class*="bg-cyan-900"], html body [class*="bg-cyan-500/"], html body [class*="bg-dashboard-secondary/"] { background-color: var(--sos-fill) !important; } html body [class*="bg-orange-950"], html body [class*="bg-orange-900"], html body [class*="bg-orange-500/"], html body [class*="bg-dashboard-high/"] { background-color: var(--sos-warn-soft) !important; } html body [class*="bg-red-950"], html body [class*="bg-red-900"], html body [class*="bg-rose-950"], html body [class*="bg-rose-500/"] { background-color: var(--sos-bad-soft) !important; } html body .border-gray-700, html body .border-gray-800, html body .border-slate-700, html body .border-slate-800, html body [class*="border-gray-7"], html body [class*="border-gray-8"], html body [class*="border-white/"], html body [class*="border-cyan-"], html body [class*="border-emerald-"], html body [class*="border-orange-"], html body [class*="border-red-"], html body [class*="border-rose-"], html body [class*="border-green-"], html body [class*="border-indigo-"], html body [class*="border-dashboard-accent/"] { border-color: var(--sos-line-2) !important; } html body .border-dashboard-accent, html body .border-l-dashboard-accent { border-color: rgb(var(--sos-accent-rgb)) !important; } html body [class*="shadow-emerald-"], html body [class*="shadow-cyan-"], html body [class*="shadow-orange-"], html body [class*="shadow-slate-"] { box-shadow: var(--sos-shadow) !important; } html body [class*="bg-gradient-to-"] { background-image: none !important; background-color: rgb(var(--sos-panel-rgb)); } html body [class*="bg-gradient-to-"][class*="from-emerald-5"], html body [class*="bg-gradient-to-"][class*="from-dashboard-accent"] { background-color: rgb(var(--sos-accent-rgb)) !important; color: rgb(var(--sos-on-accent-rgb)) !important; } html body .blur-3xl { display: none !important; } html body .animate-ping { animation: none !important; opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Status tags and attendance colours */ .sos-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; } .sos-tag.is-ok { background: var(--sos-ok-soft); color: var(--sos-ok); } .sos-tag.is-bad { background: var(--sos-bad-soft); color: var(--sos-bad); } html body .text-yellow-400 { color: var(--sos-warn) !important; } html body .bg-yellow-500 { background-color: var(--sos-warn) !important; } html body .bg-rose-500 { background-color: var(--sos-bad) !important; } html body .bg-emerald-500 { background-color: var(--sos-ok) !important; } html body [class*="bg-yellow-950"] { background-color: var(--sos-warn-soft) !important; } html body [class*="border-yellow-"] { border-color: var(--sos-line-2) !important; } /* Menu fits: slim scrollbar, soft fade when more items are below, compact footer row */ .sos-nav { scrollbar-width: thin; scrollbar-color: var(--sos-fill-2) transparent; } .sos-nav::-webkit-scrollbar { display: block; width: 6px; } .sos-nav.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); } @media (min-width: 900px) { body:not(.sos-rail) .sos-side-foot { flex-direction: row; justify-content: space-between; gap: 4px; } body:not(.sos-rail) .sos-side-foot .sos-nav-item { flex: 1; justify-content: center; min-height: 44px; padding: 0; } body:not(.sos-rail) .sos-side-foot .sos-label { display: none; } } /* Principal home (dashboard) */ .sos-home { display: flex; flex-direction: column; gap: 24px; margin-bottom: 8px; } .sos-hero { display: flex; flex-direction: column; gap: 18px; animation: sos-in 0.55s var(--sos-ease) both; } @media (min-width: 900px) { .sos-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .sos-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--sos-fill); font-size: 13px; font-weight: 600; color: rgb(var(--sos-ink2-rgb)); } .sos-hero-title { margin: 12px 0 0; font-family: var(--sos-display); font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: rgb(var(--sos-ink-rgb)); text-wrap: balance; } .sos-hero-sub { margin: 8px 0 0; max-width: 58ch; font-size: 16px; color: rgb(var(--sos-ink2-rgb)); } .sos-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sos-hero-actions .btn-primary, .sos-hero-actions .btn-secondary { min-height: 46px; padding: 0 20px; font-size: 15px; } .sos-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } @media (min-width: 560px) { .sos-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .sos-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } .sos-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 150px; padding: 22px; border-radius: 22px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow); animation: sos-in 0.55s var(--sos-ease) both; } .sos-stat:nth-child(2) { animation-delay: 0.05s; } .sos-stat:nth-child(3) { animation-delay: 0.1s; } .sos-stat:nth-child(4) { animation-delay: 0.15s; } .sos-stat-top { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; font-weight: 500; color: rgb(var(--sos-ink3-rgb)); } .sos-stat-top .material-symbols-outlined { font-size: 20px; } .sos-stat strong { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: rgb(var(--sos-ink-rgb)); } .sos-stat small { font-size: 14px; color: rgb(var(--sos-ink3-rgb)); } .sos-meter { width: 100%; height: 8px; margin-top: auto; overflow: hidden; border-radius: 99px; background: var(--sos-fill-2); } .sos-meter i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--sos-accent-rgb)); transform-origin: left; animation: sos-grow-x 1s var(--sos-ease) both; } @keyframes sos-grow-x { from { transform: scaleX(0); } to { transform: none; } } .sos-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 18px; } .sos-card-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: rgb(var(--sos-ink-rgb)); } .sos-link { font-size: 14px; font-weight: 600; color: rgb(var(--sos-ink-rgb)); text-decoration: underline; text-underline-offset: 3px; } .sos-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 14px; align-items: end; min-height: 240px; overflow-x: auto; padding-bottom: 4px; } .sos-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; } .sos-col b { font-size: 14px; font-variant-numeric: tabular-nums; color: rgb(var(--sos-ink-rgb)); } .sos-col small { font-size: 13px; color: rgb(var(--sos-ink2-rgb)); white-space: nowrap; } .sos-col .sos-col-sub { font-size: 12px; color: rgb(var(--sos-ink3-rgb)); } .sos-col-bar { width: 100%; max-width: 64px; border-radius: 12px 12px 6px 6px; background: rgb(var(--sos-accent-rgb)); transform-origin: bottom; animation: sos-grow-y 1s var(--sos-ease) both; } .sos-col-bar.is-low { background: var(--sos-warn); } @keyframes sos-grow-y { from { transform: scaleY(0); } to { transform: none; } } .sos-skel { border-radius: 14px; background: linear-gradient(90deg, var(--sos-fill) 0%, var(--sos-fill-2) 50%, var(--sos-fill) 100%); background-size: 200% 100%; animation: sos-skel 1.5s ease-in-out infinite; } @keyframes sos-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* Date and time inputs (gate passes) */ html body input[type="datetime-local"] { min-height: 44px; padding: 10px 14px; border: 1px solid var(--sos-line-2) !important; border-radius: 14px; background: rgb(var(--sos-panel-rgb)) !important; color: rgb(var(--sos-ink-rgb)) !important; font: 400 15px/1.4 var(--sos-font); color-scheme: inherit; } .sos-tag:not(.is-ok):not(.is-bad) { background: var(--sos-fill-2); color: rgb(var(--sos-ink-rgb)); } /* Inner screens: shared page header */ .sos-page { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; } .sos-page-head { display: flex; flex-direction: column; gap: 16px; animation: sos-in 0.5s var(--sos-ease) both; } @media (min-width: 900px) { .sos-page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; } } .sos-page-titles { min-width: 0; } .sos-back { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 6px -6px; padding: 0 10px 0 2px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgb(var(--sos-ink3-rgb)); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .sos-back:hover { background: var(--sos-fill); color: rgb(var(--sos-ink-rgb)); } .sos-back .material-symbols-outlined { font-size: 22px; } .sos-page-title { margin: 0; font-family: var(--sos-display); font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: rgb(var(--sos-ink-rgb)); text-wrap: balance; } .sos-page-sub { margin: 8px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.5; color: rgb(var(--sos-ink2-rgb)); } .sos-page-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sos-page-kpis { padding: 18px 20px; border-radius: 22px; background: rgb(var(--sos-panel-rgb)); border: 1px solid var(--sos-line); box-shadow: var(--sos-shadow); animation: sos-in 0.55s 0.05s var(--sos-ease) both; } .sos-page-body { animation: sos-in 0.55s 0.1s var(--sos-ease) both; }