/* ═══════════════════════════════════════════════════════════════════════════════════════════════
يقِظ · YAQIDH — THE ONE SIDEBAR
═══════════════════════════════════════════════════════════════════════════════════════════════
WHY THIS FILE EXISTS (2026-09-09)
---------------------------------
There were FIVE sidebars across nine pages, and an operator moving between surfaces watched the
navigation rebuild itself under them:
/ .c42side 5 items Console · ARC · I999 · Monitoring · Inspector
/arc, /command .side 5 items ARC · Monitoring · Buildings · Reports · Settings
/i999 .side 8 items a third set, in a third order
/inspector .c42side 4 items and grey SQUARES where every other page has icons
/fleet /stations
/resources .side 8 items labels hardcoded in Arabic — no i18n at all
/cameras — — NO SIDEBAR, on the page that "Live Monitoring"
links to from all five of the others
That last row is the defect that gets reported. "Live Monitoring" is present in every sidebar in
the product; following it deleted the sidebar. On a life-safety console, navigation that changes
shape mid-incident costs seconds that are not ours to spend.
THE RULE
--------
This file and `sidebar.js` are the ONLY definition of the left rail. A page contributes an empty
`` and nothing else — no local `.side{}` block, no
hand-written `` list. If a nav item needs to change, it changes in `sidebar.js`'s NAV model,
once, and all nine surfaces move together.
COLOUR — the brand guide, not the client render
-----------------------------------------------
The geometry below is still the reference's own, divided by 397/224 (its rail width over ours):
89.5px row pitch → 50px, 41px icon → 22px, 15px bar → 6px, ~25px type → 14.5px. That measurement
was right and has not changed.
The COLOUR has. This rail was first built on `#48DE93`, then repainted in the reference render's
teal — ground `#001417`, active row `#003637`, indicator `#00DFD9` — sampled off the client's IOC
pixels, with a note here saying the mismatch against the green logo was deliberate and asking
whoever found it to check before reverting.
Checked, 2026-09-09. `docs/guide/Core42 _Mini Brand Guidelines.pdf` arrived and settles it the
other way: pages 25-26 give a six-colour palette containing no teal, and pages 6-9 permit the
mark in exactly two colourways — Slate-Black+Impact-Green, or Platinum-White+Impact-Green. The
IOC renders in that same folder do not follow it: they recolour the Core42 wordmark itself cyan,
which the guide forbids. They are a client mockup, not the brand authority. So the accent is
Impact Green again and the logo and the rail finally agree — this time on the guide's terms.
Nothing here is picked by eye. Every value is `var(--c42-*)` from `brand.css` and every pairing
was measured: accent 8.46:1 on the ground, label 12.55:1, muted 7.32:1, accent-on-active 5.46:1.
The first pass also sized this rail at 13px/19px/47px, which the owner reported as unreadable.
The numbers above are what the reference actually measures — the earlier ones were guesses that
happened to be a notch small everywhere at once.
Every inline/block direction uses LOGICAL properties. The active indicator bar is
`border-inline-start`, so it sits left in EN and right in AR without a second rule.
═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
--c42-side-w: 224px;
--c42-side-bg: var(--c42-grit); /* Grit Green — the guide's signature dark */
--c42-side-row-on: var(--c42-field); /* active row; accent rides it at 5.46:1 */
--c42-side-row-hv: #26382D; /* one step off the ground, short of it */
--c42-side-accent: var(--c42-impact); /* Impact Green — 8.46:1 on the ground */
--c42-side-text: var(--c42-on-dark); /* Pearl White — 12.55:1 */
--c42-side-mut: var(--c42-on-dark-dim); /* tagline, group headers, "Powered by" */
--c42-side-pad: 16px;
--c42-side-bar: 6px; /* active indicator; 15px in the reference / (397/224) */
}
/* ── the shell ──────────────────────────────────────────────────────────────────────────────── */
.c42app{display:grid;grid-template-columns:var(--c42-side-w) 1fr;min-height:100vh}
.c42side{
background:var(--c42-side-bg);
color:var(--c42-side-text);
padding:18px var(--c42-side-pad) 14px;
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;
overflow-y:auto;overflow-x:hidden;
z-index:5;
/* "NB International Pro" is Core42's brand face (guide p.28) and WE DO NOT SHIP IT — there is no
such file under `vendor/fonts/`, which holds IBM Plex Sans Arabic and nothing else. Naming it
first meant every one of these rules fell back silently, and would have rendered differently on
an operator's machine that happened to have NB installed. On a console where two people compare
the same screen mid-incident, that is a defect. Guide p.29 names Arial as the sanctioned
substitute; IBM Plex Sans Arabic is the better one here because it also carries the Arabic. Put
NB back at the front of this stack the day the licensed woff2 lands in `vendor/fonts/`. */
font-family:"IBM Plex Sans Arabic","Inter",system-ui,-apple-system,sans-serif;
scrollbar-width:thin;scrollbar-color:var(--c42-field) transparent;
}
.c42side::-webkit-scrollbar{width:6px}
.c42side::-webkit-scrollbar-thumb{background:var(--c42-field);border-radius:3px}
@media(max-width:900px){
.c42app{grid-template-columns:1fr}
.c42side{display:none}
}
/* ── brand block ────────────────────────────────────────────────────────────────────────────────
`.c42logo` is sized by HEIGHT against `core42-wordmark-white.png`, which is cropped tight to the
wordmark (1604×287). The old `core42-logo-white.png` is a 2000×888 canvas holding 1604×494 of
artwork in two bands, so `height:26px` on it rendered the wordmark itself at 287/888 × 26 ≈ 8px
inside 7px of dead space, with an unreadable 4px "A G42 Company" below. Same number, tight file,
the mark is finally the size it says it is. */
/* `align-self` is load-bearing: `.c42side` is a column flex container, so its default
`align-items:stretch` overrode `width:auto` and blew the mark out to the full 192px content
width — a 22px-tall logo rendered 192px wide, i.e. squashed to 8.7:1 against its true 5.59:1. */
/* `margin-bottom` is the guide's clear space, not a spacing choice: p.5 requires 70% of the icon
height kept clear around the primary logo, which at `height:22px` is 15.4px. The rail's own 18px
top and 16px inline padding already satisfy the other three sides. */
.c42side .c42logo{height:22px;width:auto;align-self:flex-start;display:block;margin-bottom:16px}
/* 700, not 800: only 400/500/700 are vendored, so 800 was synthesised bold on Arabic. */
.c42side .c42prod{font-weight:700;color:var(--c42-platinum);font-size:17px;line-height:1.25;letter-spacing:-.01em}
.c42side .c42sub{color:var(--c42-side-mut);font-size:12.5px;line-height:1.5;margin:5px 0 18px}
/* ── nav ────────────────────────────────────────────────────────────────────────────────────── */
.c42side .c42nav{display:flex;flex-direction:column;gap:1px;flex:1 1 auto}
.c42grp{margin-top:12px}
.c42grp:first-child{margin-top:0}
/* group header — a button, because it toggles. Styled to disappear into the rail. */
.c42grp > .c42grphd{
display:flex;align-items:center;gap:6px;width:100%;
background:none;border:0;padding:6px var(--c42-side-pad);
margin-inline:calc(var(--c42-side-pad) * -1);
color:var(--c42-side-mut);font:inherit;font-size:11px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;
cursor:pointer;text-align:start;
}
.c42grp > .c42grphd:hover{color:var(--c42-side-text)}
.c42grp > .c42grphd .c42chev{
margin-inline-start:auto;width:14px;height:14px;flex:0 0 auto;
transition:transform .16s ease;
}
/* chevron points at the content: down when open, toward the inline end when shut */
.c42grp > .c42grphd[aria-expanded="false"] .c42chev{transform:rotate(-90deg)}
[dir="rtl"] .c42grp > .c42grphd[aria-expanded="false"] .c42chev{transform:rotate(90deg)}
.c42grp > .c42grpbody{display:flex;flex-direction:column;gap:1px}
.c42grp > .c42grphd[aria-expanded="false"] + .c42grpbody{display:none}
/* the row. Full-bleed: negative inline margins cancel the rail's padding so the active band
touches both edges, as the reference does — a rounded pill floating inside the padding reads as
a button, and these are not buttons. */
.c42side .c42nav a{
display:flex;align-items:center;gap:13px;
padding:14px var(--c42-side-pad);
margin-inline:calc(var(--c42-side-pad) * -1);
border-inline-start:var(--c42-side-bar) solid transparent;
padding-inline-start:calc(var(--c42-side-pad) - var(--c42-side-bar));
color:var(--c42-side-text);text-decoration:none;
/* 500, not 600: at 14.5px the reference sets its resting rows in a medium weight and reserves
bold for the current one, so weight carries "you are here" alongside the colour. Six
semibold rows all shouting at once is what made the old 13px rail read as mush. */
font-size:14.5px;font-weight:500;line-height:1.3;
cursor:pointer;
}
.c42side .c42nav a > .c42ic{
width:22px;height:22px;flex:0 0 auto;display:block;
color:inherit;
}
.c42side .c42nav a > .c42ic svg{width:100%;height:100%;display:block}
.c42side .c42nav a > .c42lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c42side .c42nav a:hover:not(.on){background:var(--c42-side-row-hv);color:var(--c42-platinum)}
.c42side .c42nav a:focus-visible{outline:2px solid var(--c42-side-accent);outline-offset:-2px}
.c42side .c42nav a.on{
background:var(--c42-side-row-on);
border-inline-start-color:var(--c42-side-accent);
color:var(--c42-side-accent);
font-weight:700;
}
/* a count that must not be missed, e.g. active incidents on /i999 */
.c42side .c42nav a > .c42badge{
margin-inline-start:auto;flex:0 0 auto;
min-width:22px;height:22px;padding:0 6px;border-radius:999px;
/* The reference badge is #ED583E. It stays #CC3D00 — `design-system.css` exists because three
different reds were live at once on a platform where RED MEANS "a fire is confirmed", and a
fourth one borrowed from a mockup is exactly the drift that file was written to stop. */
background:#CC3D00;color:#fff;font-size:11.5px;font-weight:700;
display:none;align-items:center;justify-content:center;
}
.c42side .c42nav a > .c42badge.show{display:flex}
/* RBAC: `sidebar.js` sets this from /api/auth/me. A whole group hides when it empties out. */
.c42side .perm-hide{display:none!important}
/* A row the account can see but cannot use (2026-09-10): greyed, unclickable, and it SAYS why on a
second line instead of leading to a 403. The label sits in `.c42lock`, which is otherwise empty. */
.c42side .c42nav a > .c42txt{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.c42side .c42nav a > .c42txt > .c42lock{display:none;font-size:10.5px;font-weight:500;color:var(--c42-side-text);opacity:.75;white-space:nowrap}
.c42side a.perm-off{cursor:not-allowed;opacity:.5}
.c42side a.perm-off:hover{background:transparent!important;color:var(--c42-side-text)!important}
.c42side a.perm-off > .c42txt > .c42lock{display:block}
.c42side .c42foot a > .c42txt{display:flex;flex-direction:column;line-height:1.2}
.c42side .c42foot a > .c42txt > .c42lock{display:none;font-size:10.5px;opacity:.75}
.c42side .c42foot a.perm-off > .c42txt > .c42lock{display:block}
/* ── foot ───────────────────────────────────────────────────────────────────────────────────── */
.c42side .c42foot{margin-top:auto;padding-top:16px}
.c42side .c42foot a{
display:flex;align-items:center;gap:13px;
padding:14px var(--c42-side-pad);
margin-inline:calc(var(--c42-side-pad) * -1);
border-inline-start:var(--c42-side-bar) solid transparent;
padding-inline-start:calc(var(--c42-side-pad) - var(--c42-side-bar));
color:var(--c42-side-text);text-decoration:none;font-size:14.5px;font-weight:500;
}
.c42side .c42foot a:hover{background:var(--c42-side-row-hv);color:var(--c42-platinum)}
.c42side .c42foot a > .c42ic{width:22px;height:22px;flex:0 0 auto;display:block}
.c42side .c42foot a > .c42ic svg{width:100%;height:100%;display:block}
.c42side .c42pb{
display:flex;align-items:center;gap:7px;
color:var(--c42-side-mut);font-size:11.5px;margin-top:14px;
}
/* 19px is the guide's floor, not a taste call: pp.5 and 8 both set a hard minimum of H:19px /
5mm for the mark and for the icon alike. This footer mark shipped at 12px. */
.c42side .c42pb img{height:19px;width:auto;display:block;opacity:.95}