/* ========================================================================== panel.css — design system for the platform-admin panel (/admin) and the tenant control panel (/panel). Vanilla CSS, no build step, no imports. Everything visual is a custom property on :root, so a restyle later is a token swap and nothing else. The dark block below only swaps tokens — no component rule may name a raw colour. Sections 1 Tokens 2 Dark tokens 3 Reset and base elements 4 Utilities (skip link, visually-hidden, layout helpers) 5 App shell (top bar, sidebar/drawer, main, footer) 6 Impersonation banner 7 Page header and breadcrumbs 8 Cards and panels 9 Tables 10 Forms 11 Buttons 12 Badges 13 Flash messages 14 Empty state, key/value lists, pagination, tabs 15 Auth layout ========================================================================== */ /* 1 — Tokens ============================================================== */ :root { color-scheme: light dark; /* Neutrals */ --bg: #f6f7f8; --surface: #ffffff; --subtle: #eef0f2; --text: #1d2228; --muted: #5b6470; --border: #e3e6ea; /* Accent */ --accent: #1f6f5f; --accent-hover: #185a4d; --accent-soft: #e6f2ef; --on-accent: #ffffff; /* Semantic */ --danger: #b42318; --danger-soft: #fef3f2; --on-danger: #ffffff; --warning: #b54708; --warning-soft: #fffaeb; --on-warning: #ffffff; --success: #067647; --success-soft: #ecfdf3; --info: #175cd3; --info-soft: #eff4ff; /* Shape */ --radius: 8px; --radius-sm: 4px; --shadow: 0 1px 2px rgba(16, 24, 40, .06); --shadow-lg: 0 10px 28px rgba(16, 24, 40, .16); /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Type — dense but calm */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-base: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-lg: 16px; --fs-title: 20px; --fs-table: 13px; --lh: 1.45; /* Focus */ --focus-color: var(--accent); --focus-width: 2px; --focus-offset: 2px; /* Shell metrics */ --topbar-h: 52px; --sidebar-w: 208px; --maxw: 1080px; --maxw-wide: 1480px; /* Controls: touch-first, tightened on pointer-friendly widths (§3) */ --control-h: 40px; --control-h-sm: 36px; /* The select chevron. A data URI cannot read a custom property, so this is the one place a raw colour hides: it is --muted, kept in step by hand. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 2 — Dark tokens ========================================================= */ /* Dark arrives two ways: the device says so (and the person has not chosen "Light" in the user menu), or the person chose "Dark" outright. The choice lives in localStorage as hs-theme and lands on as data-theme, set before first paint by the layout's boot script; no attribute = follow the device. The palette below therefore appears TWICE — the media block and the forced block are twins and must stay identical. Edit both or neither. */ :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #12161a; --surface: #1a1f25; --subtle: #222931; --text: #e6e9ec; --muted: #9aa4b0; --border: #2c333b; --accent: #3fb89e; --accent-hover: #55cdb2; --accent-soft: #17322c; --on-accent: #06120f; --danger: #f27168; --danger-soft: #2e1614; --on-danger: #1a0806; --warning: #eba13c; --warning-soft: #2c1f0c; --on-warning: #1c1204; --success: #4cc38a; --success-soft: #10281d; --info: #7ba7f8; --info-soft: #14213c; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 28px rgba(0, 0, 0, .55); /* Dark --muted, see the light block's note. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa4b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } /* The twin: an explicit "Dark" choice, whatever the device says. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #12161a; --surface: #1a1f25; --subtle: #222931; --text: #e6e9ec; --muted: #9aa4b0; --border: #2c333b; --accent: #3fb89e; --accent-hover: #55cdb2; --accent-soft: #17322c; --on-accent: #06120f; --danger: #f27168; --danger-soft: #2e1614; --on-danger: #1a0806; --warning: #eba13c; --warning-soft: #2c1f0c; --on-warning: #1c1204; --success: #4cc38a; --success-soft: #10281d; --info: #7ba7f8; --info-soft: #14213c; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 28px rgba(0, 0, 0, .55); /* Dark --muted, see the light block's note. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa4b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 3 — Reset and base elements ============================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; } h1 { font-size: var(--fs-title); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-base); } p, ul, ol, dl, pre, table, figure { margin: 0 0 var(--sp-3); } p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } small { font-size: var(--fs-xs); } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } /* One focus ring everywhere. The outline follows each element's own radius, so never set border-radius here. */ :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; } pre { background: var(--subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); overflow-x: auto; } /* 4 — Utilities =========================================================== */ .skip-link { position: absolute; left: var(--sp-2); top: -100px; z-index: 100; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); text-decoration: none; box-shadow: var(--shadow-lg); } .skip-link:focus { top: var(--sp-2); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* An element whose class sets display (.cluster, .btn, .grid-2…) outruns the browser's own [hidden] rule, and a "hidden" empty state stands there in plain sight — the top-bar alerts form did exactly that. Keep the attribute meaning what it says, everywhere, over anything. */ [hidden] { display: none !important; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-size: .92em; } /* The 2FA setup pages: the QR is a button that copies the key; so is "Copy key". */ .qr-copy { display: inline-block; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: copy; line-height: 0; } .qr-copy svg { display: block; border-radius: var(--radius); } .qr-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .qr-copy.is-copied, .btn.is-copied { box-shadow: 0 0 0 3px var(--accent); } .copy-note { margin: var(--sp-1) 0 0; color: var(--accent); font-size: var(--fs-sm); } .nowrap { white-space: nowrap; } .text-right { text-align: right; } .num { font-variant-numeric: tabular-nums; } .stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); } .stack--tight { --stack-gap: var(--sp-2); } .stack--loose { --stack-gap: var(--sp-5); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .cluster--between { justify-content: space-between; } .grid-2, .grid-3 { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* 5 — App shell =========================================================== */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--topbar-h); padding: 0 var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; } .brand__mark { width: 22px; height: 22px; flex: none; border-radius: 5px; display: block; } .brand__name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } /* Context strip — outlet/tenant switcher slot, filled by the page. */ .topbar__context { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; } .topbar__user { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); flex: none; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--text); cursor: pointer; } .nav-toggle:hover { background: var(--subtle); } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -5px; } .nav-toggle__bars::after { top: 5px; } /* User menu — native
, so it works without JavaScript. */ .usermenu { position: relative; } .usermenu__button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-h-sm); padding: 0 var(--sp-2); border-radius: var(--radius); font-size: var(--fs-sm); list-style: none; cursor: pointer; } .usermenu__button::-webkit-details-marker { display: none; } .usermenu__button:hover { background: var(--subtle); } .usermenu__avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; } .usermenu__name { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usermenu__panel { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 40; min-width: 220px; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .usermenu__meta { margin: 0 0 var(--sp-2); padding: 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); word-break: break-all; } .usermenu__item { display: flex; align-items: center; width: 100%; min-height: var(--control-h); padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; text-decoration: none; cursor: pointer; } .usermenu__item:hover { background: var(--subtle); color: var(--text); } /* Appearance picker: System / Light / Dark, only rendered useful with JS (the choice lives in localStorage), so the layout ships it [hidden] and panel.js reveals it. */ .usermenu__theme { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-2) 0; border-top: 1px solid var(--border); } .usermenu__theme p { margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-xs); } .themepick { display: flex; gap: 2px; padding: 2px; background: var(--subtle); border-radius: var(--radius); } .themepick button { flex: 1; min-height: var(--control-h-sm); padding: 0 var(--sp-2); border: 0; border-radius: calc(var(--radius) - 2px); background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; } .themepick button:hover { color: var(--text); } .themepick button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .shell { display: flex; flex: 1; align-items: flex-start; min-height: 0; } .sidebar { width: var(--sidebar-w); flex: none; align-self: stretch; padding: var(--sp-3) var(--sp-2); background: var(--surface); border-right: 1px solid var(--border); } .nav__group + .nav__group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); } .nav__title { margin: 0 0 var(--sp-1); padding: 0 var(--sp-2); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .nav__list { list-style: none; margin: 0; padding: 0; } .nav__link { display: flex; align-items: center; min-height: var(--control-h); padding: 0 var(--sp-2); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); text-decoration: none; } .nav__link:hover { background: var(--subtle); color: var(--text); } .nav__link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-overlay { display: none; } .col { display: flex; flex-direction: column; flex: 1; min-width: 0; } .main { flex: 1; padding: var(--sp-5) var(--sp-4); outline: none; } .main__inner { max-width: var(--maxw); margin: 0 auto; } .main--wide .main__inner { max-width: var(--maxw-wide); } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); } .footer a { color: inherit; } /* Drawer below 960px; static sidebar at or above it. */ @media (max-width: 959px) { .sidebar { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; z-index: 50; width: min(280px, 82vw); padding: var(--sp-3); overflow-y: auto; border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(-101%); transition: transform .18s ease; } .nav-open .sidebar { transform: none; } .nav-open .nav-overlay { display: block; position: fixed; inset: var(--topbar-h) 0 0; z-index: 45; background: rgba(9, 12, 16, .45); } /* Without JavaScript the drawer can't open, so show the nav inline instead. */ .no-js .sidebar { position: static; width: auto; transform: none; box-shadow: none; border-right: 0; border-bottom: 1px solid var(--border); } .no-js .shell { flex-direction: column; align-items: stretch; } .no-js [data-nav-toggle] { display: none; } } @media (min-width: 960px) { .topbar { padding: 0 var(--sp-4); } [data-nav-toggle] { display: none; } .sidebar { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; } } /* Tighter controls once we're likely on a pointer device. */ @media (min-width: 720px) { :root { --control-h: 34px; --control-h-sm: 28px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* 6 — Impersonation banner =============================================== */ .impersonation-banner { position: sticky; top: var(--topbar-h); z-index: 29; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--warning); color: var(--on-warning); font-size: var(--fs-sm); font-weight: 600; } .impersonation-banner a, .impersonation-banner strong { color: inherit; } .impersonation-banner form { margin: 0 0 0 auto; } .impersonation-banner .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: var(--on-warning); } .impersonation-banner .btn:hover { background: rgba(255, 255, 255, .28); } /* 7 — Page header and breadcrumbs ======================================== */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-xs); } .crumbs li { display: flex; align-items: center; gap: var(--sp-1); } .crumbs li + li::before { content: "/"; color: var(--border); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--text); text-decoration: underline; } .page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .page-header__text { min-width: 0; } .page-header__subtitle { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); } .page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } /* 8 — Cards and panels =================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .card__title { font-size: var(--fs-base); font-weight: 600; } .card__body { padding: var(--sp-4); } .card__body--flush { padding: 0; } .card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--subtle); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); } /* Stat tiles: a row of headline numbers (partials/stat.php). */ .stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .stat { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .stat p { margin: 0; } .stat__value { font-size: var(--fs-title); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat__value--none { color: var(--muted); font-weight: 500; } .stat__label { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; } .stat__hint { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); } /* 9 — Tables ============================================================= */ /* .table-wrap scrolls sideways on narrow screens. Above that the table is in the page flow, so the sticky header can pin under the top bar. */ .table-wrap { max-width: 100%; } @media (max-width: 899px) { .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } .table-wrap--scroll { overflow-x: auto; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); } .table th, .table td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .table thead th { position: sticky; top: var(--topbar-h); z-index: 1; background: var(--surface); color: var(--muted); font-weight: 600; white-space: nowrap; } /* A sideways-scrolling wrap is its header's scroll root, so the sticky offset pins the header --topbar-h INTO the table, over the first rows. No sticking inside a wrap that scrolls — which on narrow screens is all of them. */ .table-wrap--scroll .table thead th { position: static; } @media (max-width: 899px) { .table-wrap .table thead th { position: static; } } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--subtle); } .table--zebra tbody tr:nth-child(even) td { background: var(--subtle); } .table--zebra tbody tr:nth-child(even):hover td { background: var(--accent-soft); } .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; } .table td.shrink, .table th.shrink { width: 1%; white-space: nowrap; } /* A monospace value (JSON, a key, a reference) has no natural break points, so it is allowed to break anywhere rather than push the table out of its card — the Live Data settings list is the case that showed it. */ .table td.mono { overflow-wrap: anywhere; word-break: break-word; } .table a { color: var(--text); } .table a:hover { color: var(--accent); } .row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; } /* An expander directly under a table row (rate cards under outlets): the owning row hands its border down so the pair reads as one, and opening reveals a padded box inside the table. */ .table tr.row-owner td { border-bottom: 0; } .table tr.row-detail td { padding-top: 0; } .table tbody tr.row-detail:hover td { background: transparent; } .table tr.row-detail summary { color: var(--muted); font-size: var(--fs-sm); } .table tr.row-detail summary:hover { color: var(--text); } .row-detail__box { margin: var(--sp-2) 0 var(--sp-2); padding: var(--sp-4); background: var(--subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); } /* A truncated value with a Show/Hide button that reveals the whole thing (the QR URLs on the tables page). Native
, no JavaScript. */ .qr-reveal summary { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; } .qr-reveal summary::-webkit-details-marker { display: none; } .qr-reveal__hide { display: none; } .qr-reveal[open] .qr-reveal__show { display: none; } .qr-reveal[open] .qr-reveal__hide { display: inline; } /* user-select: all — one click grabs the whole URL for copying. */ .qr-reveal__full { margin-top: var(--sp-1); word-break: break-all; user-select: all; } /* 10 — Forms ============================================================= */ .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } .field__label, .field > label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; } .field__hint, .field__help { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-xs); } .field__error { margin: var(--sp-1) 0 0; color: var(--danger); font-size: var(--fs-xs); font-weight: 600; } .field__required { color: var(--danger); font-weight: 400; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea, .input { min-width: 0; max-width: 100%; min-height: var(--control-h); padding: var(--sp-1) var(--sp-2); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base); } textarea { min-height: 96px; padding: var(--sp-2); resize: vertical; } /* Native select chrome ignores the control metrics on some platforms (macOS most visibly), leaving selects shorter than the inputs beside them — so we draw the control ourselves, chevron included. Multi-row selects keep the native look: they are lists, not drop-downs. */ select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: calc(var(--sp-4) + var(--sp-2)); background-image: var(--chevron); background-repeat: no-repeat; background-position: right var(--sp-2) center; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; } input:disabled, select:disabled, textarea:disabled { background: var(--subtle); color: var(--muted); cursor: not-allowed; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); } /* Stacked form fields fill their column; a control dropped in a tool bar or a card header keeps its natural width. */ .field input, .field select, .field textarea, .input--block { display: block; width: 100%; } input[type="checkbox"], input[type="radio"], .field input[type="checkbox"], .field input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; } .check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--control-h); padding: var(--sp-1) 0; font-size: var(--fs-sm); } .check input { margin-top: 2px; } .check__hint { display: block; color: var(--muted); font-size: var(--fs-xs); } /* A checkbox row inside a .field: the ".field > label" heading style above must not flatten it back into a block with the box on a line of its own. */ .field > label.check { display: flex; margin-bottom: 0; font-size: var(--fs-sm); font-weight: 400; } /* Many checkboxes at once (the rule builder's pickers): tidy columns instead of one long ladder. */ .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--sp-4); } .checks .check { min-height: 0; } /* Inline group: fields side by side, stacking when there is no room. */ .field-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .field-group > .field { flex: 1 1 200px; } fieldset { margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); } legend { padding: 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); } .form-actions--plain { margin-top: var(--sp-4); padding-top: 0; border-top: 0; } /* Filter bars (the reports period picker): each row of controls keeps an even gap, and a submit beside the fields sits on the controls' baseline rather than floating up among the labels. */ .filters { display: grid; gap: var(--sp-4); } .filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); } .filters__row .field { margin-bottom: 0; } .filters__row .field input, .filters__row .field select { width: auto; } /* 11 — Buttons =========================================================== Two sizes, two roles — mixing them beside each other reads as a bug: - .btn the default. Anything beside form controls (whose height it matches), page-header actions, and content-action clusters. - .btn--sm de-emphasised corners only: inside table rows and card headers. Never next to an input or select. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-h); padding: 0 var(--sp-3); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:hover { background: var(--subtle); color: var(--text); } /* .btn--secondary is the default look; the class exists for clarity at call sites. */ .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } .btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); filter: brightness(.92); } .btn--ghost { background: none; border-color: transparent; color: var(--muted); font-weight: 500; } .btn--ghost:hover { background: var(--subtle); color: var(--text); } .btn--sm { min-height: var(--control-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-xs); } .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .btn-group .btn:only-child { border-radius: var(--radius); } .btn-group .btn:focus-visible, .btn-group .btn.is-active { position: relative; z-index: 1; } .btn-group .btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* 12 — Badges ============================================================ */ /* Coloured text, not pills: a status sits inline with the text around it and lines up in tables and key/value lists instead of floating in a capsule. */ .badge { color: var(--badge-fg, var(--muted)); font-weight: 600; white-space: nowrap; } .badge--neutral, .badge--deactivated, .badge--queued, .badge--draft { --badge-fg: var(--muted); } .badge--success, .badge--active, .badge--live, .badge--done { --badge-fg: var(--success); } .badge--info, .badge--provisioning, .badge--running { --badge-fg: var(--info); } .badge--warning, .badge--pending, .badge--suspended { --badge-fg: var(--warning); } .badge--danger, .badge--failed { --badge-fg: var(--danger); } .badge--accent { --badge-fg: var(--accent); } /* 12b — Line chart (admin/partials/line-chart.php) ======================= */ .chart { margin: 0; } .chart svg { display: block; width: 100%; height: auto; } .chart__grid { stroke: var(--border); stroke-width: 1; } .chart__label { fill: var(--muted); font-size: 11px; } .chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart__dot { stroke: var(--surface); stroke-width: 1; } .chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); } .chart__key { font-size: var(--fs-xs); font-weight: 600; } /* 13 — Flash messages ==================================================== */ .flash { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--flash-fg, var(--border)); border-left-width: 3px; border-radius: var(--radius); background: var(--flash-bg, var(--subtle)); color: var(--text); font-size: var(--fs-sm); transition: opacity .2s ease; } .flash--success { --flash-bg: var(--success-soft); --flash-fg: var(--success); } .flash--error { --flash-bg: var(--danger-soft); --flash-fg: var(--danger); } .flash--warning { --flash-bg: var(--warning-soft); --flash-fg: var(--warning); } .flash--info { --flash-bg: var(--info-soft); --flash-fg: var(--info); } .flash__body { flex: 1; min-width: 0; } .flash__body ul { margin: 0; padding-left: var(--sp-4); } .flash__title { font-weight: 600; } .flash__close { flex: none; width: var(--control-h-sm); height: var(--control-h-sm); margin: -2px calc(var(--sp-1) * -1) 0 0; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-lg); line-height: 1; cursor: pointer; } .flash__close:hover { background: rgba(127, 127, 127, .15); color: var(--text); } .flash.is-leaving { opacity: 0; } /* 14 — Empty state, key/value lists, pagination, tabs ==================== */ .empty { padding: var(--sp-6) var(--sp-4); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); text-align: center; } .empty__title { margin-bottom: var(--sp-1); color: var(--text); font-weight: 600; } .empty__actions { margin-top: var(--sp-4); display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; } .kv { display: grid; grid-template-columns: minmax(120px, var(--kv-label, 200px)) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); } .kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 519px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { margin-top: var(--sp-3); } .kv dt:first-child { margin-top: 0; } } .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); } .pagination__info { color: var(--muted); font-size: var(--fs-sm); } .pagination__links { display: flex; gap: var(--sp-2); } .tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); overflow-x: auto; } .tabs a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--sp-3); border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .tabs a:hover { color: var(--text); } .tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* 15 — Auth layout ======================================================= */ .auth { display: flex; flex-direction: column; flex: 1; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); } .auth__card { width: 100%; max-width: 380px; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .auth__head { margin-bottom: var(--sp-4); } .auth__title { font-size: var(--fs-lg); } .auth__subtitle { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); } .auth__footer { color: var(--muted); font-size: var(--fs-xs); text-align: center; } .auth__footer a { color: inherit; } /* The sign-in page wears the mark large; the panel's top bar keeps it at 22px. */ .auth__brand { gap: var(--sp-3); font-size: 2rem; letter-spacing: -0.01em; } .auth__brand .brand__mark { width: 72px; height: 72px; border-radius: 16px; } .auth__brand .brand__name { max-width: none; } /* The header's alerts indicator (PRD §4.5): a manager in the back office sees the same pings the floor is getting. Hidden until the poll finds one. */ .panel-alerts { gap: 8px; align-items: center; } .panel-alerts [data-panel-alerts-text] { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }