/* goappfw admin UI — theme tokens + responsive shell. * * THEMES (2-in-1, runtime-toggle via theme.js): * - Arctic (default) — clean cold light, sky-blue accent, soft shadows. * - Carbon — brutalist pure B&W, monospace, sharp corners. * They are deliberately opposite poles (soft light vs stark brutalist) so an * operator gets two genuinely different moods, not a hue-shift. Adding a third * is a new [data-theme="…"] block + one entry in theme.js's map. * * The theme is applied as data-theme on by theme.js (from localStorage, * defaulting to Arctic). Every color/spacing/radius/font lives behind a token, * so the whole UI reskins by swapping token blocks. NOTE: the token NAMES are a * contract — auth.js and confirm.js inject modal styles that reference them * (--sans --mono --bg --surface --surface-2 --border --radius --radius-sm * --text --text-dim --text-mute --accent --accent-strong --warn), so names * stay; new tokens get added alongside. * * RESPONSIVE: breakpoint at 880px (see @media at the bottom). >=880 = fixed * sidebar (desktop). <880 = off-canvas drawer behind a top bar + hamburger. * Tables scroll horizontally (never hide columns); touch targets >=44px. */ /* ============ THEME: ARCTIC (default — clean cold light) ============ */ :root, [data-theme="arctic"] { color-scheme: light; --bg: #eef3f8; --surface: #ffffff; --surface-2: #e2eaf2; --border: #d3deea; --border-soft: #e8eef4; --border-strong: #c3d2e2; --text: #1e2a3a; --text-dim: #5a6b80; --text-mute: #8a9aab; --accent: #0ea5e9; --accent-strong: #0284c7; --accent-soft: rgba(14, 165, 233, .10); /* status: base steps for text/marks; -soft for tinted chip backgrounds. Never color alone — always a label (and a dot where space allows). */ --success: #059669; --success-vivid: #10b981; --success-soft: rgba(5, 150, 105, .12); --warn: #d97706; --warn-vivid: #f59e0b; --warn-soft: rgba(217, 119, 6, .12); --danger: #dc2626; --danger-vivid: #ef4444; --danger-soft: rgba(220, 38, 38, .10); --overlay: rgba(30, 42, 58, .45); --radius: 8px; --radius-sm: 5px; --gap: 1rem; --gap-sm: .5rem; --shadow: 0 1px 3px rgba(30, 42, 58, .06); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; } /* ============ THEME: CARBON (brutalist B&W) ============ */ [data-theme="carbon"] { color-scheme: light; --bg: #ffffff; --surface: #f4f4f4; --surface-2: #e8e8e8; --border: #000000; --border-soft: #bfbfbf; --border-strong: #000000; --text: #000000; --text-dim: #525252; --text-mute: #737373; --accent: #000000; --accent-strong: #000000; --accent-soft: #e8e8e8; /* brutalist: every status collapses to ink — the label/dot carries meaning */ --success: #000000; --success-vivid: #000000; --success-soft: #e8e8e8; --warn: #525252; --warn-vivid: #525252; --warn-soft: #e8e8e8; --danger: #000000; --danger-vivid: #000000; --danger-soft: #e8e8e8; --overlay: rgba(0, 0, 0, .5); --radius: 0px; --radius-sm: 0px; --gap: 1rem; --gap-sm: .5rem; --shadow: none; /* brutalist: borders carry the weight */ --mono: ui-monospace, SFMono-Regular, "Courier New", monospace; --sans: ui-monospace, SFMono-Regular, "Courier New", monospace; /* mono throughout */ } /* Carbon per-element overrides: heavy borders, uppercase labels, inverted accents — ported from the pre-redesign Carbon onto the current components. (.card h3.title keeps its case: it's an entity NAME, not a section label.) */ [data-theme="carbon"] .brand, [data-theme="carbon"] .nav .nav-section, [data-theme="carbon"] .tile .label, [data-theme="carbon"] .content h1, [data-theme="carbon"] .card h3, [data-theme="carbon"] .tbl thead th, [data-theme="carbon"] .badge { text-transform: uppercase; letter-spacing: .08em; } [data-theme="carbon"] .card h3.title { text-transform: none; letter-spacing: 0; } [data-theme="carbon"] .nav li a.active { color: #fff; background: #000; } [data-theme="carbon"] .tbl .pill.pk { color: #fff; background: #000; } [data-theme="carbon"] code { background: #000; color: #fff; } [data-theme="carbon"] button, [data-theme="carbon"] .btn { border-width: 2px; } [data-theme="carbon"] .btn.primary, [data-theme="carbon"] button.primary { background: #000; border-color: #000; color: #fff; } [data-theme="carbon"] .brand .mark { border-radius: 0; } /* the login/purge modals inject their own styles (auth.js/confirm.js) with a 12px radius; this higher-specificity rule squares them under Carbon */ [data-theme="carbon"] .afw-card { border-radius: 0; } /* ============ base ============ */ * { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; font-family: var(--sans); font-size: .9375rem; background: var(--bg); color: var(--text); line-height: 1.55; min-height: 100vh; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-soft); } /* ============ shell: sidebar + content ============ */ .shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } /* top bar — hidden on desktop, shown < 880px (see media query) */ .topbar { display: none; align-items: center; gap: .5rem; height: 52px; padding: 0 .65rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .topbar .burger { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .topbar .burger:hover { color: var(--text); } .topbar .burger:active { background: var(--accent-soft); } .topbar .tb-title { font-weight: 600; font-size: .9rem; letter-spacing: -.01em; } .topbar .spacer { flex: 1; } /* sidebar */ .nav { background: var(--surface); border-right: 1px solid var(--border); padding: 1.15rem 0 1rem; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; } .brand { display: flex; align-items: center; gap: .55rem; padding: 0 1.1rem 1.1rem; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff; flex-shrink: 0; } .brand .mark svg { width: 15px; height: 15px; } .brand .ver { font-size: .62rem; color: var(--text-mute); font-weight: 600; font-family: var(--mono); background: var(--surface-2); padding: .12rem .42rem; border-radius: 999px; border: 1px solid var(--border); margin-left: auto; } .nav ul { list-style: none; margin: 0; padding: 0 0 .4rem; } .nav li a { display: flex; align-items: center; gap: .6rem; min-height: 44px; /* touch target */ margin: 1px .55rem; padding: 0 .65rem; color: var(--text-dim); text-decoration: none; font-size: .855rem; border-radius: var(--radius-sm); transition: background .15s ease, color .15s ease; } .nav li a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; } .nav li a:hover { background: var(--surface-2); color: var(--text); } .nav li a:active { background: var(--accent-soft); color: var(--accent-strong); } .nav li a.active { color: var(--accent-strong); background: var(--accent-soft); font-weight: 600; } .nav li a.active svg { opacity: 1; } .nav .nav-section { padding: 1.05rem 1.25rem .3rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-mute); font-weight: 600; } .nav .foot { padding: .85rem 1.1rem 0; margin-top: auto; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: .6rem; } /* "Act as tenant" shell-level context — a full-width block above the theme toggle. Persisted across htmx swaps (the shell isn't swapped) and stamped as X-Tenant-ID on every request so the whole UI follows the operator's choice. Hidden (hidden attr) until tenant-context.js confirms a catalog is attached. */ .tenant-ctx-wrap { width: 100%; display: flex; flex-direction: column; gap: .3rem; } .tenant-ctx-wrap[hidden] { display: none; } .tenant-ctx-wrap .ctx-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 600; } .tenant-context { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .4rem .5rem; font-family: var(--mono); font-size: .78rem; cursor: pointer; min-height: 38px; } .tenant-context:focus-visible { outline-offset: 0; } /* Shown INSTEAD of the