/** * Production Tracking System - Design System * * CSS Custom Properties for consistent theming across the app. * Density levels are stored in localStorage per browser/device. * * Usage: Apply [data-density="compact|comfortable|spacious"] to */ /* ========================================================================== COLOR PALETTE ========================================================================== */ :root { /* Primary brand colors */ --color-primary: #6366f1; --color-primary-hover: #4f46e5; --color-primary-light: #e0e7ff; --color-primary-dark: #3730a3; /* Secondary/accent */ --color-accent: #8b5cf6; --color-accent-hover: #7c3aed; /* Semantic colors */ --color-success: #10b981; --color-success-light: #d1fae5; --color-success-dark: #047857; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-dark: #b45309; --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-danger-dark: #b91c1c; --color-info: #3b82f6; --color-info-light: #dbeafe; --color-info-dark: #1d4ed8; /* Neutral palette */ --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Background colors */ --bg-body: #f8fafc; --bg-surface: #ffffff; --bg-surface-hover: #f9fafb; --bg-surface-active: #f3f4f6; --bg-muted: #f1f5f9; --bg-sidebar: #1e1b4b; --bg-sidebar-hover: #312e81; /* Text colors */ --text-primary: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; /* Border colors */ --border-color: #e2e8f0; --border-color-strong: #cbd5e1; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* Z-index scale */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; } /* ========================================================================== DENSITY: COMFORTABLE (Default) ========================================================================== */ :root, [data-density="comfortable"] { /* Typography */ --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 28px; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Component sizing */ --sidebar-width: 64px; --sidebar-expanded: 220px; --header-height: 56px; --input-height: 36px; --button-height: 36px; --table-row-height: 44px; --card-padding: 16px; --page-padding: 24px; /* Touch targets */ --touch-target-min: 40px; /* Icon sizes */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; } /* ========================================================================== DENSITY: COMPACT (Data-dense, power users, large screens) ========================================================================== */ [data-density="compact"] { /* Typography - smaller */ --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 13px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-2xl: 20px; --font-size-3xl: 24px; --line-height-tight: 1.2; --line-height-base: 1.4; --line-height-relaxed: 1.6; /* Spacing - tighter */ --space-1: 3px; --space-2: 6px; --space-3: 10px; --space-4: 14px; --space-5: 18px; --space-6: 22px; --space-8: 28px; --space-10: 36px; --space-12: 44px; /* Component sizing - smaller */ --sidebar-width: 56px; --sidebar-expanded: 200px; --header-height: 48px; --input-height: 32px; --button-height: 32px; --table-row-height: 36px; --card-padding: 12px; --page-padding: 20px; /* Touch targets - smaller (mouse-focused) */ --touch-target-min: 32px; /* Icon sizes */ --icon-sm: 14px; --icon-md: 18px; --icon-lg: 22px; } /* ========================================================================== DENSITY: SPACIOUS (Touch devices, accessibility, tablets) ========================================================================== */ [data-density="spacious"] { /* Typography - larger */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 26px; --font-size-3xl: 32px; --line-height-tight: 1.3; --line-height-base: 1.6; --line-height-relaxed: 1.85; /* Spacing - roomier */ --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 20px; --space-5: 24px; --space-6: 28px; --space-8: 40px; --space-10: 48px; --space-12: 56px; /* Component sizing - larger */ --sidebar-width: 72px; --sidebar-expanded: 240px; --header-height: 64px; --input-height: 44px; --button-height: 44px; --table-row-height: 52px; --card-padding: 20px; --page-padding: 28px; /* Touch targets - larger for fingers */ --touch-target-min: 48px; /* Icon sizes */ --icon-sm: 18px; --icon-md: 24px; --icon-lg: 28px; } /* ========================================================================== BASE RESET & TYPOGRAPHY ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--text-primary); background: var(--bg-body); } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--line-height-tight); color: var(--text-primary); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } /* ========================================================================== LAYOUT STRUCTURE ========================================================================== */ .app-layout { display: flex; min-height: 100vh; } .app-sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: var(--sidebar-width); background: var(--bg-sidebar); display: flex; flex-direction: column; z-index: var(--z-fixed); transition: width var(--transition-slow); } .app-sidebar.expanded { width: var(--sidebar-expanded); } .app-main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--transition-slow); } .app-sidebar.expanded + .app-main, .app-main.sidebar-expanded { margin-left: var(--sidebar-expanded); } .app-header { height: var(--header-height); background: var(--bg-surface); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-padding); position: sticky; top: 0; z-index: var(--z-sticky); } .app-content { flex: 1; padding: var(--page-padding); overflow-y: auto; } /* ========================================================================== SIDEBAR NAVIGATION ========================================================================== */ .sidebar-brand { height: var(--header-height); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 var(--space-3); } .sidebar-brand-icon { font-size: var(--font-size-2xl); } .sidebar-brand-text { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-inverse); margin-left: var(--space-3); white-space: nowrap; opacity: 0; transition: opacity var(--transition-base); } .app-sidebar.expanded .sidebar-brand-text { opacity: 1; } .sidebar-nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; } .nav-section { margin-bottom: var(--space-4); } .nav-section-title { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); padding: var(--space-2) var(--space-4); white-space: nowrap; overflow: hidden; } /* Scoped to the sidebar: pages reuse the .nav-item class for their own markup (e.g. tab bars), which unscoped rules used to bleed into. */ .app-sidebar .nav-item { display: flex; align-items: center; padding: var(--space-3) var(--space-4); color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: all var(--transition-fast); min-height: var(--touch-target-min); position: relative; } .app-sidebar .nav-item:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); } .app-sidebar .nav-item.active { background: var(--color-primary); color: var(--text-inverse); } .app-sidebar .nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--text-inverse); border-radius: 0 2px 2px 0; } .nav-icon { width: var(--icon-lg); height: var(--icon-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--icon-md); } .nav-text { margin-left: var(--space-3); font-size: var(--font-size-sm); white-space: nowrap; opacity: 0; transition: opacity var(--transition-base); } .app-sidebar.expanded .nav-text { opacity: 1; } .sidebar-footer { padding: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-toggle { width: 100%; height: var(--touch-target-min); background: transparent; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: all var(--transition-fast); } .sidebar-toggle:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); } /* ========================================================================== HEADER COMPONENTS ========================================================================== */ .header-left { display: flex; align-items: center; gap: var(--space-4); } .page-title { font-size: var(--font-size-xl); font-weight: 600; } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); } .breadcrumb-separator { color: var(--text-muted); } .header-right { display: flex; align-items: center; gap: var(--space-4); } .header-actions { display: flex; align-items: center; gap: var(--space-2); } .user-menu { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .user-menu:hover { background: var(--bg-surface-hover); } .user-avatar { width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 600; } .user-name { font-size: var(--font-size-sm); font-weight: 500; } /* ========================================================================== CARDS ========================================================================== */ .card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .card-header { padding: var(--card-padding); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: var(--font-size-lg); font-weight: 600; } .card-body { padding: var(--card-padding); } .card-footer { padding: var(--card-padding); border-top: 1px solid var(--border-color); background: var(--bg-muted); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Stats cards */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .stat-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--card-padding); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .stat-label { font-size: var(--font-size-sm); color: var(--text-secondary); } .stat-icon { width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); } .stat-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); } .stat-change { font-size: var(--font-size-xs); margin-top: var(--space-1); } .stat-change.positive { color: var(--color-success); } .stat-change.negative { color: var(--color-danger); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--button-height); padding: 0 var(--space-4); font-size: var(--font-size-sm); font-weight: 500; border-radius: var(--radius-md); border: none; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: var(--text-inverse); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--border-color-strong); } .btn-success { background: var(--color-success); color: var(--text-inverse); } .btn-success:hover:not(:disabled) { background: var(--color-success-dark); } .btn-danger { background: var(--color-danger); color: var(--text-inverse); } .btn-danger:hover:not(:disabled) { background: var(--color-danger-dark); } .btn-warning { background: var(--color-warning); color: var(--text-inverse); } .btn-warning:hover:not(:disabled) { background: var(--color-warning-dark); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text-primary); } .btn-sm { height: calc(var(--button-height) - 8px); padding: 0 var(--space-3); font-size: var(--font-size-xs); } .btn-lg { height: calc(var(--button-height) + 8px); padding: 0 var(--space-6); font-size: var(--font-size-base); } .btn-icon { width: var(--button-height); padding: 0; } .btn-block { width: 100%; justify-content: center; } /* ========================================================================== PAGE HEADER (content-area title row) — canonical. Pages should reuse this (h1 + optional subtitle/intro on the left, primary .btn on the right) instead of redeclaring their own header. ========================================================================== */ .page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .page-header h1 { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: var(--space-2); } .page-subtitle { color: var(--text-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; } .page-intro { color: var(--text-secondary); font-size: var(--font-size-base); margin: var(--space-1) 0 var(--space-5); max-width: 820px; } /* ========================================================================== AUTH PAGES (login, forgot, reset) ========================================================================== */ .auth-page { background: var(--bg-secondary); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: var(--space-4); } .auth-card { background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); padding: var(--space-6); width: 100%; max-width: 380px; } .auth-header { text-align: center; margin-bottom: var(--space-5); } .auth-logo { width: 48px; height: 48px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3); } .auth-logo svg { width: 28px; height: 28px; color: white; } .auth-header h1 { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); margin: 0 0 4px; } .auth-header p { color: var(--text-muted); font-size: var(--font-size-sm); margin: 0; } .auth-footer-link { display: block; text-align: center; margin-top: var(--space-4); color: var(--color-primary); text-decoration: none; font-size: var(--font-size-sm); } .auth-footer-link:hover { text-decoration: underline; } @media (max-width: 480px) { .auth-card { padding: var(--space-4); } } /* ========================================================================== FORM ELEMENTS ========================================================================== */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 500; margin-bottom: var(--space-2); color: var(--text-primary); } .form-input, .form-select, .form-textarea { width: 100%; height: var(--input-height); padding: 0 var(--space-3); font-size: var(--font-size-base); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); transition: all var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-textarea { height: auto; min-height: calc(var(--input-height) * 3); padding: var(--space-3); resize: vertical; } .form-input::placeholder { color: var(--text-muted); } .form-input.error { border-color: var(--color-danger); } .form-error { font-size: var(--font-size-xs); color: var(--color-danger); margin-top: var(--space-1); } .form-hint { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: var(--space-1); } /* Search input */ .search-input { position: relative; } .search-input input { padding-left: var(--space-10); } .search-input .search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); } /* ========================================================================== TABLES ========================================================================== */ .table-container { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-color); } .table th { background: var(--bg-muted); font-weight: 600; color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; } .table tbody tr { transition: background var(--transition-fast); } .table tbody tr:hover { background: var(--bg-surface-hover); } .table tbody tr:last-child td { border-bottom: none; } .table-actions { display: flex; gap: var(--space-2); justify-content: flex-end; } /* Card-style responsive tables. Opt in by adding `.table-stacked` to a `.table`; each `` needs a `data-label="Column name"` for the label column to render. Below 768px the table visually collapses into stacked cards — on wider screens it renders as a normal table. */ @media (max-width: 767px) { .table-stacked thead { display: none; } .table-stacked, .table-stacked tbody, .table-stacked tr, .table-stacked td { display: block; width: 100%; } .table-stacked tr { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: var(--bg-surface); padding: var(--space-2); } .table-stacked tr:last-child { margin-bottom: 0; } .table-stacked td { border-bottom: 1px solid var(--border-color); padding: var(--space-2) var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: right; } .table-stacked td:last-child { border-bottom: none; } .table-stacked td::before { content: attr(data-label); font-weight: 600; color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; text-align: left; flex: 0 0 auto; } .table-stacked .table-actions { justify-content: flex-end; } } /* ========================================================================== BADGES & STATUS ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: 500; border-radius: var(--radius-full); white-space: nowrap; } .badge-default { background: var(--color-gray-100); color: var(--color-gray-700); } .badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); } .badge-success { background: var(--color-success-light); color: var(--color-success-dark); } .badge-warning { background: var(--color-warning-light); color: var(--color-warning-dark); } .badge-danger { background: var(--color-danger-light); color: var(--color-danger-dark); } .badge-info { background: var(--color-info-light); color: var(--color-info-dark); } /* Status indicators */ .status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; margin-right: var(--space-2); } .status-dot.success { background: var(--color-success); } .status-dot.warning { background: var(--color-warning); } .status-dot.danger { background: var(--color-danger); } .status-dot.info { background: var(--color-info); } .status-dot.muted { background: var(--color-gray-400); } /* ========================================================================== EMPTY STATES ========================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; } .empty-state-icon { font-size: 48px; margin-bottom: var(--space-4); opacity: 0.5; } .empty-state-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--space-2); } .empty-state-text { font-size: var(--font-size-sm); color: var(--text-secondary); max-width: 400px; margin-bottom: var(--space-6); } /* ========================================================================== MODALS Two wrapper patterns are supported across templates: - .modal-backdrop + .modal (macro pattern — toggled via the HTML `hidden` attribute; `.modal-backdrop` is always display:flex and `hidden` hides it via the UA stylesheet) - .modal-overlay + .modal-box (template pattern — hidden by default, shown by `.active` class OR an inline `style="display:flex"` from JS) `.modal-overlay` is defined here globally so templates that use it without defining local CSS (product_lines, users) still get full-page backdrop + centering instead of rendering inline in the page flow. ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal-backdrop); padding: var(--space-4); } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; z-index: var(--z-modal-backdrop); padding: var(--space-4); } .modal-overlay.active { display: flex; } .modal, .modal-box { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 500px; width: 100%; max-height: calc(100vh - var(--space-8)); overflow: hidden; display: flex; flex-direction: column; } .modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: var(--font-size-lg); font-weight: 600; } .modal-close { width: var(--touch-target-min); height: var(--touch-target-min); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-secondary); border-radius: var(--radius-md); transition: all var(--transition-fast); } .modal-close:hover { background: var(--bg-surface-hover); color: var(--text-primary); } .modal-body { padding: var(--space-5); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: var(--space-3); background: var(--bg-muted); } /* ========================================================================== DENSITY SWITCHER ========================================================================== */ .density-switcher { display: flex; background: var(--bg-muted); border-radius: var(--radius-full); padding: 2px; } .density-option { display: flex; align-items: center; justify-content: center; width: var(--touch-target-min); height: calc(var(--touch-target-min) - 8px); border: none; background: transparent; border-radius: var(--radius-full); cursor: pointer; color: var(--text-secondary); transition: all var(--transition-fast); } .density-option:hover { color: var(--text-primary); } .density-option.active { background: var(--bg-surface); box-shadow: var(--shadow-sm); color: var(--text-primary); } .density-option svg { width: var(--icon-sm); height: var(--icon-sm); } /* ========================================================================== UTILITY CLASSES ========================================================================== */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ========================================================================== ALERTS ========================================================================== */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-size-sm); line-height: var(--line-height-base); } .alert-info { background: var(--color-info-light); color: var(--color-info-dark); border-color: var(--color-info); } .alert-success { background: var(--color-success-light); color: var(--color-success-dark); border-color: var(--color-success); } .alert-warning { background: var(--color-warning-light); color: var(--color-warning-dark); border-color: var(--color-warning); } .alert-danger, .alert-error { background: var(--color-danger-light); color: var(--color-danger-dark); border-color: var(--color-danger); } .alert-icon { flex: 0 0 auto; font-size: var(--font-size-lg); line-height: 1; } .alert-body { flex: 1; } .alert-title { font-weight: 600; margin-bottom: var(--space-1); } .alert-close { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: inherit; opacity: 0.7; padding: 0 var(--space-1); font-size: var(--font-size-base); line-height: 1; } .alert-close:hover { opacity: 1; } /* ========================================================================== TOAST ========================================================================== */ .toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-tooltip); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(400px, calc(100vw - var(--space-8))); pointer-events: none; } .toast { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); display: flex; align-items: flex-start; gap: var(--space-3); pointer-events: auto; animation: toast-in 200ms ease-out; } .toast.leaving { animation: toast-out 200ms ease-in forwards; } .toast-success { border-left-color: var(--color-success); } .toast-warning { border-left-color: var(--color-warning); } .toast-danger, .toast-error { border-left-color: var(--color-danger); } .toast-body { flex: 1; } .toast-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--font-size-base); line-height: 1; padding: 0 var(--space-1); } .toast-close:hover { color: var(--text-primary); } @keyframes toast-in { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } /* ========================================================================== SPINNER / LOADING ========================================================================== */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; } .spinner-sm { width: 12px; height: 12px; border-width: 2px; } .spinner-lg { width: 24px; height: 24px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .btn.is-loading { pointer-events: none; position: relative; color: transparent !important; } .btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--text-inverse); animation: spin 0.6s linear infinite; } .btn-secondary.is-loading::after, .btn-ghost.is-loading::after { color: var(--text-primary); } /* ========================================================================== PAGE HEADER PATTERN ========================================================================== */ .page-header-block { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-color); } .page-header-block .page-header-title { font-size: var(--font-size-2xl); font-weight: 600; color: var(--text-primary); margin: 0; line-height: var(--line-height-tight); } .page-header-block .page-header-subtitle { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--text-secondary); } .page-header-block .page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ========================================================================== ACCESSIBILITY: focus-visible on interactive elements ========================================================================== */ .btn:focus-visible, .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== FORM REQUIRED INDICATOR ========================================================================== */ .form-required { color: var(--color-danger); font-weight: 600; margin-left: 2px; } /* ========================================================================== COMPATIBILITY ALIASES Legacy variable names used across templates. Prefer the canonical names above; these exist so templates written with the older vocabulary still resolve. Safe to remove once every template is migrated. ========================================================================== */ :root { --primary: var(--color-primary); --primary-color: var(--color-primary); --primary-hover: var(--color-primary-hover); --primary-light: var(--color-primary-light); --success: var(--color-success); --success-bg: var(--color-success-light); --danger: var(--color-danger); --danger-bg: var(--color-danger-light); --danger-color: var(--color-danger); --warning-bg: var(--color-warning-light); --warning-dark: var(--color-warning-dark); --info-bg: var(--color-info-light); --bg-primary: var(--bg-surface); --bg-secondary: var(--bg-body); --text-xs: var(--font-size-xs); --text-sm: var(--font-size-sm); --spacing-sm: var(--space-2); --spacing-md: var(--space-4); --spacing-lg: var(--space-6); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }