/* ============================================ IRA Software Platform — Design System Style: Modern & Minimal (Linear/Notion) ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* --- Scrollbars (theme-aware) --- */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* --- Theme Tokens --- * * Light is the default (`:root`). Dark theme is opt-in via * ``. The toggle in the topbar persists the * choice to localStorage and is bootstrapped from index.html before * the app loads, so there's no flash-of-other-theme. * * When adding new tokens: define for both themes here, then reference * via `var(--token)` in pages. Inline hex/rgba in page JS won't switch * with the theme — always reach for a token. */ :root, :root[data-theme="light"] { /* Surfaces */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-sidebar: #f8fafc; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-modal-overlay: rgba(15, 23, 42, 0.45); /* Row state — used in tables, lists, drill-downs */ --bg-row-hover: rgba(0, 0, 0, 0.04); --bg-row-alt: rgba(0, 0, 0, 0.02); --bg-row-selected: rgba(30, 64, 175, 0.08); /* Brand accent (Spykar customer brief: white + navy) */ --accent: #1e40af; --accent-hover: #1e3a8a; --accent-subtle: rgba(30, 64, 175, 0.08); /* Text */ --text-primary: #0f172a; --text-muted: #475569; --text-dim: #94a3b8; /* Borders + focus */ --border: #e2e8f0; --border-focus: #1e40af; /* Status colours (slightly darker on light bg for contrast) */ --green: #16a34a; --red: #dc2626; --yellow: #ca8a04; --orange: #ea580c; /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; /* Light theme needs subtle elevation cues that dark theme gets from contrast */ --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06); /* Static layout */ --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --sidebar-width: 240px; --topbar-height: 56px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --transition: 150ms ease; } :root[data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #1f1f1f; --bg-sidebar: #242424; --bg-card: #2e2e2e; --bg-input: #2e2e2e; --bg-hover: #353535; --bg-modal-overlay: rgba(0, 0, 0, 0.6); --bg-row-hover: rgba(255, 255, 255, 0.04); --bg-row-alt: rgba(255, 255, 255, 0.02); --bg-row-selected: rgba(59, 130, 246, 0.12); --accent: #3b82f6; --accent-hover: #2563eb; --accent-subtle: rgba(59, 130, 246, 0.12); --text-primary: #f5f5f5; --text-muted: #a0a0a0; --text-dim: #6b6b6b; --border: #333333; --border-focus: #3b82f6; --green: #22c55e; --red: #ef4444; --yellow: #eab308; --orange: #f97316; --scrollbar-track: #1a1a1a; --scrollbar-thumb: #333; --scrollbar-thumb-hover: #444; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } button { font-family: var(--font); cursor: pointer; border: none; outline: none; } input, select, textarea { font-family: var(--font); font-size: 14px; outline: none; } ::selection { background: var(--accent); color: #fff; } /* --- Typography --- */ .t-h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; } .t-h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; } .t-h3 { font-size: 15px; font-weight: 600; } .t-body { font-size: 14px; font-weight: 400; } .t-small { font-size: 12px; font-weight: 400; color: var(--text-muted); } .t-muted { color: var(--text-muted); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); transition: background var(--transition), opacity var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-hover); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); } .btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); } .btn-danger:hover { background: rgba(239, 68, 68, 0.1); } .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; } .btn-icon { width: 36px; padding: 0; } .btn-icon.btn-sm { width: 30px; } /* --- Inputs --- */ .input-group { display: flex; flex-direction: column; gap: 6px; } .input-group label { font-size: 13px; font-weight: 500; color: var(--text-muted); } .input { height: 40px; padding: 0 12px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition); } .input:focus { border-color: var(--border-focus); } .input::placeholder { color: var(--text-dim); } select.input { appearance: none; /* Light theme arrow — slate-600 (#475569) for contrast on white. Dark theme * overrides this below with a lighter arrow. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } :root[data-theme="dark"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0a0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); } /* --- Cards --- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--card-shadow, none); } /* --- Stat Cards --- */ .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; } .stat-card .stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .stat-card .stat-value { font-size: 32px; font-weight: 700; letter-spacing: -1px; color: var(--text-primary); } .stat-card .stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* --- Tables --- */ .table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } table { width: 100%; border-collapse: collapse; } thead th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); } tbody td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--bg-hover); } /* --- Standardised Data Table (utils/data-table.js) --- * The single source of truth for tables across pages. Two visual modes: * .std-page-table : full-page list (Quotes, Orders, Jobs, Items) * .std-card-table : wrapped in a card with mini-header (Item Audit's * stacked Quotes + Orders, future multi-grid pages) * Anywhere you find yourself reaching for `.q-table`, `.o-table`, * `.rp-table`, `.inv-th`, etc. — use .std-table instead. */ /* Page-mode wrapper fills the available space; toolbar + footer pin. * Requires the parent (#page-content) to be a bounded flex column — * pages should set content.style to: * display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden; */ .std-page-table { flex: 1; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 0; } /* Card mode: smaller, no border on the wrapper (parent card handles it * via .ia-card etc.) — the factory adds its own header strip. */ .std-card-table { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .std-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .std-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; } .std-card-actions { display: flex; align-items: center; gap: 10px; } .std-row-count { font-size: 12px; color: var(--text-muted); font-weight: 600; } /* Toolbar — page mode only */ .std-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); flex-wrap: wrap; } .std-toolbar-left, .std-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .std-search { height: 34px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; color: var(--text-primary); outline: none; min-width: 240px; transition: border-color 0.15s; } .std-search:focus { border-color: var(--accent); } .std-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .std-filter-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .std-filter { height: 34px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; color: var(--text-primary); } .std-btn { height: 32px; font-size: 13px; font-weight: 600; padding: 0 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); cursor: pointer; transition: background 0.12s; } .std-btn:hover { background: var(--bg-hover); } .std-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .std-btn-primary:hover { background: var(--accent-hover); } .std-btn-ghost { background: transparent; } .std-icon-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .std-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } /* Table — shared by both modes */ .std-table-scroll { flex: 1; overflow: auto; min-height: 0; } .std-table { width: 100%; border-collapse: collapse; font-size: 13px; } .std-table .std-th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-secondary); border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .std-table .std-th-right { text-align: right; } .std-table .std-th-center { text-align: center; } .std-table .std-th-checkbox { width: 36px; padding: 10px 8px; text-align: center; } .std-table .std-td { padding: 10px 14px; border-bottom: 1px solid var(--bg-row-hover); color: var(--text-primary); white-space: nowrap; vertical-align: middle; } .std-table .std-td-right { text-align: right; font-variant-numeric: tabular-nums; } .std-table .std-td-center { text-align: center; } .std-table .std-td-checkbox { text-align: center; padding: 10px 8px; } .std-table .std-row-clickable { cursor: pointer; transition: background 0.12s; } .std-table .std-row:hover { background: var(--bg-row-alt); } .std-table .std-row-selected { background: var(--bg-row-selected) !important; } .std-table .std-row-selected td { background: var(--bg-row-selected) !important; } .std-table .std-state-cell { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; } .std-table .std-error { color: var(--red); } /* Footer — pagination + page-size + showing-X-Y-of-N */ .std-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg-secondary); gap: 12px; flex-wrap: wrap; } .std-footer-left, .std-footer-right { display: flex; align-items: center; gap: 10px; } .std-showing { font-size: 12px; color: var(--text-muted); } .std-pg-size-wrap { display: inline-flex; align-items: center; gap: 6px; } .std-footer-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .std-pg-size { height: 28px; font-size: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; color: var(--text-primary); } .std-pagination { display: inline-flex; gap: 4px; align-items: center; } .std-pg-btn { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.12s; } .std-pg-btn:hover:not(.disabled):not(:disabled) { background: var(--bg-hover); } .std-pg-btn.disabled, .std-pg-btn:disabled { opacity: 0.4; cursor: default; } .std-pg-btn.std-pg-indicator { background: transparent; border-color: transparent; cursor: default; color: var(--text-muted); font-weight: 700; min-width: auto; padding: 0 6px; } /* ─── Standard side pane (fixed-position drawer from right) ──────────── */ .std-pane { position: fixed; top: 0; right: 0; height: 100vh; background: var(--bg-primary); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; z-index: 40; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); } .std-pane.is-open { transform: translateX(0); } .std-pane-sm { width: min(560px, 95vw); } .std-pane-md { width: min(640px, 95vw); } .std-pane-lg { width: min(900px, 95vw); } .std-pane-header { flex-shrink: 0; padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .std-pane-header-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); } .std-pane-close { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .std-pane-close:hover { background: var(--bg-hover); } .std-pane-meta { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid var(--border); } .std-pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; } .std-pane-table-region { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .std-pane-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 20px; } .std-pane-table-scroll table { width: 100%; border-collapse: collapse; } .std-pane-table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); } .std-pane-pagination { flex-shrink: 0; padding: 10px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .std-pane-actions { flex-shrink: 0; padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; } /* Stacked panels inside .std-pane-body. Opt-in row cap keeps siblings visible. */ .std-pane-section { margin-bottom: 16px; } .std-pane-section:last-child { margin-bottom: 0; } .std-pane-section-scroll { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; } /* Backdrop for .std-pane (optional — pages can include or omit) */ .std-pane-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 39; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .std-pane-backdrop.is-open { opacity: 1; pointer-events: auto; } /* --- Badges --- */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font-size: 11px; font-weight: 600; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.3px; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .badge-green { color: var(--green); background: rgba(34,197,94,0.12); } .badge-green::before { background: var(--green); } .badge-red { color: var(--red); background: rgba(239,68,68,0.12); } .badge-red::before { background: var(--red); } .badge-gray { color: var(--text-muted); background: rgba(160,160,160,0.12); } .badge-gray::before { background: var(--text-muted); } .badge-yellow { color: var(--yellow); background: rgba(234,179,8,0.12); } .badge-yellow::before { background: var(--yellow); } /* --- Layout: App Shell --- */ .app-layout { display: flex; height: 100vh; overflow: hidden; } /* --- Sidebar --- */ .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); } .sidebar-logo .wordmark { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); } .sidebar-logo .wordmark span { color: var(--accent); } .sidebar-logo .sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; } .sidebar-nav { padding: 12px 8px; flex: 1; min-height: 0; /* lets overflow-y actually constrain the child */ overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .nav-section-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; padding: 16px 12px 6px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-sm); transition: all var(--transition); cursor: pointer; } .nav-link:hover { color: var(--text-primary); background: var(--bg-hover); } .nav-link.active { color: var(--text-primary); background: var(--accent-subtle); } .nav-link .nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; opacity: 0.6; } .nav-link.active .nav-icon { opacity: 1; } .sidebar-footer { padding: 12px 8px; border-top: 1px solid var(--border); flex-shrink: 0; /* never compresses; stays anchored at the bottom */ background: var(--bg-sidebar); } /* --- Topbar --- */ .topbar { height: var(--topbar-height); min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg-primary); } .topbar-title { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; } .topbar-right { display: flex; align-items: center; gap: 12px; } .topbar-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: var(--radius-sm); } .topbar-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; } .topbar-name { font-size: 13px; font-weight: 500; color: var(--text-muted); } .topbar-theme-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 15px; cursor: pointer; transition: all var(--transition); } .topbar-theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .topbar-version { display: inline-flex; align-items: center; padding: 4px 10px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; transition: all var(--transition); } .topbar-version:hover { background: var(--bg-hover); color: var(--text-primary); } .topbar-version:empty { display: none; } /* TEST environment badge — amber, visible in topbar to distinguish test from prod */ .topbar-env-badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #b45309; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: var(--radius-sm); text-transform: uppercase; cursor: help; } /* --- Main Content --- */ .main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .main-content { flex: 1; padding: 24px; overflow-y: auto; } /* --- Page Header --- */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .page-header h2 { font-size: 14px; font-weight: 500; color: var(--text-muted); } /* --- Stats Grid --- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } /* --- Modal --- */ .modal-overlay { position: fixed; inset: 0; background: var(--bg-modal-overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 480px; max-width: 90vw; max-height: 85vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: 15px; font-weight: 600; } .modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; transition: all var(--transition); font-size: 18px; } .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); } /* --- Dropzone --- */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px; text-align: center; cursor: pointer; transition: all var(--transition); } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-subtle); } .dropzone .dz-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; } .dropzone .dz-label { font-size: 13px; color: var(--text-muted); } .dropzone .dz-label strong { color: var(--accent); } .dropzone .dz-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; } .dropzone.has-file { border-style: solid; border-color: var(--green); background: rgba(34, 197, 94, 0.06); } .dropzone.has-file .dz-label { color: var(--green); } /* --- Alerts --- */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; } .alert-error { background: rgba(239, 68, 68, 0.1); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.2); } .alert-success { background: rgba(34, 197, 94, 0.1); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.2); } /* --- Empty State --- */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 40px; opacity: 0.3; margin-bottom: 12px; } .empty-state p { font-size: 14px; margin-bottom: 16px; } /* --- Spinner --- */ .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Activity List --- */ .activity-list { display: flex; flex-direction: column; } .activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .activity-item:last-child { border-bottom: none; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .activity-text { font-size: 13px; color: var(--text-muted); flex: 1; } .activity-text strong { color: var(--text-primary); font-weight: 500; } .activity-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; } /* --- Responsive --- */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sidebar { position: fixed; left: -260px; z-index: 900; transition: left var(--transition); } .sidebar.open { left: 0; } .stats-grid { grid-template-columns: 1fr; } .topbar { padding: 0 16px; } .main-content { padding: 16px; } } /* --- Utility --- */ .hidden { display: none !important; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .w-full { width: 100%; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; }