/* ========================================================================== Go For Review — Admin console design system -------------------------------------------------------------------------- Layered ON TOP of the self-hosted Tailwind 2 utility build (/vendor/tailwind-2.2.19.min.css). Tailwind 2's compiled build ships no `dark:` variant, which is why the old sidebar-only dark mode could never be finished. Everything themable here goes through a CSS custom property, so one attribute flip on re-themes every surface. Theme resolution (see partials/foot.ejs): no stored choice -> follow prefers-color-scheme explicit choice -> data-admin-theme="light|dark" wins and persists ponytail: the Tailwind file is the full 2.9MB utility set, not purged — it is cached after the first request and needs no build step. If payload ever matters, add a Tailwind CLI build whose content glob covers the EJS views. (Do not write that glob literally here — a star-slash inside a CSS comment ends the comment and silently eats the rules below it.) ========================================================================== */ /* ---------- Tokens: light (the base; never define a color only in dark) --- */ :root { --bg: #f1f5f9; --bg-subtle: #e9eef5; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; /* All three levels clear WCAG AA (4.5:1) against --surface AND --surface-2. The old faint value (#94a3b8) was only 2.56:1 — it is used for real content (owner names, addresses, metric labels), not decoration. */ --text-muted: #475569; --text-faint: #64748b; --text-invert: #ffffff; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eff6ff; --accent-text: #1d4ed8; --accent-ring: rgba(37, 99, 235, 0.35); --ok: #16a34a; --ok-soft: #f0fdf4; --ok-text: #15803d; --warn: #d97706; --warn-soft: #fffbeb; --warn-text: #b45309; --danger: #dc2626; --danger-soft: #fef2f2; --danger-text: #b91c1c; --info: #0891b2; --info-soft: #ecfeff; --info-text: #0e7490; --gold: #b45309; --gold-soft: #fffbeb; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-pop: 0 24px 60px rgba(15, 23, 42, 0.24); --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; /* Density — the density toggle swaps these two, everything else follows. */ --row-py: 0.625rem; --row-px: 0.875rem; --row-font: 0.8125rem; --sidebar-w: 15.5rem; /* Height of the sticky topbar — sticky table headers and the bulk bar park below it instead of sliding underneath. */ --sticky-top: 3.25rem; } /* ---------- Tokens: dark ------------------------------------------------- */ /* Applied both when the OS asks for it (and the user has not chosen), and when the user explicitly picked dark. */ @media (prefers-color-scheme: dark) { :root:not([data-admin-theme="light"]) { --bg: #0b1120; --bg-subtle: #0f172a; --surface: #131c31; --surface-2: #0f172a; --surface-hover: #1b2540; --border: #23304d; --border-strong: #33415f; --text: #e6edf7; --text-muted: #a9b8d0; --text-faint: #8192ac; --text-invert: #0b1120; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: #16233d; --accent-text: #93c5fd; --accent-ring: rgba(96, 165, 250, 0.4); --ok: #4ade80; --ok-soft: #0f2a1c; --ok-text: #86efac; --warn: #fbbf24; --warn-soft: #2b2008; --warn-text: #fcd34d; --danger: #f87171; --danger-soft: #2d1214; --danger-text: #fca5a5; --info: #22d3ee; --info-soft: #082f36; --info-text: #67e8f9; --gold: #fbbf24; --gold-soft: #2b2008; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.7); } } :root[data-admin-theme="dark"] { --bg: #0b1120; --bg-subtle: #0f172a; --surface: #131c31; --surface-2: #0f172a; --surface-hover: #1b2540; --border: #23304d; --border-strong: #33415f; --text: #e6edf7; --text-muted: #a9b8d0; --text-faint: #8192ac; --text-invert: #0b1120; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: #16233d; --accent-text: #93c5fd; --accent-ring: rgba(96, 165, 250, 0.4); --ok: #4ade80; --ok-soft: #0f2a1c; --ok-text: #86efac; --warn: #fbbf24; --warn-soft: #2b2008; --warn-text: #fcd34d; --danger: #f87171; --danger-soft: #2d1214; --danger-text: #fca5a5; --info: #22d3ee; --info-soft: #082f36; --info-text: #67e8f9; --gold: #fbbf24; --gold-soft: #2b2008; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.7); } /* Compact density */ :root[data-admin-density="compact"] { --row-py: 0.375rem; --row-px: 0.75rem; --row-font: 0.78125rem; } /* ========================================================================== Base ========================================================================== */ html { -webkit-text-size-adjust: 100%; } body.admin-body { background-color: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; } /* Tabular numerals everywhere a number is compared vertically. */ .num { font-variant-numeric: tabular-nums; } /* Reset Tailwind's hard-coded greys ONLY inside the admin shell, so the ten views we are not rewriting inherit dark mode instead of staying white. */ .admin-scope .bg-white { background-color: var(--surface) !important; } .admin-scope .bg-gray-50 { background-color: var(--surface-2) !important; } .admin-scope .bg-gray-100 { background-color: var(--surface-hover) !important; } .admin-scope .text-gray-900, .admin-scope .text-gray-800 { color: var(--text) !important; } .admin-scope .text-gray-700, .admin-scope .text-gray-600 { color: var(--text-muted) !important; } .admin-scope .text-gray-500, .admin-scope .text-gray-400 { color: var(--text-faint) !important; } .admin-scope .border-gray-200, .admin-scope .border-gray-300, .admin-scope .border { border-color: var(--border); } .admin-scope .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } .admin-scope input:not([type="checkbox"]):not([type="radio"]), .admin-scope select, .admin-scope textarea { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .admin-scope input::placeholder, .admin-scope textarea::placeholder { color: var(--text-faint); } /* Keyboard focus is visible on every interactive element. */ .admin-scope a:focus-visible, .admin-scope button:focus-visible, .admin-scope input:focus-visible, .admin-scope select:focus-visible, .admin-scope textarea:focus-visible, .admin-scope [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Controls that already draw their own focus ring (border colour + box-shadow) opt out of the generic outline, otherwise both render as a double ring. The ring itself remains, so focus is still clearly visible. */ .admin-scope .auth-input:focus, .admin-scope .auth-input:focus-visible, .admin-scope .field:focus, .admin-scope .field:focus-visible { outline: none; } /* ========================================================================== Layout: sidebar + topbar ========================================================================== */ .admin-sidebar { width: var(--sidebar-w); background-color: var(--surface); border-right: 1px solid var(--border); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 1024px) { .admin-sidebar { transform: translateX(0) !important; } .admin-content { padding-left: var(--sidebar-w); } .admin-backdrop { display: none !important; } } .admin-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(8, 12, 24, 0.6); backdrop-filter: blur(2px); display: none; } .admin-backdrop.is-open { display: block; } .admin-brand-title { color: var(--text); } .admin-brand-sub { color: var(--text-faint); } .admin-nav-group { color: var(--text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .admin-nav-link { display: flex; align-items: center; gap: 0.75rem; margin: 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .admin-nav-link:hover { background-color: var(--surface-hover); color: var(--text); } .admin-nav-link.is-active { background-color: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .admin-nav-link i { width: 1.125rem; text-align: center; font-size: 0.875rem; } .admin-nav-link .nav-count { margin-left: auto; font-size: 0.6875rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .admin-topbar { background-color: color-mix(in srgb, var(--surface) 85%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(12px); } /* color-mix fallback for older engines */ @supports not (background-color: color-mix(in srgb, red 50%, blue)) { .admin-topbar { background-color: var(--surface); } } .admin-topbar-text { color: var(--text-muted); } .admin-topbar-text:hover { color: var(--accent); } .admin-crumb { font-size: 0.8125rem; color: var(--text-faint); } .admin-crumb strong { color: var(--text); font-weight: 600; } /* Icon button used across the topbar */ .icon-btn { height: 2rem; width: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .icon-btn:hover { background-color: var(--surface-hover); color: var(--text); } /* ========================================================================== Surfaces ========================================================================== */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-pad { padding: 1rem 1.125rem; } .card-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--border); } .card-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .card-sub { font-size: 0.75rem; color: var(--text-faint); } .section-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } /* ========================================================================== Metric tiles ========================================================================== */ .metric { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; } .metric-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 0.375rem; } .metric-value { font-size: 1.5rem; line-height: 1.1; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .metric-foot { font-size: 0.75rem; color: var(--text-muted); } .delta { font-weight: 600; font-variant-numeric: tabular-nums; } .delta-up { color: var(--ok); } .delta-down { color: var(--danger); } .delta-flat { color: var(--text-faint); } /* ========================================================================== Attention queue — the triage surface on the dashboard ========================================================================== */ .attn-list { display: flex; flex-direction: column; } .attn { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 1.125rem; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background-color 0.15s; } .attn:last-child { border-bottom: 0; } .attn:hover { background-color: var(--surface-hover); } .attn-dot { flex: none; height: 1.75rem; width: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.75rem; } .attn-critical .attn-dot { background: var(--danger-soft); color: var(--danger); } .attn-warning .attn-dot { background: var(--warn-soft); color: var(--warn); } .attn-info .attn-dot { background: var(--info-soft); color: var(--info); } .attn-body { min-width: 0; flex: 1; } .attn-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); } .attn-sub { font-size: 0.75rem; color: var(--text-muted); } .attn-count { font-size: 1.125rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .attn-critical .attn-count { color: var(--danger); } .attn-warning .attn-count { color: var(--warn); } .attn-clear { padding: 2rem 1.125rem; text-align: center; color: var(--text-muted); font-size: 0.8125rem; } .attn-clear i { color: var(--ok); font-size: 1.5rem; display: block; margin-bottom: 0.5rem; } /* ========================================================================== Sparkline / bar chart (pure CSS — no chart library) ========================================================================== */ .spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; } .spark-bar { flex: 1 1 0; min-width: 2px; background: var(--accent); opacity: 0.32; border-radius: 2px 2px 0 0; transition: opacity 0.15s; position: relative; } .spark-bar:hover { opacity: 1; } .spark-bar.is-last { opacity: 0.85; } .bar-row { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto; align-items: center; gap: 0.75rem; padding: 0.3125rem 0; font-size: 0.8125rem; } .bar-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 0.5rem; border-radius: 999px; background: var(--surface-hover); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--accent); opacity: 0.75; } .bar-value { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.75rem; min-width: 2ch; text-align: right; } /* ========================================================================== Data grid ========================================================================== */ .grid-wrap { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* The grid body is its own scroll region so the header can stay pinned while 200 rows scroll past. `overflow-x: auto` alone would make this element the scroll container anyway, which is why the sticky header must use `top: 0` here (a page-relative offset would push it down by that offset instead). */ .grid-scroll { overflow: auto; max-height: calc(100vh - 16rem); overscroll-behavior: contain; } table.dgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--row-font); } table.dgrid thead th { position: sticky; top: 0; /* relative to .grid-scroll, not the page — see above */ z-index: 10; background-color: var(--surface-2); border-bottom: 1px solid var(--border); padding: 0.5rem var(--row-px); text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } table.dgrid thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; } table.dgrid thead th a:hover { color: var(--accent); } table.dgrid thead th.is-sorted { color: var(--accent-text); } table.dgrid tbody td { padding: var(--row-py) var(--row-px); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } table.dgrid tbody tr:last-child td { border-bottom: 0; } table.dgrid tbody tr { transition: background-color 0.12s; } table.dgrid tbody tr:hover { background-color: var(--surface-hover); } table.dgrid tbody tr.is-selected { background-color: var(--accent-soft); } .col-select { width: 2.25rem; text-align: center; } .col-actions { width: 1px; white-space: nowrap; } .cell-strong { font-weight: 600; color: var(--text); } .cell-sub { font-size: 0.6875rem; color: var(--text-faint); } .cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; } /* Row identity avatar */ .avatar { height: 1.75rem; width: 1.75rem; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); object-fit: contain; overflow: hidden; } .avatar img { height: 100%; width: 100%; object-fit: contain; } /* Checkbox */ .dgrid-check { height: 0.9375rem; width: 0.9375rem; cursor: pointer; accent-color: var(--accent); } /* ========================================================================== Badges & status ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.125rem 0.4375rem; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .badge-neutral { background: var(--surface-hover); color: var(--text-muted); } .badge-ok { background: var(--ok-soft); color: var(--ok-text); } .badge-warn { background: var(--warn-soft); color: var(--warn-text); } .badge-danger { background: var(--danger-soft); color: var(--danger-text); } .badge-info { background: var(--info-soft); color: var(--info-text); } .badge-accent { background: var(--accent-soft); color: var(--accent-text); } .badge-gold { background: var(--gold-soft); color: var(--gold); } .dot { height: 0.4375rem; width: 0.4375rem; border-radius: 999px; flex: none; background: currentColor; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; padding: 0.4375rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; line-height: 1.25; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--text-invert); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); } .btn-danger { background: var(--danger); color: var(--text-invert); } .btn-danger:hover:not(:disabled) { filter: brightness(0.92); } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .btn-subtle { background: transparent; color: var(--text-muted); padding: 0.25rem 0.4375rem; } .btn-subtle:hover { background: var(--surface-hover); color: var(--text); } /* Row action icon */ .row-act { height: 1.75rem; width: 1.75rem; display: inline-grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; border: 0; cursor: pointer; font-size: 0.8125rem; transition: background-color 0.15s, color 0.15s; } .row-act:hover { background: var(--surface-hover); color: var(--accent); } .row-act.is-danger:hover { background: var(--danger-soft); color: var(--danger); } /* Segmented control (density toggle) */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-hover); border-radius: var(--radius-sm); } .seg button { border: 0; background: transparent; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.4375rem; border-radius: 4px; cursor: pointer; } .seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* ========================================================================== Filter bar & inputs ========================================================================== */ .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .field { height: 2.125rem; padding: 0 0.625rem; font-size: 0.8125rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); min-width: 0; } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .field::placeholder { color: var(--text-faint); } /* Form fields use .field, but only .auth-input had an error state, so an invalid .field looked identical to a valid one. */ .field.has-error { border-color: var(--danger); } .field.has-error:focus { box-shadow: 0 0 0 3px var(--danger-soft); } /* Radius slider paired with a number input. */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 0.375rem; border-radius: 999px; background: var(--surface-hover); outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 1rem; width: 1rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; } .range::-moz-range-thumb { height: 1rem; width: 1rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); cursor: pointer; } .range:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); } /* Checkbox/radio tiles used for category and source pickers. */ .pick { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4375rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8125rem; color: var(--text-muted); background: var(--surface); transition: border-color 0.15s, background-color 0.15s; } .pick:hover { border-color: var(--border-strong); background: var(--surface-hover); } .pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); } .field-search { padding-left: 2rem; } .search-wrap { position: relative; flex: 1 1 14rem; min-width: 0; } .search-wrap i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 0.75rem; pointer-events: none; } /* Active filter chips */ .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.4375rem; font-size: 0.75rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); text-decoration: none; } .chip:hover { filter: brightness(0.96); } .chip i { font-size: 0.625rem; opacity: 0.7; } /* ========================================================================== Bulk action bar — appears only when rows are selected ========================================================================== */ .bulkbar { position: sticky; top: var(--sticky-top, 0px); z-index: 20; display: none; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--text-invert); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .bulkbar.is-open { display: flex; } .bulkbar .bulk-count { font-size: 0.8125rem; font-weight: 600; } .bulkbar .btn-ghost { background: transparent; border-color: currentColor; color: inherit; } .bulkbar .btn-ghost:hover { background: rgba(127, 127, 127, 0.25); color: inherit; } /* ========================================================================== Command palette ========================================================================== */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.5rem 0 0.625rem; font-size: 0.8125rem; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; min-width: 12rem; text-align: left; } .cmdk-trigger:hover { border-color: var(--border-strong); color: var(--text-muted); } .cmdk-trigger .kbd-hint { margin-left: auto; } .kbd { display: inline-block; padding: 0.0625rem 0.3125rem; font-size: 0.6875rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; line-height: 1.4; } .cmdk-root { position: fixed; inset: 0; z-index: 90; display: none; padding: 8vh 1rem 1rem; justify-content: center; align-items: flex-start; } .cmdk-root.is-open { display: flex; } .cmdk-veil { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(3px); } .cmdk-panel { position: relative; width: 100%; max-width: 34rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .cmdk-inputrow { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--border); } .cmdk-inputrow i { color: var(--text-faint); } .cmdk-input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font-size: 0.9375rem; min-width: 0; } .cmdk-input::placeholder { color: var(--text-faint); } /* The input is auto-focused and is the only focusable thing in the palette, so the focus indicator moves to the panel edge instead of boxing the input. */ .cmdk-input:focus, .cmdk-input:focus-visible { outline: none; } .cmdk-panel:focus-within { border-color: var(--accent); } .cmdk-spin { color: var(--accent); display: none; } .cmdk-spin.is-on { display: inline-block; } .cmdk-results { overflow-y: auto; padding: 0.375rem; } .cmdk-group { padding: 0.5rem 0.625rem 0.25rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .cmdk-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.8125rem; cursor: pointer; } .cmdk-item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); } .cmdk-item i.cmdk-icon { width: 1rem; text-align: center; color: var(--text-faint); font-size: 0.8125rem; } .cmdk-item[aria-selected="true"] i.cmdk-icon { color: var(--accent-text); } .cmdk-item .cmdk-meta { margin-left: auto; font-size: 0.6875rem; color: var(--text-faint); } .cmdk-empty { padding: 1.75rem 1rem; text-align: center; color: var(--text-faint); font-size: 0.8125rem; } .cmdk-foot { display: flex; align-items: center; gap: 0.875rem; padding: 0.4375rem 0.75rem; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 0.6875rem; color: var(--text-faint); } /* ========================================================================== Toasts — stacked, dismissible, pause on hover ========================================================================== */ .toast-stack { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(24rem, calc(100vw - 1.5rem)); } .toast { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--text-faint); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 0.8125rem; color: var(--text); animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } .toast.is-leaving { animation: toast-out 0.2s ease forwards; } .toast-ok { border-left-color: var(--ok); } .toast-error { border-left-color: var(--danger); } .toast-warn { border-left-color: var(--warn); } .toast-ok .toast-icon { color: var(--ok); } .toast-error .toast-icon { color: var(--danger); } .toast-warn .toast-icon { color: var(--warn); } .toast-body { flex: 1; min-width: 0; word-break: break-word; } .toast-close { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; padding: 0 0.125rem; font-size: 0.75rem; } .toast-close:hover { color: var(--text); } @keyframes toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(1rem); } } /* ========================================================================== Empty states & pagination ========================================================================== */ .empty { padding: 3rem 1.5rem; text-align: center; } .empty-icon { height: 2.75rem; width: 2.75rem; margin: 0 auto 0.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--surface-hover); color: var(--text-faint); font-size: 1.125rem; } .empty-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); } .empty-sub { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; } .pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.625rem var(--row-px); border-top: 1px solid var(--border); background: var(--surface-2); font-size: 0.75rem; color: var(--text-muted); } .pager-nav { display: flex; align-items: center; gap: 0.25rem; } .pager-btn { min-width: 1.875rem; height: 1.875rem; padding: 0 0.4375rem; display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.75rem; text-decoration: none; font-variant-numeric: tabular-nums; } .pager-btn:hover { border-color: var(--accent); color: var(--accent-text); } .pager-btn.is-current { background: var(--accent); border-color: var(--accent); color: var(--text-invert); font-weight: 600; } .pager-btn.is-disabled { opacity: 0.4; pointer-events: none; } /* ========================================================================== Modal (shared by the views we did not rewrite) ========================================================================== */ .modal-overlay, .modal-backdrop { background-color: rgba(8, 12, 24, 0.55); backdrop-filter: blur(3px); } .modal { transition: opacity 0.25s ease; } .admin-scope .qr-code-container { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; display: inline-block; background: #fff; box-shadow: var(--shadow-sm); } .admin-scope .detail-label { min-width: 120px; font-weight: 500; color: var(--text-muted); } .admin-scope .detail-value { color: var(--text); word-break: break-word; } .admin-scope .table-row-hover:hover { background-color: var(--surface-hover); } .admin-scope .tab-active { border-bottom: 2px solid var(--accent); color: var(--accent-text); font-weight: 600; } .admin-scope .action-btn { transition: all 0.2s ease; } .admin-scope .action-btn:hover { transform: scale(1.1); } .admin-scope .sortable { cursor: pointer; } .admin-scope .sortable:hover { background-color: var(--surface-hover); } .admin-scope .sort-asc::after { content: " \2191"; } .admin-scope .sort-desc::after { content: " \2193"; } .admin-scope .view-all-btn { color: var(--accent); cursor: pointer; font-size: 0.875rem; text-decoration: underline; } /* Legacy toggle switch used by add-company */ .toggle-checkbox:checked { right: 0; border-color: var(--accent); left: 1.5rem; } .toggle-checkbox:checked + .toggle-label { background-color: var(--accent); } .toggle-checkbox { right: 0; z-index: 1; border-color: var(--border-strong); transition: all 0.3s; width: 1.5rem; height: 1.5rem; top: 0; left: 0; } .toggle-label { width: 3rem; height: 1.5rem; background-color: var(--surface-hover); } /* Hide native password reveal icons */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear, input[type="text"]::-ms-reveal, input[type="text"]::-ms-clear { display: none !important; } #password::-webkit-credentials-auto-fill-button, #password::-webkit-textfield-decoration-container { display: none !important; } /* ========================================================================== Legacy table shim -------------------------------------------------------------------------- The admin views that predate the data grid still use hand-rolled Tailwind tables (`min-w-full divide-y` with `px-6 py-4` on every cell). Rather than rewrite that markup in five files, they inherit the .dgrid treatment here: token colours, density that follows the Cozy/Compact toggle, a sticky header and row hover. Selector specificity (0,2,3) beats Tailwind's `.px-6` (0,1,0). New tables should still use `table.dgrid` directly — this is for the pre-existing ones only. ========================================================================== */ .admin-scope main table:not(.dgrid) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--row-font); } .admin-scope main table:not(.dgrid) thead th { position: sticky; top: 0; z-index: 10; padding: 0.5rem var(--row-px); background-color: var(--surface-2); border-bottom: 1px solid var(--border); text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .admin-scope main table:not(.dgrid) tbody td { padding: var(--row-py) var(--row-px); border-bottom: 1px solid var(--border); border-top: 0; /* cancels Tailwind's divide-y */ color: var(--text); vertical-align: middle; } .admin-scope main table:not(.dgrid) tbody tr:last-child td { border-bottom: 0; } .admin-scope main table:not(.dgrid) tbody tr { transition: background-color 0.12s; } .admin-scope main table:not(.dgrid) tbody tr:hover { background-color: var(--surface-hover); } /* Tailwind's divider utility would otherwise double up with the border above. */ .admin-scope main table:not(.dgrid) tbody.divide-y > tr + tr, .admin-scope main table:not(.dgrid) tbody > :not([hidden]) ~ :not([hidden]) { border-top-width: 0; } /* ========================================================================== Auth screen — standalone, no marketing chrome ========================================================================== */ .auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1rem; background-color: var(--bg); } .auth-card { width: 100%; max-width: 23rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.75rem 1.5rem; } .auth-brand { display: flex; align-items: center; gap: 0.625rem; justify-content: center; margin-bottom: 0.25rem; } .auth-brand img { height: 2.25rem; width: 2.25rem; object-fit: contain; } .auth-brand-name { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .auth-sub { text-align: center; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.375rem; } .auth-field { margin-bottom: 0.875rem; } .auth-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3125rem; } .auth-input { width: 100%; height: 2.5rem; padding: 0 0.75rem; font-size: 0.875rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .auth-input::placeholder { color: var(--text-faint); } .auth-input.has-error { border-color: var(--danger); } .auth-input.has-error:focus { box-shadow: 0 0 0 3px var(--danger-soft); } /* Password field with reveal toggle */ .auth-pw { position: relative; } .auth-pw .auth-input { padding-right: 2.5rem; } .pw-toggle { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); height: 2rem; width: 2rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-faint); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8125rem; } .pw-toggle:hover { color: var(--text); background: var(--surface-hover); } .auth-error-field { display: block; font-size: 0.75rem; color: var(--danger-text); margin-top: 0.25rem; } .auth-alert { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5625rem 0.6875rem; border-radius: var(--radius-sm); font-size: 0.8125rem; margin-bottom: 1rem; border: 1px solid transparent; } .auth-alert-error { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger); } .auth-alert-ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok); } .auth-submit { width: 100%; height: 2.5rem; margin-top: 0.375rem; font-size: 0.875rem; font-weight: 600; } .auth-foot { margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; color: var(--text-faint); } /* Theme switch sits outside the card, top-right of the screen */ .auth-theme { position: fixed; top: 0.875rem; right: 0.875rem; } /* ========================================================================== Utilities & motion ========================================================================== */ .truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .admin-sidebar, .admin-topbar, .toast-stack, .cmdk-root, .bulkbar, .pager { display: none !important; } .admin-content { padding-left: 0 !important; } .card, .grid-wrap { box-shadow: none; border-color: #ccc; } } /* ========================================================================== Forms -------------------------------------------------------------------------- Field primitives for admin forms (add/edit company today). Inputs themselves are already tokenised by .field and the .admin-scope base rules above; these are the label, help, grid and choice-pill pieces that were previously written out as hard-coded Tailwind greys in the template. ========================================================================== */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.875rem 1rem; } .f { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; } .f-wide { grid-column: 1 / -1; } .f-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .f-req { color: var(--danger-text); } .f-hint { font-size: 0.6875rem; color: var(--text-faint); line-height: 1.45; } .f-error { font-size: 0.6875rem; color: var(--danger-text); } /* A bordered group that holds several checkboxes and lines up with .field. */ .pick-group { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .pick-group.has-error { border-color: var(--danger); } .pick { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.625rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; color: var(--text-muted); background: var(--surface); cursor: pointer; user-select: none; } .pick:hover { border-color: var(--accent); color: var(--text); } .pick input { accent-color: var(--accent); cursor: pointer; } /* Progressive: without :has() the native checkbox still shows the state. */ .pick:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } /* Removable value chip (services). */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.5rem 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); } .chip button { border: 0; background: none; cursor: pointer; padding: 0; color: inherit; opacity: 0.65; font-size: 0.6875rem; line-height: 1; } .chip button:hover { opacity: 1; } /* A row of switches/notes that explains itself, e.g. "show services on review". */ .f-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); } /* Full-width form layout: the fields take the page, and the decisions that belong to GFR rather than to the business (plan, status, credentials) sit in a column that stays put while the long left-hand side scrolls. */ .form-2col { display: grid; gap: 0.75rem; align-items: start; } @media (min-width: 1100px) { .form-2col { grid-template-columns: minmax(0, 1fr) 21rem; } /* 3.25rem topbar + the page's own top padding. */ .form-side { position: sticky; top: 4rem; } } /* Save/Cancel stay reachable on a long form. */ .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0; margin-top: 0.25rem; } /* Single column: the actions are at the very bottom of a tall page, so pin them instead. Above the breakpoint .form-side already keeps them in view. */ @media (max-width: 1099px) { .form-actions { position: sticky; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--border); } } /* A whole table row that navigates. The name inside stays a real so middle-click and ctrl-click keep working; these rules only make the row LOOK clickable, which is what stops an operator hunting for the eye icon. */ tbody tr[data-href] { cursor: pointer; } .row-link { color: inherit; text-decoration: none; display: block; } .row-link:hover { color: var(--accent-text); text-decoration: underline; } /* ========================================================================== Responsive display utilities — MUST stay last -------------------------------------------------------------------------- This file loads after Tailwind, so a component that sets `display` (.icon-btn, .seg, .cmdk-trigger) would beat Tailwind's `hidden` / `lg:hidden` utilities on source order at equal specificity — leaving the mobile hamburger and the duplicate search button visible on desktop. Re-declaring them with the .admin-scope prefix raises specificity so the utilities win again. Only the utilities the admin chrome actually uses are re-declared. ========================================================================== */ .admin-scope .hidden { display: none; } @media (min-width: 640px) { .admin-scope .sm\:inline { display: inline; } .admin-scope .sm\:flex { display: flex; } .admin-scope .sm\:block { display: block; } } @media (min-width: 768px) { .admin-scope .md\:hidden { display: none; } .admin-scope .md\:inline-flex { display: inline-flex; } } @media (min-width: 1024px) { .admin-scope .lg\:hidden { display: none; } .admin-scope .lg\:inline-flex { display: inline-flex; } .admin-scope .lg\:flex { display: flex; } }