/* ============================================================================ Zone 9 — shared design system ============================================================================ One palette, one type scale, one set of components, used by the map, the dashboard, the matching workspace and the reports builder. Before this file each page carried its own greys, its own card radius and its own idea of how big a heading was, and the four looked like four different tools. THE TOKENS ARE THE INTERFACE. Pages set colour through var(--…) and never with a literal, which is what makes dark mode a block of redefinitions at the bottom of this section rather than a rewrite of every rule. Dark mode has three states: an explicit choice stamps data-theme on , and the default follows the operating system. Both are handled, and neither is allowed to win by accident — see the guard on the media query. ========================================================================= */ :root { /* -- brand ------------------------------------------------------------ */ --brand: #2563eb; --brand-ink: #1e40af; --brand-soft: #eff6ff; --brand-line: #bfdbfe; --brand2: #0d9488; /* -- surfaces --------------------------------------------------------- */ --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --line: #e2e8f0; --line-strong: #cbd5e1; /* -- text ------------------------------------------------------------- */ --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8; /* -- state ------------------------------------------------------------ */ --ok: #16a34a; --ok-soft: #f0fdf4; --warn: #d97706; --warn-soft: #fffbeb; --bad: #dc2626; --bad-soft: #fef2f2; --info: #7c3aed; /* -- the six series colours used by every chart on every page --------- */ --c1: #2563eb; --c2: #0d9488; --c3: #d97706; --c4: #7c3aed; --c5: #dc2626; --c6: #64748b; /* -- spacing: a 4px scale, named so a gap is chosen not invented ------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* -- type ------------------------------------------------------------- */ --font: Inter, system-ui, "Segoe UI", Roboto, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 30px; /* -- shape ------------------------------------------------------------ */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; --shadow-1: 0 1px 2px rgba(2, 6, 23, .06), 0 1px 3px rgba(2, 6, 23, .04); --shadow-2: 0 4px 12px -2px rgba(2, 6, 23, .10); --shadow-3: 0 10px 30px -10px rgba(2, 6, 23, .35); } /* Dark, when the operating system asks for it and the page has not been explicitly set to light. The :not() guard is what stops an explicit light choice being overridden by the system preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #60a5fa; --brand-ink: #93c5fd; --brand-soft: #17233c; --brand-line: #1e3a5f; --brand2: #2dd4bf; --bg: #0b1120; --surface: #111827; --surface-2: #161f31; --surface-3: #1c2638; --line: #243044; --line-strong: #33415a; --ink: #e8eefc; --ink-2: #c3cfe4; --muted: #8fa0bb; --faint: #64748b; --ok: #4ade80; --ok-soft: #0d2818; --warn: #fbbf24; --warn-soft: #2b2008; --bad: #f87171; --bad-soft: #2d1113; --info: #a78bfa; --c1: #60a5fa; --c2: #2dd4bf; --c3: #fbbf24; --c4: #a78bfa; --c5: #f87171; --c6: #94a3b8; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .5); --shadow-3: 0 10px 30px -10px rgba(0, 0, 0, .7); } } /* And dark when the operator has chosen it outright. */ :root[data-theme="dark"] { --brand: #60a5fa; --brand-ink: #93c5fd; --brand-soft: #17233c; --brand-line: #1e3a5f; --brand2: #2dd4bf; --bg: #0b1120; --surface: #111827; --surface-2: #161f31; --surface-3: #1c2638; --line: #243044; --line-strong: #33415a; --ink: #e8eefc; --ink-2: #c3cfe4; --muted: #8fa0bb; --faint: #64748b; --ok: #4ade80; --ok-soft: #0d2818; --warn: #fbbf24; --warn-soft: #2b2008; --bad: #f87171; --bad-soft: #2d1113; --info: #a78bfa; --c1: #60a5fa; --c2: #2dd4bf; --c3: #fbbf24; --c4: #a78bfa; --c5: #f87171; --c6: #94a3b8; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .5); --shadow-3: 0 10px 30px -10px rgba(0, 0, 0, .7); } /* ============================== base ============================== */ * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-lg); } h3 { font-size: var(--t-md); } p { margin: 0; } a { color: var(--brand); } /* Every figure on every page is read in a column, so they line up. */ .num, td.num, .stat-v, .kpi-v { font-variant-numeric: tabular-nums; } /* ============================== app header ============================== The same bar on the map, the dashboard, the matching workspace and the reports builder, so moving between them never feels like leaving. */ .app-head { display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5); height: 60px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .app-brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; } .app-mark { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; background: linear-gradient(135deg, var(--brand), var(--brand-ink)); color: #fff; font-weight: 700; font-size: 17px; display: grid; place-items: center; box-shadow: 0 4px 10px -3px rgba(37, 99, 235, .55); } .app-title { line-height: 1.25; } .app-title strong { display: block; font-size: 15px; font-weight: 650; } .app-title span { font-size: var(--t-xs); color: var(--muted); } .app-nav { display: flex; gap: var(--s1); margin-left: var(--s5); flex: 1; } .app-nav a { padding: 7px var(--s3); border-radius: var(--r-sm); text-decoration: none; font-size: var(--t-sm); font-weight: 550; color: var(--muted); } .app-nav a:hover { background: var(--surface-3); color: var(--ink); } .app-nav a.on { background: var(--brand-soft); color: var(--brand); } .app-head-r { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } /* ============================== controls ============================== */ .btn, .btn-primary, .btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-size: var(--t-sm); font-weight: 550; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .btn:hover, .btn-ghost:hover { background: var(--surface-3); color: var(--ink); } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); } .btn:disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; background: var(--surface-3); color: var(--muted); } .chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.info { background: var(--brand-soft); color: var(--brand); } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .seg button { border: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 7px 13px; font: inherit; font-size: var(--t-sm); color: var(--muted); cursor: pointer; } .seg button:last-child { border-right: 0; } .seg button:hover { background: var(--surface-3); color: var(--ink); } .seg button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; } select.field, input.field { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--r-sm); padding: 8px 11px; font: inherit; font-size: var(--t-sm); } select.field:focus, input.field:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); } /* ============================== cards ============================== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); } .card-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .card-head h3 { flex: 1; } .card-head .sub { font-size: var(--t-xs); color: var(--muted); font-weight: 400; } .card-body { padding: var(--s5); } /* ============================== stat tiles ============================== The row of headline numbers. A tile states one figure, what it is, and -- where it matters -- what it is a share of. */ .kpis { display: grid; gap: var(--s3); /* 190px, not 170: a rupee figure like ₹1,62,83,040 needs the extra room to stay on one line. min() so the track can still collapse on a phone. */ grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); box-shadow: var(--shadow-1); /* Without this the tile refuses to shrink below its number and pushes the whole grid — and therefore the page — wider than the viewport. */ min-width: 0; } .kpi-k { font-size: var(--t-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .kpi-v { font-size: var(--t-2xl); font-weight: 680; line-height: 1.15; margin-top: 6px; letter-spacing: -.02em; /* A grouped number is one unbreakable token — "1,62,83,040" has no space to wrap at. If it still cannot fit, break it rather than let it escape the tile: a figure on two lines is untidy, a figure overflowing off the side of the page is a broken layout. */ overflow-wrap: anywhere; } .kpi-sub { font-size: var(--t-xs); color: var(--muted); margin-top: 3px; } .kpi.accent { border-left: 3px solid var(--brand); } .kpi.ok { border-left: 3px solid var(--ok); } .kpi.warn { border-left: 3px solid var(--warn); } .kpi.bad { border-left: 3px solid var(--bad); } /* ============================== tables ============================== */ /* A wide table scrolls inside its own box. max-width matters as much as the overflow: without it the wrapper is free to grow to the table's width and takes the page layout with it. */ .tbl-wrap { overflow-x: auto; max-width: 100%; } table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } table.tbl th, table.tbl td { padding: 9px var(--s3); text-align: left; white-space: nowrap; } table.tbl th { font-size: var(--t-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: var(--surface); z-index: 1; } table.tbl td { border-bottom: 1px solid var(--line); } table.tbl tbody tr:hover td { background: var(--surface-2); } table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl tfoot td { font-weight: 650; border-top: 1px solid var(--line-strong); border-bottom: 0; } table.tbl tr.total td { font-weight: 650; background: var(--surface-2); } /* A bar drawn inside a table cell, so a column of numbers also reads as a shape without a chart library. */ .cellbar { position: relative; display: block; height: 100%; } .cellbar i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--brand); opacity: .14; border-radius: 3px; } .cellbar span { position: relative; } /* ============================== bars ============================== */ .bars { display: grid; gap: 7px; } .bar-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; } .bar-lab { font-size: var(--t-sm); color: var(--ink-2); } .bar-val { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .bar-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .bar-fill { height: 100%; border-radius: 3px; background: var(--brand); } /* ============================== empty / loading ============================== */ .empty, .loading { padding: var(--s7) var(--s5); text-align: center; color: var(--muted); font-size: var(--t-sm); } /* ============================== notes ============================== */ /* A caveat attached to a figure. Used wherever a number would otherwise be read as saying more than it does — the HSC layer above all. */ .note { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; border-left: 2px solid var(--line-strong); padding-left: var(--s3); } .note.warn { border-left-color: var(--warn); color: var(--warn); } /* ============================== responsive ============================== */ @media (max-width: 720px) { .app-head { height: auto; flex-wrap: wrap; padding: var(--s3) var(--s4); gap: var(--s3); } .app-nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; } .card-body, .card-head { padding: var(--s4); } .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .kpi-v { font-size: var(--t-xl); } }