/* ===== Design System Foundation ===== */ /* ============================================================ THEME SEEDS — only these ~15 values need to change per theme. Switch themes by setting data-theme on . JS: document.documentElement.dataset.theme = 'saas' ============================================================ */ /* Default theme: Pimport */ :root, [data-theme="pimport"] { --brand-primary: #4386F0; --brand-secondary: #6B7280; --brand-accent: #4386F0; --bg-page: #FFFFFF; --bg-surface: #F8FAFC; --bg-border: #E2E8F0; --text-primary: #333333; --text-muted: #6B7280; --font-heading: 'GT America', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #4386F0; --btn-text: #000000; /* black: 5.91:1 on #4386F0 — WCAG AA ✓ (white fails: 3.56:1) */ /* Sidebar: L ≤ 50% → white text/icons */ --sidebar-bg-theme: #1F2937; --sidebar-text-theme: #F9FAFB; --sidebar-icon-theme: #AAC9F8; --sidebar-section-theme: #626973; } /* Theme: Default (Pimport Blue — Inter throughout) */ [data-theme="default"] { --brand-primary: #4386F0; --brand-secondary: #6B7280; --brand-accent: #4386F0; --bg-page: #FFFFFF; --bg-surface: #F8FAFC; --bg-border: #E2E8F0; --text-primary: #1F2937; --text-muted: #6B7280; --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #4386F0; --btn-text: #000000; /* black: 5.91:1 on #4386F0 — WCAG AA ✓ (white fails: 3.56:1) */ --sidebar-bg-theme: #FFFFFF; --sidebar-text-theme: #1F2937; --sidebar-icon-theme: #6B7280; --sidebar-section-theme: #9CA3AF; } /* Theme: SaaS (Dark sidebar, orange accent) */ [data-theme="saas"] { --brand-primary: #2c2c2e; --brand-secondary: #ddd7d3; --brand-accent: #ed9a1d; --bg-page: #FFFFFF; --bg-surface: #F9F9FA; --bg-border: #E5E5E6; --text-primary: #090809; --text-muted: #555555; --font-heading: 'GT America', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #ed9a1d; --btn-text: #1A0F00; /* Sidebar: L ≤ 50% → white text/icons */ --sidebar-bg-theme: #090809; --sidebar-text-theme: #FFFFFF; --sidebar-icon-theme: #ABABAB; --sidebar-section-theme: #666668; } /* Theme: Midnight (Deep navy + sky-blue — clean, Linear-ish) */ [data-theme="saas-midnight"] { --brand-primary: #0A0F1E; --brand-secondary: #CBD5E1; --brand-accent: #38BDF8; --bg-page: #FFFFFF; --bg-surface: #F8FAFC; --bg-border: #E2E8F0; --text-primary: #0F172A; --text-muted: #64748B; --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #38BDF8; --btn-text: #0F172A; --sidebar-bg-theme: #0A0F1E; --sidebar-text-theme: #FFFFFF; --sidebar-icon-theme: #6B7FA8; --sidebar-section-theme: #3D4F70; } /* Theme: Emerald (Dark green sidebar + emerald accent — fresh, verdant) */ [data-theme="saas-emerald"] { --brand-primary: #064E3B; --brand-secondary: #D1FAE5; --brand-accent: #10B981; --bg-page: #FFFFFF; --bg-surface: #F8FAFC; --bg-border: #E2E8F0; --text-primary: #111827; --text-muted: #6B7280; --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #10B981; --btn-text: #052E1C; --sidebar-bg-theme: #064E3B; --sidebar-text-theme: #FFFFFF; --sidebar-icon-theme: #6EE7B7; --sidebar-section-theme: #34866E; } /* Theme: Violet (Near-black sidebar + vibrant violet accent — modern, bold) */ [data-theme="saas-violet"] { --brand-primary: #14101E; --brand-secondary: #EDE9FE; --brand-accent: #8B5CF6; --bg-page: #FFFFFF; --bg-surface: #F8FAFC; --bg-border: #E2E8F0; --text-primary: #111827; --text-muted: #6B7280; --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --btn-bg: #8B5CF6; --btn-text: #000000; /* black: 4.96:1 on #8B5CF6 — WCAG AA ✓ (white fails: 4.23:1) */ --sidebar-bg-theme: #14101E; --sidebar-text-theme: #FFFFFF; --sidebar-icon-theme: #9D8AC0; --sidebar-section-theme: #52476E; } /* ============================================================ DERIVED TOKENS — auto-computed from seeds via color-mix(). Do not edit. These update automatically when seeds change. ============================================================ */ :root { /* Primary variants */ --brand-primary-dark: color-mix(in oklch, var(--brand-primary), black 18%); --brand-primary-darker: color-mix(in oklch, var(--brand-primary), black 42%); --brand-primary-light: color-mix(in oklch, var(--brand-primary), white 85%); --brand-primary-mid: color-mix(in oklch, var(--brand-primary), white 68%); /* Secondary variants */ --brand-secondary-dark: color-mix(in oklch, var(--brand-secondary), black 20%); --brand-secondary-light: color-mix(in oklch, var(--brand-secondary), white 80%); /* Accent variants */ --brand-accent-dark: color-mix(in oklch, var(--brand-accent), black 18%); --brand-accent-light: color-mix(in oklch, var(--brand-accent), white 85%); /* Button variants */ --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 18%); --btn-bg-shadow: color-mix(in srgb, var(--btn-bg), transparent 75%); /* Sidebar variants */ --sidebar-border-theme: color-mix(in oklch, var(--sidebar-bg-theme), black 10%); --sidebar-hover-bg-theme: color-mix(in oklch, var(--sidebar-bg-theme), black 5%); /* Text body alias */ --text-body: var(--text-primary); /* Interactive tokens — track brand-primary */ --interactive: var(--brand-primary); --interactive-accessible: color-mix(in oklch, var(--brand-primary), black 42%); --interactive-dark: color-mix(in oklch, var(--brand-primary), black 20%); --interactive-subtle: color-mix(in srgb, var(--brand-primary), transparent 90%); --interactive-subtle-border: color-mix(in srgb, var(--brand-primary), transparent 80%); --interactive-ghost: color-mix(in srgb, var(--brand-primary), transparent 96%); --interactive-hover: color-mix(in srgb, var(--brand-primary), transparent 94%); --interactive-focus: color-mix(in srgb, var(--brand-primary), transparent 85%); --interactive-shadow: color-mix(in srgb, var(--brand-primary), transparent 70%); --interactive-shadow-hover: color-mix(in srgb, var(--brand-primary), transparent 65%); --interactive-selection: color-mix(in srgb, var(--brand-primary), transparent 80%); /* Action accent alias */ --action-orange: var(--brand-accent); --action-orange-ghost: color-mix(in srgb, var(--brand-accent), transparent 95%); /* Login page gradient — tinted from primary */ --login-bg-start: color-mix(in srgb, var(--brand-primary), white 94%); --login-bg-mid: color-mix(in srgb, var(--brand-primary), white 92%); --login-bg-end: color-mix(in srgb, var(--brand-primary), white 97%); /* Blockquote — tinted from accent */ --blockquote-bg: color-mix(in srgb, var(--brand-accent), white 97%); } /* ============================================================ FIXED TOKENS — never theme-dependent. Do not move these into theme blocks. ============================================================ */ :root { /* Legacy alias */ --primary-color: var(--brand-primary); /* Font aliases */ --font-sans: var(--font-body); --font-display: var(--font-heading); /* Semantic Colors */ --success-color: #22c55e; --danger-color: #dc2626; /* darkened from #ef4444 — white now 4.83:1 ✓ (was 3.76:1) */ --warning-color: #f59e0b; --info-color: #3b82f6; /* Neutral Palette */ --gray-50: #fafafa; --gray-100: #f4f5f7; --gray-200: var(--bg-border); --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: var(--text-muted); --gray-600: #4b5563; --gray-700: #374151; --gray-800: var(--text-primary); --gray-900: #111827; /* Typography Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Spacing Scale (8px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* Shadows */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Sidebar Layout */ --sidebar-width: 240px; --sidebar-collapsed-width: 60px; --sidebar-bg: var(--sidebar-bg-theme); --sidebar-border: var(--sidebar-border-theme); --sidebar-active-bg: var(--brand-accent-dark); --sidebar-active-color: var(--on-brand); --sidebar-hover-bg: var(--sidebar-hover-bg-theme); --sidebar-icon-color: var(--sidebar-icon-theme); --sidebar-text-color: var(--sidebar-text-theme); --sidebar-section-color: var(--sidebar-section-theme); /* Body / Layout */ --body-bg: var(--bg-surface); --card-bg: var(--bg-page); --page-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Component Overrides */ --input-border: var(--bg-border); --input-focus-border: var(--brand-primary); --input-focus-shadow: 0 0 0 3px var(--interactive-focus); --modal-radius: 16px; --card-radius: 12px; --btn-radius: 8px; /* Semantic Dark / Hover */ --success-dark: #009800; --danger-dark: #b91c2e; /* Semantic Text — WCAG AA on white */ --success-text: #166534; /* 7.3:1 */ --danger-text: #991b1b; /* 7.6:1 */ --warning-text: #92400e; /* 7.3:1 */ --info-text: #1e40af; /* 8.6:1 */ --badge-added-text: #0a6b42; /* 6.5:1 */ --badge-improved-text: #1a4fa0; /* 8.5:1 */ --badge-fixed-text: #7d5a00; /* 5.2:1 */ /* Semantic Subtle Backgrounds */ --success-bg-subtle: rgba(0, 185, 0, 0.1); --success-border-subtle: rgba(0, 185, 0, 0.2); --success-alert-bg: #f0fdf4; --danger-bg-subtle: rgba(220, 53, 69, 0.1); --danger-border-subtle: rgba(220, 53, 69, 0.2); --danger-alert-bg: #fef2f2; --warning-bg-subtle: rgba(245, 158, 11, 0.1); --warning-border-subtle: rgba(245, 158, 11, 0.2); --warning-alert-bg: #fffbeb; --info-bg-subtle: rgba(59, 130, 246, 0.1); --info-border-subtle: rgba(59, 130, 246, 0.2); --info-alert-bg: #eff6ff; /* Status: Partial */ --status-partial-text: #b45309; /* 5.5:1 */ --status-partial-bg: rgba(253, 126, 20, 0.1); --status-partial-border: rgba(253, 126, 20, 0.2); /* Text on Filled Backgrounds */ --on-brand: #ffffff; /* Docs / Content */ --code-text: #d63384; /* Overlays */ --overlay-bg: rgba(0, 0, 0, 0.4); --overlay-heavy: rgba(0, 0, 0, 0.5); /* Table Row Highlights */ --success-row-bg: rgba(0, 185, 0, 0.04); --danger-row-bg: rgba(220, 53, 69, 0.04); --warning-row-bg: rgba(245, 158, 11, 0.04); } /* ===== Base Styles ===== */ body { min-height: 100vh; font-family: var(--font-sans); font-size: var(--text-base); color: var(--gray-800); background: var(--body-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ===== Typography ===== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: var(--font-semibold); line-height: 1.2; color: var(--gray-900); margin-bottom: var(--space-4); } h1, .h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.025em; } h2, .h2 { font-size: var(--text-2xl); } h3, .h3 { font-size: var(--text-xl); } h4, .h4 { font-size: var(--text-lg); } h5, .h5 { font-size: var(--text-base); font-weight: var(--font-semibold); } p { color: var(--gray-600); } .text-muted, small { color: var(--gray-700) !important; } /* ===== Skip Link ===== */ .skip-link { position: absolute; top: -100%; left: 1rem; padding: 0.5rem 1rem; background: var(--primary-color); color: var(--on-brand); border-radius: var(--radius-md); font-weight: var(--font-semibold); font-size: var(--text-sm); z-index: 9999; text-decoration: none; transition: top var(--transition-fast); } .skip-link:focus { top: 1rem; } /* ===== Sidebar ===== */ .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; z-index: 1040; transition: width var(--page-transition); overflow: hidden; } body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); } /* Logo row */ .sidebar-logo { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 0.875rem 1rem; border-bottom: 1px solid var(--sidebar-border); min-height: 60px; flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--sidebar-text-color); font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-base); white-space: nowrap; overflow: hidden; } .sidebar-brand:hover { color: var(--sidebar-text-color); text-decoration: none; } .sidebar-brand-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-brand-icon img { display: block; width: 28px; height: 28px; } .sidebar-brand-name { transition: opacity var(--page-transition); overflow: hidden; } body.sidebar-collapsed .sidebar-brand-name { opacity: 0; } /* Toggle button */ .sidebar-toggle-btn { width: 26px; height: 26px; border: 1px solid var(--sidebar-border); background: var(--card-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sidebar-icon-color); cursor: pointer; flex-shrink: 0; padding: 0; font-size: 0.7rem; transition: background var(--transition-fast), color var(--transition-fast), transform var(--page-transition); } .sidebar-toggle-btn:hover { background: var(--sidebar-hover-bg); color: var(--gray-800); } body.sidebar-collapsed .sidebar-toggle-btn { transform: rotate(180deg); } /* Environment dropdown menu — matches sidebar nav item style */ .sidebar-env-menu { background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); padding: 0.375rem 0; min-width: 200px; } .sidebar-env-menu .dropdown-header { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--sidebar-section-color); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 1.125rem 0.375rem; } .sidebar-env-menu .dropdown-item { display: flex; align-items: center; gap: 0.75rem; margin: 1px 0.5rem; padding: 0.5rem 0.625rem; width: calc(100% - 1rem); border-radius: var(--radius-md); color: var(--sidebar-text-color); font-size: var(--text-sm); font-weight: var(--font-medium); background: transparent; transition: background var(--transition-fast), color var(--transition-fast); } .sidebar-env-menu .dropdown-item:hover, .sidebar-env-menu .dropdown-item:focus { background: var(--sidebar-hover-bg); color: var(--sidebar-text-color); } .sidebar-env-menu .dropdown-item:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; } .sidebar-env-menu .dropdown-item.active-env { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); font-weight: var(--font-semibold); } .sidebar-env-menu .dropdown-item.active-env:hover, .sidebar-env-menu .dropdown-item.active-env:focus { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); } .sidebar-env-menu .env-check-icon { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; } .sidebar-env-menu-loading { display: block; padding: 0.5rem 1.125rem; font-size: var(--text-xs); color: var(--sidebar-section-color); } .sidebar-env-menu .dropdown-item.text-danger { color: var(--danger-color); } .sidebar-env-menu .dropdown-item.text-danger:hover, .sidebar-env-menu .dropdown-item.text-danger:focus { background: var(--sidebar-hover-bg); color: var(--danger-color); } .sidebar-env-menu .dropdown-divider { border-color: var(--sidebar-border); margin: 0.375rem 0; } .sidebar-env-menu .dropdown-item:hover .sidebar-nav-icon, .sidebar-env-menu .dropdown-item:focus .sidebar-nav-icon { opacity: 0.9; } /* Navigation list */ .sidebar-nav { list-style: none; margin: 0; padding: 0.625rem 0; flex: 1; overflow-y: auto; overflow-x: hidden; } .sidebar-nav-item { margin: 1px 0.5rem; } .sidebar-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-text-color); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; cursor: pointer; width: 100%; transition: background var(--transition-fast), color var(--transition-fast); } .sidebar-nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-color); text-decoration: none; } .sidebar-nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); font-weight: var(--font-semibold); } .sidebar-nav-icon { font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; opacity: 0.7; transition: opacity var(--transition-fast); } .sidebar-nav-link.active .sidebar-nav-icon { opacity: 1; } .sidebar-nav-link:hover .sidebar-nav-icon { opacity: 0.9; } .sidebar-nav-label { transition: opacity var(--page-transition); overflow: hidden; flex: 1; } body.sidebar-collapsed .sidebar-nav-label { opacity: 0; } /* Collapsed tooltips */ body.sidebar-collapsed .sidebar-nav-link[data-tooltip]:hover::after { content: attr(data-tooltip); position: fixed; left: calc(var(--sidebar-collapsed-width) + 8px); background: var(--gray-900); color: var(--on-brand); font-size: var(--text-xs); font-weight: var(--font-medium); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; z-index: 9999; pointer-events: none; box-shadow: var(--shadow-md); } body.sidebar-collapsed .show > .sidebar-nav-link[data-tooltip]:hover::after { display: none; } /* Sidebar footer */ .sidebar-footer { padding: 0.625rem 0.5rem; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-user-avatar { width: 26px; height: 26px; background: var(--primary-color); color: var(--on-brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: var(--font-bold); flex-shrink: 0; text-transform: uppercase; } .sidebar-user-name { font-size: var(--text-sm); } /* Dropdown from sidebar footer opens upward */ .dropdown-menu-up { bottom: 100%; top: auto !important; margin-bottom: 0.375rem; min-width: 200px; } /* ===== Layout ===== */ .main-wrapper { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--page-transition); } body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed-width); } main { flex: 1; padding: 1.5rem 2rem; } .footer { margin-top: auto; } /* Alert / flash containers */ #alert-container { } .flash-container { margin-bottom: 1.25rem; } /* Mobile hamburger */ .mobile-sidebar-toggle { display: none; position: fixed; top: 0.875rem; left: 0.875rem; z-index: 1050; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--sidebar-border); background: var(--card-bg); color: var(--gray-700); align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-sm); } /* Mobile overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg); z-index: 1039; backdrop-filter: blur(2px); } /* ===== Responsive ===== */ @media (max-width: 768px) { .app-sidebar { left: calc(-1 * var(--sidebar-width)); width: var(--sidebar-width) !important; transition: left var(--page-transition); } body.sidebar-open .app-sidebar { left: 0; } body.sidebar-open .sidebar-overlay { display: block; } .mobile-sidebar-toggle { display: flex; } .main-wrapper { margin-left: 0 !important; padding-top: 60px; } main { padding: 1rem; } .sidebar-toggle-btn { display: none; } } /* ===== Cards ===== */ .card { background: var(--card-bg); border: none !important; border-radius: var(--card-radius) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); margin-bottom: var(--space-6); transition: box-shadow var(--transition-base); } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card-header { background: transparent !important; border-bottom: 1px solid var(--gray-100) !important; padding: var(--space-4) var(--space-5); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--gray-700); border-radius: var(--card-radius) var(--card-radius) 0 0 !important; } .card-body { padding: var(--space-5); } .card-footer { background: transparent !important; border-top: 1px solid var(--gray-100) !important; padding: var(--space-4) var(--space-5); border-radius: 0 0 var(--card-radius) var(--card-radius) !important; } /* ===== Statistics Cards ===== */ .stat-card { border: none !important; border-radius: var(--card-radius) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-base), transform var(--transition-base); } .stat-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); } /* Semantic stat icon backgrounds */ .stat-icon.bg-primary { background: var(--interactive-subtle) !important; color: var(--interactive) !important; } .stat-icon.bg-success { background: var(--success-bg-subtle) !important; color: var(--success-color) !important; } .stat-icon.bg-warning { background: var(--warning-bg-subtle) !important; color: var(--warning-color) !important; } .stat-icon.bg-danger { background: var(--danger-bg-subtle) !important; color: var(--danger-color) !important; } .stat-card h6 { font-size: var(--text-sm); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; } .stat-card h3, .stat-card h2 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--gray-900); margin-bottom: 0; } /* ===== Buttons ===== */ .btn { font-weight: var(--font-medium); border-radius: var(--btn-radius); font-size: var(--text-sm); padding: 0.45rem 0.875rem; border: 1px solid transparent; transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: translateY(1px); } .btn-primary:focus-visible, .btn-primary:focus, .btn-primary:active, .btn-action:focus-visible, .btn-action:focus, .btn-action:active { box-shadow: 0 0 0 0.25rem var(--btn-bg-shadow) !important; outline: 2px solid transparent; } .btn-primary { --bs-btn-bg: var(--btn-bg); --bs-btn-border-color: var(--btn-bg); --bs-btn-hover-bg: var(--btn-bg-hover); --bs-btn-hover-border-color: var(--btn-bg-hover); --bs-btn-active-bg: var(--btn-bg-hover); --bs-btn-active-border-color: var(--btn-bg-hover); --bs-btn-color: var(--btn-text); --bs-btn-hover-color: var(--btn-text); --bs-btn-active-color: var(--btn-text); /* Override Bootstrap's default disabled state (#0d6efd) */ --bs-btn-disabled-bg: var(--btn-bg); --bs-btn-disabled-border-color: var(--btn-bg); --bs-btn-disabled-color: var(--btn-text); background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); box-shadow: 0 1px 2px var(--btn-bg-shadow); } .btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-text); box-shadow: 0 3px 8px var(--btn-bg-shadow); } .btn-primary:disabled, .btn-primary.disabled { background-color: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); } .btn-outline-primary { --bs-btn-color: var(--btn-bg); --bs-btn-border-color: var(--btn-bg); --bs-btn-hover-bg: var(--btn-bg); --bs-btn-hover-border-color: var(--btn-bg); --bs-btn-hover-color: var(--btn-text); --bs-btn-active-bg: var(--btn-bg); --bs-btn-active-border-color: var(--btn-bg); --bs-btn-active-color: var(--btn-text); color: var(--btn-bg); border-color: var(--btn-bg); background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); box-shadow: 0 1px 4px var(--btn-bg-shadow); } .btn-secondary { background: var(--card-bg); border-color: var(--input-border); color: var(--gray-700); } .btn-secondary:hover { background: var(--sidebar-hover-bg); border-color: var(--gray-400); color: var(--gray-900); } .btn-success { background: var(--success-color); border-color: var(--success-color); color: #000000; /* black: 9.22:1 on #22c55e — WCAG AA ✓ */ } .btn-success:hover { background: var(--success-dark); border-color: var(--success-dark); color: #000000; /* black: 5.50:1 on #009800 — WCAG AA ✓ (#052E1C was 3.89:1) */ } .btn-danger { background: var(--danger-color); border-color: var(--danger-color); color: #FFFFFF; } .btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); color: #FFFFFF; } .btn-action { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); font-weight: var(--font-semibold); box-shadow: 0 1px 2px var(--btn-bg-shadow); } .btn-action:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-text); box-shadow: 0 3px 8px var(--btn-bg-shadow); } .btn-action:active { background: var(--btn-bg-hover); transform: translateY(0); } .btn-action:disabled { background: var(--gray-300); border-color: var(--gray-300); box-shadow: none; cursor: not-allowed; } .btn-outline-secondary { border-color: var(--input-border); color: var(--gray-600); } .btn-outline-secondary:hover { background: var(--sidebar-hover-bg); border-color: var(--gray-400); color: var(--gray-900); } /* ===== Button Groups ===== */ .btn-group label { min-width: 120px; transition: all var(--transition-fast); } .btn-group label small { font-size: var(--text-xs); opacity: 0.7; } .btn-check:checked + label { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); } /* ===== Tables ===== */ .table { font-size: var(--text-sm); color: var(--gray-700); border-collapse: separate; border-spacing: 0; } .table thead th { background: var(--gray-50); color: var(--gray-500); border: none; border-bottom: 1px solid var(--gray-200); font-weight: var(--font-semibold); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.625rem 1rem; white-space: nowrap; } .table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table-hover tbody tr { transition: background-color var(--transition-fast); } .table-hover tbody tr:hover td { background: var(--gray-50); cursor: pointer; } /* ===== Badges ===== */ .badge { font-weight: var(--font-semibold); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.02em; } .badge.bg-primary { background: var(--interactive-subtle) !important; color: var(--interactive); border: 1px solid var(--interactive-subtle-border); } .badge.bg-success { background: var(--success-bg-subtle) !important; color: var(--success-text); border: 1px solid var(--success-border-subtle); } .badge.bg-warning { background: var(--warning-bg-subtle) !important; color: var(--warning-text); border: 1px solid var(--warning-border-subtle); } .badge.bg-danger { background: var(--danger-bg-subtle) !important; color: var(--danger-text); border: 1px solid var(--danger-border-subtle); } .badge.bg-secondary { background: var(--gray-100) !important; color: var(--gray-700); } .badge.bg-info { background: var(--info-bg-subtle) !important; color: var(--interactive); border: 1px solid var(--info-border-subtle); } /* Status badges */ .status-pending { background: var(--warning-bg-subtle) !important; color: var(--warning-text); border: 1px solid var(--warning-border-subtle); } .status-processing { background: var(--info-bg-subtle) !important; color: var(--interactive); border: 1px solid var(--info-border-subtle); } .status-completed { background: var(--success-bg-subtle) !important; color: var(--success-text); border: 1px solid var(--success-border-subtle); } .status-failed { background: var(--danger-bg-subtle) !important; color: var(--danger-text); border: 1px solid var(--danger-border-subtle); } .status-partial { background: var(--status-partial-bg) !important; color: var(--status-partial-text); border: 1px solid var(--status-partial-border); } .badge-new { background: var(--success-bg-subtle) !important; color: var(--success-text); border: 1px solid var(--success-border-subtle); } /* ===== Modals ===== */ .modal-content { border: none !important; border-radius: var(--modal-radius) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); overflow: hidden; } .modal-header { background: var(--card-bg); border-bottom: 1px solid var(--gray-100) !important; padding: 1.25rem 1.5rem; } .modal-header .btn-close { filter: none; } .modal-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--gray-900); } .modal-body { padding: 1.5rem; } .modal-footer { background: var(--gray-50); border-top: 1px solid var(--gray-100) !important; padding: 1rem 1.5rem; } .modal-backdrop { backdrop-filter: blur(3px); } /* ===== Alerts ===== */ .alert { border: 1px solid transparent; border-radius: var(--radius-lg); padding: 0.875rem 1rem; font-size: var(--text-sm); font-weight: var(--font-medium); } .alert-success { background: var(--success-alert-bg); border-color: var(--success-border-subtle); color: var(--success-text); } .alert-danger { background: var(--danger-alert-bg); border-color: var(--danger-border-subtle); color: var(--danger-text); } .alert-warning { background: var(--warning-alert-bg); border-color: var(--warning-border-subtle); color: var(--warning-text); } .alert-info { background: var(--info-alert-bg); border-color: var(--info-border-subtle); color: var(--info-text); } /* ===== Upload Zone ===== */ .upload-zone { border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); text-align: center; cursor: pointer; transition: all var(--transition-base); background: var(--gray-50); } .upload-zone:hover { border-color: var(--interactive); background: var(--interactive-ghost); } .upload-zone.drag-over { border-color: var(--action-orange); background: var(--action-orange-ghost); border-style: solid; } .upload-zone i { color: var(--gray-400); } .upload-zone p { color: var(--gray-500); margin-top: var(--space-3); } /* ===== Progress Bar ===== */ .progress { height: 8px; border-radius: var(--radius-lg); background: var(--gray-200); overflow: hidden; } .progress-bar { background: var(--primary-color); transition: width 0.6s ease; border-radius: var(--radius-lg); } /* Large progress bar variant (processing page) */ .progress-lg { height: 24px; } .progress-lg .progress-bar { font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: 24px; } /* ===== Form Controls ===== */ .form-label { font-weight: var(--font-medium); color: var(--gray-700); font-size: var(--text-sm); margin-bottom: 0.375rem; } .form-control, .form-select { border: 1px solid var(--input-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--gray-900); background: var(--card-bg); padding: 0.45rem 0.75rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:focus, .form-select:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); outline: 2px solid transparent; background: var(--card-bg); } .form-control::placeholder { color: var(--gray-400); } .input-group-text { background: var(--gray-50); border-color: var(--input-border); color: var(--gray-500); font-size: var(--text-sm); } .form-text { font-size: var(--text-xs); color: var(--gray-500); } .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-check-input:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } /* ===== Action Buttons ===== */ .action-btn { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); margin: 0 2px; box-shadow: none; } .action-btn:hover { transform: none; box-shadow: var(--shadow-xs); } /* ===== Spinner Overlay ===== */ .spinner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-heavy); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; } .spinner-overlay .spinner-border { width: 3rem; height: 3rem; border-width: 0.3rem; border-color: var(--primary-color); border-right-color: transparent; } /* ===== Processing Results ===== */ .results-table-success { background-color: var(--success-row-bg); } .results-table-failed { background-color: var(--danger-row-bg); } .results-table-partial { background-color: var(--warning-row-bg); } /* ===== Footer ===== */ .footer-ledkoning { background: var(--card-bg); color: var(--gray-400); border-top: 1px solid var(--sidebar-border); padding: var(--space-4) 0; font-size: var(--text-xs); } .footer-ledkoning strong { color: var(--gray-600); font-weight: var(--font-semibold); } /* ===== Toast Notifications ===== */ .toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1060; } .toast { min-width: 300px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* ===== Empty States ===== */ .empty-state-icon { color: var(--gray-300); } /* ===== Animations ===== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.3s ease-out; } /* ===== Focus States ===== */ *:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ===== Selection ===== */ ::selection { background-color: var(--interactive-selection); color: var(--gray-900); } ::-moz-selection { background-color: var(--interactive-selection); color: var(--gray-900); } /* ===== Pagination ===== */ .page-link { color: var(--gray-600); border-color: var(--gray-200); font-size: var(--text-sm); padding: 0.375rem 0.625rem; border-radius: var(--radius-sm) !important; margin: 0 2px; transition: background var(--transition-fast), color var(--transition-fast); } .page-link:hover { background: var(--gray-50); color: var(--gray-900); border-color: var(--gray-300); } .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-brand); } .page-item.disabled .page-link { opacity: 0.4; } /* ===== List Group ===== */ .list-group-item.active { background-color: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-primary); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--bg-surface); color: var(--text-primary); } /* ===== Dropdowns ===== */ .dropdown-menu { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); font-size: var(--text-sm); padding: 0.375rem; } .dropdown-item { border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; color: var(--gray-700); transition: background var(--transition-fast), color var(--transition-fast); } .dropdown-item:hover { background: var(--sidebar-hover-bg); color: var(--gray-900); } .dropdown-item.text-danger:hover { background: var(--danger-alert-bg); color: var(--danger-text); } .dropdown-divider { border-color: var(--gray-100); margin: 0.375rem 0; } /* ===== Responsive ===== */ @media (max-width: 768px) { .stat-icon { width: 40px; height: 40px; font-size: var(--text-base); } .btn-group label { min-width: 80px; } .table { font-size: var(--text-xs); } h1, .h1 { font-size: var(--text-2xl); } .card-body { padding: var(--space-4); } .modal-body { padding: var(--space-4); } .stat-card h3, .stat-card h2 { font-size: var(--text-2xl); } } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }