/* ============================================================================ Talius Maintenance Portal — redesign stylesheet (Phase 1) ---------------------------------------------------------------------------- EVERY rule in this file is scoped under `.maintenance-mode` (set on in middleware.js only when view_mode === 'maintenance'). This guarantees the standard Stratix view is pixel-identical — see spec §2.1. Design tokens are the §1.5 palette/type system; status colour is ALWAYS dark text on a tinted background (never white-on-colour) to meet WCAG AA. ============================================================================ */ /* ---- Design tokens (spec §1.5) ------------------------------------------- Also defined on .custom-maintenance-modal: the events modal is ONE SHARED template that standard-view Stratix users open too (group cards), where the maintenance-mode body class is absent — without this the modal's var(--maint-*) references would all be undefined there and the modal renders unstyled. */ .maintenance-mode, .custom-maintenance-modal { --maint-surface: #f8fafc; /* page background */ --maint-card-bg: #ffffff; /* card / panel background */ --maint-ink: #0f172a; /* primary text 15.9:1 */ --maint-ink-2: #475569; /* secondary text 7.5:1 */ --maint-accent: #2563eb; /* links, focus ring, primary */ --maint-accent-ink: #ffffff; /* text on accent 5.2:1 */ --maint-ok-text: #15803d; /* on ok-bg 5.0:1 */ --maint-ok-bg: #dcfce7; --maint-attention-text: #b45309; /* on attention-bg 5.3:1 */ --maint-attention-bg: #fef3c7; --maint-urgent-text: #b91c1c; /* on urgent-bg 5.9:1 */ --maint-urgent-bg: #fee2e2; --maint-border: #e2e8f0; --maint-radius: 8px; --maint-space: 8px; --maint-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); --maint-shadow-hover: 0 6px 16px rgba(15, 23, 42, 0.12); --maint-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Every selector below is prefixed with `.maintenance-mode` so nothing can leak into the standard Stratix view (which never carries that body class). */ /* ---- Layout shell -------------------------------------------------------- */ .maintenance-mode { background: var(--maint-surface); } .maintenance-mode .maint-root { font-family: var(--maint-font); color: var(--maint-ink); max-width: 1320px; margin: 0 auto; padding: 20px 12px 48px; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* The shared amber sidebar + its persistent toggle belong to the old layout — the redesign drops the sidebar entirely (spec §1.4b). Hide the toggle here only; it stays untouched for the standard view. */ .maintenance-mode .persistent-sidebar-toggle { display: none !important; } /* Neutralise Bootstrap defaults for the button-based controls in this view. */ .maintenance-mode .maint-root button { font-family: inherit; cursor: pointer; } /* ---- (a) Hero band ------------------------------------------------------- */ .maintenance-mode .maint-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .maintenance-mode .maint-hero-title { font-size: 24px; font-weight: 600; margin: 0; color: var(--maint-ink); line-height: 1.2; } .maintenance-mode .maint-hero-org { font-size: 15px; color: var(--maint-ink-2); margin: 4px 0 0; text-transform: none; } .maintenance-mode .maint-hero-updated { display: flex; align-items: center; gap: 12px; min-height: 44px; } .maintenance-mode .maint-updated-label { font-size: 13px; color: var(--maint-ink-2); } .maintenance-mode .maint-refresh-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--maint-border); border-radius: var(--maint-radius); background: var(--maint-card-bg); color: var(--maint-ink); font-size: 15px; } .maintenance-mode .maint-refresh-btn:hover { border-color: var(--maint-accent); color: var(--maint-accent); } .maintenance-mode .maint-refresh-btn[disabled] { opacity: 0.6; cursor: default; } .maintenance-mode .maint-spin { animation: maint-spin 0.9s linear infinite; } @keyframes maint-spin { to { transform: rotate(360deg); } } /* ---- (b) KPI row --------------------------------------------------------- */ .maintenance-mode .maint-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .maintenance-mode .maint-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: 16px; text-align: left; background: var(--maint-card-bg); border: 1px solid var(--maint-border); border-radius: var(--maint-radius); box-shadow: var(--maint-shadow); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } /* No hover lift on the KPI boxes (per feedback) — the active/pressed state below still shows. */ .maintenance-mode .maint-kpi[disabled] { opacity: 0.65; cursor: default; box-shadow: var(--maint-shadow); transform: none; } .maintenance-mode .maint-kpi-active { border-color: var(--maint-accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.25); } .maintenance-mode .maint-kpi-num { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--maint-ink); } .maintenance-mode .maint-kpi-num-sm { font-size: 20px; } .maintenance-mode .maint-kpi-label { font-size: 13px; color: var(--maint-ink-2); } .maintenance-mode .maint-kpi-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--maint-ink-2); } .maintenance-mode .maint-kpi-attention .maint-kpi-num { color: var(--maint-attention-text); } .maintenance-mode .maint-kpi-oldest { justify-content: flex-start; } /* ---- (c) Toolbar --------------------------------------------------------- */ .maintenance-mode .maint-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .maintenance-mode .maint-segment { display: inline-flex; border: 1px solid var(--maint-border); border-radius: var(--maint-radius); overflow: hidden; background: var(--maint-card-bg); } .maintenance-mode .maint-segment-btn { min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--maint-ink-2); font-size: 15px; font-weight: 600; } .maintenance-mode .maint-segment-btn.is-active { background: var(--maint-accent); color: var(--maint-accent-ink); } .maintenance-mode .maint-segment-btn:not(.is-active):hover { background: #eff3fb; color: var(--maint-accent); } .maintenance-mode .maint-toolbar-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .maintenance-mode .maint-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; } .maintenance-mode .maint-field-label { font-size: 13px; font-weight: 600; color: var(--maint-ink-2); text-transform: uppercase; letter-spacing: 0.03em; } .maintenance-mode .maint-select, .maintenance-mode .maint-input { min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--maint-ink); background: var(--maint-card-bg); border: 1px solid var(--maint-border); border-radius: var(--maint-radius); } .maintenance-mode .maint-search { position: relative; display: inline-flex; align-items: center; } .maintenance-mode .maint-search .fa-search { position: absolute; left: 12px; color: var(--maint-ink-2); pointer-events: none; } .maintenance-mode .maint-search .maint-input { padding-left: 34px; min-width: 200px; } .maintenance-mode .maint-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: var(--maint-radius); border: 1px solid transparent; } .maintenance-mode .maint-btn-ghost { background: var(--maint-card-bg); border-color: var(--maint-border); color: var(--maint-ink-2); } .maintenance-mode .maint-btn-ghost:hover { border-color: var(--maint-accent); color: var(--maint-accent); } /* ---- Reassurance line ---------------------------------------------------- */ .maintenance-mode .maint-reassure { font-size: 13px; color: var(--maint-ink-2); margin: 4px 0 16px; } .maintenance-mode .maint-linkbtn { display: inline; background: none; border: 0; padding: 0; color: var(--maint-accent); font-size: inherit; font-weight: 600; text-decoration: none; } .maintenance-mode .maint-linkbtn:hover { text-decoration: underline; } /* ---- (f) Charts panel ---------------------------------------------------- */ .maintenance-mode .maint-charts { border: 1px solid var(--maint-border); border-radius: var(--maint-radius); background: var(--maint-card-bg); margin: 0 0 20px; overflow: hidden; } .maintenance-mode .maint-charts-summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent; font-size: 15px; font-weight: 600; color: var(--maint-ink); text-align: left; } .maintenance-mode .maint-charts-hint { font-weight: 400; font-size: 13px; color: var(--maint-ink-2); } .maintenance-mode .maint-charts-body { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; padding: 8px 16px 16px; } /* min-width:0 lets the ECharts canvas shrink inside the grid column (else it overflows). */ .maintenance-mode .maint-chart-card { display: flex; flex-direction: column; min-width: 0; } .maintenance-mode .maint-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .maintenance-mode .maint-chart-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--maint-ink-2); } .maintenance-mode .maint-chart-max { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--maint-border); border-radius: var(--maint-radius); background: var(--maint-card-bg); color: var(--maint-ink-2); cursor: pointer; } .maintenance-mode .maint-chart-max:hover { border-color: var(--maint-accent); color: var(--maint-accent); } .maintenance-mode .maint-chart { width: 100%; min-height: 320px; } .maintenance-mode #maint-village-chart { min-height: 360px; } /* The maximised chart inside the modal — large, sized to the viewport. Scoped to the modal windowClass like the rest of the modal styles. */ .custom-maintenance-modal .maint-max-chart { width: 100%; height: 68vh; min-height: 420px; } .maintenance-mode .maint-charts-note { grid-column: 1 / -1; font-size: 13px; color: var(--maint-ink-2); margin: 0; } /* Untagged-issues caption under the region donut (inline card and maximised modal). */ .maintenance-mode .maint-chart-caption, .custom-maintenance-modal .maint-chart-caption { margin: 6px 0 0; font-size: 13px; color: var(--maint-ink-2); } /* ---- (d) Region sections ------------------------------------------------- */ .maintenance-mode .maint-region { margin-bottom: 24px; } .maintenance-mode .maint-region-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--maint-border); } .maintenance-mode .maint-region-name { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--maint-ink); } .maintenance-mode .maint-region-meta { font-size: 14px; color: var(--maint-ink-2); } /* Staff-only inline checkbox field (show unassigned-account buckets). */ .maintenance-mode .maint-field-check { flex-direction: row; align-items: center; gap: 6px; align-self: flex-end; font-size: 13px; color: var(--maint-ink-2); cursor: pointer; white-space: nowrap; } .maintenance-mode .maint-field-check input[type="checkbox"] { margin: 0; } /* Deployment subtitle on unassigned-account bucket cards. */ .maintenance-mode .maint-card-sub { font-size: 12px; color: var(--maint-ink-2); margin-top: -4px; } /* Collapsible Unassigned header: same look as an h2 header, but a real