/* =====================================================================
Genora Admin — Theme 2026 (drop-in refresh layer)
---------------------------------------------------------------------
HOW TO USE: load this file AFTER base.css in components/head.tpl.html:
It only re-tokenizes colors/shape/type and refines a handful of
components. No markup, layout or UX is changed — every rule targets
the SAME variables and .admin-* classes that already exist, so it is
safe to add or remove wholesale.
Direction: bold azure accent (between blue & teal), sharp corners,
separation by surface tone instead of heavy borders, Geist grotesk,
expressive buttons, squared tags. Tuned for light AND dark equally —
borders and shadows never invert.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
/* ---------------------------------------------------------------------
1 · TOKENS — LIGHT (:root:root wins over Tailwind's injected :root)
--------------------------------------------------------------------- */
:root:root {
/* Neutrals — cool, calm, no warm beige. Surfaces do the separating. */
--admin-bg: #f1f4f8;
--admin-surface: #ffffff;
--admin-surface-subtle: #f5f7fb;
--admin-surface-muted: #e9edf4;
--admin-surface-hover: #eef2f8;
--admin-border: #e6eaf1; /* soft hairline — barely there */
--admin-border-strong: #d3dae4;
--admin-text: #0f1729;
--admin-text-secondary: #3f4a5b;
--admin-text-muted: #66707f;
/* Accent — azure between blue and teal */
--admin-accent: #0f83c9;
--admin-accent-strong: #086cb0;
--admin-accent-soft: #e7f2fb;
--admin-accent-ink: #0a5488;
/* Glass surface + gradient-edge tints + hover glow (light) */
--admin-glass: color-mix(in srgb, var(--admin-surface) 86%, transparent);
--admin-edge-hi: rgba(255, 255, 255, 0.85);
--admin-edge-lo: color-mix(in srgb, var(--admin-border) 88%, transparent);
--admin-edge-accent: color-mix(in srgb, var(--admin-accent) 22%, transparent);
--admin-edge-accent-hover: color-mix(in srgb, var(--admin-accent) 42%, transparent);
/* Glass sheen — an angled light band that sweeps interactive surfaces */
--admin-sheen: color-mix(in srgb, var(--admin-accent) 8%, transparent);
--admin-sheen-core: rgba(255, 255, 255, 0.35);
/* Shape — refined radii */
--admin-radius-sm: 5px;
--admin-radius: 7px;
--admin-radius-lg: 11px;
--admin-radius-xl: 15px;
/* Depth — subtle, always dark-based so it never inverts */
--admin-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px -1px rgba(16, 24, 40, 0.07);
--admin-ring: rgba(15, 131, 201, 0.30);
/* Inputs */
--admin-input-border: var(--admin-border-strong);
--admin-input-bg: #ffffff;
--admin-input-focus-border: var(--admin-accent);
--admin-input-focus-shadow: var(--admin-ring);
/* Tailwind ramp — recolor primary to azure */
--color-primary: 15 131 201;
--color-primary-50: 235 245 252;
--color-primary-100: 209 233 249;
--color-primary-200: 166 214 244;
--color-primary-300: 108 188 234;
--color-primary-400: 51 158 219;
--color-primary-500: 15 131 201;
--color-primary-600: 8 108 176;
--color-primary-700: 10 86 141;
--color-primary-800: 14 71 114;
--color-primary-900: 17 58 93;
--color-primary-readable: 8 108 176;
--color-primary-readable-hover: 10 86 141;
/* Tailwind theme aliases */
--ring-theme: 15 131 201;
--bg-theme: 241 244 248;
--bg-theme-card: 255 255 255;
--bg-theme-hover: 238 242 248;
--text-theme: 15 23 41;
--text-theme-secondary: 63 74 91;
--text-theme-muted: 102 112 127;
--border-theme: 230 234 241;
}
/* ---------------------------------------------------------------------
2 · TOKENS — DARK (explicit .dark class)
Specificity (0,2,1) — must outrank the light :root:root (0,2,0) above,
so the dark palette actually wins when is set.
--------------------------------------------------------------------- */
html.dark:root {
--admin-bg: #0d1117;
--admin-surface: #161c24;
--admin-surface-subtle: #1a222c;
--admin-surface-muted: #232e3a;
--admin-surface-hover: #1f2833;
--admin-border: #0b1016; /* seam — darker than the surface, never brighter */
--admin-border-strong: #080c11;
--admin-text: #e8edf3;
--admin-text-secondary: #b4bfcc;
--admin-text-muted: #8592a0;
--admin-accent: #45a6e5;
--admin-accent-strong: #1f8ad2;
--admin-accent-soft: rgba(56, 158, 220, 0.16);
--admin-accent-ink: #a9d6f5;
--admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
--admin-ring: rgba(69, 166, 229, 0.42);
--admin-input-border: #29323d;
--admin-input-bg: #12181f;
--admin-input-focus-border: var(--admin-accent);
--admin-input-focus-shadow: var(--admin-ring);
--color-primary: 56 158 220;
--color-primary-50: 16 40 58;
--color-primary-100: 18 52 78;
--color-primary-200: 22 70 105;
--color-primary-300: 26 92 140;
--color-primary-400: 33 130 190;
--color-primary-500: 56 158 220;
--color-primary-600: 108 188 234;
--color-primary-700: 150 208 244;
--color-primary-800: 190 224 249;
--color-primary-900: 219 238 252;
--color-primary-readable: 108 188 234;
--color-primary-readable-hover: 150 208 244;
--ring-theme: 69 166 229;
--bg-theme: 13 17 23;
--bg-theme-card: 22 28 36;
--bg-theme-hover: 31 40 51;
--text-theme: 232 237 243;
--text-theme-secondary: 180 191 204;
--text-theme-muted: 133 146 160;
--border-theme: 11 16 22;
}
/* System-preference dark (when no explicit .light/.dark chosen) */
@media (prefers-color-scheme: dark) {
html:not(.light):root {
--admin-bg: #0d1117;
--admin-surface: #161c24;
--admin-surface-subtle: #1a222c;
--admin-surface-muted: #232e3a;
--admin-surface-hover: #1f2833;
--admin-border: #0b1016;
--admin-border-strong: #080c11;
--admin-text: #e8edf3;
--admin-text-secondary: #b4bfcc;
--admin-text-muted: #8592a0;
--admin-accent: #45a6e5;
--admin-accent-strong: #1f8ad2;
--admin-accent-soft: rgba(56, 158, 220, 0.16);
--admin-accent-ink: #a9d6f5;
--admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
--admin-ring: rgba(69, 166, 229, 0.42);
--admin-input-border: #29323d;
--admin-input-bg: #12181f;
--color-primary: 56 158 220;
--color-primary-50: 16 40 58;
--color-primary-100: 18 52 78;
--color-primary-200: 22 70 105;
--color-primary-300: 26 92 140;
--color-primary-400: 33 130 190;
--color-primary-500: 56 158 220;
--color-primary-600: 108 188 234;
--color-primary-700: 150 208 244;
--color-primary-800: 190 224 249;
--color-primary-900: 219 238 252;
--color-primary-readable: 108 188 234;
--color-primary-readable-hover: 150 208 244;
--ring-theme: 69 166 229;
--bg-theme: 13 17 23;
--bg-theme-card: 22 28 36;
--bg-theme-hover: 31 40 51;
--text-theme: 232 237 243;
--text-theme-secondary: 180 191 204;
--text-theme-muted: 133 146 160;
--border-theme: 11 16 22;
}
}
/* ---------------------------------------------------------------------
3 · TYPOGRAPHY — Geist grotesk + tabular figures for data
--------------------------------------------------------------------- */
body[data-admin-shell="true"] {
font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
accent-color: var(--admin-accent-strong);
}
body[data-admin-shell="true"] .admin-page-title,
body[data-admin-shell="true"] .admin-panel-title,
body[data-admin-shell="true"] .admin-modal-title,
body[data-admin-shell="true"] .admin-stat-value,
body[data-admin-shell="true"] h1,
body[data-admin-shell="true"] h2,
body[data-admin-shell="true"] h3 {
letter-spacing: 0;
}
/* Tabular, aligned numerals wherever data lives */
body[data-admin-shell="true"] .admin-stat-value,
body[data-admin-shell="true"] .admin-table td,
body[data-admin-shell="true"] .admin-table th,
body[data-admin-shell="true"] .admin-badge-mono,
body[data-admin-shell="true"] .admin-realm-context-name {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
body[data-admin-shell="true"] .admin-badge-mono,
body[data-admin-shell="true"] code,
body[data-admin-shell="true"] pre,
body[data-admin-shell="true"] .font-mono {
font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* ---------------------------------------------------------------------
4 · SHAPE — square the utility radii used by cards/forms
(rounded-full is intentionally left alone: avatars, dots, toggles)
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .rounded,
body[data-admin-shell="true"] .rounded-md { border-radius: 6px; }
body[data-admin-shell="true"] .rounded-lg { border-radius: 9px; }
body[data-admin-shell="true"] .rounded-xl { border-radius: 12px; }
body[data-admin-shell="true"] .rounded-2xl { border-radius: 15px; }
body[data-admin-shell="true"] .rounded-3xl { border-radius: 20px; }
/* ---------------------------------------------------------------------
5 · BUTTONS — sharper + more confident
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .admin-button {
border-radius: 9px;
font-weight: 600;
letter-spacing: 0;
}
body[data-admin-shell="true"] .admin-button.min-h-0 { border-radius: 7px; }
body[data-admin-shell="true"] .admin-button-primary {
box-shadow:
0 1px 1.5px rgba(16, 24, 40, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body[data-admin-shell="true"] .admin-button-primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--admin-accent-strong) 91%, #000);
border-color: color-mix(in srgb, var(--admin-accent-strong) 91%, #000);
}
html.dark body[data-admin-shell="true"] .admin-button-primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--admin-accent-strong) 84%, #fff);
border-color: color-mix(in srgb, var(--admin-accent-strong) 84%, #fff);
}
body[data-admin-shell="true"] .admin-button-secondary {
box-shadow: 0 1px 1.5px rgba(16, 24, 40, 0.04);
}
/* ---------------------------------------------------------------------
6 · BADGES & CHIPS — squared modern tags (no leading dot / no pills)
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .admin-badge {
border-radius: 6px;
padding: 0.2rem 0.5rem;
font-weight: 600;
letter-spacing: 0;
}
body[data-admin-shell="true"] .admin-badge-compact { padding-inline: 0.42rem; }
body[data-admin-shell="true"] .admin-badge::before { display: none; }
body[data-admin-shell="true"] .admin-chip { border-radius: 7px; }
body[data-admin-shell="true"] .admin-empty { border-radius: 11px; }
/* ---------------------------------------------------------------------
7 · TABLES — quieter grid, stronger header, clear row rhythm
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .admin-table-wrap {
border-radius: 12px;
border-color: var(--admin-border);
box-shadow: var(--admin-shadow);
}
body[data-admin-shell="true"] .admin-table th {
background: var(--admin-surface-subtle);
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0;
padding-top: 0.72rem;
padding-bottom: 0.72rem;
border-bottom: 1px solid var(--admin-border-strong);
}
body[data-admin-shell="true"] .admin-table td {
padding-top: 0.74rem;
padding-bottom: 0.74rem;
}
body[data-admin-shell="true"] .admin-table tbody tr:last-child td { border-bottom: 0; }
body[data-admin-shell="true"] .admin-table tbody td:first-child { font-weight: 600; }
/* ---------------------------------------------------------------------
8 · NAV — sharper items; azure active state carries the hierarchy
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .admin-nav-link,
body[data-admin-shell="true"] [data-nav-link] { border-radius: 9px; }
body[data-admin-shell="true"] .admin-nav-cursor { border-radius: 10px; }
body[data-admin-shell="true"] .admin-nav-link.nav-link-active,
body[data-admin-shell="true"] [data-nav-link].nav-link-active {
font-weight: 680;
box-shadow: inset 3px 0 0 var(--admin-accent);
}
/* ---------------------------------------------------------------------
9 · STATS — bold, tabular numerals; label as a quiet micro-caption
--------------------------------------------------------------------- */
body[data-admin-shell="true"] .admin-stat-value {
font-weight: 720;
letter-spacing: 0;
}
body[data-admin-shell="true"] .admin-stat-label {
text-transform: uppercase;
letter-spacing: 0;
font-size: 0.7rem;
font-weight: 600;
color: var(--admin-text-muted);
}
/* =====================================================================
10 · POLISH — glass surfaces, seam edges, refraction sheen
Depth + light without moving or resizing anything on hover.
===================================================================== */
/* Dark: edges resolve to SEAMS (darker than the surface) — depth comes
from tone layering, never bright rims. Outranks light :root:root. */
html.dark:root {
--admin-glass: color-mix(in srgb, var(--admin-surface) 72%, transparent);
--admin-edge-hi: rgba(5, 9, 15, 0.5);
--admin-edge-lo: rgba(5, 9, 15, 0.68);
--admin-edge-accent: color-mix(in srgb, var(--admin-accent) 12%, rgba(5, 9, 15, 0.62));
--admin-edge-accent-hover: color-mix(in srgb, var(--admin-accent) 26%, rgba(5, 9, 15, 0.5));
--admin-sheen: rgba(255, 255, 255, 0.05);
--admin-sheen-core: rgba(255, 255, 255, 0.05);
}
@media (prefers-color-scheme: dark) {
html:not(.light):root {
--admin-glass: color-mix(in srgb, var(--admin-surface) 72%, transparent);
--admin-edge-hi: rgba(5, 9, 15, 0.5);
--admin-edge-lo: rgba(5, 9, 15, 0.68);
--admin-edge-accent: color-mix(in srgb, var(--admin-accent) 12%, rgba(5, 9, 15, 0.62));
--admin-edge-accent-hover: color-mix(in srgb, var(--admin-accent) 26%, rgba(5, 9, 15, 0.5));
--admin-sheen: rgba(255, 255, 255, 0.05);
--admin-sheen-core: rgba(255, 255, 255, 0.05);
}
}
/* Card edges. Double background: padding-box fill + border-box gradient.
Light: the top-left edge catches light, bottom-right hints the accent.
Dark: the same slots resolve to seams darker than the surface. */
body[data-admin-shell="true"] .admin-stat,
body[data-admin-shell="true"] .admin-muted-card,
body[data-admin-shell="true"] .admin-table-wrap,
body[data-admin-shell="true"] .admin-draggable-card {
border: 1px solid transparent;
background:
linear-gradient(var(--admin-surface), var(--admin-surface)) padding-box,
linear-gradient(155deg, var(--admin-edge-hi), var(--admin-edge-lo) 48%, var(--admin-edge-accent)) border-box;
box-shadow: var(--admin-shadow), inset 0 1px 0 var(--admin-edge-hi);
}
/* Frosted glass on the roomy chrome — translucent fill + backdrop blur. */
body[data-admin-shell="true"] .admin-panel,
body[data-admin-shell="true"] .admin-filterbar,
body[data-admin-shell="true"] .admin-modal-panel {
border: 1px solid transparent;
background:
linear-gradient(var(--admin-glass), var(--admin-glass)) padding-box,
linear-gradient(155deg, var(--admin-edge-hi), var(--admin-edge-lo) 46%, var(--admin-edge-accent)) border-box;
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
box-shadow: var(--admin-shadow), inset 0 1px 0 var(--admin-edge-hi);
}
/* Sidebar — deeper frost so scrolled content passes under it like glass. */
body[data-admin-shell="true"] .admin-sidebar {
background: color-mix(in srgb, var(--admin-surface) 76%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(1.25);
backdrop-filter: blur(20px) saturate(1.25);
}
/* Hover: the accent seeps into the edge — in place, nothing moves. */
body[data-admin-shell="true"] .admin-stat,
body[data-admin-shell="true"] .admin-muted-card,
body[data-admin-shell="true"] .admin-draggable-card {
transition:
box-shadow var(--admin-motion-medium) var(--admin-ease-standard),
background var(--admin-motion-medium) var(--admin-ease-standard),
--sheen-pos 0.9s var(--admin-ease-standard),
--sheen-angle 1.2s var(--admin-ease-standard);
}
body[data-admin-shell="true"] .admin-stat:hover,
body[data-admin-shell="true"] .admin-muted-card:hover,
body[data-admin-shell="true"] .admin-draggable-card:hover {
background:
linear-gradient(var(--admin-surface), var(--admin-surface)) padding-box,
linear-gradient(150deg, var(--admin-edge-hi), var(--admin-edge-accent) 50%, var(--admin-edge-accent-hover)) border-box;
box-shadow: var(--admin-shadow), inset 0 1px 0 var(--admin-edge-hi);
}
/* ------------------------------------------------------------------
INTERACTIVE SURFACES — one recipe for the whole component library.
Every card-like surface (.admin-stat, .admin-muted-card,
.admin-draggable-card, .admin-callout) gets the same glass sheen:
an angled band of light, like a reflection on glass, that fades in
on hover and — with theme-2026-glass.js — glides and tilts after
the pointer with easing (refraction lag). Never moves the element.
New card components: add the class to these three selector lists.
------------------------------------------------------------------ */
body[data-admin-shell="true"] .admin-stat,
body[data-admin-shell="true"] .admin-muted-card,
body[data-admin-shell="true"] .admin-draggable-card,
body[data-admin-shell="true"] .admin-callout {
position: relative;
isolation: isolate;
}
body[data-admin-shell="true"] .admin-stat::before,
body[data-admin-shell="true"] .admin-muted-card::before,
body[data-admin-shell="true"] .admin-draggable-card::before,
body[data-admin-shell="true"] .admin-callout::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(var(--sheen-angle, 118deg),
transparent calc(var(--sheen-pos, 24%) - 26%),
var(--admin-sheen) var(--sheen-pos, 24%),
transparent calc(var(--sheen-pos, 24%) + 26%)),
linear-gradient(calc(var(--sheen-angle, 118deg) + 8deg),
transparent calc(var(--sheen-pos, 24%) + 2%),
var(--admin-sheen-core) calc(var(--sheen-pos, 24%) + 9%),
transparent calc(var(--sheen-pos, 24%) + 16%));
opacity: 0;
transition: opacity var(--admin-motion-slow) var(--admin-ease-standard);
pointer-events: none;
z-index: 1;
}
body[data-admin-shell="true"] .admin-stat:hover::before,
body[data-admin-shell="true"] .admin-muted-card:hover::before,
body[data-admin-shell="true"] .admin-draggable-card:hover::before,
body[data-admin-shell="true"] .admin-callout:hover::before {
opacity: 1;
}
/* Colour callouts: a living gradient that drifts on hover + accent glow. */
body[data-admin-shell="true"] .admin-callout {
border-radius: var(--admin-radius-lg);
background: linear-gradient(135deg, var(--admin-accent-soft), color-mix(in srgb, var(--admin-accent-soft) 55%, var(--admin-surface)) 52%, var(--admin-accent-soft));
background-size: 210% 210%;
background-position: 0% 0%;
transition:
background-position var(--admin-motion-slow) var(--admin-ease-standard),
box-shadow var(--admin-motion-medium) var(--admin-ease-standard),
border-color var(--admin-motion-medium) var(--admin-ease-standard),
--sheen-pos 0.9s var(--admin-ease-standard),
--sheen-angle 1.2s var(--admin-ease-standard);
}
body[data-admin-shell="true"] .admin-callout-info {
background: linear-gradient(135deg, var(--admin-info-soft), color-mix(in srgb, var(--admin-info-soft) 55%, var(--admin-surface)) 52%, var(--admin-info-soft));
background-size: 210% 210%;
}
body[data-admin-shell="true"] .admin-callout-warning {
background: linear-gradient(135deg, var(--admin-warning-soft), color-mix(in srgb, var(--admin-warning-soft) 55%, var(--admin-surface)) 52%, var(--admin-warning-soft));
background-size: 210% 210%;
}
body[data-admin-shell="true"] .admin-callout-danger {
background: linear-gradient(135deg, var(--admin-danger-soft), color-mix(in srgb, var(--admin-danger-soft) 55%, var(--admin-surface)) 52%, var(--admin-danger-soft));
background-size: 210% 210%;
}
body[data-admin-shell="true"] .admin-callout:hover {
background-position: 100% 100%;
border-color: color-mix(in srgb, var(--admin-accent) 34%, transparent);
}
/* Buttons: gentle lift + accent glow (primary keeps its darkening hover). */
body[data-admin-shell="true"] .admin-button-secondary:hover:not(:disabled),
body[data-admin-shell="true"] .admin-button-ghost:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--admin-accent) 30%, var(--admin-border-strong));
}
body[data-admin-shell="true"] .admin-button-primary:hover:not(:disabled) {
box-shadow:
0 1px 1.5px rgba(16, 24, 40, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Chips: soft accent wash on hover. */
body[data-admin-shell="true"] .admin-chip {
transition:
border-color var(--admin-motion-fast) var(--admin-ease-standard),
background var(--admin-motion-fast) var(--admin-ease-standard),
transform var(--admin-motion-fast) var(--admin-ease-standard);
}
body[data-admin-shell="true"] .admin-chip:hover {
border-color: color-mix(in srgb, var(--admin-accent) 34%, var(--admin-border));
background: color-mix(in srgb, var(--admin-accent-soft) 60%, var(--admin-surface-subtle));
}
/* Press feedback stays a translate — never a scale (no size change). */
body[data-admin-shell="true"] .admin-button:active:not(:disabled),
body[data-admin-shell="true"] .admin-draggable-card:active {
transform: none;
}
/* Eased sheen position/angle — registered so they transition like glass. */
@property --sheen-pos { syntax: ""; inherits: true; initial-value: 24%; }
@property --sheen-angle { syntax: ""; inherits: true; initial-value: 118deg; }
/* Form controls & theme button: never transition background-color.
base.css animates it via --admin-input-transition, and on theme flips
that CSSTransition can wedge permanently (pending, startTime:null),
leaving controls painted in the previous theme. Focus micro-
interactions (border, ring, color, transform) keep animating. */
body[data-admin-shell="true"] .admin-theme-button,
body[data-admin-shell="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body[data-admin-shell="true"] textarea,
body[data-admin-shell="true"] select,
body[data-admin-shell="true"] .admin-select,
body[data-admin-shell="true"] .admin-control,
body[data-admin-shell="true"] .admin-textarea {
transition:
border-color var(--admin-input-transition),
box-shadow var(--admin-input-transition),
color var(--admin-input-transition),
transform var(--admin-motion-fast) var(--admin-ease-standard);
}
/* Table rows: highlight in place, never shift — fixes hover horizontal scroll. */
body[data-admin-shell="true"] .admin-table tbody tr.admin-row:hover,
body[data-admin-shell="true"] tr.admin-row.hover\:bg-gray-50:hover,
body[data-admin-shell="true"] tr[data-admin-row="interactive"]:hover {
transform: none;
}