/* * Unixpower Control Hub — Design System CSS * ============================================================================= * DO NOT embed in base.html. Import in : * * ============================================================================= */ /* ── Font Loading ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap'); /* ═══════════════════════════════════════════════════════════════ THEME ENGINE — CSS Custom Properties Set via `theme` variable: "power-grid" | "midnight-ops" | "coral-reef" ═══════════════════════════════════════════════════════════════ */ :root { /* ── Base palette (Power Grid — industrial orange on charcoal) ── */ --bg-main: #0a0a0c; --bg-sidebar: #060608; --surface: #111114; --surface-hover: #1a1a1e; --surface-raised: #18181d; --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(232,100,44,0.10); --border-input: rgba(255,255,255,0.10); --accent: #e8642c; --accent-hover: #f37d4b; --accent-glow: rgba(232,100,44,0.12); --accent-bg: rgba(232,100,44,0.06); --accent-text: #f5a47a; --text-primary: #f5f5f7; --text-secondary: #c5c5cb; --text-muted: #a1a1aa; --success: #10b981; --success-bg: rgba(16,185,129,0.08); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.08); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.08); --info: #3b82f6; --info-bg: rgba(59,130,246,0.08); --info-glow: rgba(59,130,246,0.15); --paused: #8b5cf6; --paused-bg: rgba(139,92,246,0.12); /* DELIBERATE TYPEFACE — Inter + JetBrains Mono (not system default) */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-display: 2rem; --fs-heading: 1.25rem; --fs-card-title: 0.8125rem; --fs-body: 0.8125rem; --fs-body-sm: 0.75rem; --fs-label: 0.625rem; --fs-mono: 0.75rem; --fs-mono-sm: 0.625rem; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-content: 32px; /* named exception — live main padding 2rem */ --border-strong: #2d2d38; --surface-elevated: #16161b; --sidebar-width: 250px; --sidebar-collapsed: 60px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px var(--border-card); --transition: 0.2s ease; } .text-display { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .text-heading { font-size: var(--fs-heading); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .text-card-title { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; } .text-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; } .text-body-sm { font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.5; } .text-label { font-size: var(--fs-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; } .text-mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; } .text-mono-sm { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; text-transform: uppercase; } /* ── Midnight Ops Theme ── */ [data-theme="midnight-ops"] { --bg-main: #000000; --bg-sidebar: #000000; --surface: #0a0a0a; --surface-hover: #141414; --surface-raised: #111111; --border-subtle: #1a1a1a; --border-card: rgba(0,240,255,0.12); --border-input: rgba(0,240,255,0.10); --accent: #00f0ff; --accent-hover: #33f5ff; --accent-glow: rgba(0,240,255,0.15); --accent-bg: rgba(0,240,255,0.06); --accent-text: #66f8ff; --success: #00ff66; --warning: #ffaa00; --danger: #ff0055; --info: #00b4d8; --shadow-card: 0 1px 3px rgba(0,0,0,0.6), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.5), 0 0 1px var(--border-card); } /* ── Coral Reef Theme ── */ [data-theme="coral-reef"] { --bg-main: #0a0f1d; --bg-sidebar: #060a14; --surface: #141e33; --surface-hover: #1c2a44; --surface-raised: #111a2e; --border-subtle: rgba(20,184,166,0.08); --border-card: rgba(244,63,94,0.10); --border-input: rgba(255,255,255,0.08); --accent: #f43f5e; --accent-hover: #fb7185; --accent-glow: rgba(244,63,94,0.15); --accent-bg: rgba(244,63,94,0.06); --accent-text: #fda4af; --success: #2dd4bf; --success-bg: rgba(45,212,191,0.08); --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.08); --danger: #f87171; --danger-bg: rgba(248,113,113,0.08); --info: #38bdf8; --info-bg: rgba(56,189,248,0.08); --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.4), 0 0 1px var(--border-card); } /* ── LIGHT MODE (default 2026-08-11) ── Dark palettes above are the base; light is an additive override applied when . Set by the FOUC script in base.html — default light unless the user picked dark. */ :root[data-mode="light"] { --bg-main: #f4f4f5; --bg-sidebar: #ececef; --surface: #ffffff; --surface-hover: #f0f0f3; --surface-raised: #fafafa; --surface-elevated: #f7f7f9; --border-subtle: rgba(24,24,27,0.10); --border-card: rgba(232,100,44,0.18); --border-input: rgba(24,24,27,0.14); --border-strong: #d4d4d8; --accent: #e8642c; --accent-hover: #d4561f; --accent-glow: rgba(232,100,44,0.14); --accent-bg: rgba(232,100,44,0.08); --accent-text: #b3471f; --text-primary: #18181b; --text-secondary: #3f3f46; --text-muted: #64646b; --success: #059669; --success-bg: rgba(5,150,105,0.10); --warning: #d97706; --warning-bg: rgba(217,119,6,0.10); --danger: #dc2626; --danger-bg: rgba(220,38,38,0.10); --info: #2563eb; --info-bg: rgba(37,99,235,0.10); --info-glow: rgba(37,99,235,0.16); --paused: #7c3aed; --paused-bg: rgba(124,58,237,0.12); --shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.08), 0 0 1px var(--border-card); } /* ── Midnight Ops — light variant ── */ [data-theme="midnight-ops"][data-mode="light"] { --bg-main: #f2f6f9; --bg-sidebar: #e8eef3; --surface: #ffffff; --surface-hover: #e9eef3; --surface-raised: #f7fafc; --surface-elevated: #f4f8fa; --border-subtle: rgba(8,145,178,0.14); --border-card: rgba(8,145,178,0.20); --border-input: rgba(8,145,178,0.18); --accent: #0891b2; --accent-hover: #0e7490; --accent-glow: rgba(8,145,178,0.15); --accent-bg: rgba(8,145,178,0.08); --accent-text: #155e75; --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.08), 0 0 1px var(--border-card); } /* ── Coral Reef — light variant ── */ [data-theme="coral-reef"][data-mode="light"] { --bg-main: #fdf6f4; --bg-sidebar: #f9ecea; --surface: #ffffff; --surface-hover: #fbeceb; --surface-raised: #fffafa; --surface-elevated: #fdf7f6; --border-subtle: rgba(225,29,72,0.12); --border-card: rgba(225,29,72,0.16); --border-input: rgba(24,24,27,0.14); --accent: #e11d48; --accent-hover: #be123c; --accent-glow: rgba(225,29,72,0.14); --accent-bg: rgba(225,29,72,0.08); --accent-text: #9f1239; --success: #0d9488; --success-bg: rgba(13,148,136,0.10); --warning: #d97706; --warning-bg: rgba(217,119,6,0.10); --danger: #dc2626; --danger-bg: rgba(220,38,38,0.10); --info: #2563eb; --info-bg: rgba(37,99,235,0.10); --shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--border-subtle); --shadow-kpi: 0 2px 8px rgba(0,0,0,0.08), 0 0 1px var(--border-card); } :root[data-mode="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(24,24,27,0.18); } /* ═══════════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg-main); color: var(--text-secondary); min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: radial-gradient(circle at 80% 20%, var(--accent-glow) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(59,130,246,0.04) 0%, transparent 50%); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--accent-bg); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); } /* ═══════════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════════ */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; z-index: 100; transition: transform var(--transition), width var(--transition); } .sidebar-brand { padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-sm); } .sidebar-brand .brand-icon { width: 36px; height: 36px; background: var(--accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #000; box-shadow: 0 0 12px var(--accent-glow); flex-shrink: 0; } .sidebar-brand .brand-icon svg { width: 18px; height: 18px; } .sidebar-brand .brand-text { font-weight: 700; font-size: var(--fs-heading); color: var(--text-primary); } .sidebar-brand .brand-sub { font-size: var(--fs-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar-nav { flex: 1; padding: var(--space-sm); overflow-y: auto; } .sidebar-nav-section { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: var(--space-sm) var(--space-sm) var(--space-xs); } .sidebar-nav a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-body); font-weight: 450; transition: all var(--transition); margin-bottom: var(--space-xs); } .sidebar-nav a:hover { background: var(--surface-hover); color: var(--text-primary); } .sidebar-nav a.active { background: var(--accent-bg); color: var(--accent-text); border-left: 2px solid var(--accent); padding-left: calc(0.75rem - 2px); } .sidebar-nav a .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; display: flex; align-items: center; justify-content: center; } .sidebar-nav a .nav-icon svg { width: 18px; height: 18px; } .sidebar-nav a.active .nav-icon { opacity: 1; } .sidebar-footer { padding: var(--space-sm); border-top: 1px solid var(--border-subtle); } .sidebar-footer a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); color: var(--text-muted); text-decoration: none; font-size: var(--fs-body); border-radius: var(--radius-sm); transition: all var(--transition); } .sidebar-footer a:hover { color: var(--text-secondary); background: var(--surface-hover); } /* ── Sidebar Mobile Toggle ── */ .sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 110; background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); cursor: pointer; color: var(--text-secondary); } .sidebar-toggle svg { width: 20px; height: 20px; } .sidebar-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99; } /* ═══════════════════════════════════════════════════════════════ MAIN CONTENT AREA ═══════════════════════════════════════════════════════════════ */ .main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .main-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-content); border-bottom: 1px solid var(--border-subtle); background: var(--bg-sidebar); position: sticky; top: 0; z-index: 50; } .main-header h1 { font-size: var(--fs-heading); font-weight: 700; color: var(--text-primary); } .main-header .header-actions { display: flex; align-items: center; gap: var(--space-md); } .main-header .header-actions .user-name { font-size: var(--fs-body); color: var(--text-secondary); } .main-content { padding: var(--space-content); flex: 1; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — KPI Cards ═══════════════════════════════════════════════════════════════ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .kpi-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-kpi); transition: all var(--transition); position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity var(--transition); } .kpi-card:hover::before { opacity: 1; } .kpi-card .kpi-value { font-family: var(--font-mono); font-size: var(--fs-heading); font-weight: 700; color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-card .kpi-trend { font-size: var(--fs-mono-sm); font-weight: 600; margin-top: var(--space-xs); display: inline-flex; align-items: center; gap: var(--space-xs); } .kpi-card .kpi-trend.up { color: var(--success); } .kpi-card .kpi-trend.down { color: var(--danger); } .kpi-card .kpi-label { font-size: var(--fs-label); color: var(--text-muted); margin-top: var(--space-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .kpi-card.warning .kpi-value { color: var(--warning); } .kpi-card.danger .kpi-value { color: var(--danger); } .kpi-card.success .kpi-value { color: var(--success); } .kpi-card .kpi-header { display: flex; align-items: baseline; gap: var(--space-sm); } .kpi-card .kpi-delta { font-size: var(--fs-mono-sm); font-weight: 600; padding: var(--space-xs) var(--space-sm); border-radius: 4px; white-space: nowrap; } .kpi-delta.delta-up { color: var(--success); background: rgba(16,185,129,0.1); } .kpi-delta.delta-down { color: var(--danger); background: rgba(244,63,94,0.1); } .kpi-delta.delta-neutral { color: var(--text-muted); } .hub-dense-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; } .kpi-card .kpi-sparkline { width: 100%; height: 36px; margin-top: var(--space-sm); opacity: 0.7; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Cards & Panels ═══════════════════════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-lg); } .card.form-narrow { max-width: 36rem; padding: var(--space-md); } .card-header { padding: var(--space-md) var(--space-md); border-bottom: 1px solid var(--border-subtle); font-weight: 600; font-size: var(--fs-card-title); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; } .card-body { padding: var(--space-md); } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Tables ═══════════════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); } th { text-align: left; padding: var(--space-sm) var(--space-sm); color: var(--text-muted); font-weight: 600; font-size: var(--fs-mono-sm); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } td { padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); } tr:hover td { background: var(--surface-hover); } tr:last-child td { border-bottom: none; } td a { color: var(--accent-text); text-decoration: none; font-weight: 500; } td a:hover { text-decoration: underline; } /* ── tabular-nums for aligned data columns ── */ .tabular-nums { font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Badges ═══════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 4px; font-size: var(--fs-mono-sm); font-weight: 500; white-space: nowrap; } .badge svg { width: 12px; height: 12px; flex-shrink: 0; } .badge-open { background: var(--info-glow); color: var(--info); } .badge-invoice { background: var(--accent-glow); color: var(--accent); } .badge-progress { background: var(--warning-bg); color: var(--warning); } .badge-done { background: var(--success-bg); color: var(--success); } .badge-closed { background: rgba(110,110,119,0.15); color: var(--text-secondary); } .badge-incomplete { background: var(--danger-bg); color: var(--danger); } .badge-paused { background: var(--paused-bg); color: var(--paused); } .badge-critical { background: var(--danger-bg); color: var(--danger); } .badge-high { background: var(--accent-glow); color: var(--accent); } .badge-medium { background: var(--warning-bg); color: var(--warning); } .badge-low { background: rgba(110,110,119,0.15); color: var(--text-muted); } .login-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-lg); } /* Shared admin table (audit M3 — replaces per-cell inline styles that drifted from .table-wrap; admin pages previously duplicated these rules inline). */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-mono-sm); color: var(--text-muted); } .table td { padding: var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--border-subtle); } /* List-page pagination footer (audit L2 — server-side pages, hx-get swap). */ .pagination { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-subtle); } /* ── Case-insensitive status/priority fallbacks (data-* attributes) ── */ [data-status="open" i] { background: var(--info-glow); color: var(--info); } [data-status="in progress" i] { background: var(--warning-bg); color: var(--warning); } [data-status="resolved" i] { background: var(--success-bg); color: var(--success); } [data-status="closed" i] { background: rgba(110,110,119,0.15); color: var(--text-secondary); } [data-status="assigned" i] { background: var(--info-glow); color: var(--info); } [data-status="travel" i] { background: var(--warning-bg); color: var(--warning); } [data-status="on site" i] { background: var(--warning-bg); color: var(--warning); } [data-status="completed" i] { background: var(--success-bg); color: var(--success); } [data-priority="critical" i] { background: var(--danger-bg); color: var(--danger); } [data-priority="high" i] { background: var(--accent-glow); color: var(--accent); } [data-priority="medium" i] { background: var(--warning-bg); color: var(--warning); } [data-priority="low" i] { background: rgba(110,110,119,0.15); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Buttons ═══════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--fs-body); font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: all var(--transition); font-family: var(--font-sans); } .btn-primary { background: var(--accent); color: #000; } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); } .btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-input); } .btn-outline:hover { border-color: var(--accent); color: var(--text-primary); background: var(--surface-hover); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { color: var(--text-primary); background: var(--surface-hover); } .btn:active { transform: scale(0.97); transition: 100ms ease-out; } .btn-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-mono-sm); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { opacity: 0.9; } /* ── Disabled state ── */ .btn:disabled, .btn[disabled], .btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .btn-primary:disabled { box-shadow: none; } /* Hide native file control; label.btn-primary is the Upload file control */ .file-input-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Focus-visible (accessible focus rings) ── */ .btn:focus-visible, .sidebar-nav a:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Forms ═══════════════════════════════════════════════════════════════ */ .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-xs); } .form-group .required::after { content: " *"; color: var(--danger); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-sm) var(--space-sm); background: var(--surface-hover); border: 1px solid var(--border-input); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-body); font-family: var(--font-sans); transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: 0.4; cursor: not-allowed; } .form-textarea { min-height: 120px; resize: vertical; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Flash / Alerts ═══════════════════════════════════════════════════════════════ */ .alert { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--fs-body); margin-bottom: var(--space-md); border: 1px solid transparent; display: flex; align-items: center; gap: var(--space-sm); } .alert svg { width: 16px; height: 16px; flex-shrink: 0; } .alert-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,0.2); } .alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(16,185,129,0.2); } .alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(245,158,11,0.2); } .alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(59,130,246,0.2); } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Loading / Empty / Error States ═══════════════════════════════════════════════════════════════ */ /* ── HTMX Loading Indicator ── */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-xs); } .htmx-request.htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-xs); } /* ── Inline Spinner ── */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-input); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Skeleton Loading ── */ .skeleton { background: var(--surface-hover); border-radius: var(--radius-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .skeleton-text { height: 0.85rem; margin-bottom: var(--space-sm); } .skeleton-heading { height: 1.2rem; width: 60%; margin-bottom: var(--space-sm); } .skeleton-row { height: 0.75rem; margin-bottom: var(--space-xs); } /* ── Empty State ── */ .empty-state { text-align: center; padding: var(--space-xl) var(--space-lg); color: var(--text-muted); } .empty-state svg { width: 48px; height: 48px; margin-bottom: var(--space-sm); opacity: 0.3; } .empty-state .empty-title { font-size: var(--fs-card-title); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-xs); } .empty-state .empty-subtitle { font-size: var(--fs-body); } /* ── HTMX Settling Transition ── */ .htmx-settling { opacity: 0; transition: opacity 0.15s ease; } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Modal ═══════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.2s ease; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--surface); border: 1px solid var(--border-strong, #2d2d38); border-radius: var(--radius-md); padding: var(--space-lg); max-width: 540px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: modalSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: var(--space-md); } @keyframes modalSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-box .modal-header { display: flex; align-items: center; justify-content: space-between; } .modal-box .modal-header h3 { font-size: var(--fs-card-title); font-weight: 600; color: var(--text-primary); margin: 0; } .modal-box .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-heading); padding: var(--space-xs); line-height: 1; } .modal-box .modal-close:hover { color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════ COMPONENTS — Toast ═══════════════════════════════════════════════════════════════ */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; } .toast { background: var(--surface-elevated, #16161b); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--fs-body); color: var(--text-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.4); pointer-events: auto; animation: toastSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); max-width: 360px; } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast.toast-success { border-left-color: var(--success); } .toast.toast-error { border-left-color: var(--danger); } .toast.toast-warning { border-left-color: var(--warning); } .toast-fade-out { animation: toastFadeOut 0.3s ease forwards; } @keyframes toastFadeOut { to { opacity: 0; transform: translateX(50px); } } /* ═══════════════════════════════════════════════════════════════ UTILITY ═══════════════════════════════════════════════════════════════ */ .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-2 { gap: var(--space-sm); } .mt-4 { margin-top: var(--space-md); } .mb-4 { margin-bottom: var(--space-md); } .text-muted { color: var(--text-muted); } .text-sm { font-size: var(--fs-body); } .hub-version { font-size: var(--fs-mono-sm); } /* base.html + login.html 10px */ .mono { font-family: var(--font-mono); } /* ── Theme Switcher (dev only) ── */ .theme-switcher { position: fixed; bottom: 1rem; right: 1rem; z-index: 999; display: flex; gap: var(--space-sm); } .theme-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-input); transition: all var(--transition); } .theme-mode { width: 26px; height: 22px; border-radius: 6px; cursor: pointer; border: 2px solid var(--border-input); background: var(--surface); font-size: var(--fs-body); line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); } .theme-mode:hover { border-color: var(--accent); } .theme-mode.active { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .theme-dot:hover { border-color: var(--accent); } .theme-dot.active { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .theme-dot.power-grid { background: #e8642c; } .theme-dot.midnight-ops { background: #00f0ff; } .theme-dot.coral-reef { background: #f43f5e; } /* Utilisation split-inspect (Hub only, mockup B) */ .util-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); gap: var(--space-md); align-items: start; } .util-kpis { margin-bottom: var(--space-sm); } .week-bar { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); } .week-label { font-family: var(--font-mono); font-size: var(--fs-body); } .util-insight { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--fs-body); color: var(--text-secondary); } .util-insight strong { color: var(--text-primary); } .util-tabs { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) 0; flex-wrap: wrap; } .util-tabs button { border: 1px solid transparent; background: none; padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-body); font-family: var(--font-sans); color: var(--text-muted); cursor: pointer; } .util-tabs button[aria-selected="true"] { background: var(--accent-bg); color: var(--accent-text); } .util-band { display: inline-block; font-size: var(--fs-body-sm); font-weight: 600; padding: var(--space-xs) var(--space-sm); border-radius: 4px; background: var(--surface-elevated); color: var(--text-muted); } .util-band-lt60 { background: var(--surface-elevated); color: var(--text-muted); } .util-band-60-85 { background: var(--success-bg); color: var(--success); } .util-band-gt85 { background: var(--warning-bg); color: var(--warning); } .util-band-gt100 { background: var(--danger-bg); color: var(--danger); } .util-drill { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); position: sticky; top: 1rem; } .util-drill-kicker { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .util-drill-sub { font-size: var(--fs-body); color: var(--text-muted); margin: var(--space-xs) 0 var(--space-sm); } [x-cloak] { display: none !important; } @media (max-width: 900px) { .util-split { display: block; } .util-drill { position: static; margin-top: var(--space-md); } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════════════════ */ /* md — collapse sidebar to icon-only rail */ @media (max-width: 768px) { :root { --sidebar-width: 60px; } .sidebar { width: 60px; transform: none; overflow: hidden; } .sidebar-brand { padding: var(--space-md) var(--space-sm); justify-content: center; } .sidebar-brand .brand-text, .sidebar-brand .brand-sub { display: none; } .sidebar-nav { padding: var(--space-sm) var(--space-xs); } .sidebar-nav-section { display: none; } .sidebar-nav a { justify-content: center; padding: var(--space-sm) 0; font-size: 0; gap: 0; } .sidebar-nav a .nav-icon { margin: 0; } .sidebar-nav a.active { border-left: none; border-right: 2px solid var(--accent); } .sidebar-footer a { justify-content: center; font-size: 0; padding: var(--space-sm) 0; } .sidebar-footer a svg { margin: 0; } .main { margin-left: 60px; } .main-header { padding: var(--space-md) var(--space-md); } .main-content { padding: var(--space-md); } } .sig-paper { display: inline-block; background: #ffffff; padding: var(--space-xs); line-height: 0; } .sig-paper img { max-height: 96px; background: #ffffff; } /* sm — fully stacked */ @media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } .main-header { flex-wrap: wrap; gap: var(--space-sm); } .main-header .header-actions { font-size: var(--fs-body); } } .roster-selects { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; } .roster-selects > div { flex: 0 1 auto; } .roster-selects .roster-select { width: auto; min-width: 10rem; max-width: 16rem; } .roster-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xs); } .roster-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--surface-elevated); border: 1px solid var(--border-card); font-size: var(--fs-body-sm); } .roster-suggest { list-style: none; margin: var(--space-xs) 0 0; padding: 0; border: 1px solid var(--border-card); background: var(--surface); max-height: 12rem; overflow: auto; } .roster-suggest button { display: block; width: 100%; text-align: left; padding: var(--space-xs) var(--space-sm); background: none; border: 0; cursor: pointer; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }