/* ========================================================================== APP.CSS — single-file design system for the admin dashboard Font: Jost (self-hosted). Author every style here; no other CSS file. ========================================================================== */ @font-face { font-family: 'Jost'; src: url('/fonts/jost/Jost-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost/Jost-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost/Jost-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost/Jost-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/fonts/jost/Jost-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------------- */ /* DESIGN TOKENS */ /* ---------------------------------------------------------------------- */ :root { /* Brand palette (from the existing app, extended) */ --c-teal: #37a296; --c-sky: #33B1EE; --c-mint: #84fab0; --c-powder: #8fd3f4; --c-lilac: #e0c3fc; --c-blue-soft: #8ec5fc; --c-peach: #fccb90; --c-orchid: #d57eeb; --c-aqua: #89f7fe; --c-azure: #66a6ff; /* Extended neutrals & semantics */ --c-ink: #16213a; /* primary text / headings */ --c-slate: #4b5875; /* secondary text */ --c-muted: #8992a8; /* placeholders, meta text */ --c-bg: #f5f7fb; /* app background */ --c-surface: #ffffff; /* cards, panels */ --c-border: #e7ebf3; --c-paper: #faf9f6; /* warm-neutral auth panel bg */ --c-success: #22a06b; --c-warning: #f2a93b; --c-danger: #e5484d; --c-info: var(--c-sky); /* Gradients — apply sparingly on KPI cards, badges, chart accents */ --grad-teal-blue: linear-gradient(135deg, var(--c-teal), var(--c-sky)); --grad-mint-powder: linear-gradient(135deg, var(--c-mint), var(--c-powder)); --grad-lilac-blue: linear-gradient(135deg, var(--c-lilac), var(--c-blue-soft)); --grad-peach-orchid:linear-gradient(135deg, var(--c-peach), var(--c-orchid)); --grad-aqua-azure: linear-gradient(135deg, var(--c-aqua), var(--c-azure)); --grad-dark: linear-gradient(135deg, #1c2b4a, #16213a); /* Type scale */ --font-primary: 'Jost', system-ui, -apple-system, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Radii & shadows */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(22, 33, 58, 0.06); --shadow-md: 0 8px 24px rgba(22, 33, 58, 0.08); --shadow-lg: 0 16px 40px rgba(22, 33, 58, 0.12); --sidebar-width: 264px; --topbar-height: 72px; } /* ---------------------------------------------------------------------- */ /* RESET & BASE */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-primary); font-size: var(--fs-base); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0 0 var(--sp-2); color: var(--c-ink); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3); color: var(--c-slate); } a { color: var(--c-sky); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------- */ /* LAYOUT SHELL */ /* ---------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--grad-dark); color: #fff; } /* Bootstrap's offcanvas-lg already handles mobile positioning (fixed, translated off-screen, shown via .show) — we must NOT touch position below the lg breakpoint, or we break its off-screen mechanic entirely (a `position: sticky` override here previously made the closed drawer occupy full-width in normal flow and collapse the content area to zero width). Only pin it as a static, sticky column at the same breakpoint Bootstrap itself switches offcanvas-lg to static. */ @media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; } } /* Bootstrap's offcanvas-body already gives us the slide-out mechanics, scroll, and the lg+ "always visible, static" breakpoint behavior — we only need to restyle its surface and spacing to match the brand. */ .sidebar .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); } /* Bootstrap's offcanvas-body already gives us the slide-out mechanics, scroll, and the lg+ "always visible" breakpoint behavior — but at that same breakpoint Bootstrap ALSO applies `.offcanvas-lg .offcanvas-body { display:flex; padding:0; }` (a two-class compound selector, since offcanvas-lg is designed primarily for horizontal navbar-collapse use, not vertical sidebars). That selector has higher specificity than a plain `.sidebar__body` class rule, so it wins even though app.css loads after Bootstrap — the result was the brand and