/* SMS1919 design system — Phase 1 shell + components.
Plain CSS + custom properties, evergreen browsers only, no build step.
NEW class names only — does not restyle existing default.css classes. */
/* Self-hosted variable brand font (latin subset incl. æ ø å) — no third-party CDN (GDPR). */
@font-face {
font-family: "Geist";
src: url("fonts/geist.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* Brand: set per-request as inline style on .app-shell (from css_menu_background).
This is the fallback / default identity (SMS1919 orange #F29721). */
--brand: #F29721;
/* Derived accents (work for any brand hue; guard darkens too-light brands). */
--brand-text: color-mix(in srgb, var(--brand) 78%, black);
--brand-tint: color-mix(in srgb, var(--brand) 10%, white);
--brand-strong: color-mix(in srgb, var(--brand) 88%, black);
/* Text/icon color that sits ON the brand color. White per design preference. */
--on-brand: #ffffff;
/* Neutral surfaces / text */
--bg: #f7f8fa;
--surface: #ffffff;
--border: #e6e8ec;
--hairline: #f0f1f3;
--text: #1a1d24;
--text-soft: #4a4f5a;
--text-mute: #9095a0;
/* Notices */
--warn-bg: #fff7ed; --warn-border: #fed7aa; --warn-text: #9a3412; --warn-accent: #ea7317;
/* State / surface tokens (light defaults; dark values live in [data-theme="dark"]) */
--danger-bg: #fdeceb; --danger-border: #f5c6c2; --danger-text: #b3261e; --danger-accent: #c0271f;
--ok-bg: #e7f5ed; --ok-border: #bfe3cd; --ok-text: #0d7a4f;
--field-border: #d6d9df;
--row-alt: #fafbfc; --row-hover: #f4f6f8;
--overlay: rgba(15,23,42,.45);
/* Shape / type */
--radius: 10px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(16,24,40,.06);
--font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--sidebar-w: 220px;
}
/* ---- Dark theme: redefine surface/text/state tokens. --brand is untouched so it still
resolves per-reseller; only its derived tints re-aim at the dark surface. ---- */
[data-theme="dark"] {
--bg: #0e1116;
--surface: #171b22;
--border: #2a303a;
--hairline: #20262e;
--text: #d4d9e1;
--text-soft: #aab2bf;
--text-mute: #79818f;
--warn-bg: #2a1d10; --warn-border: #5b3d1c; --warn-text: #f1b97f; --warn-accent: #f59e42;
--danger-bg: #2a1416; --danger-border: #5b2622; --danger-text: #f1a8a3; --danger-accent: #d9534f;
--ok-bg: #15281d; --ok-border: #2c5b3f; --ok-text: #4ec18b;
--field-border: #2f3742;
--row-alt: #1b2027; --row-hover: #20262e;
--overlay: rgba(0,0,0,.6);
--shadow: 0 1px 3px rgba(0,0,0,.45);
--brand-text: color-mix(in srgb, var(--brand) 70%, white);
--brand-tint: color-mix(in srgb, var(--brand) 22%, var(--surface));
--brand-strong: color-mix(in srgb, var(--brand) 92%, white);
}
/* ---- App shell ---- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; font-family: var(--font); color: var(--text); background: var(--bg); }
/* Re-derive the brand tints here so a per-reseller --brand (set inline on .app-shell) flows into them
too. The :root copies resolve var(--brand) at :root, baking in the default brand; re-declaring on
.app-shell recomputes them against the overridden --brand. Ratios mirror :root / [data-theme=dark]. */
.app-shell { --brand-text: color-mix(in srgb, var(--brand) 78%, black); --brand-tint: color-mix(in srgb, var(--brand) 10%, white); --brand-strong: color-mix(in srgb, var(--brand) 88%, black); }
[data-theme="dark"] .app-shell { --brand-text: color-mix(in srgb, var(--brand) 70%, white); --brand-tint: color-mix(in srgb, var(--brand) 22%, var(--surface)); --brand-strong: color-mix(in srgb, var(--brand) 92%, white); }
.app-sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.app-main { padding: 28px 32px; min-width: 0; background: url("/images/watermark.svg") right -20px bottom -10px / 340px no-repeat fixed; }
/* ---- Brand / logo band ---- */
.brand-band { background: var(--brand); padding: 18px 16px; text-align: center; }
.brand-band img { max-width: 100%; height: auto; display: block; margin: 0 auto; cursor: pointer; }
.brand-band .brand-wordmark { color: var(--on-brand); font-weight: 700; font-size: 18px; letter-spacing: .4px; cursor: pointer; }
/* ---- Nav ---- */
.app-nav { padding: 12px 10px; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-mute); margin: 12px 4px 6px; }
.nav-section:first-child { margin-top: 2px; }
.nav-item { display: block; padding: 8px 11px; margin: 2px 0; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-soft); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--hairline); color: var(--text); }
.nav-item.is-active { background: var(--brand-tint); color: var(--brand-text); font-weight: 600; border-left-color: var(--brand); }
/* Collapsible groups: header toggles, .nav-group-items folds via .is-open */
.nav-item:has(+ .nav-group-items.is-open) { font-weight: 600; color: var(--text); }
.nav-group-items { display: none; margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.nav-group-items.is-open { display: block; }
/* Sidebar footer (logout pinned to bottom) */
.app-sidebar-footer { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); }
.logout-link { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-soft); text-decoration: none; cursor: pointer; }
.logout-link:hover { background: var(--hairline); color: var(--text); text-decoration: none; }
.logout-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .65; }
/* ---- Page header (emitted by Header()) ---- */
/* pointer-events:none lets clicks fall through the full-width header block to the floated action
buttons it overlaps (e.g. Slet/Tøm gruppen). The header has no interactive content of its own. */
.page-header { margin-bottom: 24px; padding-bottom: 16px; position: relative; pointer-events: none; }
.page-header::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--brand); }
.page-header h1 { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin: 0; }
.page-header .subhead { font-size: 13px; color: var(--text-mute); margin-top: 7px; }
.page-header .subhead.is-error { color: var(--danger-accent); }
.page-header .subhead.is-ok { color: var(--brand-text); }
.page-header .subhead.is-eval { color: var(--ok-text); }
/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
/* ---- Modal (banner-headed popup): brand-colored title bar, body, hairline, footer actions ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 105; display: none; align-items: center; justify-content: center; background: var(--overlay); backdrop-filter: blur(3px); }
.modal-overlay.is-open { display: flex; }
.modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(16,24,40,.35); width: 90%; max-width: 360px; overflow: hidden; animation: modalIn .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }
.modal-head { background: var(--brand); color: var(--on-brand); padding: 14px 20px; font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.modal-body { padding: 22px 20px; color: var(--text-soft); font-size: 13px; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
/* Brand spinner — CSS replacement for ajax-loader.gif (16px to match exactly, no content shift; brand orange, theme-aware). */
.spinner { display: inline-block; width: 16px; height: 16px; vertical-align: middle; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--brand) 22%, transparent); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Phosphor icons: near-black (text colour) at 80% opacity, lifting to 100% on hover — a subtle
strengthen, not a colour shift. inline-block stops the hover-underline striking the glyph.
Icons with an explicit inline colour (danger/ok) keep that colour; only the opacity changes. */
.ph { display: inline-block; color: var(--text); opacity: .6; transition: opacity .25s ease; }
a:hover .ph, .ph:hover { opacity: .95; }
/* ---- Buttons ---- */
.btn { display: inline-block; font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn-primary { background: var(--brand-strong); color: var(--on-brand); }
/* Spinner inside a primary button sits on the orange fill, so recolor its ring to the button's
text colour (white); the default brand-orange ring would be invisible. (in-button login loader) */
.btn-primary .spinner { border-color: color-mix(in srgb, var(--on-brand) 35%, transparent); border-top-color: var(--on-brand); }
.btn-ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border); }
/* .btn used on — beat default.css A:link color + hover underline */
a.btn:link, a.btn:visited, a.btn:hover { text-decoration: none; }
a.btn-ghost:link, a.btn-ghost:visited { color: var(--text-soft); }
a.btn-primary:link, a.btn-primary:visited { color: var(--on-brand); }
/* ---- Forms ---- */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 11px; font-weight: 600; color: var(--text-soft); margin-bottom: 5px; }
.field input[type=text], .field input[type=password], .field input[type=email], .field select, .field textarea {
width: 100%; box-sizing: border-box; border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; font-size: 13px; color: var(--text-soft); background: var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
/* override legacy default.css input{height:20px;width:180px} */
.field input[type=text], .field input[type=password], .field input[type=email], .field select { height: auto; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; margin: 0 7px 0 0; vertical-align: middle; }
/* larger inputs on the login card */
.auth-card .field input { padding: 11px 13px; font-size: 15px; }
/* Inline availability/validation status pill (keyword / username / password / graph path).
Replaces the legacy flat_* validation icon images. State set from JS:
className 'kw-status kw-status-' + innerHTML ('✓ Ledig' / '✗ Optaget'). */
.kw-status:empty { display: none; }
.kw-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; white-space: nowrap; }
.kw-status-checking { background: var(--hairline); color: var(--text-mute); font-weight: 400; }
.kw-status-ok { background: var(--brand-tint); color: var(--brand-text); }
.kw-status-taken { background: var(--danger-bg); color: var(--danger-text); }
/* Quirks-mode fix: these legacy pages have no doctype, so the UA stylesheet applies
table { color: -internal-quirk-inherit } and tables do NOT inherit color from .app-shell —
so table text fell back to browser-black and never picked up var(--text) (broke dark mode).
Force normal inheritance. (Font is already worked around by default.css setting it on table.) */
table { color: inherit; }
/* ---- Data table ---- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); text-align: left; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--hairline); }
.data-table td { font-size: 13px; color: var(--text-soft); padding: 11px 8px; border-bottom: 1px solid var(--hairline); }
.data-table tr:hover td { background: var(--row-alt); }
/* ---- Tabs (emitted by TabbedHeader()) ---- */
.tabbar { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 4px 0 14px; }
.tab { font-size: 13px; color: var(--text-mute); padding-bottom: 9px; border-bottom: 2px solid transparent; cursor: pointer; }
.tab.is-active { color: var(--brand-text); font-weight: 600; border-bottom-color: var(--brand); cursor: default; }
/* Column-header label (emitted by SingleTabbedHeader) */
.th-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-mute); }
/* Legacy data-table chrome, restyled (used across list pages) */
td.Header { background: transparent; border-bottom: 1px solid var(--border); padding: 9px 8px; height: auto; vertical-align: middle; white-space: nowrap; }
td.Footer { background: transparent; border-top: 1px solid var(--border); padding: 8px; font-weight: normal; }
.FirstRow, .SecondRow { background: var(--surface); height: auto; }
.SecondRow { background: var(--row-alt); }
/* Dark mode: drop the zebra stripe so rows share one surface and the hairline divides them evenly.
The stripe (row-alt) sat between surface and the lighter hairline, so the hairline blended into the
lighter row and made it look taller. Light mode keeps its near-invisible stripe. */
[data-theme="dark"] .SecondRow { background: var(--surface); }
.FirstRow > td, .SecondRow > td { border-bottom: 1px solid var(--hairline); padding: 9px 8px; }
/* Row hover highlight — applies in lists and forms alike (consistent). The old form-only reset was
removed: it disabled hover on data lists that happen to be wrapped in a