/* * Design system - dark theme ported 1:1 from the original app's * dashboard.html / manager_portal.html / cmo_portal.html, plus a light * "Microsoft Fluent"-style theme toggled via [data-theme="light"] on * (see assets/js/theme.js). Same CSS custom properties, same * class names (panel, kpi, btn, toolbar, filterable-th, status-pill, * modal, bar-row...) throughout - only the variable VALUES change * between themes, not the markup. */ :root { /* Tells the browser which palette to draw native form controls in (date/time picker, the little calendar icon, spinner arrows, scrollbars) - without this the browser defaults to light-mode control assets even on this dark theme, rendering the date input's calendar icon as a near-black glyph on a near-black field (--input-bg #0b1220) - effectively invisible/untappable. */ color-scheme: dark; --bg: #0f172a; --card: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --accent: #38bdf8; --accent-text: #04121f; --green: #22c55e; --yellow: #eab308; --red: #ef4444; --purple: #a78bfa; --orange: #f97316; /* A solid Yellow bar/badge FILL, as opposed to --yellow (Yellow shown as TEXT) - light theme dims --yellow down to a muted brown for text legibility (plain bright yellow text on a white card fails contrast), but that same dimming made a Yellow bar "look gray" (Shoaib, 2026-09-06) - a solid rectangle doesn't need that same accommodation, so it stays this same sharp value in both themes. Same reasoning --red/--green never needed a second variant: their own light-theme values (below) are already vivid enough to work as both text AND a fill. */ --yellow-bar: #eab308; --border: #2b3b57; --input-bg: #0b1220; --nav-bg: #131f38; --btn-secondary-bg: #334155; --shadow: none; --info-bg: #1e3a5f; --info-border: #38bdf8; --info-text: #7dd3fc; --warn-bg: #3a2f0f; --warn-border: #eab308; --warn-text: #fde68a; /* Chart palette - exactly 3 colors, on request (the previous "always-dark canvas + glow + rounded bars" neon treatment read as gimmicky, not clean - this reverts all of that: charts are back to following the page's own light/dark theme like every other panel, flat solid fills, square corners, no shadow/glow). Only ONE definition of these 3 values exists anywhere in the app - here - and every chart reads them via chartTheme() (line- chart.js), not a per-template copy, so changing a chart's colors ever again means editing these 3 lines, nothing else. Same 3 roles used consistently across every chart: Target/New Enrolment=blue, Achieved/Follow-up=green, % Achieved=yellow (a 4th series, where a chart genuinely needs one, cycles back to blue rather than inventing a 4th named color). Each measured (WCAG) at >=4.8:1 against this theme's own surface - see the light block below for its own (separately tuned, since a single hex can't clear a good contrast ratio against both a near-black and a near-white surface) set. */ --chart-blue: #5b9dff; --chart-green: #4ade80; --chart-yellow: #facc15; /* Target vs Achievement charts (Daily FC Reporting) ONLY - matched directly to a reference chart image Shoaib shared (2026-09-06): "use this color scheme and style" - the classic Office/Excel navy + sky-blue + steel-blue-line + orange-% look this feature's own source data ("BNP 3.0 Progress and Achievement Working File") was originally presented in. Deliberately a real-world reference match, not another abstract-palette derivation - the dark navy sits below the data-viz skill's own lightness-band/ chroma-floor bands (it's meant to read as a deliberately muted "baseline" color, same as it does in the source spreadsheet), but CVD separation from the sky-blue is excellent regardless (ΔE 38.7 deutan light / 27.0 dark, both far past the >=8 target) and every bar always carries a visible value label (Shoaib's own earlier "data labels are must"), which is exactly the relief channel the skill requires wherever raw contrast runs low. */ --chart-target: #3d63a8; --chart-achieved: #38bdf8; --chart-line: #7fa6e8; --chart-pct: #fb923c; } /* "Professional Microsoft style" light theme - Fluent-ish: white/light gray surfaces, subtle shadows instead of hard borders, Office blue accent. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f2f1; --card: #ffffff; --text: #201f1e; --muted: #605e5c; --accent: #0078d4; --accent-text: #ffffff; --green: #107c10; --yellow: #986f0b; --yellow-bar: #eab308; --red: #d13438; --purple: #5c2d91; --orange: #ca5010; --border: #e1dfdd; --input-bg: #ffffff; --nav-bg: #ffffff; --btn-secondary-bg: #f3f2f1; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04); --info-bg: #deecf9; --info-border: #0078d4; --info-text: #004578; --warn-bg: #fff4ce; --warn-border: #986f0b; --warn-text: #6b4a00; /* Same 3-color chart palette, light-mode steps - see the dark block above for why this one place is the only place these are ever defined. */ --chart-blue: #1c64f2; --chart-green: #15803d; --chart-yellow: #a16207; /* Target vs Achievement charts only - see the dark block above for why (a direct match to a reference chart image, not another abstract-palette derivation). This is the reference image's own light-mode look almost exactly - navy/sky-blue/steel-blue-line/ orange-%, the classic Office/Excel chart palette. CVD separation (target vs achieved) ΔE 38.7 deutan, far past the >=8 target. */ --chart-target: #1f3864; --chart-achieved: #00b0f0; --chart-line: #4472c4; --chart-pct: #ed7d31; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- theme toggle ---------- */ .theme-toggle { background: var(--btn-secondary-bg); color: var(--text); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; } .theme-toggle:hover { filter: brightness(1.08); } /* ---------- app shell: left sidebar nav ---------- */ /* Replaces the old horizontal topbar + nav.tabnav (Shoaib, 2026-09-22: "when i open coordnator or my dashboard main manu then sub manu. which take almost half of the screen. what i want is a the menu in left sile like when we open cauad [Claude] app. resizeable manu on left side with show and hid togel") - a left sidebar, resizable via its own right-edge drag handle and collapsible via a show/hide toggle, same idea as the Claude desktop app's own sidebar. See assets/js/sidebar.js for the resize/collapse/mobile-drawer JS this all depends on. */ :root { --sidebar-width: 240px; } .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--border); position: relative; } .sidebar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 14px 12px; border-bottom: 1px solid var(--border); } .sidebar-header .brand { font-size: 16px; font-weight: 700; line-height: 1.3; } /* Admin/Coordinator's own complete-name variant (Shoaib, 2026-09-17: "need complete... in my panel and coordinator panel only") - smaller than the default 16px so "Results Monitoring and Performance Insights Dashboard" doesn't visually dominate this header the way the short "RMPI" mark does at full size. */ .sidebar-header .brand.brand-full { font-size: 12.5px; font-weight: 600; } .sidebar-collapse-btn { flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; } .sidebar-collapse-btn:hover { background: var(--btn-secondary-bg); color: var(--text); } .sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a, .sidebar-nav .nav-disabled { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } .sidebar-nav a:hover { background: var(--btn-secondary-bg); color: var(--text); text-decoration: none; } /* Selected page (Shoaib, 2026-09-22 follow-up: "when a page is select no need to color bule to its butte only gray hover is enughf") - same gray as :hover above, not the blue --accent used elsewhere for real buttons/pills - so the current page stays marked without competing with those for attention. */ .sidebar-nav a.active { background: var(--btn-secondary-bg); color: var(--text); } .sidebar-nav .nav-disabled { color: #94a3b8; opacity: .5; cursor: not-allowed; } .sidebar-nav .nav-icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 14px; } .sidebar-section-divider { height: 1px; background: var(--border); margin: 8px 6px; flex-shrink: 0; } /* Nested tree for Dashboard/My Dashboards (Shoaib, 2026-09-22: "My Dashboard -> Daily FC Repoting -> Progress -> Submission Status -> ... no horizonta manu" - replaces that hub page's own horizontal .subtabs row, and Daily FC Reporting/Logistics Dashboard's own horizontal .subtabs bars, with this tree built into the sidebar itself). A .nav-group-toggle looks like every other .sidebar-nav link but is a