/* ================================================================ Project Zeratul — app.css Wolfstone Equity | Private Capital Advisory Portal Table of contents: 00. Design tokens 01. Reset & base 02. Typography scale 03. Layout & shell structure 04. Top bar 05. Navigation bar 06. Client selector dropdown 07. Page content & sections 08. Cards & surfaces 09. Data tables 10. Form controls 11. Buttons 12. Badges & status indicators 13. Modals & overlays 14. Toast notifications 15. Loading & empty states 16. Charts & data viz helpers 17. Utility classes 18. Scrollbar 19. Animations & keyframes 20. Admin shell overrides 21. Portal shell overrides 22. Login / terminal screen 23. Loading screen 24. Print overrides ================================================================ */ /* ================================================================ 00. DESIGN TOKENS ================================================================ */ :root { /* ================================================================ PALETTE — Wolfstone Equity Light-mode by default; dark-mode via [data-theme="dark"] or .theme-dark on /. ================================================================ */ /* ── Brand anchor colors (theme-invariant) ───────────────────── */ --gold: #A8843A; /* primary gold — works on light */ --gold-light: #C4A060; /* hover / emphasis */ --gold-muted: #7A6028; /* subdued accent */ --gold-dim: #EDE4D0; /* gold-tinted fill on light bg */ --gold-faint: rgba(168, 132, 58, 0.08); /* ── Stone (dark neutrals — used for text on light bg) ──────── */ --stone: #1C1A16; --stone-deep: #141210; --stone-darker: #0E0D0B; --stone-mid: #5A5650; --stone-light: #8A8278; --stone-border: #D4D0C8; /* ── Neutral surfaces (light mode) ──────────────────────────── */ --cream: #1C1A18; /* primary text on light bg */ --cream-dark: #2C2A26; /* headings */ --cream-muted: #6A6660; /* secondary text */ --white: #FFFFFF; /* ── Semantic surface tokens — LIGHT MODE ────────────────────── */ --bg: #F2F0EC; /* warm off-white page bg */ --surface: #FFFFFF; /* card / panel */ --surface-raised: #FAFAF8; /* slightly elevated card */ --surface-hover: #F5F3EE; /* row / item hover */ --surface-active: #EDE9DF; /* selected / pressed */ /* ── Border tokens — LIGHT MODE ─────────────────────────────── */ --border: #E2DED6; /* standard border */ --border-subtle: #EDEAE4; /* very faint separator */ --border-strong: #C8C4BC; /* emphasized border */ /* ── Status colors ───────────────────────────────────────────── */ --success: #2E7D52; --success-dim: rgba(46, 125, 82, 0.10); --success-text: #1E6040; --warning: #A06820; --warning-dim: rgba(160, 104, 32, 0.10); --warning-text: #7A4E14; --danger: #B03030; --danger-dim: rgba(176, 48, 48, 0.10); --danger-text: #8A2020; --info: #2A5E8C; --info-dim: rgba(42, 94, 140, 0.10); --info-text: #1C4870; /* ── Typography ──────────────────────────────────────────────── */ --font-display: 'Jost', sans-serif; --font-ui: 'Plus Jakarta Sans', sans-serif; --font-mono: 'Courier New', 'Lucida Console', monospace; /* ── Font sizes ──────────────────────────────────────────────── */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; /* ── Shell dimensions ────────────────────────────────────────── */ --topbar-h: 56px; --nav-h: 44px; --shell-offset: calc(var(--topbar-h) + var(--nav-h)); /* ── Spacing scale ───────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Border radius ───────────────────────────────────────────── */ --radius-sm: 2px; --radius: 3px; --radius-md: 4px; --radius-lg: 6px; /* ── Shadows ─────────────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16); /* ── Transitions ─────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --t-fast: 0.12s; --t-base: 0.20s; --t-slow: 0.35s; /* ── Z-index stack ───────────────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-dropdown: 200; --z-sticky: 500; --z-topbar: 700; --z-nav: 600; --z-modal: 800; --z-toast: 900; --z-overlay: 8000; --z-loading: 9999; } /* ── DARK MODE TOKEN OVERRIDES ───────────────────────────────── */ /* Apply class="theme-dark" to or to activate. */ .theme-dark, [data-theme="dark"] { --gold: #BFA36A; --gold-light: #D9C48A; --gold-muted: #8C7240; --gold-dim: #6B5530; --gold-faint: rgba(191, 163, 106, 0.08); --cream: #F4F0E6; --cream-dark: #E8E2D4; --cream-muted: #B8B09E; --bg: #1E1C18; --surface: #232118; --surface-raised: #2A2820; --surface-hover: #302E28; --surface-active: #353228; --border: #2C2A24; --border-subtle: #252320; --border-strong: #3A3830; --stone-mid: #3A362E; --stone-light: #7A7060; --success: #4E8A62; --success-dim: rgba(78, 138, 98, 0.15); --success-text: #7AB890; --warning: #BA8A2E; --warning-dim: rgba(186, 138, 46, 0.15); --warning-text: #D4AA60; --danger: #8C3A30; --danger-dim: rgba(140, 58, 48, 0.15); --danger-text: #C07060; --info: #4A6E8C; --info-dim: rgba(74, 110, 140, 0.15); --info-text: #80A8C8; } /* ================================================================ 01. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; font-size: var(--text-base); scroll-behavior: smooth; text-size-adjust: 100%; } body { height: 100%; background: var(--bg); color: var(--cream); font-family: var(--font-ui); font-size: var(--text-base); font-weight: 400; line-height: 1.55; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: var(--gold); text-decoration: none; transition: color var(--t-base); } a:hover { color: var(--gold-light); } img, svg { display: block; max-width: 100%; } button { font-family: var(--font-ui); cursor: pointer; } input, select, textarea { font-family: var(--font-ui); font-size: var(--text-base); } /* Remove number input spinners */ input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; } /* Selection color */ ::selection { background: var(--gold-dim); color: var(--cream); } /* ================================================================ 02. TYPOGRAPHY SCALE ================================================================ */ /* Display — Jost only */ .display-xl { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 300; letter-spacing: 0.04em; line-height: 1.15; color: var(--cream); } .display-lg { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; letter-spacing: 0.06em; line-height: 1.2; color: var(--cream); } /* Page headings — Jost */ h1, .h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; letter-spacing: 0.06em; line-height: 1.25; color: var(--cream); } h2, .h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: 0.05em; line-height: 1.3; color: var(--cream); } /* Section headings — Jost */ h3, .h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; color: var(--cream-dark); } /* Card headings — Plus Jakarta Sans */ h4, .h4 { font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; color: var(--cream-dark); } h5, .h5 { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; color: var(--cream-muted); } h6, .h6 { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-light); } /* KPI / stat callout numbers — Jost */ .kpi-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; letter-spacing: 0.03em; line-height: 1; color: var(--cream); } .kpi-value-lg { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 200; letter-spacing: 0.02em; line-height: 1; color: var(--cream); } .kpi-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-light); margin-top: var(--sp-2); } /* Body text helpers */ .text-muted { color: var(--stone-light); } .text-dim { color: var(--cream-muted); } .text-gold { color: var(--gold); } .text-success { color: var(--success-text); } .text-warning { color: var(--warning-text); } .text-danger { color: var(--danger-text); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); } .text-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em; } .label-upper { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-light); } /* Numeric tabular figures */ .tabnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: 0; } /* ================================================================ 03. LAYOUT & SHELL STRUCTURE ================================================================ */ .hidden { display: none !important; } /* The three mutually exclusive authenticated shells */ #app-shell, #portal-shell, #admin-shell { display: flex; flex-direction: column; min-height: 100vh; } /* Main content scrolls; topbar and nav are fixed */ .page-content { margin-top: var(--shell-offset); min-height: calc(100vh - var(--shell-offset)); padding: var(--sp-7) var(--sp-7); background: var(--bg); } /* Page sections shown/hidden per active nav tab */ .page-section { display: none; } .page-section.active { display: block; } /* Standard page header row */ .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-6); gap: var(--sp-4); } .page-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; letter-spacing: 0.08em; color: var(--cream); } .page-subtitle { font-size: var(--text-sm); color: var(--stone-light); margin-top: var(--sp-1); letter-spacing: 0.03em; } /* Standard grid for dashboard modules */ .module-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); } /* Common column spans */ .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } /* ================================================================ 04. TOP BAR ================================================================ */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--sp-6); gap: var(--sp-5); z-index: var(--z-topbar); box-shadow: var(--shadow-xs); } /* Wolfstone wordmark */ .topbar-wordmark { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; letter-spacing: 0.06em; color: var(--cream-dark); white-space: nowrap; flex-shrink: 0; user-select: none; } .topbar-wordmark span { color: var(--gold); } /* Thin vertical rule between wordmark and client selector */ .topbar-divider { width: 1px; height: 20px; background: var(--border-strong); flex-shrink: 0; } /* Right-side cluster */ .topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; } /* Active client name badge in top bar */ .topbar-client-badge { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--gold-muted); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* User info cluster */ .topbar-user { display: flex; align-items: center; gap: var(--sp-3); } .topbar-email { font-size: var(--text-xs); color: var(--stone-light); white-space: nowrap; letter-spacing: 0.02em; } /* ================================================================ 05. NAVIGATION BAR ================================================================ */ .nav-bar { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--nav-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: stretch; padding: 0 var(--sp-5); z-index: var(--z-nav); overflow-x: auto; scrollbar-width: none; gap: 0; } .nav-bar::-webkit-scrollbar { display: none; } .nav-item { display: flex; align-items: center; padding: 0 var(--sp-4); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--stone-mid); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-base), border-color var(--t-base); letter-spacing: 0.01em; position: relative; top: 1px; user-select: none; } .nav-item:hover { color: var(--cream); } .nav-item.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; } /* Sub-navigation tabs (inside module pages) */ .subnav { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); } .subnav-item { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; color: var(--stone-light); padding: var(--sp-2) var(--sp-4); cursor: pointer; border-bottom: 2px solid transparent; position: relative; bottom: -1px; white-space: nowrap; transition: color var(--t-base), border-color var(--t-base); user-select: none; } .subnav-item:hover { color: var(--cream-muted); } .subnav-item.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 500; } /* ================================================================ 06. CLIENT SELECTOR DROPDOWN ================================================================ */ .client-selector-wrap { position: relative; flex-shrink: 0; } .client-selector { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--t-base), background var(--t-base); min-width: 200px; user-select: none; } .client-selector:hover { border-color: var(--stone-mid); background: var(--surface-hover); } .client-selector.open { border-color: var(--gold-dim); } .client-selector-text { flex: 1; overflow: hidden; } .client-selector-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--cream-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .client-selector-sub { font-size: var(--text-2xs); color: var(--stone-light); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; } .client-selector-caret { color: var(--stone-light); font-size: var(--text-2xs); flex-shrink: 0; transition: transform var(--t-base); } .client-selector.open .client-selector-caret { transform: rotate(180deg); } /* Dropdown panel */ .client-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 300px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); max-height: 360px; overflow: hidden; display: flex; flex-direction: column; } .client-dropdown-search { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); flex-shrink: 0; } .client-dropdown-search input { width: 100%; background: transparent; border: none; outline: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--cream); letter-spacing: 0.02em; } .client-dropdown-search input::placeholder { color: var(--stone-light); } .client-dropdown-list { overflow-y: auto; flex: 1; } .client-dropdown-item { padding: 10px var(--sp-4); cursor: pointer; transition: background var(--t-fast); border-bottom: 1px solid var(--border-subtle); } .client-dropdown-item:hover { background: var(--surface-hover); } .client-dropdown-item.selected { background: var(--surface-active); } .client-dropdown-item:last-child { border-bottom: none; } .client-dropdown-item-name { font-size: var(--text-sm); font-weight: 500; color: var(--cream); } .client-dropdown-item-meta { font-size: var(--text-2xs); color: var(--stone-light); margin-top: 2px; letter-spacing: 0.04em; } /* ================================================================ 07. CARDS & SURFACES ================================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .card-raised { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .card-title { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--cream-dark); letter-spacing: 0.02em; } .card-actions { display: flex; align-items: center; gap: var(--sp-2); } .card-body { padding: var(--sp-5); } .card-body-flush { padding: 0; } .card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-subtle); background: var(--surface-raised); } /* KPI summary card */ .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .kpi-card-gold { border-top: 3px solid var(--gold); border-color: var(--border); } /* ================================================================ 08. DATA TABLES ================================================================ */ .table-wrap { width: 100%; overflow-x: auto; } table, .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); } /* Compact rows per spec */ thead th { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone-mid); padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-raised); user-select: none; } thead th.right, td.right { text-align: right; } thead th.center, td.center { text-align: center; } thead th.sortable { cursor: pointer; transition: color var(--t-fast); } thead th.sortable:hover { color: var(--cream-muted); } thead th.sorted { color: var(--gold); } thead th.sorted::after { content: ' ↑'; font-size: var(--text-2xs); color: var(--gold-muted); } thead th.sorted.desc::after { content: ' ↓'; } tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast); } tbody tr:hover { background: var(--surface-hover); } tbody tr:last-child { border-bottom: none; } /* Compact row height */ tbody td { font-size: var(--text-sm); color: var(--cream-muted); padding: 11px var(--sp-4); white-space: nowrap; vertical-align: middle; } /* Primary cell — slightly brighter */ td.cell-primary { font-weight: 500; color: var(--cream); } /* Numeric cells */ td.cell-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: 0; text-align: right; color: var(--cream); } /* Positive / negative coloring */ td.cell-pos { color: var(--success-text); } td.cell-neg { color: var(--danger-text); } /* Table footer row */ tfoot tr { border-top: 1px solid var(--border-strong); } tfoot td { font-size: var(--text-sm); font-weight: 600; color: var(--cream); padding: var(--sp-2) var(--sp-3); background: var(--surface-raised); } /* Striped variant */ .table-striped tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); } /* ================================================================ 09. FORM CONTROLS ================================================================ */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-light); } .form-input, .form-select, .form-textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px var(--sp-3); font-family: var(--font-ui); font-size: var(--text-base); color: var(--cream); outline: none; transition: border-color var(--t-base), box-shadow var(--t-base); appearance: none; box-shadow: var(--shadow-xs); } .form-input::placeholder, .form-textarea::placeholder { color: var(--stone-light); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 3px var(--gold-faint); } .form-input.error, .form-select.error { border-color: var(--danger); } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A7060'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; } .form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; } /* Inline search input */ .search-input-wrap { position: relative; display: inline-flex; align-items: center; } .search-input-wrap input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px var(--sp-3) 7px 32px; font-size: var(--text-sm); color: var(--cream); outline: none; transition: border-color var(--t-base); width: 220px; } .search-input-wrap input:focus { border-color: var(--gold-muted); width: 280px; } .search-input-icon { position: absolute; left: 10px; color: var(--stone-light); font-size: var(--text-sm); pointer-events: none; } /* Date picker */ .form-input[type='date']::-webkit-calendar-picker-indicator { filter: invert(0.4); cursor: pointer; } /* Helper / error text */ .form-hint { font-size: var(--text-xs); color: var(--stone-light); letter-spacing: 0.02em; } .form-error { font-size: var(--text-xs); color: var(--danger-text); letter-spacing: 0.02em; } /* ================================================================ 10. BUTTONS ================================================================ */ /* Base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 9px var(--sp-4); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--t-base); white-space: nowrap; user-select: none; text-decoration: none; line-height: 1.4; } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Primary — solid gold */ .btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: var(--shadow); } /* Secondary — surface */ .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--stone-mid); box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--cream); } /* Ghost — transparent */ .btn-ghost { background: transparent; border-color: var(--border); color: var(--stone-mid); } .btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--cream); } /* Danger */ .btn-danger { background: var(--danger-dim); border-color: var(--danger); color: var(--danger-text); } .btn-danger:hover { background: var(--danger); color: var(--cream); } /* Icon-only button */ .btn-icon { padding: 6px; width: 30px; height: 30px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--stone-light); transition: all var(--t-base); } .btn-icon:hover { border-color: var(--stone-mid); color: var(--cream-muted); } /* Size variants */ .btn-sm { padding: 5px var(--sp-3); font-size: var(--text-xs); } .btn-lg { padding: 11px var(--sp-6); font-size: var(--text-md); } /* Sign-out button */ .signout-btn { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--stone-mid); background: var(--surface-hover); border: 1px solid var(--border); padding: 6px var(--sp-3); border-radius: var(--radius-md); cursor: pointer; letter-spacing: 0.01em; transition: all var(--t-base); } .signout-btn:hover { border-color: var(--border-strong); color: var(--cream); background: var(--surface-active); } /* ================================================================ 11. BADGES & STATUS INDICATORS ================================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; border: none; } /* Role badges */ .role-badge.superadmin { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-faint); } .role-badge.admin { color: #8AACCA; border-color: #2A4060; background: rgba(138,172,202,0.07); } .role-badge.analyst { color: #8ACA9A; border-color: #2A4A2A; background: rgba(138,202,154,0.07); } .role-badge.viewer { color: var(--stone-light); border-color: var(--stone-mid); background: transparent; } .role-badge.client { color: var(--cream-muted); border-color: var(--stone-mid); background: transparent; } /* Status badges */ .badge-success { color: var(--success-text); border-color: var(--success); background: var(--success-dim); } .badge-warning { color: var(--warning-text); border-color: var(--warning); background: var(--warning-dim); } .badge-danger { color: var(--danger-text); border-color: var(--danger); background: var(--danger-dim); } .badge-info { color: var(--info-text); border-color: var(--info); background: var(--info-dim); } .badge-neutral { color: var(--stone-light); border-color: var(--border-strong); background: transparent; } /* Dot indicator */ .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--success); } .dot-warning { background: var(--warning); } .dot-danger { background: var(--danger); } .dot-muted { background: var(--stone-mid); } /* ================================================================ 12. MODALS & OVERLAYS ================================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(17, 17, 24, 0.55); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: overlayIn var(--t-base) var(--ease); } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 520px; box-shadow: var(--shadow-xl); animation: modalIn var(--t-slow) var(--ease); overflow: hidden; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-box-sm { max-width: 380px; } .modal-box-lg { max-width: 720px; } .modal-box-xl { max-width: 960px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; letter-spacing: 0.08em; color: var(--cream); } .modal-close { background: transparent; border: none; color: var(--stone-light); font-size: var(--text-lg); cursor: pointer; line-height: 1; padding: var(--sp-1); transition: color var(--t-base); } .modal-close:hover { color: var(--cream-muted); } .modal-body { padding: var(--sp-6); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background: var(--surface-raised); } /* ================================================================ 13. TOAST NOTIFICATIONS ================================================================ */ #toast { position: fixed; bottom: var(--sp-7); right: var(--sp-7); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; } .toast-msg { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-lg); border-left: 4px solid; background: var(--surface); color: var(--cream); box-shadow: var(--shadow-lg); max-width: 340px; pointer-events: all; letter-spacing: 0.01em; line-height: 1.5; animation: toastIn var(--t-base) var(--ease) forwards; border: 1px solid var(--border); border-left: 4px solid; } .toast-msg.success { border-color: var(--success); } .toast-msg.warning { border-color: var(--warning); } .toast-msg.danger { border-color: var(--danger); } .toast-msg.info { border-color: var(--gold-muted); } .toast-msg.fade-out { animation: toastOut var(--t-base) var(--ease) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(6px); } } /* ================================================================ 14. LOADING & EMPTY STATES ================================================================ */ /* Full-screen loading (auth check) */ #loading-screen { position: fixed; inset: 0; background: var(--stone-deeper, var(--stone-deep)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6); z-index: var(--z-loading); } .loading-wordmark { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .loading-bar-track { width: 180px; height: 1px; background: var(--stone-mid); position: relative; overflow: hidden; } .loading-bar-fill { position: absolute; inset: 0; background: var(--gold); transform: translateX(-100%); animation: loadBar 1.4s var(--ease) infinite; } @keyframes loadBar { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } } .loading-sub { font-size: var(--text-2xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-light); } /* Inline skeleton shimmer */ .skeleton { background: linear-gradient( 90deg, var(--surface) 0%, var(--surface-hover) 50%, var(--surface) 100% ); background-size: 400% 100%; animation: shimmer 1.6s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* Empty state placeholder */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-12) var(--sp-8); gap: var(--sp-3); color: var(--stone-light); text-align: center; } .empty-state-icon { font-size: 28px; color: var(--stone-mid); line-height: 1; } .empty-state-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; letter-spacing: 0.08em; color: var(--cream-muted); } .empty-state-sub { font-size: var(--text-sm); color: var(--stone-light); letter-spacing: 0.03em; max-width: 320px; line-height: 1.6; } /* ================================================================ 15. CHART & DATA VIZ HELPERS ================================================================ */ /* Container that a chart library renders into */ .chart-container { width: 100%; position: relative; } /* Chart legend */ .chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); } .chart-legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--stone-light); } .chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* Sparkline container */ .sparkline { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; } .sparkline-bar { width: 4px; border-radius: 1px 1px 0 0; background: var(--gold-muted); min-height: 2px; transition: background var(--t-base); } .sparkline-bar.pos { background: var(--success); } .sparkline-bar.neg { background: var(--danger); } /* Progress bar */ .progress-bar { width: 100%; height: 4px; background: var(--stone-mid); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.6s var(--ease); } .progress-fill.success { background: var(--success); } .progress-fill.warning { background: var(--warning); } .progress-fill.danger { background: var(--danger); } /* ================================================================ 16. UTILITY CLASSES ================================================================ */ /* Flexbox */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } /* Spacing */ .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .ml-auto { margin-left: auto; } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); } .p-6 { padding: var(--sp-6); } /* Text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Display */ .block { display: block; } .hidden { display: none !important; } /* Overflow */ .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Cursor */ .cursor-pointer { cursor: pointer; } /* Dividers */ .divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } .divider-subtle { border: none; border-top: 1px solid var(--border-subtle); margin: var(--sp-4) 0; } /* ================================================================ 17. SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--stone-mid); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--stone-light); } ::-webkit-scrollbar-corner { background: transparent; } /* ================================================================ 18. ADMIN SHELL OVERRIDES ================================================================ */ /* The admin shell runs in a forced dark mode using stone/gold tokens. Override semantic tokens locally so all standard components (tables, cards, badges) render correctly against the dark bg. */ #admin-shell { /* Re-map surface tokens to dark stone values */ --bg: #1A1814; --surface: #211F1A; --surface-raised: #272420; --surface-hover: #2E2B26; --surface-active: #332F28; --border: #2E2B24; --border-subtle: #272420; --border-strong: #3A3830; /* Text tokens — warm off-white on dark bg */ --cream: #F0EBE0; --cream-dark: #E4DDD0; --cream-muted: #B0A898; --stone-mid: #8A8278; --stone-light: #6A6258; /* Gold stays on-brand */ --gold: #C4A060; --gold-light: #D9BC82; --gold-muted: #8C7040; --gold-dim: #3A2E18; --gold-faint: rgba(196, 160, 96, 0.08); /* Status text — lightened for dark bg legibility */ --success-text: #7AB890; --warning-text: #D4AA60; --danger-text: #C07868; --info-text: #80A8C8; --success-dim: rgba(78, 138, 98, 0.18); --warning-dim: rgba(186, 138, 46, 0.18); --danger-dim: rgba(140, 58, 48, 0.18); --info-dim: rgba(74, 110, 140, 0.18); } #admin-shell .topbar { background: #16140F; border-bottom: 1px solid #2A2720; } #admin-shell .topbar-wordmark { color: var(--cream); } #admin-shell .topbar-wordmark::after { content: ' / SUPERADMIN'; font-size: var(--text-2xs); letter-spacing: 0.14em; color: var(--gold-muted); margin-left: var(--sp-2); } #admin-shell .nav-bar { background: #1C1A14; border-bottom: 1px solid #2A2720; } #admin-shell .nav-item { color: var(--cream-muted); } #admin-shell .nav-item:hover { color: var(--cream); background: rgba(196, 160, 96, 0.06); } #admin-shell .nav-item.active { color: var(--gold); border-bottom-color: var(--gold); } #admin-shell .page-content { background: var(--bg); } #admin-shell .card, #admin-shell .card-raised { background: var(--surface); border-color: var(--border); } /* Tables inside admin shell — use remapped tokens automatically */ #admin-shell thead th { background: var(--surface-raised); color: var(--stone-mid); border-bottom-color: var(--border); } #admin-shell tbody td { color: var(--cream-muted); border-bottom-color: var(--border-subtle); } #admin-shell tbody td strong { color: var(--cream); } #admin-shell tbody tr:hover { background: var(--surface-hover); } /* ================================================================ 19. PORTAL SHELL OVERRIDES ================================================================ */ /* Portal gets a slightly lighter top accent to differentiate */ #portal-shell .topbar-wordmark { font-size: var(--text-sm); letter-spacing: 0.16em; } #portal-shell .nav-item.active { color: var(--gold-light); border-bottom-color: var(--gold-light); } /* ================================================================ 20. LOGIN / TERMINAL SCREEN ================================================================ */ #login-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: var(--z-loading); font-family: var(--font-ui); } .terminal-wrap { width: 100%; max-width: 440px; padding: var(--sp-8) var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } .terminal-os-line { font-size: var(--text-sm); color: var(--stone-light); letter-spacing: 0.01em; margin-bottom: var(--sp-6); } .terminal-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.02em; color: var(--cream-dark); margin-bottom: var(--sp-2); } .terminal-divider { border: none; border-top: 1px solid #222018; margin-bottom: var(--sp-6); } .boot-lines { margin-bottom: var(--sp-7); min-height: 72px; } .boot-line { font-size: var(--text-xs); color: #4A4A38; letter-spacing: 0.04em; line-height: 1.9; opacity: 0; animation: fadeInLine 0.1s forwards; } .boot-line.ok::after { content: ' [OK]'; color: #3A6A3A; } @keyframes fadeInLine { to { opacity: 1; } } .terminal-prompt-label { font-size: var(--text-xs); color: #5A5A48; letter-spacing: 0.06em; margin-bottom: var(--sp-5); } .t-field { margin-bottom: var(--sp-4); } .t-label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--stone-mid); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--sp-2); } .t-input-wrap { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px var(--sp-3); background: var(--surface-raised); transition: border-color var(--t-base), box-shadow var(--t-base); } .t-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-faint); } .t-prompt { color: var(--gold-muted); font-size: var(--text-sm); margin-right: var(--sp-2); flex-shrink: 0; } .t-input { background: transparent; border: none; outline: none; font-family: var(--font-ui); font-size: var(--text-base); color: var(--cream); width: 100%; letter-spacing: 0.01em; caret-color: var(--gold); } .t-input::placeholder { color: var(--stone-light); } .t-forgot { font-size: var(--text-sm); color: var(--gold); font-weight: 500; cursor: pointer; display: inline-block; margin-top: var(--sp-2); transition: color var(--t-base); } .t-forgot:hover { color: var(--gold-light); } .t-error { font-size: var(--text-sm); color: var(--danger-text); font-weight: 500; margin-top: var(--sp-3); min-height: 18px; padding: var(--sp-2) var(--sp-3); background: var(--danger-dim); border-radius: var(--radius); } .t-actions { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } .t-btn { display: block; width: 100%; padding: 11px 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border: 1px solid; border-radius: var(--radius-md); transition: all var(--t-base); text-align: center; background: transparent; } .t-btn-primary { border-color: var(--gold); background: var(--gold); color: #fff; } .t-btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); } .t-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .t-btn-google { border-color: #3A3828; color: #5A5848; } .t-btn-google:hover { border-color: #5A5848; color: #8A8878; } .t-back { font-size: var(--text-2xs); color: #4A4838; letter-spacing: 0.08em; cursor: pointer; margin-bottom: var(--sp-5); display: inline-block; transition: color var(--t-base); } .t-back:hover { color: var(--gold-muted); } .t-back::before { content: '< '; } /* Blinking block cursor */ .cursor-blink { display: inline-block; width: 7px; height: 13px; background: var(--gold-muted); vertical-align: middle; animation: blink 1.1s step-end infinite; margin-left: 2px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ================================================================ 21. PRINT OVERRIDES ================================================================ */ @media print { #loading-screen, #login-screen, .topbar, .nav-bar, .signout-btn, #toast { display: none !important; } .page-content { margin-top: 0; padding: 0; background: white; color: black; } .card, .card-raised { border: 1px solid #ccc; break-inside: avoid; } table { font-size: 11px; } } /* ================================================================ 25. COMPONENT SUPPLEMENT — Project Zeratul Adds all named IDs and classes required by the spec: Layout shells · Sidebar · KPI cards · Badges · Forms Buttons · Modals · Toast · Utilities · Page headers ================================================================ */ /* ── 25-A. LAYOUT SHELLS ──────────────────────────────────────── */ /* * #app-shell — primary authenticated shell * Already declared alongside #portal-shell / #admin-shell above, * but given an explicit ID selector here for direct targeting. */ #app-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } /* * #main-content — the scrollable body region beside the sidebar * (used when #app-shell adopts a sidebar layout rather than topbar+navbar) */ #main-content { flex: 1; overflow-y: auto; background: var(--bg); padding: var(--sp-7); min-height: 100vh; } /* * #topbar / #top-nav — interchangeable IDs for the fixed top strip * Inherits all rules from .topbar; ID form provided for direct JS targeting. */ #topbar, #top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--stone-deep); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--sp-5); gap: var(--sp-5); z-index: var(--z-topbar); } /* * #sidebar — collapsible left-rail navigation * Pairs with #main-content in sidebar-layout shells. */ #sidebar { width: 224px; min-width: 224px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; position: fixed; top: 0; left: 0; z-index: var(--z-nav); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease); } #sidebar::-webkit-scrollbar { display: none; } /* Collapsed state — driven by JS toggling .collapsed on #sidebar */ #sidebar.collapsed { width: 56px; min-width: 56px; } #sidebar.collapsed .sidebar-section-label, #sidebar.collapsed .sidebar-nav-item span, #sidebar.collapsed .client-item-meta { opacity: 0; pointer-events: none; } /* ── 25-B. PORTAL LAYOUT SHELLS ──────────────────────────────── */ /* * #portal-shell — top-level wrapper for bank / LP portal view. * Declared alongside #app-shell and #admin-shell in section 03; * explicit ID form here for symmetry and direct targeting. */ #portal-shell { display: flex; flex-direction: column; min-height: 100vh; } /* * #portal-layout — inner flex row containing sidebar + content */ #portal-layout { display: flex; flex: 1; padding-top: var(--topbar-h); /* clear fixed topbar */ min-height: calc(100vh - var(--topbar-h)); } /* * #portal-sidebar — portal-specific narrower sidebar (192 px) */ #portal-sidebar { width: 192px; min-width: 192px; background: var(--stone-deep); border-right: 1px solid var(--border-subtle); padding: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; scrollbar-width: none; flex-shrink: 0; } #portal-sidebar::-webkit-scrollbar { display: none; } /* * #portal-content — scrollable main region in portal layout */ #portal-content { flex: 1; overflow-y: auto; background: var(--bg); padding: var(--sp-7); min-height: 0; /* allow flex child to scroll */ } /* * #admin-shell — already declared in section 18; * explicit baseline rules repeated here so all five IDs are * consistently discoverable in this supplement block. */ #admin-shell { display: flex; flex-direction: column; min-height: 100vh; background: #141210; } /* ── 25-C. SIDEBAR NAVIGATION ITEMS ─────────────────────────── */ /* * .sidebar-nav-item — a clickable row in the sidebar rail */ .sidebar-nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-4); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; color: var(--cream-muted); /* was stone-light — now clearly visible */ cursor: pointer; border-radius: 0; border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; user-select: none; text-decoration: none; } .sidebar-nav-item:hover { background: var(--surface-hover); color: var(--cream); /* full contrast on hover */ } .sidebar-nav-item.active { background: var(--surface-active); color: var(--gold); border-left-color: var(--gold); font-weight: 500; } .sidebar-nav-item .sidebar-icon { font-size: 14px; flex-shrink: 0; width: 18px; display: flex; align-items: center; justify-content: center; color: inherit; opacity: 0.75; } .sidebar-nav-item.active .sidebar-icon { opacity: 1; } /* * .sidebar-section-label — uppercase micro-label grouping nav items */ .sidebar-section-label { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-light); padding: var(--sp-4) var(--sp-4) var(--sp-1); opacity: 1; white-space: nowrap; overflow: hidden; user-select: none; transition: opacity var(--t-base); } /* * .client-item — a client row inside the sidebar client list */ .client-item { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-4); cursor: pointer; font-size: var(--text-sm); font-weight: 400; color: var(--cream-muted); /* was stone-light — now readable */ border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } .client-item:hover { background: var(--surface-hover); color: var(--cream-muted); } .client-item.active { background: var(--surface-active); color: var(--gold); border-left-color: var(--gold-muted); font-weight: 500; } .client-item-meta { font-size: var(--text-2xs); color: var(--stone-light); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--t-base); } /* * .client-dot — small colored dot beside a client row * Use .dot-success / .dot-warning / .dot-danger modifiers from section 11. */ .client-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--stone-mid); transition: background var(--t-base); } .client-item.active .client-dot { background: var(--gold); } /* ── 25-D. KPI CARD — explicit class names ───────────────────── */ /* * .kpi-card is declared in section 07; these supplementary rules * add the .kpi-change element and tighten defaults. */ .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--t-base); } .kpi-card:hover { border-color: var(--border-strong); } /* .kpi-value and .kpi-label are already in section 02 typography; repeated here for co-location. */ .kpi-change { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.03em; margin-top: var(--sp-1); } .kpi-change.positive { color: var(--success-text); } .kpi-change.negative { color: var(--danger-text); } .kpi-change.neutral { color: var(--stone-light); } .kpi-change::before { font-size: var(--text-2xs); line-height: 1; } .kpi-change.positive::before { content: '▲'; } .kpi-change.negative::before { content: '▼'; } /* ── 25-E. DATA TABLE — explicit .data-table targeting ─────────── */ /* * .data-table is declared in section 08 via "table, .data-table". * These rules add explicit single-class overrides and ensure * the class name is self-sufficient without a parent tag. */ .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); } .data-table thead th { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-light); padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--stone-deep); user-select: none; } .data-table tbody td { font-size: var(--text-sm); color: var(--cream-muted); padding: 7px var(--sp-3); white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); } .data-table tbody tr { transition: background var(--t-fast); } .data-table tbody tr:hover { background: var(--surface-hover); } .data-table tbody tr:last-child td { border-bottom: none; } /* ── 25-F. BADGE SUPPLEMENT ──────────────────────────────────── */ /* * .badge base and all variants are in section 11. * Re-declared here for exact spec class-name compliance and * to ensure standalone use outside .badge parent works. */ .badge { /* base already in section 11 */ } .badge-success { /* already in section 11 */ } .badge-warning { /* already in section 11 */ } .badge-danger { /* already in section 11 */ } .badge-info { /* already in section 11 */ } .badge-neutral { /* already in section 11 */ } /* ── 25-G. FORM COMPONENTS — .form-group, label, input, select ── */ /* * Canonical form layout using spec class names. * .form-group is in section 09; native element defaults extended here. */ /* Native