/* ════════════════════════════════════════════════════════════════════════ * QuickPR Admin — Design System 2026 * Enterprise-grade slate + indigo aesthetic with built-in dark mode. * * Loads AFTER the legacy CSS cascade so token overrides win specificity * battles. Unmigrated pages get the new colors/typography automatically * via :root variable overrides. Pages that opt into new component classes * (.btn, .card, .surface, .table-2026, etc.) get full design treatment. * * Light/dark mode toggled via . Default: dark. * Persisted in localStorage via admin-2026.js. * ════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── * 1. DESIGN TOKENS * ──────────────────────────────────────────────────────────── */ :root { /* Brand */ --color-brand-50: #eef2ff; --color-brand-100: #e0e7ff; --color-brand-200: #c7d2fe; --color-brand-300: #a5b4fc; --color-brand-400: #818cf8; --color-brand-500: #6366f1; /* primary */ --color-brand-600: #4f46e5; --color-brand-700: #4338ca; --color-brand-800: #3730a3; --color-brand-900: #312e81; /* Semantic */ --color-success-500: #10b981; --color-success-600: #059669; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-info-500: #3b82f6; --color-info-600: #2563eb; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 0.9375rem; --text-lg: 1rem; --text-xl: 1.125rem; --text-2xl: 1.25rem; --text-3xl: 1.5rem; --text-4xl: 1.875rem; --text-5xl: 2.25rem; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing scale (4px base) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Transitions */ --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1); --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --header-height: 56px; --content-max-width: 1440px; /* Z-index scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; } /* DARK theme (default for admin) */ :root, :root[data-theme="dark"] { /* Surfaces (lowest = most-recessed; raised = floating elements) */ --bg-base: #0a0e1a; --bg-surface: #11151f; --bg-raised: #161b27; --bg-overlay: #1c2230; --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.08); --bg-selected: rgba(99, 102, 241, 0.12); /* Text */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-quaternary: #64748b; --text-inverse: #0f172a; --text-link: var(--color-brand-400); --text-link-hover: var(--color-brand-300); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.16); --border-focus: var(--color-brand-500); /* Brand mapping in dark */ --color-primary: var(--color-brand-500); --color-primary-hover: var(--color-brand-400); --color-primary-bg: rgba(99, 102, 241, 0.15); --color-primary-bg-hover: rgba(99, 102, 241, 0.22); /* Shadows (subtle in dark mode) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35); /* Status backgrounds (translucent for dark) */ --bg-success: rgba(16, 185, 129, 0.12); --bg-warning: rgba(245, 158, 11, 0.12); --bg-danger: rgba(239, 68, 68, 0.12); --bg-info: rgba(59, 130, 246, 0.12); } /* LIGHT theme */ :root[data-theme="light"] { --bg-base: #f8fafc; --bg-surface: #ffffff; --bg-raised: #ffffff; --bg-overlay: #ffffff; --bg-hover: rgba(15, 23, 42, 0.04); --bg-active: rgba(15, 23, 42, 0.08); --bg-selected: rgba(99, 102, 241, 0.08); --text-primary: #0f172a; --text-secondary: #334155; --text-tertiary: #64748b; --text-quaternary: #94a3b8; --text-inverse: #ffffff; --text-link: var(--color-brand-600); --text-link-hover: var(--color-brand-700); --border-subtle: rgba(15, 23, 42, 0.06); --border: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.16); --border-focus: var(--color-brand-600); --color-primary: var(--color-brand-600); --color-primary-hover: var(--color-brand-700); --color-primary-bg: rgba(99, 102, 241, 0.08); --color-primary-bg-hover: rgba(99, 102, 241, 0.12); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 12px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.1); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.2); --bg-success: rgba(16, 185, 129, 0.1); --bg-warning: rgba(245, 158, 11, 0.1); --bg-danger: rgba(239, 68, 68, 0.1); --bg-info: rgba(59, 130, 246, 0.1); } /* ──────────────────────────────────────────────────────────── * 2. RESET + BASE * Scoped to .admin-portal so we don't blast public pages. * ──────────────────────────────────────────────────────────── */ .admin-portal, .admin-portal *, .admin-portal *::before, .admin-portal *::after { box-sizing: border-box; } body:has(.admin-portal), .admin-portal { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; } .admin-portal h1, .admin-portal h2, .admin-portal h3, .admin-portal h4, .admin-portal h5, .admin-portal h6 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--text-primary); margin: 0; } .admin-portal h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; } .admin-portal h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; } .admin-portal h3 { font-size: var(--text-xl); } .admin-portal h4 { font-size: var(--text-lg); } .admin-portal p { margin: 0; color: var(--text-secondary); } .admin-portal a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .admin-portal a:hover { color: var(--text-link-hover); } .admin-portal code, .admin-portal pre { font-family: var(--font-mono); font-size: 0.875em; } .admin-portal ::selection { background: var(--color-primary-bg-hover); color: var(--text-primary); } /* Custom scrollbar (dark mode) */ .admin-portal *::-webkit-scrollbar { width: 10px; height: 10px; } .admin-portal *::-webkit-scrollbar-track { background: transparent; } .admin-portal *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid var(--bg-base); } .admin-portal *::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); } /* ──────────────────────────────────────────────────────────── * 3. APP SHELL — sidebar + header + content * ──────────────────────────────────────────────────────────── */ .admin-container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; background: var(--bg-base); transition: grid-template-columns var(--transition); } .admin-container[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } /* ─── SIDEBAR ─── */ .admin-sidebar { background: var(--bg-surface); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 0; height: 100vh; } .sidebar-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); height: var(--header-height); flex-shrink: 0; } .sidebar-logo-mark { width: 28px; height: 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700)); display: grid; place-items: center; color: white; font-weight: var(--weight-bold); font-size: var(--text-md); flex-shrink: 0; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4); } .sidebar-brand { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; white-space: nowrap; } .sidebar-brand-name { font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-primary); } .sidebar-brand-tag { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-medium); } .sidebar-nav { padding: var(--space-3) var(--space-3); overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; } .nav-section { margin: var(--space-4) 0 var(--space-2); padding: 0 var(--space-3); font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-quaternary); } .nav-section:first-child { margin-top: 0; } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); text-decoration: none; margin: 1px 0; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; overflow: hidden; cursor: pointer; } .nav-item > i, .nav-item > svg { font-size: 1rem; width: 16px; text-align: center; flex-shrink: 0; color: var(--text-tertiary); transition: color var(--transition-fast); } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item:hover > i, .nav-item:hover > svg { color: var(--text-primary); } .nav-item.active { background: var(--bg-selected); color: var(--color-primary); } .nav-item.active > i, .nav-item.active > svg { color: var(--color-primary); } .nav-item .nav-badge { margin-left: auto; font-size: var(--text-xs); background: var(--color-primary); color: white; padding: 1px 6px; border-radius: var(--radius-full); min-width: 18px; text-align: center; } .admin-container[data-sidebar="collapsed"] .sidebar-brand, .admin-container[data-sidebar="collapsed"] .nav-section, .admin-container[data-sidebar="collapsed"] .nav-item > span, .admin-container[data-sidebar="collapsed"] .nav-badge { display: none; } .admin-container[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: var(--space-2); } /* ─── HEADER ─── */ .admin-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(17, 21, 31, 0.85); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid var(--border-subtle); height: var(--header-height); display: flex; align-items: center; padding: 0 var(--space-6); gap: var(--space-4); } :root[data-theme="light"] .admin-header { background: rgba(255, 255, 255, 0.85); } .header-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; } .header-toggle { background: transparent; border: 1px solid transparent; color: var(--text-tertiary); width: 32px; height: 32px; border-radius: var(--radius); display: grid; place-items: center; cursor: pointer; transition: all var(--transition-fast); font-size: 14px; } .header-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); } .admin-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--text-tertiary); font-weight: var(--weight-medium); min-width: 0; overflow: hidden; } .admin-breadcrumb a { color: var(--text-tertiary); font-weight: var(--weight-medium); white-space: nowrap; } .admin-breadcrumb a:hover { color: var(--text-primary); } .admin-breadcrumb .sep { color: var(--text-quaternary); font-size: 10px; } .admin-breadcrumb > span:last-child { color: var(--text-primary); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-right { display: flex; align-items: center; gap: var(--space-2); } /* Search trigger (opens cmd+k) */ .header-search-trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-tertiary); font-size: var(--text-sm); cursor: pointer; transition: all var(--transition-fast); min-width: 260px; font-family: inherit; } .header-search-trigger:hover { background: var(--bg-hover); border-color: var(--border-strong); } .header-search-trigger .kbd { margin-left: auto; } .kbd { display: inline-flex; align-items: center; padding: 1px 5px; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-tertiary); font-weight: var(--weight-medium); } /* Icon button (header actions) */ .icon-btn { position: relative; background: transparent; border: 1px solid transparent; color: var(--text-tertiary); width: 32px; height: 32px; border-radius: var(--radius); display: grid; place-items: center; cursor: pointer; transition: all var(--transition-fast); font-size: 14px; text-decoration: none; } .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); } .icon-btn .badge-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--color-danger-500); border-radius: var(--radius-full); border: 1.5px solid var(--bg-surface); } .notification-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-danger-500); color: white; border-radius: var(--radius-full); font-size: 0.625rem; font-weight: var(--weight-bold); display: grid; place-items: center; border: 2px solid var(--bg-surface); line-height: 1; pointer-events: none; } /* Ensure the notification icon-btn keeps its overflow visible so the badge can poke outside the 32x32 bounding box */ .admin-header .icon-btn { overflow: visible !important; position: relative !important; } .admin-header .icon-btn > i { position: relative; z-index: 1; } /* User menu trigger */ .user-trigger { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all var(--transition-fast); color: var(--text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); } .user-trigger:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-primary); } .user-avatar { width: 26px; height: 26px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-700)); display: grid; place-items: center; color: white; font-weight: var(--weight-semibold); font-size: var(--text-xs); } /* ─── MAIN CONTENT ─── */ .admin-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); } .admin-content { padding: var(--space-6) var(--space-8); max-width: var(--content-max-width); width: 100%; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .page-header-text h1 { margin-bottom: var(--space-1); } .page-header-text p { color: var(--text-tertiary); font-size: var(--text-base); } .page-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } /* ──────────────────────────────────────────────────────────── * 4. COMPONENTS * ──────────────────────────────────────────────────────────── */ /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-base); font-weight: var(--weight-medium); font-family: inherit; line-height: 1; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; height: 34px; min-width: fit-content; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: white; } .btn-secondary { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-danger { background: var(--color-danger-500); color: white; border-color: var(--color-danger-500); } .btn-danger:hover { background: var(--color-danger-600); border-color: var(--color-danger-600); color: white; } .btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); gap: var(--space-1); } .btn-lg { height: 40px; padding: 0 var(--space-5); font-size: var(--text-md); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ─── CARDS / SURFACES ─── */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { border-color: var(--border); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); } .card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); } .card-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); } /* KPI Stat Card */ .stat-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: all var(--transition-fast); position: relative; overflow: hidden; } .stat-card:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: var(--shadow); } .stat-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); } .stat-label { font-size: var(--text-sm); color: var(--text-tertiary); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; } .stat-icon { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-primary-bg); color: var(--color-primary); font-size: 14px; } .stat-icon.success { background: var(--bg-success); color: var(--color-success-500); } .stat-icon.warning { background: var(--bg-warning); color: var(--color-warning-500); } .stat-icon.danger { background: var(--bg-danger); color: var(--color-danger-500); } .stat-icon.info { background: var(--bg-info); color: var(--color-info-500); } .stat-value { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; } .stat-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); } .stat-trend { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--weight-semibold); font-size: var(--text-sm); padding: 2px 6px; border-radius: var(--radius-sm); } .stat-trend.up { color: var(--color-success-500); background: var(--bg-success); } .stat-trend.down { color: var(--color-danger-500); background: var(--bg-danger); } .stat-trend.flat { color: var(--text-tertiary); background: var(--bg-hover); } /* ─── BADGES ─── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; line-height: 1.4; } .badge-success { background: var(--bg-success); color: var(--color-success-500); } .badge-warning { background: var(--bg-warning); color: var(--color-warning-500); } .badge-danger { background: var(--bg-danger); color: var(--color-danger-500); } .badge-info { background: var(--bg-info); color: var(--color-info-500); } .badge-neutral { background: var(--bg-hover); color: var(--text-tertiary); } .badge-primary { background: var(--color-primary-bg); color: var(--color-primary); } /* ─── TABLES ─── */ .table-2026, .admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); } .table-2026 thead th, .admin-table thead th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--bg-base); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); border-bottom: 1px solid var(--border); position: sticky; top: var(--header-height); z-index: 1; } .table-2026 tbody td, .admin-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; } .table-2026 tbody tr, .admin-table tbody tr { transition: background var(--transition-fast); } .table-2026 tbody tr:hover, .admin-table tbody tr:hover { background: var(--bg-hover); } .table-2026 tbody td strong, .admin-table tbody td strong { color: var(--text-primary); font-weight: var(--weight-semibold); } .table-responsive { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: auto; } .table-responsive .admin-table thead th, .table-responsive .table-2026 thead th { background: var(--bg-surface); /* Inside .table-responsive the sticky context is the scroll container, so a page-level header offset would shove the thead off the top of row 1 — anchor to 0 instead. */ top: 0; } /* Generic page-level toolbar above content (search + actions) */ .page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .page-toolbar .toolbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .page-toolbar .toolbar-search { position: relative; flex: 1; min-width: 260px; max-width: 480px; } .page-toolbar .toolbar-search input { width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 24px); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .page-toolbar .toolbar-search input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 18%, transparent); } .page-toolbar .toolbar-search .toolbar-search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; font-size: var(--text-sm); } /* ─── FORMS ─── */ .admin-portal label, .form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-2); } .admin-portal input[type="text"], .admin-portal input[type="email"], .admin-portal input[type="password"], .admin-portal input[type="number"], .admin-portal input[type="search"], .admin-portal input[type="tel"], .admin-portal input[type="url"], .admin-portal input[type="date"], .admin-portal input[type="datetime-local"], .admin-portal textarea, .admin-portal select, .form-input { width: 100%; height: 36px; padding: 0 var(--space-3); font-size: var(--text-base); font-family: inherit; color: var(--text-primary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--transition-fast); } .admin-portal textarea, .form-input[as="textarea"] { height: auto; padding: var(--space-3); min-height: 80px; line-height: var(--leading-normal); resize: vertical; } .admin-portal input:focus, .admin-portal select:focus, .admin-portal textarea:focus, .form-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .admin-portal input::placeholder, .admin-portal textarea::placeholder { color: var(--text-quaternary); } .form-group { margin-bottom: var(--space-4); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } .form-help { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } .form-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .form-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); } /* ─── ALERTS ─── */ .alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--border-subtle); font-size: var(--text-base); align-items: flex-start; } .alert > i { margin-top: 2px; flex-shrink: 0; } .alert-success { background: var(--bg-success); border-color: rgba(16, 185, 129, 0.3); color: var(--color-success-500); } .alert-warning { background: var(--bg-warning); border-color: rgba(245, 158, 11, 0.3); color: var(--color-warning-500); } .alert-danger { background: var(--bg-danger); border-color: rgba(239, 68, 68, 0.3); color: var(--color-danger-500); } .alert-info { background: var(--bg-info); border-color: rgba(59, 130, 246, 0.3); color: var(--color-info-500); } /* ─── COMMAND PALETTE (Cmd+K) ─── */ .cmdk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-modal-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--transition); } .cmdk-backdrop.open { opacity: 1; pointer-events: auto; } .cmdk-panel { position: fixed; top: 15vh; left: 50%; transform: translateX(-50%) translateY(-8px); width: min(640px, 92vw); max-height: 60vh; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-modal); display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); } .cmdk-backdrop.open + .cmdk-panel, .cmdk-panel.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cmdk-input-wrap { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); } .cmdk-input-wrap > i { color: var(--text-tertiary); font-size: 16px; } .cmdk-input { flex: 1; border: none; background: transparent; outline: none; color: var(--text-primary); font-size: var(--text-md); font-family: inherit; } .cmdk-input::placeholder { color: var(--text-quaternary); } .cmdk-results { flex: 1; overflow-y: auto; padding: var(--space-2) 0; } .cmdk-group { padding: var(--space-2) 0; } .cmdk-group-label { padding: var(--space-1) var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-quaternary); font-weight: var(--weight-semibold); } .cmdk-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); cursor: pointer; transition: background var(--transition-fast); color: var(--text-secondary); font-size: var(--text-base); } .cmdk-item:hover, .cmdk-item[aria-selected="true"] { background: var(--bg-selected); color: var(--text-primary); } .cmdk-item-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-tertiary); font-size: 13px; flex-shrink: 0; } .cmdk-item-text { flex: 1; min-width: 0; } .cmdk-item-title { color: var(--text-primary); font-weight: var(--weight-medium); } .cmdk-item-subtitle { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 1px; } .cmdk-item-meta { font-size: var(--text-xs); color: var(--text-quaternary); flex-shrink: 0; } .cmdk-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); } .cmdk-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-quaternary); } .cmdk-footer .hint { display: flex; align-items: center; gap: var(--space-3); } /* ─── TOAST ─── */ .toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .toast { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-md); font-size: var(--text-base); color: var(--text-primary); min-width: 280px; max-width: 400px; display: flex; align-items: center; gap: var(--space-3); pointer-events: auto; animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .toast.success { border-left: 3px solid var(--color-success-500); } .toast.warning { border-left: 3px solid var(--color-warning-500); } .toast.danger { border-left: 3px solid var(--color-danger-500); } .toast.info { border-left: 3px solid var(--color-info-500); } /* ─── EMPTY STATE ─── */ .empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--text-tertiary); } .empty-state-icon { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--bg-base); border: 1px solid var(--border-subtle); display: grid; place-items: center; margin: 0 auto var(--space-4); color: var(--text-quaternary); font-size: 20px; } .empty-state-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); } /* ─── LOADING / SKELETON ─── */ .skeleton { background: linear-gradient( 90deg, var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100% ); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; border-radius: var(--radius); } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── UTILITIES ─── */ .stack > * + * { margin-top: var(--space-4); } .stack-sm > * + * { margin-top: var(--space-2); } .stack-lg > * + * { margin-top: var(--space-6); } .cluster { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .cluster-sm { gap: var(--space-2); } .cluster-lg { gap: var(--space-4); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } .muted { color: var(--text-tertiary); } .subtle { color: var(--text-quaternary); } .strong { color: var(--text-primary); font-weight: var(--weight-semibold); } .text-success { color: var(--color-success-500); } .text-warning { color: var(--color-warning-500); } .text-danger { color: var(--color-danger-500); } .flex-1 { flex: 1; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .items-center { align-items: center; } .hidden { display: none !important; } /* ─── NOTIFICATIONS PAGE ─── */ .notifications-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); flex-wrap: wrap; } .notifications-stats { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .notifications-stats .stat-item { display: flex; align-items: baseline; gap: var(--space-2); } .notifications-stats .stat-number { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1; } .notifications-stats .stat-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .notifications-container { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; } .notifications-list { display: flex; flex-direction: column; } .notification-item { display: grid; grid-template-columns: auto 1fr auto; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); transition: background-color 0.15s ease; position: relative; } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background: var(--bg-subtle); } .notification-item.unread { background: color-mix(in srgb, var(--color-primary-500) 6%, transparent); } .notification-item.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary-500); } .notification-item.unread:hover { background: color-mix(in srgb, var(--color-primary-500) 10%, transparent); } .notification-item .notification-icon { width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-lg); background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-subtle); } /* Type-specific icon backgrounds (read from the parent .notification-item type if needed; default uses neutral) */ .notification-item .notification-icon .fa-check-circle { color: var(--color-success-500); } .notification-item .notification-icon .fa-exclamation-circle { color: var(--color-danger-500); } .notification-item .notification-icon .fa-exclamation-triangle { color: var(--color-warning-500); } .notification-item .notification-icon .fa-info-circle { color: var(--color-info-500, var(--color-primary-500)); } .notification-item .notification-content { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .notification-item .notification-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .notification-item .notification-header h4 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); } .notification-item.read .notification-header h4 { font-weight: var(--weight-medium); color: var(--text-secondary); } .notification-item .notification-time { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; } .notification-item .notification-content p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); word-break: break-word; } .notification-item.read .notification-content p { color: var(--text-tertiary); } .notification-item .notification-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .notification-item .notification-actions .btn { padding: var(--space-2) var(--space-3); min-width: 36px; height: 36px; } /* Responsive: stack on small screens */ @media (max-width: 640px) { .notification-item { grid-template-columns: auto 1fr; grid-template-areas: "icon content" "actions actions"; } .notification-item .notification-icon { grid-area: icon; } .notification-item .notification-content { grid-area: content; } .notification-item .notification-actions { grid-area: actions; justify-content: flex-end; } .notifications-stats { gap: var(--space-4); } .notifications-stats .stat-number { font-size: var(--text-xl); } } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .admin-container { grid-template-columns: 1fr; } .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); z-index: var(--z-modal); transform: translateX(-100%); transition: transform var(--transition); box-shadow: var(--shadow-lg); } .admin-sidebar.show { transform: translateX(0); } .admin-content { padding: var(--space-4); } .header-search-trigger { min-width: auto; width: 36px; height: 32px; padding: 0; justify-content: center; } .header-search-trigger .search-placeholder, .header-search-trigger .kbd { display: none; } } /* ════════════════════════════════════════════════════════════════════════ * 5. AGGRESSIVE LEGACY OVERRIDES * * For pages that haven't been migrated yet and still ship with hardcoded * inline colors. Uses !important to beat inline `style="..."` attributes. * Scoped to body (not .admin-portal) so it works even on pages whose *
tag is missing the admin-portal class. * * The cost: a few !important rules. The win: every un-refactored admin * page instantly stops fighting the dark theme. * ════════════════════════════════════════════════════════════════════════ */ /* ── Inline white / light backgrounds → dark surface ────────────────── */ body [style*="background: white"], body [style*="background:white"], body [style*="background: #fff"], body [style*="background:#fff"], body [style*="background: #FFF"], body [style*="background:#FFF"], body [style*="background: #ffffff"], body [style*="background:#ffffff"], body [style*="background-color: white"], body [style*="background-color:white"], body [style*="background-color: #fff"], body [style*="background-color:#fff"], body [style*="background-color: #ffffff"] { background: var(--bg-surface) !important; color: var(--text-primary) !important; } /* Light pastel backgrounds (legacy purple #f0f4ff, gray-blue #f8fafc, etc.) */ body [style*="background: #f0f4ff"], body [style*="background:#f0f4ff"], body [style*="background: #f0fdf4"], body [style*="background: #fef3c7"], body [style*="background: #dbeafe"], body [style*="background: #fee2e2"], body [style*="background: #f8fafc"], body [style*="background: #f1f5f9"], body [style*="background: #f5f5f5"], body [style*="background: #fafafa"], body [style*="background:#fafafa"] { background: var(--bg-surface) !important; color: var(--text-primary) !important; } /* ── Legacy purple brand color (#667eea) → new indigo ───────────────── */ body [style*="color: #667eea"], body [style*="color:#667eea"] { color: var(--color-primary) !important; } body [style*="background: #667eea"], body [style*="background:#667eea"], body [style*="background-color: #667eea"] { background: var(--color-primary) !important; color: white !important; } body [style*="border: 2px solid #667eea"], body [style*="border:2px solid #667eea"], body [style*="border: 1px solid #667eea"], body [style*="border:1px solid #667eea"], body [style*="border-color: #667eea"], body [style*="border-color:#667eea"] { border-color: var(--color-primary) !important; } /* Gradient backgrounds (the legacy purple/blue gradient) */ body [style*="linear-gradient(135deg, #667eea"], body [style*="linear-gradient(135deg,#667eea"], body [style*="linear-gradient(to right, #667eea"] { background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700)) !important; color: white !important; } /* ── Dark text on (now-dark) surfaces → readable light text ─────────── */ body [style*="color: #1e293b"], body [style*="color:#1e293b"], body [style*="color: #0f172a"], body [style*="color:#0f172a"], body [style*="color: #111"], body [style*="color: #222"], body [style*="color: #333"], body [style*="color:#333"], body [style*="color: #1f2937"] { color: var(--text-primary) !important; } body [style*="color: #475569"], body [style*="color: #4b5563"], body [style*="color: #64748b"], body [style*="color:#64748b"], body [style*="color: #6b7280"], body [style*="color: #666"], body [style*="color:#666"], body [style*="color: #555"], body [style*="color:#555"] { color: var(--text-secondary) !important; } body [style*="color: #94a3b8"], body [style*="color: #9ca3af"], body [style*="color: #999"], body [style*="color:#999"] { color: var(--text-tertiary) !important; } /* ── Generic light borders → token borders ──────────────────────────── */ body [style*="border: 1px solid #e0e0e0"], body [style*="border:1px solid #e0e0e0"], body [style*="border: 1px solid #eee"], body [style*="border:1px solid #eee"], body [style*="border: 1px solid #ddd"], body [style*="border:1px solid #ddd"], body [style*="border: 1px solid #e2e8f0"], body [style*="border:1px solid #e2e8f0"], body [style*="border-top: 1px solid #e"], body [style*="border-bottom: 1px solid #e"] { border-color: var(--border) !important; } /* ── Legacy tables (without .table-2026 class) ──────────────────────── */ .admin-main table, .admin-content table { background: transparent !important; color: var(--text-secondary) !important; border-collapse: separate; border-spacing: 0; } .admin-main table thead th, .admin-content table thead th { background: var(--bg-base) !important; color: var(--text-tertiary) !important; border-bottom: 1px solid var(--border) !important; font-weight: var(--weight-semibold); } .admin-main table tbody td, .admin-content table tbody td { background: transparent !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-subtle) !important; } .admin-main table tbody tr:hover, .admin-content table tbody tr:hover { background: var(--bg-hover) !important; } /* ── Legacy form-card without .card class → re-skin via container ───── */ .admin-main .form-card, .admin-content .form-card, .admin-main .stats-card, .admin-main .info-card, .admin-main .data-card { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; color: var(--text-primary) !important; box-shadow: none !important; } /* Legacy section headings */ .admin-main h1, .admin-main h2, .admin-main h3, .admin-main h4, .admin-content h1, .admin-content h2, .admin-content h3, .admin-content h4 { color: var(--text-primary) !important; } /* Legacy inputs/selects/textareas — universally re-skin */ .admin-main input[type="text"], .admin-main input[type="email"], .admin-main input[type="password"], .admin-main input[type="number"], .admin-main input[type="search"], .admin-main input[type="tel"], .admin-main input[type="url"], .admin-main input[type="date"], .admin-main input[type="datetime-local"], .admin-main input[type="time"], .admin-main textarea, .admin-main select { background: var(--bg-raised) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } .admin-main input:focus, .admin-main textarea:focus, .admin-main select:focus { border-color: var(--border-focus) !important; box-shadow: var(--shadow-focus) !important; outline: none !important; } .admin-main label { color: var(--text-secondary) !important; } /* Legacy buttons — defensive re-skin */ .admin-main .btn-primary, .admin-content .btn-primary { background: var(--color-primary) !important; color: white !important; border: 1px solid var(--color-primary) !important; } .admin-main .btn-primary:hover, .admin-content .btn-primary:hover { background: var(--color-primary-hover) !important; border-color: var(--color-primary-hover) !important; } .admin-main .btn-secondary, .admin-content .btn-secondary { background: var(--bg-raised) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } .admin-main .btn-secondary:hover, .admin-content .btn-secondary:hover { background: var(--bg-hover) !important; border-color: var(--border-strong) !important; } .admin-main .btn-danger, .admin-content .btn-danger { background: var(--color-danger-500) !important; color: white !important; border: 1px solid var(--color-danger-500) !important; } /* Inline padding/margin patterns that imply card-like containers */ body div[style*="padding: 20px"][style*="background"], body div[style*="padding:20px"][style*="background"], body div[style*="padding: 24px"][style*="background"], body div[style*="padding: 16px"][style*="background"], body div[style*="padding: 30px"][style*="background"] { border-radius: var(--radius-lg) !important; border: 1px solid var(--border-subtle) !important; } /* Legacy alert backgrounds */ body [class*="alert-success"]:not(.alert) { background: var(--bg-success) !important; border-color: rgba(16, 185, 129, 0.3) !important; color: var(--color-success-500) !important; padding: var(--space-3) var(--space-4) !important; border-radius: var(--radius) !important; } body [class*="alert-error"]:not(.alert), body [class*="alert-danger"]:not(.alert) { background: var(--bg-danger) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: var(--color-danger-500) !important; padding: var(--space-3) var(--space-4) !important; border-radius: var(--radius) !important; } body [class*="alert-warning"]:not(.alert) { background: var(--bg-warning) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: var(--color-warning-500) !important; padding: var(--space-3) var(--space-4) !important; border-radius: var(--radius) !important; } body [class*="alert-info"]:not(.alert) { background: var(--bg-info) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: var(--color-info-500) !important; padding: var(--space-3) var(--space-4) !important; border-radius: var(--radius) !important; } /* ── Strip
styling and re-skin to a subtle divider ─────────────── */ .admin-main hr, .admin-content hr { border: none !important; border-top: 1px solid var(--border-subtle) !important; margin: var(--space-5) 0 !important; } /* ── TABS (settings page + other tabbed UIs) ────────────────────────── */ .settings-tabs, .tabs-2026, .admin-main .tab-list { display: flex !important; gap: var(--space-1) !important; background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; padding: var(--space-1) !important; margin-bottom: var(--space-5) !important; overflow-x: auto !important; flex-wrap: wrap !important; } .settings-tabs .tab-btn, .tabs-2026 .tab-btn, .tab-btn { display: inline-flex !important; align-items: center !important; gap: var(--space-2) !important; padding: var(--space-2) var(--space-4) !important; font-size: var(--text-base) !important; font-weight: var(--weight-medium) !important; font-family: inherit !important; color: var(--text-tertiary) !important; background: transparent !important; border: none !important; border-radius: var(--radius) !important; cursor: pointer !important; transition: all var(--transition-fast) !important; white-space: nowrap !important; } .settings-tabs .tab-btn:hover, .tabs-2026 .tab-btn:hover, .tab-btn:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } .settings-tabs .tab-btn.active, .tabs-2026 .tab-btn.active, .tab-btn.active { background: var(--color-primary-bg) !important; color: var(--color-primary) !important; } /* Tab content panels */ .tab-content, .tab-panel { display: none; } .tab-content.active, .tab-panel.active { display: block; } /* ── DETAILS / SUMMARY popovers (used in invoices action menu) ─────── */ .admin-main details > summary, .admin-content details > summary { list-style: none; } .admin-main details > summary::-webkit-details-marker, .admin-content details > summary::-webkit-details-marker { display: none; } /* ── Checkbox + radio re-skin ───────────────────────────────────────── */ .admin-main input[type="checkbox"], .admin-main input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; } /* ── PHP-rendered "saas-card" legacy class — re-skin ────────────────── */ .admin-main .saas-card, .admin-content .saas-card, .admin-main .saas-stat, .admin-main .saas-page { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; color: var(--text-primary) !important; padding: var(--space-5) !important; margin-bottom: var(--space-4) !important; } .admin-main .saas-stats-row, .admin-content .saas-stats-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: var(--space-4) !important; margin-bottom: var(--space-5) !important; } .admin-main .saas-stat-value { font-size: var(--text-3xl) !important; font-weight: var(--weight-bold) !important; color: var(--text-primary) !important; line-height: 1 !important; } .admin-main .saas-stat-label { font-size: var(--text-sm) !important; color: var(--text-tertiary) !important; margin-top: var(--space-2) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: var(--weight-medium) !important; } .admin-main .saas-card-title, .admin-main .saas-card-header h2 { font-size: var(--text-md) !important; font-weight: var(--weight-semibold) !important; color: var(--text-primary) !important; margin-bottom: var(--space-3) !important; } /* ════════════════════════════════════════════════════════════════════ * LEGACY CSS VARIABLE ALIASES * Many older pages (team.php, work-tasks.php, etc.) reference * --admin-primary, --admin-card-bg, --admin-text-muted, etc. * Map those to our new tokens so the page renders correctly under * the new theme without touching each page's inline