/* ======================================== HRIS — Luxury Theme System Multiple premium color themes with CSS custom properties Activated by data-theme attribute on ======================================== */ /* ===== Theme Definitions ===== */ /* --- Ocean Teal (Default) --- */ :root, [data-theme="ocean-teal"] { --primary: #0d9488; --primary-dark: #0f766e; --primary-light: #14b8a6; --primary-50: #f5faf9; --primary-100: #e0f5f2; --primary-200: #b8e8e1; --primary-300: #7dd4c9; --primary-400: #3cbfb0; --primary-500: #14b8a6; --primary-600: #0d9488; --primary-700: #0f766e; --primary-800: #115e59; --primary-900: #134e4a; --primary-950: #042f2e; --theme-accent: #5eead4; --theme-accent-rgb: 94, 234, 212; --theme-primary-rgb: 13, 148, 136; --sidebar-bg: #0f766e; --sidebar-bg-gradient: linear-gradient(180deg, #0f766e 0%, #115e59 100%); --sidebar-header-bg: #0d6b63; --sidebar-active-border: #5eead4; --shadow-primary: 0 3px 10px rgba(13,148,136,0.12); --shadow-primary-lg: 0 6px 20px rgba(13,148,136,0.15); --theme-name: "Ocean Teal"; } /* --- Royal Amethyst --- */ [data-theme="royal-amethyst"] { --primary: #7c3aed; --primary-dark: #6d28d9; --primary-light: #8b5cf6; --primary-50: #faf5ff; --primary-100: #f3e8ff; --primary-200: #e9d5ff; --primary-300: #d8b4fe; --primary-400: #c084fc; --primary-500: #a855f7; --primary-600: #9333ea; --primary-700: #7c3aed; --primary-800: #6d28d9; --primary-900: #5b21b6; --primary-950: #3b0764; --theme-accent: #c4b5fd; --theme-accent-rgb: 196, 181, 253; --theme-primary-rgb: 124, 58, 237; --sidebar-bg: #6d28d9; --sidebar-bg-gradient: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%); --sidebar-header-bg: #5b21b6; --sidebar-active-border: #c4b5fd; --shadow-primary: 0 3px 10px rgba(124,58,237,0.12); --shadow-primary-lg: 0 6px 20px rgba(124,58,237,0.15); --theme-name: "Royal Amethyst"; } /* --- Ruby Crimson --- */ [data-theme="ruby-crimson"] { --primary: #dc2626; --primary-dark: #b91c1c; --primary-light: #ef4444; --primary-50: #fef2f2; --primary-100: #fee2e2; --primary-200: #fecaca; --primary-300: #fca5a5; --primary-400: #f87171; --primary-500: #ef4444; --primary-600: #dc2626; --primary-700: #b91c1c; --primary-800: #991b1b; --primary-900: #7f1d1d; --primary-950: #450a0a; --theme-accent: #fca5a5; --theme-accent-rgb: 252, 165, 165; --theme-primary-rgb: 185, 28, 28; --sidebar-bg: #b91c1c; --sidebar-bg-gradient: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%); --sidebar-header-bg: #991b1b; --sidebar-active-border: #fca5a5; --shadow-primary: 0 3px 10px rgba(185,28,28,0.12); --shadow-primary-lg: 0 6px 20px rgba(185,28,28,0.15); --theme-name: "Ruby Crimson"; } /* --- Sapphire Azure --- */ [data-theme="sapphire-azure"] { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; --primary-950: #172554; --theme-accent: #93c5fd; --theme-accent-rgb: 147, 197, 253; --theme-primary-rgb: 29, 78, 216; --sidebar-bg: #1d4ed8; --sidebar-bg-gradient: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); --sidebar-header-bg: #1e40af; --sidebar-active-border: #93c5fd; --shadow-primary: 0 3px 10px rgba(29,78,216,0.12); --shadow-primary-lg: 0 6px 20px rgba(29,78,216,0.15); --theme-name: "Sapphire Azure"; } /* --- Emerald Forest --- */ [data-theme="emerald-forest"] { --primary: #059669; --primary-dark: #047857; --primary-light: #10b981; --primary-50: #ecfdf5; --primary-100: #d1fae5; --primary-200: #a7f3d0; --primary-300: #6ee7b7; --primary-400: #34d399; --primary-500: #10b981; --primary-600: #059669; --primary-700: #047857; --primary-800: #065f46; --primary-900: #064e3b; --primary-950: #022c22; --theme-accent: #6ee7b7; --theme-accent-rgb: 110, 231, 183; --theme-primary-rgb: 4, 120, 87; --sidebar-bg: #047857; --sidebar-bg-gradient: linear-gradient(180deg, #047857 0%, #065f46 100%); --sidebar-header-bg: #065f46; --sidebar-active-border: #6ee7b7; --shadow-primary: 0 3px 10px rgba(4,120,87,0.12); --shadow-primary-lg: 0 6px 20px rgba(4,120,87,0.15); --theme-name: "Emerald Forest"; } /* --- Golden Amber --- */ [data-theme="golden-amber"] { --primary: #d97706; --primary-dark: #b45309; --primary-light: #f59e0b; --primary-50: #fffbeb; --primary-100: #fef3c7; --primary-200: #fde68a; --primary-300: #fcd34d; --primary-400: #fbbf24; --primary-500: #f59e0b; --primary-600: #d97706; --primary-700: #b45309; --primary-800: #92400e; --primary-900: #78350f; --primary-950: #451a03; --theme-accent: #fcd34d; --theme-accent-rgb: 252, 211, 77; --theme-primary-rgb: 180, 83, 9; --sidebar-bg: #b45309; --sidebar-bg-gradient: linear-gradient(180deg, #b45309 0%, #92400e 100%); --sidebar-header-bg: #92400e; --sidebar-active-border: #fcd34d; --shadow-primary: 0 3px 10px rgba(180,83,9,0.12); --shadow-primary-lg: 0 6px 20px rgba(180,83,9,0.15); --theme-name: "Golden Amber"; } /* --- Rose Quartz --- */ [data-theme="rose-quartz"] { --primary: #e11d48; --primary-dark: #be123c; --primary-light: #f43f5e; --primary-50: #fff1f2; --primary-100: #ffe4e6; --primary-200: #fecdd3; --primary-300: #fda4af; --primary-400: #fb7185; --primary-500: #f43f5e; --primary-600: #e11d48; --primary-700: #be123c; --primary-800: #9f1239; --primary-900: #881337; --primary-950: #4c0519; --theme-accent: #fda4af; --theme-accent-rgb: 253, 164, 175; --theme-primary-rgb: 190, 18, 60; --sidebar-bg: #be123c; --sidebar-bg-gradient: linear-gradient(180deg, #be123c 0%, #9f1239 100%); --sidebar-header-bg: #9f1239; --sidebar-active-border: #fda4af; --shadow-primary: 0 3px 10px rgba(190,18,60,0.12); --shadow-primary-lg: 0 6px 20px rgba(190,18,60,0.15); --theme-name: "Rose Quartz"; } /* --- Midnight Obsidian --- */ [data-theme="midnight-obsidian"] { --primary: #475569; --primary-dark: #334155; --primary-light: #64748b; --primary-50: #f8fafc; --primary-100: #f1f5f9; --primary-200: #e2e8f0; --primary-300: #cbd5e1; --primary-400: #94a3b8; --primary-500: #64748b; --primary-600: #475569; --primary-700: #334155; --primary-800: #1e293b; --primary-900: #0f172a; --primary-950: #020617; --theme-accent: #94a3b8; --theme-accent-rgb: 148, 163, 184; --theme-primary-rgb: 30, 41, 59; --sidebar-bg: #1e293b; --sidebar-bg-gradient: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --sidebar-header-bg: #0f172a; --sidebar-active-border: #94a3b8; --shadow-primary: 0 3px 10px rgba(30,41,59,0.15); --shadow-primary-lg: 0 6px 20px rgba(30,41,59,0.2); --theme-name: "Midnight Obsidian"; } /* --- Platinum Silver --- */ [data-theme="platinum-silver"] { --primary: #6b7280; --primary-dark: #4b5563; --primary-light: #9ca3af; --primary-50: #f9fafb; --primary-100: #f3f4f6; --primary-200: #e5e7eb; --primary-300: #d1d5db; --primary-400: #9ca3af; --primary-500: #6b7280; --primary-600: #4b5563; --primary-700: #374151; --primary-800: #1f2937; --primary-900: #111827; --primary-950: #030712; --theme-accent: #d1d5db; --theme-accent-rgb: 209, 213, 219; --theme-primary-rgb: 55, 65, 81; --sidebar-bg: #374151; --sidebar-bg-gradient: linear-gradient(180deg, #374151 0%, #1f2937 100%); --sidebar-header-bg: #1f2937; --sidebar-active-border: #d1d5db; --shadow-primary: 0 3px 10px rgba(55,65,81,0.15); --shadow-primary-lg: 0 6px 20px rgba(55,65,81,0.2); --theme-name: "Platinum Silver"; } /* ===== Theme Picker Panel ===== */ .theme-picker-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--white); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; padding: 0; } .theme-picker-panel.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .theme-picker-header { padding: 16px 20px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-100); } .theme-picker-title { font-size: 0.875rem; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: 8px; } .theme-picker-title svg { width: 16px; height: 16px; color: var(--primary); } .theme-picker-close { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--gray-100); color: var(--gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .theme-picker-close:hover { background: var(--gray-200); color: var(--gray-700); } .theme-picker-body { padding: 12px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 360px; overflow-y: auto; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; background: var(--gray-50); position: relative; overflow: hidden; } .theme-option:hover { background: var(--gray-100); border-color: var(--gray-200); transform: translateY(-1px); } .theme-option.active { border-color: var(--primary); background: var(--primary-50); box-shadow: 0 2px 8px rgba(var(--theme-accent-rgb, 13,148,136), 0.15); } .theme-option.active::after { content: ''; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .theme-swatch { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .theme-swatch::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; } .theme-swatch::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; } /* Theme swatch colors */ .theme-swatch[data-swatch="ocean-teal"]::before { background: #0d9488; } .theme-swatch[data-swatch="ocean-teal"]::after { background: #5eead4; } .theme-swatch[data-swatch="royal-amethyst"]::before { background: #7c3aed; } .theme-swatch[data-swatch="royal-amethyst"]::after { background: #c4b5fd; } .theme-swatch[data-swatch="ruby-crimson"]::before { background: #dc2626; } .theme-swatch[data-swatch="ruby-crimson"]::after { background: #fca5a5; } .theme-swatch[data-swatch="sapphire-azure"]::before { background: #2563eb; } .theme-swatch[data-swatch="sapphire-azure"]::after { background: #93c5fd; } .theme-swatch[data-swatch="emerald-forest"]::before { background: #059669; } .theme-swatch[data-swatch="emerald-forest"]::after { background: #6ee7b7; } .theme-swatch[data-swatch="golden-amber"]::before { background: #d97706; } .theme-swatch[data-swatch="golden-amber"]::after { background: #fcd34d; } .theme-swatch[data-swatch="rose-quartz"]::before { background: #e11d48; } .theme-swatch[data-swatch="rose-quartz"]::after { background: #fda4af; } .theme-swatch[data-swatch="midnight-obsidian"]::before { background: #1e293b; } .theme-swatch[data-swatch="midnight-obsidian"]::after { background: #94a3b8; } .theme-swatch[data-swatch="platinum-silver"]::before { background: #374151; } .theme-swatch[data-swatch="platinum-silver"]::after { background: #d1d5db; } .theme-option-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .theme-option-name { font-size: 0.75rem; font-weight: 700; color: var(--gray-800); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-option-desc { font-size: 0.625rem; color: var(--gray-400); font-weight: 500; line-height: 1.2; } /* Dark mode theme picker */ html.dark .theme-picker-panel { background: var(--dm-surface) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important; } html.dark .theme-picker-header { border-bottom-color: var(--dm-border) !important; } html.dark .theme-picker-title { color: var(--dm-text) !important; } html.dark .theme-picker-close { background: var(--dm-surface2) !important; color: var(--dm-text-muted) !important; } html.dark .theme-picker-close:hover { background: var(--dm-border-hover) !important; color: var(--dm-text) !important; } html.dark .theme-option { background: var(--dm-surface2) !important; } html.dark .theme-option:hover { background: rgba(255,255,255,0.06) !important; border-color: var(--dm-border-hover) !important; } html.dark .theme-option.active { border-color: var(--primary) !important; background: rgba(var(--theme-accent-rgb, 13,148,136), 0.08) !important; } html.dark .theme-option-name { color: var(--dm-text) !important; } html.dark .theme-option-desc { color: var(--dm-text-muted) !important; } /* ===== Theme Transition Animation ===== */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important; } /* ===== Sidebar Theme Override ===== */ .sidebar { background: var(--sidebar-bg-gradient) !important; box-shadow: 2px 0 8px rgba(0,0,0,0.15) !important; } /* ===== Topbar Theme Overrides ===== */ /* Main topbar bar — uses theme primary colors */ .topbar-inner { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%) !important; box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 13,148,136), 0.15), 0 1px 3px rgba(0,0,0,0.06) !important; } /* Accent line at the very top of the topbar */ .topbar-accent-line { background: linear-gradient(90deg, var(--primary-light) 0%, var(--theme-accent) 25%, var(--primary-light) 50%, var(--theme-accent) 75%, var(--primary-light) 100%) !important; background-size: 200% 100% !important; } /* Flyout menu top accent bar */ .topbar-flyout::after { background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light), var(--theme-accent), var(--primary-light), var(--primary), var(--primary-dark)) !important; background-size: 200% 100% !important; } /* Category row left-border indicator */ .topbar-flyout-cat::before { background: linear-gradient(180deg, var(--primary), var(--primary-light)) !important; } /* Category hover styles */ .topbar-flyout-cat:hover { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb, 13,148,136), 0.06), rgba(var(--theme-accent-rgb, 13,148,136), 0.02)) !important; color: var(--primary) !important; } /* Category active styles */ .topbar-flyout-cat.active { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb, 13,148,136), 0.08), rgba(var(--theme-accent-rgb, 13,148,136), 0.03)) !important; color: var(--primary-dark) !important; } /* Flyout submenu top accent */ .topbar-flyout-submenu::after { background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light), var(--theme-accent), var(--primary-light), var(--primary), var(--primary-dark)) !important; background-size: 200% 100% !important; } /* Mega panel shadow with theme color */ .topbar-mega-panel { box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 13,148,136), 0.05), 0 8px 16px rgba(var(--theme-primary-rgb, 13,148,136), 0.06), 0 24px 56px -8px rgba(var(--theme-primary-rgb, 13,148,136), 0.12), 0 48px 80px -16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(var(--theme-primary-rgb, 13,148,136), 0.03) !important; } /* Mega link left-bar indicator */ .topbar-mega-link::before { background: linear-gradient(180deg, var(--primary), var(--primary-light)) !important; } /* Mega link hover */ .topbar-mega-link:hover { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb, 13,148,136), 0.06), rgba(var(--theme-accent-rgb, 13,148,136), 0.02)) !important; color: var(--primary) !important; } .topbar-mega-link:hover svg { color: var(--primary) !important; background: rgba(var(--theme-primary-rgb, 13,148,136), 0.06) !important; } /* Mega link active */ .topbar-mega-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb, 13,148,136), 0.25), 0 0 0 1px rgba(var(--theme-primary-rgb, 13,148,136), 0.1) !important; } /* Mega column header */ .topbar-mega-col-header { color: var(--primary) !important; border-bottom-color: rgba(var(--theme-primary-rgb, 13,148,136), 0.12) !important; } .topbar-mega-col-header::after { background: linear-gradient(90deg, var(--primary), transparent) !important; } /* Mega column separator */ .topbar-mega-col + .topbar-mega-col { border-left-color: rgba(var(--theme-primary-rgb, 13,148,136), 0.08) !important; } /* Mega panel accent bar per category */ .topbar-mega-wrap .topbar-mega-panel::after { background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light), var(--theme-accent), var(--primary-light), var(--primary), var(--primary-dark)) !important; background-size: 200% 100% !important; } .topbar-mega-wrap .topbar-mega-panel { border-color: rgba(var(--theme-primary-rgb, 13,148,136), 0.1) !important; } .topbar-mega-wrap .topbar-mega-panel::before { border-color: rgba(var(--theme-primary-rgb, 13,148,136), 0.1) !important; } .topbar-mega-wrap .topbar-mega-link:hover { color: var(--primary) !important; background: rgba(var(--theme-accent-rgb, 13,148,136), 0.05) !important; } .topbar-mega-wrap .topbar-mega-link:hover svg { color: var(--primary) !important; } .topbar-mega-wrap .topbar-mega-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; } /* Topbar navigation active state color */ .topbar-nav-color-dashboard.active, .topbar-nav-color-hr.active, .topbar-nav-color-reports.active, .topbar-nav-color-attendance.active, .topbar-nav-color-leave.active, .topbar-nav-color-payroll.active, .topbar-nav-color-travel.active, .topbar-nav-color-security.active { color: var(--primary) !important; } .topbar-mega-wrap.active-cat .topbar-nav-dropdown { color: var(--primary) !important; } /* Mobile menu link theme */ .topbar-mobile-link:hover { background: rgba(var(--theme-accent-rgb, 13,148,136), 0.05) !important; color: var(--primary) !important; } .topbar-mobile-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 13,148,136), 0.25) !important; } /* Topbar logo text shadow */ .topbar-logo-text { text-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 -1px 0 rgba(0,0,0,0.1), 0 0 12px rgba(var(--theme-accent-rgb, 13,148,136), 0.08) !important; } /* Tour popover theme */ .sayone-tour-popover .driver-popover-title { color: var(--primary-dark) !important; } .sayone-tour-popover .driver-popover-next-btn { background: var(--primary) !important; } .sayone-tour-popover .driver-popover-next-btn:hover { background: var(--primary-dark) !important; } .sayone-tour-popover .driver-popover-prev-btn { background: var(--primary-50) !important; color: var(--primary) !important; border-color: var(--primary-200) !important; } .sayone-tour-popover .driver-popover-prev-btn:hover { background: var(--primary-100) !important; border-color: var(--theme-accent) !important; } /* ===== DARK MODE: Topbar Theme Overrides ===== */ html.dark .topbar-inner { background: linear-gradient(135deg, var(--primary-950) 0%, var(--primary-900) 50%, var(--primary-800) 100%) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3) !important; } html.dark .topbar-accent-line { background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--theme-accent), var(--primary-light), var(--primary)) !important; } html.dark .topbar-logo-text { text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 -1px 0 rgba(0,0,0,0.3), 0 0 12px rgba(var(--theme-accent-rgb, 13,148,136), 0.08) !important; } html.dark .topbar-mega-link:hover { background: rgba(var(--theme-accent-rgb, 13,148,136), 0.06) !important; color: var(--primary-light) !important; } html.dark .topbar-mega-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; } /* ===== Category variable overrides — all use theme primary ===== */ :root, [data-theme] { --cat-dashboard: var(--primary); --cat-hr: var(--primary); --cat-reports: var(--primary); --cat-attendance: var(--primary); --cat-leave: var(--primary); --cat-payroll: var(--primary); --cat-travel: var(--primary); --cat-security: var(--primary); } /* ===== Form Section Card Theme ===== */ .form-section-card { background: linear-gradient(135deg, var(--primary-50), var(--primary-100)) !important; border-color: rgba(var(--theme-accent-rgb, 13,148,136), 0.12) !important; border-left-color: var(--primary) !important; } .form-section-card::before { background: radial-gradient(circle at top right, rgba(var(--theme-accent-rgb, 13,148,136), 0.06), transparent 70%) !important; } /* ===== Section Step Number Badge Theme ===== */ .section-step-num { background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; box-shadow: 0 2px 4px rgba(var(--theme-accent-rgb, 13,148,136), 0.2) !important; } /* ===== Form Input Focus Theme ===== */ .form-group .form-input:focus, .form-group select.form-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, 13,148,136), 0.12), 0 1px 3px rgba(var(--theme-accent-rgb, 13,148,136), 0.08) !important; } /* ===== Select Chevron Theme ===== */ select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* ===== Table Search Focus Theme ===== */ .table-search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb, 13,148,136), 0.15) !important; } /* ===== Button Primary Theme ===== */ .btn-primary { background: var(--primary) !important; box-shadow: var(--shadow-primary) !important; } .btn-primary:hover:not(:disabled) { background: var(--primary-dark) !important; box-shadow: var(--shadow-primary-lg) !important; } /* ===== Outline Button Hover Theme ===== */ .btn-outline:hover:not(:disabled) { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-50) !important; } /* ===== Table Row Hover Theme ===== */ table tbody tr:hover td { background: var(--primary-50) !important; } /* ===== ESS Topnav Theme ===== */ .ess-topnav { background: var(--primary) !important; box-shadow: 0 1px 4px rgba(var(--theme-accent-rgb, 13,148,136), 0.1) !important; } /* ===== ESS Welcome Theme ===== */ .ess-welcome { background: var(--primary) !important; box-shadow: 0 2px 10px rgba(var(--theme-accent-rgb, 13,148,136), 0.12) !important; } /* ===== Form Section Title Theme ===== */ .form-section-title { color: var(--primary) !important; border-bottom-color: var(--primary-100) !important; } /* ===== Floating Label Focus Theme ===== */ .floating-label .form-input:focus ~ label, .floating-label .form-input:not(:placeholder-shown) ~ label { color: var(--primary) !important; } /* ===== Login Container Theme ===== */ .login-container { background: linear-gradient(135deg, var(--primary-950) 0%, var(--primary-800) 30%, var(--primary) 70%, var(--primary-300) 100%) !important; } /* ===== Badge Primary Theme ===== */ .badge-primary { background: var(--primary-100) !important; color: var(--primary-800) !important; } /* ===== Selection Theme ===== */ ::selection { background: var(--primary-100); color: var(--primary-800); } /* ===== Pulse Glow Animation (theme-aware) ===== */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb, 13,148,136), 0.2); } 50% { box-shadow: 0 0 0 6px rgba(var(--theme-accent-rgb, 13,148,136), 0); } } /* ===== Theme-Aware SVG Strokes for Select ===== */ /* We need to dynamically update the select chevron color, handled by JS */ /* ===== Mobile Responsive — Theme Picker ===== */ @media (max-width: 400px) { .theme-picker-panel { width: calc(100vw - 1rem); right: -0.5rem; } .theme-picker-close { min-width: 36px; min-height: 36px; } }