/* ============================================================ RADAR V2 — Stylesheet (finalized) Based on the original radar-v2-style.css tokens/classes, updated for the refreshed visual direction: Public Sans type, lighter chrome, refined surfaces/shadows, light+dark theme support. One file, linked by every page. Referenced as radar-v2-style.css?v=N in every page's , same convention as radar-v2-shell.js?v=N — a real host's cache headers (unlike the local dev server) will otherwise keep serving a stale copy to anyone who already loaded a page. Bump N and bulk-update every page (sed -i 's/style\.css?v=N/style.css?v=N+1/g' radar-v2-*.html) whenever this file changes. ============================================================ */ /* ── tokens ── */ :root { --ink: #14171A; --paper: #F5F4EF; --card: #FBFAF6; --steel: #5B6470; --steel-light: #9BA3AC; --line: #DFDCD1; --trace: #1C9E8E; --text: #1B1D1F; --text-mute: #6B7178; /* severity — functional, not decorative. Do not restyle per-screen. */ --sat: #5B9A4B; --nodata: #C7C3B6; --incons: #3E9FBF; --watch: #3E6E9F; --monitor: #D89A2E; --action: #C1602E; --urgent: #8B2E2E; --overdue: #44546A; --bias: #7030A0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(20,23,26,0.04); --shadow-md: 0 8px 20px rgba(20,23,26,0.08); } /* dark theme — toggle by setting data-theme="dark" on or */ :root[data-theme="dark"] { --paper: #1B1E21; --card: #22262A; --line: #33383D; --text: #EDEBE4; --text-mute: #9AA0A6; } /* ── reset ── */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Public Sans', sans-serif; background: var(--paper); color: var(--text); font-size: 13px; } .mono { font-family: 'IBM Plex Mono', monospace; } a { color: var(--trace); } a:hover { color: #14176E; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ LAYOUT SHELLS Two variants: staff pages use .shell + .panel (sidebar nav). Site Access / Insights use .shell-flat + .topbar (lighter chrome). ============================================================ */ .shell { display: grid; grid-template-rows: 56px 1fr; min-height: 600px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm), 0 10px 30px rgba(20,23,26,0.06); } .shell-body { display: grid; grid-template-columns: 184px 1fr; } .shell-flat { max-width: 1000px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } /* top command bar — every page */ .appbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 56px; background: var(--ink); color: #E7E5DD; border-bottom: 1px solid #2A2E32; } .appbar .brand { display: flex; align-items: center; gap: 9px; } .appbar .brand-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--trace); box-shadow: 0 0 0 3px rgba(28,158,142,0.25); } .appbar .brand-name { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; } .appbar .search { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 7px 14px 7px 12px; width: 280px; } .appbar .search input { background: transparent; border: none; outline: none; color: #E7E5DD; font-family: 'Public Sans', sans-serif; font-size: 11.5px; width: 100%; } .appbar .search input::placeholder { color: #9AA0A6; } .appbar .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--trace); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; } .theme-toggle { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.18); position: relative; cursor: pointer; transition: background 180ms ease; } .theme-toggle.on { background: var(--trace); } .theme-toggle .knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 180ms ease; } .theme-toggle.on .knob { left: 18px; } /* sidebar nav (staff pages) */ .panel { background: var(--card); border-right: 1px solid var(--line); padding: 16px 0; } .nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 5px; color: var(--text-mute); font-size: 12px; font-weight: 500; text-decoration: none; transition: background 150ms ease, color 150ms ease; } .nav a:hover { background: color-mix(in srgb, var(--trace) 8%, var(--card)); color: var(--text); } .nav a .dash { width: 14px; height: 1px; background: var(--steel-light); transition: background 150ms ease; } .nav a.active { color: var(--text); background: color-mix(in srgb, var(--trace) 12%, var(--card)); } .nav a.active .dash { background: var(--trace); height: 2px; } /* lighter top bar (Site Access / Insights) — legacy alias, prefer .appbar */ .topbar { background: var(--ink); color: #E7E5DD; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; } .site-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #B8BCC0; } .site-switch b { color: #F5F4EF; font-weight: 500; } .chev { color: var(--steel-light); font-size: 9px; } .period { font-size: 11.5px; color: #B8BCC0; } /* ============================================================ CONTENT AREA ============================================================ */ .main { padding: 26px 30px; animation: fadeSlideIn 320ms ease; } .titleblock { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .tb-left .eyebrow { font-size: 10px; color: var(--text-mute); letter-spacing: 1px; margin-bottom: 4px; } .tb-left h1 { font-size: 20px; font-weight: 700; } .tb-right { text-align: right; font-size: 11px; color: var(--text-mute); } .section-head { margin: 20px 0 10px; } .section-head h2 { font-size: 13.5px; font-weight: 700; } .section-head .note { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; } .section-head a { font-size: 11px; color: var(--trace); text-decoration: none; } /* signature waveform divider — used once per screen maximum, never as a repeated background pattern */ .wave { width: 100%; height: 22px; margin-bottom: 22px; } /* ============================================================ KPI TILES ============================================================ */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .kpi .label { font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; font-weight: 600; } .kpi .value { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 500; } .kpi .value.accent { color: var(--trace); } .kpi .sub { font-size: 10px; margin-top: 4px; color: var(--steel-light); } .kpi .sub.up { color: var(--action); } .kpi .sub.down { color: var(--sat); } .kpi .spark { display: block; } /* ============================================================ CONDITION TRACKER ============================================================ */ .tracker { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; background: var(--card); box-shadow: var(--shadow-sm); } .trow { display: grid; grid-template-columns: 1.6fr repeat(6, 0.6fr); align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); } .trow:last-child { border-bottom: none; } .trow.head { background: var(--ink); color: #B8BCC0; font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; height: 32px; } /* period labels (Mar, Apr...) must center-align to match the centered .cell dots below them — only the first column (Machine) stays left */ .trow.head > div:not(:first-child) { text-align: center; } .mname { font-size: 11.5px; font-weight: 700; } .mid { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--text-mute); } .cell { width: 16px; height: 16px; border-radius: var(--radius-sm); justify-self: center; display: inline-block; } .legend { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--text-mute); flex-wrap: wrap; } .legend span { display: flex; align-items: center; gap: 5px; } .legend .sw { width: 9px; height: 9px; border-radius: var(--radius-sm); } /* ============================================================ TABLES ============================================================ */ table { width: 100%; border-collapse: collapse; font-size: 11.5px; } th { background: var(--ink); color: #B8BCC0; text-align: left; padding: 9px 14px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; } td { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--card); } td.mono { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-mute); } /* ============================================================ CARDS — defects, programmes, side panels, generic component blocks ============================================================ */ .defect-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease; } .defect-card:hover { box-shadow: 0 6px 18px rgba(20,23,26,0.08); border-color: color-mix(in srgb, var(--trace) 30%, var(--line)); transform: translateY(-1px); } .defect-card .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .defect-card .asset { font-size: 12px; font-weight: 600; } .defect-card .meta { font-size: 10.5px; color: var(--text-mute); margin-top: 4px; } .side-block { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .side-block .lbl { font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; font-weight: 600; } .side-block .big { font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 16.5px; margin-bottom: 4px; } .side-block .note { font-size: 11px; color: var(--text-mute); } .prog-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 10px; box-shadow: var(--shadow-sm); } .prog-card .name { font-size: 13px; font-weight: 600; } .prog-card .ref { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-mute); margin-top: 2px; } .prog-card .meta { display: flex; gap: 20px; margin-top: 10px; font-size: 11px; color: var(--text-mute); } .prog-card .meta b { color: var(--text); font-weight: 500; } .prog-card .eng { text-align: right; font-size: 11px; color: var(--text-mute); } .prog-card .eng .who { color: var(--text); font-size: 12px; margin-bottom: 2px; } .comp-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .comp-block .comp-label { font-size: 10px; color: var(--text-mute); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ RANKED LISTS / BAR COMPARISONS (Insights) ============================================================ */ .rank-block { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); } .rank-block > .title, .sitebar-block > .title, .trend-block > .title { font-size: 13.5px; font-weight: 700; margin-bottom: 12px; } .rankrow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; } .rankrow:last-child { border-bottom: none; } .rankrow .n { font-family: 'IBM Plex Mono', monospace; color: var(--text-mute); width: 20px; flex-shrink: 0; } .rankrow .name { flex: 0 0 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rankrow .bar { flex: 1; height: 7px; background: color-mix(in srgb, var(--line) 70%, transparent); margin: 0 10px; border-radius: var(--radius-sm); overflow: hidden; } .rankrow .bar .fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--trace) 70%, white), var(--trace)); border-radius: var(--radius-sm); } .rankrow .count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; flex-shrink: 0; } .sitebar-block { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 26px; box-shadow: var(--shadow-sm); } .siterow { display: grid; grid-template-columns: 100px 1fr 36px; align-items: center; gap: 12px; padding: 7px 0; } .siterow .sname { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barwrap { background: color-mix(in srgb, var(--line) 70%, transparent); height: 16px; border-radius: var(--radius-sm); overflow: hidden; display: flex; } .barwrap .seg { height: 100%; } .siterow .total { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-align: right; color: var(--text-mute); } .trend-block { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-lg); padding: 18px 20px 14px; margin-bottom: 28px; box-shadow: var(--shadow-sm); } .trend-bars { display: flex; align-items: flex-end; gap: 14px; height: 110px; margin-bottom: 8px; } .tbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .tbar .col { width: 100%; background: var(--trace); opacity: 0.85; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tbar .lbl { font-size: 9.5px; color: var(--text-mute); margin-top: 6px; } .tbar .val { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; margin-bottom: 4px; } /* line-chart variant: render as SVG polyline/path + points using var(--trace); see design reference. Not expressible as CSS-only. */ .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; } /* ============================================================ DAILY WORK — inbox + week grid ============================================================ */ .inbox { border: 1px dashed var(--steel-light); background: color-mix(in srgb, var(--card) 90%, #FBF8EF); padding: 14px 16px; margin-bottom: 24px; border-radius: var(--radius-lg); } .inbox .lbl { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; } .inbox-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; } .inbox-row:last-child { border-bottom: none; } .inbox-row .hint { font-size: 10px; color: var(--steel-light); } .week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .daycol { background: var(--paper); min-height: 220px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .daycol .head { background: var(--card); padding: 8px 10px; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--line); font-weight: 600; } .daycol .head b { color: var(--text); font-weight: 700; } .card { background: var(--card); margin: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 11px; transition: box-shadow 150ms ease, border-color 150ms ease; } .card:hover { box-shadow: 0 4px 12px rgba(20,23,26,0.07); border-color: color-mix(in srgb, var(--trace) 30%, var(--line)); } .card .type { font-size: 9px; color: var(--trace); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; } .card .site { font-size: 9.5px; color: var(--text-mute); margin-top: 3px; } .card.done { opacity: 0.5; text-decoration: line-through; } /* dashboard alert strip + day-grouped task list */ .alert { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: var(--radius-md); margin-bottom: 8px; font-size: 12px; } .alert.overdue { background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); border-left: 3px solid var(--action); } .alert.project { background: color-mix(in srgb, var(--watch) 14%, transparent); color: var(--watch); border-left: 3px solid var(--watch); } .alert.issue { background: color-mix(in srgb, var(--monitor) 16%, transparent); color: var(--monitor); border-left: 3px solid var(--monitor); cursor: pointer; } .alert .tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.75; } .daygroup { margin-bottom: 18px; } .daylabel { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; font-weight: 600; } .taskrow { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; min-height: 40px; padding: 9px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 12px; margin-bottom: 1px; transition: box-shadow 150ms ease, border-color 150ms ease; } .taskrow:hover { box-shadow: 0 4px 14px rgba(20,23,26,0.07); border-color: color-mix(in srgb, var(--trace) 35%, var(--line)); } .taskrow .time { font-family: 'Public Sans', sans-serif; font-size: 10.5px; color: var(--text-mute); } .taskrow .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .taskrow .site { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ FORMS / BUTTONS / BADGES ============================================================ */ .filters { display: flex; gap: 8px; margin-bottom: 16px; } .filters span { font-size: 11px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-mute); cursor: pointer; } .filters span.active { background: var(--ink); color: #F5F4EF; border-color: var(--ink); } .week-hdr { font-size: 10px; color: var(--text-mute); letter-spacing: 0.6px; text-transform: uppercase; margin: 20px 0 8px; } .btn { display: inline-block; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: background 150ms ease, box-shadow 150ms ease; } .btn-primary { background: var(--ink); color: #F5F4EF; } .btn-primary:hover { background: #2A2E32; box-shadow: 0 4px 14px rgba(20,23,26,0.15); } .btn-accent { background: var(--trace); color: #fff; } .btn-accent:hover { background: #178577; box-shadow: 0 4px 14px rgba(20,23,26,0.15); } .btn-outline { background: transparent; border: 1px solid var(--steel); color: var(--text); } .btn-add { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #F5F4EF; font-size: 11.5px; font-weight: 500; } .badge, .pill { display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; } /* severity-mapped badges — use these instead of ad-hoc colors */ .badge-sat { color: var(--sat); background: color-mix(in srgb, var(--sat) 16%, white); border: 1px solid color-mix(in srgb, var(--sat) 45%, white); } .badge-nodata { color: var(--nodata); background: color-mix(in srgb, var(--nodata) 16%, white); border: 1px solid color-mix(in srgb, var(--nodata) 45%, white); } .badge-incons { color: var(--incons); background: color-mix(in srgb, var(--incons) 16%, white); border: 1px solid color-mix(in srgb, var(--incons) 45%, white); } .badge-watch { color: var(--watch); background: color-mix(in srgb, var(--watch) 16%, white); border: 1px solid color-mix(in srgb, var(--watch) 45%, white); } .badge-monitor { color: var(--monitor); background: color-mix(in srgb, var(--monitor) 16%, white); border: 1px solid color-mix(in srgb, var(--monitor) 45%, white); } .badge-action { color: var(--action); background: color-mix(in srgb, var(--action) 16%, white); border: 1px solid color-mix(in srgb, var(--action) 45%, white); } .badge-urgent { color: var(--urgent); background: color-mix(in srgb, var(--urgent) 16%, white); border: 1px solid color-mix(in srgb, var(--urgent) 45%, white); } .badge-overdue { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 16%, white); border: 1px solid color-mix(in srgb, var(--overdue) 45%, white); } .badge-bias { color: var(--bias); background: color-mix(in srgb, var(--bias) 16%, white); border: 1px solid color-mix(in srgb, var(--bias) 45%, white); } .note { font-size: 10.5px; color: var(--text-mute); margin-bottom: 16px; padding: 10px 14px; background: color-mix(in srgb, var(--watch) 12%, transparent); border-left: 3px solid var(--watch); border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* title-block variant used inside component demos (design system page) */ .tb { border-left: 4px solid var(--trace); padding-left: 14px; } .tb .eyebrow { font-size: 9.5px; letter-spacing: 1px; color: var(--text-mute); margin-bottom: 3px; } .tb h3 { font-size: 17px; font-weight: 600; } /* ============================================================ ADMIN SPLIT LAYOUT — list + detail form, shared by every admin CRUD page (Sites, Programmes, Machines, ...). One definition here, not reinvented per page. ============================================================ */ .admin-split { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; } .list-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .list-panel-header { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 10px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line); } .list-panel-header .count { font-size: 10.5px; font-weight: 500; color: var(--text-mute); } .list-search { width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--text); font-family: inherit; font-size: 11.5px; outline: none; } .list-items { max-height: 560px; overflow-y: auto; } .list-item { padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; transition: background 120ms ease; } .list-item:last-child { border-bottom: none; } .list-item:hover { background: color-mix(in srgb, var(--trace) 6%, transparent); } .list-item.active { background: color-mix(in srgb, var(--trace) 12%, transparent); border-left: 2px solid var(--trace); padding-left: 12px; } .list-item .list-item-name { font-weight: 600; } .list-item .list-item-sub { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; } .list-item.inactive { opacity: 0.5; } .detail-panel { min-height: 200px; } .form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .form-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin-bottom: 12px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .form-field label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-mute); margin-bottom: 5px; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--text); font-family: inherit; font-size: 12px; outline: none; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--trace); } .form-field textarea { resize: vertical; min-height: 60px; } .status-bar { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .status-bar .ref { font-size: 13px; font-weight: 700; } .status-bar .actions { display: flex; gap: 8px; } .empty-state { text-align: center; color: var(--text-mute); font-size: 12px; padding: 60px 20px; } /* ============================================================ ACCESSIBILITY ============================================================ */ a:focus-visible, .btn:focus-visible, .nav a:focus-visible, input:focus-visible { outline: 2px solid var(--trace); outline-offset: 2px; } /* ============================================================ MOBILE (<=768px) — the app previously had zero responsive handling at all (no media queries, no viewport meta tag on any page but login). Sidebar becomes a slide-over drawer instead of a fixed 184px column; list+detail and two-column layouts stack instead of squeezing side by side. Bespoke chart/grid layouts (Insights' site bars, Site Access's condition tracker, Daily Work's week grid) are left as horizontally-scrollable rather than redesigned — good enough to use, not yet a native-feeling mobile layout. ============================================================ */ .hamburger { display: none; } .nav-scrim { display: none; } @media (max-width: 768px) { .hamburger { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 4px; background: none; border: none; color: #E7E5DD; cursor: pointer; font-size: 18px; } .appbar .search { display: none; } .appbar .brand-name { display: none; } .shell-body { grid-template-columns: 1fr; } .panel { position: fixed; top: 56px; left: 0; bottom: 0; width: 240px; z-index: 400; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: var(--shadow-md); overflow-y: auto; } .panel.open { transform: translateX(0); } .nav-scrim.open { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(20,23,26,0.4); z-index: 390; } .main { padding: 16px; } .titleblock { flex-wrap: wrap; gap: 10px; align-items: flex-start; } .admin-split { grid-template-columns: 1fr; } .twocol { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, 1fr); } .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } .week { grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; padding-bottom: 8px; } .planner-kpis { grid-template-columns: repeat(2, 1fr); } .week-grid { grid-template-columns: 1fr; } /* Shell-flat pages (Insights, Site Access) — already single-column main, just needs the same padding/kpi treatment. */ .shell-flat { max-width: 100%; } /* Below 16px, iOS Safari force-zooms the whole page on focus and doesn't zoom back out on blur — every form field and the sidebar search box on every admin page was small enough to trigger this. Desktop keeps its tighter density; only the mobile layout bumps these to the 16px floor. */ .form-field input, .form-field select, .form-field textarea { font-size: 16px; } .list-search { font-size: 16px; } }