/* ══════════════════════════════════════════════════════════════════════════ admin-theme.css — the shared design system for the Admin surfaces. Scope: ONLY the admin page and its embedded tabs (admin.html + the organizations.html / audit.html / access-admin.html iframes). The rest of the app keeps theme.css (Arial / blue). Ported verbatim from the "Access & Users" design handoff so every admin tab shares one palette, one font and one set of card / chip / tab / button primitives. Theming: light values live on :root; theme.js stamps data-theme="dark" on to flip. oklch()/color-mix() are used exactly as the mock specified. ══════════════════════════════════════════════════════════════════════════ */ :root { --bg:#f4f4f2; --surface:#ffffff; --surface-2:#faf9f7; --line:#e6e4df; --line-2:#efedea; --fg:#1a1a17; --fg-2:#565650; --fg-3:#8a897f; --accent:oklch(0.55 0.13 250); --accent-fg:#ffffff; --accent-soft:oklch(0.95 0.03 250); --ok:oklch(0.6 0.11 150); --ok-soft:oklch(0.95 0.04 150); --warn:oklch(0.62 0.13 55); --warn-soft:oklch(0.95 0.04 70); --danger:oklch(0.58 0.16 25); --danger-soft:oklch(0.95 0.03 20); --c1:oklch(0.62 0.09 20); --c1s:oklch(0.95 0.03 20); --c2:oklch(0.62 0.09 290); --c2s:oklch(0.95 0.03 290); --c3:oklch(0.62 0.09 250); --c3s:oklch(0.95 0.03 250); --c4:oklch(0.6 0.08 160); --c4s:oklch(0.95 0.03 160); --shadow:0 1px 2px rgba(20,20,15,.04),0 8px 24px -12px rgba(20,20,15,.12); --adm-font:Arial,Helvetica,sans-serif; --adm-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --adm-radius:0px; /* cards are square-cornered */ --adm-radius-ctrl:8px; /* buttons / inputs are softly rounded */ color-scheme: light; /* native scrollbars / form controls follow the theme */ /* Legacy aliases — the shared ui.js widgets (uiSelect dropdowns, uiColor menus, toasts) reference the old Apple-neutral token names with white fallbacks. Map them onto the design tokens here so those widgets theme correctly (incl. dark) on every admin page, not just the ones that kept their own :root remap. */ --panel:var(--surface); --panel2:var(--surface-2); --field:var(--surface); --field-line:var(--line); --ink:var(--fg); --ink2:var(--fg-2); --muted:var(--fg-3); --accent-ink:var(--accent-fg); --red:var(--danger); } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { --bg:#111112; --surface:#1a1a1c; --surface-2:#202023; --line:#2e2e32; --line-2:#282829; --fg:#ecece8; --fg-2:#a9a9a3; --fg-3:#77776f; --accent:oklch(0.68 0.13 250); --accent-fg:#0c0c0d; --accent-soft:oklch(0.3 0.06 250); --ok:oklch(0.72 0.11 150); --ok-soft:oklch(0.32 0.06 150); --warn:oklch(0.75 0.12 65); --warn-soft:oklch(0.33 0.05 70); --danger:oklch(0.7 0.15 25); --danger-soft:oklch(0.3 0.06 20); --c1:oklch(0.72 0.09 20); --c1s:oklch(0.3 0.05 20); --c2:oklch(0.72 0.09 290); --c2s:oklch(0.3 0.05 290); --c3:oklch(0.72 0.09 250); --c3s:oklch(0.3 0.05 250); --c4:oklch(0.72 0.08 160); --c4s:oklch(0.3 0.05 160); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6); } /* ── primitives (opt-in; namespaced `adm-` so they never clash with a page's own classes). The complex inline tabs re-skin through the token remap in their own :root; these are for the pages that adopt the design directly. ── */ .adm-page { background:var(--bg); color:var(--fg); font-family:var(--adm-font); -webkit-font-smoothing:antialiased; } .adm-h1 { font:700 32px/1.1 var(--adm-font); letter-spacing:-.02em; color:var(--fg); margin:0 0 8px; } .adm-h2 { font:700 18px/1.2 var(--adm-font); color:var(--fg); margin:0 0 6px; } .adm-sub { font:400 15px/1.5 var(--adm-font); color:var(--fg-2); margin:0; } .adm-meta { font:400 13px/1.5 var(--adm-font); color:var(--fg-3); margin:0; } .adm-label { font:600 10.5px/1 var(--adm-font); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); } /* underline tab bar */ .adm-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); } .adm-tab { appearance:none; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; padding:12px 16px; cursor:pointer; font:500 15px/1 var(--adm-font); color:var(--fg-3); } .adm-tab:hover { color:var(--fg-2); } .adm-tab.active { color:var(--fg); font-weight:600; border-bottom-color:var(--accent); } /* card */ .adm-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--adm-radius); box-shadow:var(--shadow); padding:18px 20px; } /* buttons */ .adm-btn { appearance:none; padding:10px 18px; border-radius:var(--adm-radius-ctrl); border:1px solid var(--line); background:var(--surface); color:var(--fg-2); font:600 14px/1 var(--adm-font); cursor:pointer; box-shadow:var(--shadow); } .adm-btn:hover { color:var(--fg); } .adm-btn.primary { background:var(--accent); color:var(--accent-fg); border-color:transparent; } .adm-btn.primary:hover { color:var(--accent-fg); filter:brightness(1.05); } .adm-btn.ghost { box-shadow:none; padding:8px 14px; font-weight:500; font-size:13px; } .adm-btn.danger { background:transparent; box-shadow:none; padding:8px 14px; font-weight:500; font-size:13px; border-color:color-mix(in oklch, var(--danger) 40%, transparent); color:var(--danger); } .adm-btn.dashed { background:transparent; box-shadow:none; border-style:dashed; color:var(--fg-3); padding:7px 12px; font-weight:500; font-size:12.5px; } .adm-x { appearance:none; background:none; border:none; color:var(--fg-3); font-size:14px; cursor:pointer; padding:2px 6px; } .adm-x:hover { color:var(--danger); } /* inputs / selects / pill-style project selector */ .adm-input { padding:9px 12px; border-radius:var(--adm-radius-ctrl); border:1px solid var(--line); background:var(--surface); color:var(--fg); font:500 13.5px/1.2 var(--adm-font); } .adm-pill { display:inline-flex; align-items:center; gap:10px; padding:9px 14px; background:var(--surface); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); font:600 14px/1 var(--adm-font); color:var(--fg); } /* coloured pill chips (permit roles, groups) — colour via inline --k / --ks */ .adm-chip { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font:500 12px/1 var(--adm-font); white-space:nowrap; color:var(--k,var(--c3)); background:var(--ks,var(--c3s)); border:1px solid color-mix(in oklch, var(--k,var(--c3)) 22%, transparent); } .adm-chip.none { color:var(--fg-3); background:var(--surface-2); border:1px dashed var(--line); } /* status pill */ .adm-status { flex-shrink:0; padding:5px 12px; border-radius:999px; font:600 11.5px/1 var(--adm-font); } .adm-status.active { color:var(--ok); background:var(--ok-soft); } .adm-status.invited { color:var(--accent); background:var(--accent-soft); } .adm-status.suspended { color:var(--fg-2); background:var(--surface-2); } /* custom toggle (group capability check) */ .adm-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; } .adm-toggle .box { width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:transparent; background:var(--surface); border:1.5px solid var(--line); } .adm-toggle.on .box { color:var(--accent-fg); background:var(--accent); border-color:var(--accent); } .adm-toggle .lbl { font:500 12.5px/1 var(--adm-font); color:var(--fg-2); } /* member chip */ .adm-member { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--adm-radius-ctrl); background:var(--surface-2); border:1px solid var(--line); font:500 12.5px/1 var(--adm-font); color:var(--fg); } /* small square colour swatch for the chip-colour pickers */ .adm-swatch { -webkit-appearance:none; appearance:none; width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px; cursor:pointer; background:none; flex-shrink:0; } .adm-swatch::-webkit-color-swatch-wrapper { padding:0; } .adm-swatch::-webkit-color-swatch { border:none; border-radius:4px; } .adm-swatch::-moz-color-swatch { border:none; border-radius:4px; }