/** * Cockpit Desktop - Theme Concepts * -------------------------------------------------------------- * 5 switchable enterprise design concepts. Each is a drop-in * override of the design tokens (which cascade through every * var() in styles.css automatically) PLUS targeted overrides of * the hard-coded window chrome / density that styles.css ships. * * Activated by setting `data-theme=""` on . * No data-theme -> original pastel design (untouched). * * slate Linear-like near-monochrome, indigo spark * paper Stripe/Vercel daylight clean * terminal Bloomberg dark-framed dense * azure Microsoft Fluent desaturated enterprise blue * graphite IBM Carbon high-contrast structural * * Design philosophy shared by all five: solid titlebars (no * gradients), flat/low shadows, monochrome window controls, * small radii, tight density, no animated wallpaper, no bounce. * -------------------------------------------------------------- */ /* Cross-theme polish: neutralise the literal-blue resize handle so it picks up each theme's gray instead of staying CI-blue. */ html[data-theme] .window-resize-handle::after { border-color: transparent transparent var(--gray-dark) transparent; } /* Kill the bouncy window open animation / wallpaper drift for the enterprise themes — motion should be quiet. */ html[data-theme] .window { animation-duration: 160ms; } html[data-theme] .desktop { animation: none; } /* ============================================================== 1. SLATE — the quiet operator (Linear) Dark slate desktop, light cards, one indigo accent. ============================================================== */ html[data-theme="slate"] { --blue-dark: #1C1F26; --blue-standard: #5B5FE3; --blue-light: #EEEFF3; --blue-xlight: #F7F8FA; --blue-darker: #0E0F13; --blue-bright: #7B7FF0; --gray-dark: #9296A1; --gray-standard: #C9CCD4; --gray-light: #EDEEF1; --gray-darker: #5B606B; --blue-main: var(--blue-standard); --radius: 10px; --radius-sm: 6px; --radius-lg: 8px; --shadow-soft: 0 1px 2px rgba(15, 16, 19, 0.05); --shadow-elev: 0 1px 2px rgba(15, 16, 19, 0.06), 0 8px 24px rgba(15, 16, 19, 0.10); --shadow-focus: 0 1px 2px rgba(15, 16, 19, 0.08), 0 12px 32px rgba(15, 16, 19, 0.16); --shadow-intense: 0 12px 32px rgba(15, 16, 19, 0.20); } html[data-theme="slate"] body, html[data-theme="slate"] .desktop { background: #13151A; } html[data-theme="slate"] .desktop, html[data-theme="slate"] .window-container { bottom: 44px; } html[data-theme="slate"] .window { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E6E7EC; border-radius: 8px; } html[data-theme="slate"] .window.active { border-color: #5B5FE3; } html[data-theme="slate"] .window-header { height: 30px; padding: 0 12px; background: #ffffff; border-bottom: 1px solid #E6E7EC; border-radius: 8px 8px 0 0; } html[data-theme="slate"] .window-header::before { display: none; } html[data-theme="slate"] .window-title { font-size: 12px; font-weight: 600; color: #1C1F26; letter-spacing: 0; text-shadow: none; } html[data-theme="slate"] .window-control { width: 18px; height: 18px; border-radius: 4px; background: transparent; color: #5B606B; font-size: 13px; } html[data-theme="slate"] .window-control::before { display: none; } html[data-theme="slate"] .window-control:hover { background: #EEEFF3; color: #1C1F26; transform: none; } html[data-theme="slate"] .window-control.close:hover { background: #F4E5E5; color: #C0392B; transform: none; } html[data-theme="slate"] .window-content { padding: 12px 16px; line-height: 1.4; font-size: 13px; background: #F7F8FA; color: #1C1F26; } html[data-theme="slate"] .window.maximized { height: calc(100vh - 44px) !important; } html[data-theme="slate"] .taskbar { height: 44px; background: #13151A; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid rgba(255, 255, 255, 0.06); box-shadow: none; } html[data-theme="slate"] .taskbar::before { display: none; } html[data-theme="slate"] .taskbar-item { padding: 4px 10px; border-radius: 6px; font-size: 12px; letter-spacing: 0; background: transparent; color: #9296A1; border-color: transparent; } html[data-theme="slate"] .taskbar-item:hover { background: #22252E; color: #fff; transform: none; box-shadow: none; } html[data-theme="slate"] .taskbar-item.active { background: #22252E; color: #fff; border-color: transparent; box-shadow: none; transform: none; } html[data-theme="slate"] .taskbar-item.active::after { background: #5B5FE3; height: 2px; width: 60%; } /* ============================================================== 2. PAPER — daylight clean (Stripe / Vercel) Warm-white dot-grid desktop, pure-white windows, blue accent. ============================================================== */ html[data-theme="paper"] { --blue-dark: #0A0A0A; --blue-standard: #2563EB; --blue-light: #E8EEFB; --blue-xlight: #FFFFFF; --blue-darker: #111111; --blue-bright: #3B82F6; --gray-dark: #8A8F98; --gray-standard: #E4E4E7; --gray-light: #F4F4F5; --gray-darker: #52525B; --blue-main: var(--blue-standard); --radius: 10px; --radius-sm: 6px; --radius-lg: 10px; --shadow-soft: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-elev: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.08); --shadow-focus: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.07), 0 18px 36px rgba(0, 0, 0, 0.12); --shadow-intense: 0 18px 40px rgba(0, 0, 0, 0.16); } html[data-theme="paper"] body, html[data-theme="paper"] .desktop { background-color: #EBECEE; background-image: radial-gradient(#DADBDE 1px, transparent 1px); background-size: 24px 24px; } html[data-theme="paper"] .desktop, html[data-theme="paper"] .window-container { bottom: 48px; } html[data-theme="paper"] .window { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E4E4E7; border-radius: 10px; } html[data-theme="paper"] .window.active { border-color: #D4D4D8; } html[data-theme="paper"] .window-header { height: 34px; padding: 0 14px; background: #FAFAFA; border-bottom: 1px solid #E4E4E7; border-radius: 10px 10px 0 0; } html[data-theme="paper"] .window-header::before { display: none; } html[data-theme="paper"] .window-title { font-size: 13px; font-weight: 600; color: #111111; letter-spacing: 0; text-shadow: none; } html[data-theme="paper"] .window-control { width: 20px; height: 20px; border-radius: 6px; background: transparent; color: #71717A; font-size: 13px; } html[data-theme="paper"] .window-control::before { display: none; } html[data-theme="paper"] .window-control:hover { background: #F4F4F5; color: #18181B; transform: none; } html[data-theme="paper"] .window-control.close:hover { background: #FDE8E8; color: #E5484D; transform: none; } html[data-theme="paper"] .window-content { padding: 16px 20px; line-height: 1.45; font-size: 13px; background: #ffffff; color: #18181B; } html[data-theme="paper"] .window.maximized { height: calc(100vh - 48px) !important; } html[data-theme="paper"] .taskbar { height: 48px; background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #E4E4E7; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04); } html[data-theme="paper"] .taskbar::before { display: none; } html[data-theme="paper"] .taskbar-item { padding: 6px 12px; border-radius: 8px; font-size: 13px; letter-spacing: 0; background: transparent; color: #52525B; border-color: transparent; } html[data-theme="paper"] .taskbar-item:hover { background: #F4F4F5; color: #18181B; transform: none; box-shadow: none; } html[data-theme="paper"] .taskbar-item.active { background: #F4F4F5; color: #2563EB; border-color: transparent; box-shadow: none; transform: none; } html[data-theme="paper"] .taskbar-item.active::after { background: #2563EB; height: 2px; width: 60%; } /* ============================================================== 3. TERMINAL — dark trading desk (Bloomberg) Near-black desktop + slim dark chrome, amber accent, densest. Window content stays light/near-white for robustness. ============================================================== */ html[data-theme="terminal"] { --blue-dark: #1A1408; --blue-standard: #B45309; /* readable amber on light content */ --blue-light: #FBF1DE; --blue-xlight: #FAFAF8; --blue-darker: #16130C; --blue-bright: #C2410C; --gray-dark: #9CA3AF; --gray-standard: #D6D3CE; --gray-light: #F0EEEA; --gray-darker: #57534E; --blue-main: var(--blue-standard); --radius: 4px; --radius-sm: 3px; --radius-lg: 4px; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-elev: 0 0 0 1px #1C232C, 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 1px #2E3742, 0 10px 30px rgba(0, 0, 0, 0.55); --shadow-intense: 0 14px 36px rgba(0, 0, 0, 0.6); } html[data-theme="terminal"] body, html[data-theme="terminal"] .desktop { background-color: #06080B; background-image: linear-gradient(#0D1219 1px, transparent 1px), linear-gradient(90deg, #0D1219 1px, transparent 1px); background-size: 32px 32px; } html[data-theme="terminal"] .desktop, html[data-theme="terminal"] .window-container { bottom: 36px; } html[data-theme="terminal"] .window { background: #FAFAF8; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #1C232C; border-radius: 4px; } html[data-theme="terminal"] .window.active { border-color: #2E3742; } html[data-theme="terminal"] .window-header { height: 26px; padding: 0 10px; background: #06080B; border-bottom: 1px solid #1C232C; border-radius: 4px 4px 0 0; } html[data-theme="terminal"] .window-header::before { display: none; } html[data-theme="terminal"] .window-title { font-size: 11px; font-weight: 600; color: #C5CAD2; letter-spacing: 0.02em; text-shadow: none; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; } html[data-theme="terminal"] .window-control { width: 16px; height: 16px; border-radius: 3px; background: transparent; color: #5A636E; font-size: 12px; } html[data-theme="terminal"] .window-control::before { display: none; } html[data-theme="terminal"] .window-controls { gap: 4px; } html[data-theme="terminal"] .window-control:hover { background: #1C232C; color: #E6E8E3; transform: none; } html[data-theme="terminal"] .window-control.close:hover { background: #F85149; color: #fff; transform: none; } html[data-theme="terminal"] .window-content { padding: 8px 10px; line-height: 1.35; font-size: 12px; background: #FAFAF8; color: #16130C; } html[data-theme="terminal"] .window.maximized { height: calc(100vh - 36px) !important; } html[data-theme="terminal"] .taskbar { height: 36px; background: #06080B; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #1C232C; box-shadow: none; } html[data-theme="terminal"] .taskbar::before { display: none; } html[data-theme="terminal"] .taskbar-item { padding: 4px 10px; border-radius: 2px; font-size: 11px; letter-spacing: 0.02em; background: transparent; color: #5A636E; border-color: transparent; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; } html[data-theme="terminal"] .taskbar-item:hover { background: transparent; color: #E6E8E3; transform: none; box-shadow: none; } html[data-theme="terminal"] .taskbar-item.active { background: transparent; color: #E6E8E3; border-color: transparent; box-shadow: none; transform: none; } html[data-theme="terminal"] .taskbar-item.active::after { background: #E8A33D; height: 1px; width: 100%; left: 0; transform: none; border-radius: 0; } /* ============================================================== 4. AZURE — desaturated enterprise blue (Microsoft Fluent) Mica gradient desktop, off-white windows, light titlebars. ============================================================== */ html[data-theme="azure"] { --blue-dark: #1B1A19; --blue-standard: #0F6CBD; --blue-light: #EBF3FC; --blue-xlight: #FAF9F8; --blue-darker: #103A5C; --blue-bright: #2886DE; --gray-dark: #979593; --gray-standard: #D2D0CE; --gray-light: #F3F2F1; --gray-darker: #605E5C; --blue-main: var(--blue-standard); --radius: 8px; --radius-sm: 4px; --radius-lg: 8px; --shadow-soft: 0 0.6px 1.8px rgba(0, 0, 0, 0.08), 0 1.6px 3.6px rgba(0, 0, 0, 0.10); --shadow-elev: 0 1.6px 3.6px rgba(0, 0, 0, 0.10), 0 6.4px 14.4px rgba(0, 0, 0, 0.13); --shadow-focus: 0 3.2px 7.2px rgba(0, 0, 0, 0.13), 0 12.8px 28.8px rgba(0, 0, 0, 0.18); --shadow-intense: 0 16px 32px rgba(0, 0, 0, 0.22); } html[data-theme="azure"] body, html[data-theme="azure"] .desktop { background: linear-gradient(160deg, #EDEBE9 0%, #E1E5EA 100%); } html[data-theme="azure"] .desktop, html[data-theme="azure"] .window-container { bottom: 40px; } html[data-theme="azure"] .window { background: #FAF9F8; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E1DFDD; border-radius: 8px; } html[data-theme="azure"] .window.active { border-color: #C7C5C3; } html[data-theme="azure"] .window-header { height: 32px; padding: 0 12px; background: #ffffff; border-bottom: 1px solid #E1DFDD; border-radius: 8px 8px 0 0; } html[data-theme="azure"] .window-header::before { display: none; } html[data-theme="azure"] .window-title { font-size: 13px; font-weight: 600; color: #1B1A19; letter-spacing: 0; text-shadow: none; } html[data-theme="azure"] .window-controls { gap: 2px; } html[data-theme="azure"] .window-control { width: 28px; height: 24px; border-radius: 4px; background: transparent; color: #605E5C; font-size: 13px; } html[data-theme="azure"] .window-control::before { display: none; } html[data-theme="azure"] .window-control:hover { background: #F3F2F1; color: #1B1A19; transform: none; } html[data-theme="azure"] .window-control.close:hover { background: #FDE7E9; color: #E81123; transform: none; } html[data-theme="azure"] .window-content { padding: 12px 16px; line-height: 1.4; font-size: 13px; background: #FAF9F8; color: #1B1A19; } html[data-theme="azure"] .window.maximized { height: calc(100vh - 40px) !important; } html[data-theme="azure"] .taskbar { height: 40px; background: #F3F2F1; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #E1DFDD; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); } html[data-theme="azure"] .taskbar::before { display: none; } html[data-theme="azure"] .taskbar-item { padding: 5px 12px; border-radius: 4px; font-size: 13px; letter-spacing: 0; background: transparent; color: #605E5C; border-color: transparent; } html[data-theme="azure"] .taskbar-item:hover { background: #EAE9E8; color: #1B1A19; transform: none; box-shadow: none; } html[data-theme="azure"] .taskbar-item.active { background: #ffffff; color: #0F6CBD; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transform: none; } html[data-theme="azure"] .taskbar-item.active::after { background: #0F6CBD; height: 2px; width: 60%; } /* ============================================================== 5. GRAPHITE — high-contrast structural (IBM Carbon) Graphite desktop, gray-10 windows, DARK titlebars, 2px corners. ============================================================== */ html[data-theme="graphite"] { --blue-dark: #161616; --blue-standard: #0F62FE; --blue-light: #E0E7FF; --blue-xlight: #F4F4F4; --blue-darker: #0043CE; --blue-bright: #4589FF; --gray-dark: #8D8D8D; --gray-standard: #C6C6C6; --gray-light: #E0E0E0; --gray-darker: #525252; --blue-main: var(--blue-standard); --radius: 2px; --radius-sm: 2px; --radius-lg: 2px; --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.14); --shadow-elev: 0 2px 6px rgba(0, 0, 0, 0.20); --shadow-focus: 0 4px 10px rgba(0, 0, 0, 0.26); --shadow-intense: 0 12px 28px rgba(0, 0, 0, 0.32); } html[data-theme="graphite"] body, html[data-theme="graphite"] .desktop { background-color: #262626; background-image: linear-gradient(#333333 1px, transparent 1px), linear-gradient(90deg, #333333 1px, transparent 1px); background-size: 16px 16px; } html[data-theme="graphite"] .desktop, html[data-theme="graphite"] .window-container { bottom: 40px; } html[data-theme="graphite"] .window { background: #F4F4F4; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #C6C6C6; border-radius: 2px; } html[data-theme="graphite"] .window.active { border-color: #0F62FE; } html[data-theme="graphite"] .window-header { height: 28px; padding: 0 12px; background: #161616; border-bottom: 1px solid #161616; border-radius: 2px 2px 0 0; } html[data-theme="graphite"] .window-header::before { display: none; } html[data-theme="graphite"] .window-title { font-size: 12px; font-weight: 600; color: #F4F4F4; letter-spacing: 0.01em; text-shadow: none; } html[data-theme="graphite"] .window-controls { gap: 0; } html[data-theme="graphite"] .window-control { width: 28px; height: 22px; border-radius: 0; background: transparent; color: #C6C6C6; font-size: 13px; } html[data-theme="graphite"] .window-control::before { display: none; } html[data-theme="graphite"] .window-control:hover { background: #333333; color: #ffffff; transform: none; } html[data-theme="graphite"] .window-control.close:hover { background: #DA1E28; color: #ffffff; transform: none; } html[data-theme="graphite"] .window-content { padding: 16px; line-height: 1.35; font-size: 14px; background: #F4F4F4; color: #161616; } html[data-theme="graphite"] .window.maximized { height: calc(100vh - 40px) !important; } html[data-theme="graphite"] .taskbar { height: 40px; background: #161616; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #393939; box-shadow: none; } html[data-theme="graphite"] .taskbar::before { display: none; } html[data-theme="graphite"] .taskbar-item { padding: 5px 16px; border-radius: 0; font-size: 13px; letter-spacing: 0; background: transparent; color: #C6C6C6; border-color: transparent; } html[data-theme="graphite"] .taskbar-item:hover { background: #262626; color: #fff; transform: none; box-shadow: none; } html[data-theme="graphite"] .taskbar-item.active { background: #262626; color: #ffffff; border-color: transparent; box-shadow: none; transform: none; } html[data-theme="graphite"] .taskbar-item.active::after { background: #0F62FE; height: 2px; width: 100%; left: 0; transform: none; border-radius: 0; } /* ============================================================== 6. STANDARD COMPACT — original CI colors, Azure density Keeps every color / gradient / background from the default (Standard) design and borrows ONLY the spacing, sizing, radii and flat shadows from Azure. No color tokens are overridden, so the CI palette flows through untouched. ============================================================== */ html[data-theme="standard-compact"] { /* Azure radii + flat shadows (dimension/feel, not hue) */ --radius: 8px; --radius-sm: 4px; --radius-lg: 8px; --shadow-soft: 0 0.6px 1.8px rgba(0, 0, 0, 0.08), 0 1.6px 3.6px rgba(0, 0, 0, 0.10); --shadow-elev: 0 1.6px 3.6px rgba(0, 0, 0, 0.10), 0 6.4px 14.4px rgba(0, 0, 0, 0.13); --shadow-focus: 0 3.2px 7.2px rgba(0, 0, 0, 0.13), 0 12.8px 28.8px rgba(0, 0, 0, 0.18); --shadow-intense: 0 16px 32px rgba(0, 0, 0, 0.22); } /* Keep the original animated CI wallpaper (re-enable after the global disable) */ html[data-theme="standard-compact"] .desktop { animation: subtleShift 20s ease-in-out infinite alternate; } html[data-theme="standard-compact"] .desktop, html[data-theme="standard-compact"] .window-container { bottom: 40px; } /* Window radius follows --radius-lg (now 8px) automatically; keep CI bg/border. */ /* Slim titlebar — keep the CI blue gradient + white title, Azure dimensions */ html[data-theme="standard-compact"] .window-header { height: 32px; padding: 0 12px; } html[data-theme="standard-compact"] .window-title { font-size: 13px; letter-spacing: 0; } html[data-theme="standard-compact"] .window-controls { gap: 2px; } html[data-theme="standard-compact"] .window-control { width: 28px; height: 24px; border-radius: 4px; font-size: 13px; } html[data-theme="standard-compact"] .window-control::before { display: none; } html[data-theme="standard-compact"] .window-control:hover { transform: none; } html[data-theme="standard-compact"] .window-control.close:hover { transform: none; } /* Azure content density; CI content background/colors untouched */ html[data-theme="standard-compact"] .window-content { padding: 12px 16px; line-height: 1.4; font-size: 13px; } html[data-theme="standard-compact"] .window.maximized { height: calc(100vh - 40px) !important; } /* Slim taskbar — keep the CI dark-blue bar, Azure dimensions */ html[data-theme="standard-compact"] .taskbar { height: 40px; } html[data-theme="standard-compact"] .taskbar-item { padding: 5px 12px; border-radius: 4px; font-size: 13px; letter-spacing: 0; } html[data-theme="standard-compact"] .taskbar-item:hover { transform: none; } html[data-theme="standard-compact"] .taskbar-item.active { transform: none; } /* --- Inner content density: compress the chunky app containers --- The window-content outer padding is already tight; the remaining "big spacing" comes from cards / panels / headers / tables that ship 20-24px padding in styles.css. Squeeze them ~40% for this theme only. Colours/backgrounds untouched. */ /* tighter outer content padding */ html[data-theme="standard-compact"] .window-content { padding: 10px 12px; } /* cards / panels / content wrappers: 20-24px -> 12-14px */ html[data-theme="standard-compact"] .app-container, html[data-theme="standard-compact"] .card, html[data-theme="standard-compact"] .customer-card, html[data-theme="standard-compact"] .tab-content, html[data-theme="standard-compact"] .projects-grid, html[data-theme="standard-compact"] .insights-tab, html[data-theme="standard-compact"] .insights-card, html[data-theme="standard-compact"] .categories-content, html[data-theme="standard-compact"] .chart-view-container, html[data-theme="standard-compact"] .kpi-card, html[data-theme="standard-compact"] .chart-section, html[data-theme="standard-compact"] .reports-tab, html[data-theme="standard-compact"] .report-card, html[data-theme="standard-compact"] .report-summary, html[data-theme="standard-compact"] .social-form, html[data-theme="standard-compact"] .social-agent-panel, html[data-theme="standard-compact"] .okr-form { padding: 13px; } /* header / summary / hero bars: 20px 24px -> 10px 14px */ html[data-theme="standard-compact"] .projects-header, html[data-theme="standard-compact"] .categories-header, html[data-theme="standard-compact"] .expenses-summary-bar, html[data-theme="standard-compact"] .receipt-overlay-header, html[data-theme="standard-compact"] .camp-settings-tab, html[data-theme="standard-compact"] .okr-hero { padding: 10px 14px; } /* medium cards / list rows: 18px 20px & 14px 18px -> tighter */ html[data-theme="standard-compact"] .pricing-option, html[data-theme="standard-compact"] .okr-bhag-card, html[data-theme="standard-compact"] .option-item, html[data-theme="standard-compact"] .timeframe-option label { padding: 12px 14px; } html[data-theme="standard-compact"] .selection-header, html[data-theme="standard-compact"] .selection-item, html[data-theme="standard-compact"] .quarterly-report-content .info-box { padding: 10px 12px; } /* empty states: 60px 20px -> 28px 20px */ html[data-theme="standard-compact"] .empty-state { padding: 28px 20px; } /* dialogs (they're windows too): 24px -> 14-16px */ html[data-theme="standard-compact"] .dialog-header, html[data-theme="standard-compact"] .confirm-dialog-header { padding: 14px 18px; } html[data-theme="standard-compact"] .dialog-progress, html[data-theme="standard-compact"] .dialog-body, html[data-theme="standard-compact"] .confirm-dialog-content, html[data-theme="standard-compact"] .receipt-overlay-body { padding: 16px; } html[data-theme="standard-compact"] .dialog-footer, html[data-theme="standard-compact"] .confirm-dialog-footer { padding: 12px 18px; } /* tables: uniform tighter cells */ html[data-theme="standard-compact"] .window-content th, html[data-theme="standard-compact"] .window-content td { padding: 6px 10px; } /* trim the largest layout gaps inside windows */ html[data-theme="standard-compact"] .projects-grid, html[data-theme="standard-compact"] .insights-tab, html[data-theme="standard-compact"] .reports-tab { gap: 12px; } /* ============================================================== Theme Switcher control (upper-left corner) ============================================================== */ #theme-switcher { position: fixed; top: 10px; left: 12px; z-index: 100000; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: rgba(20, 24, 32, 0.72); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } #theme-switcher .theme-switcher-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); user-select: none; } #theme-switcher select { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.10); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 26px 4px 10px; border-radius: 6px; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } #theme-switcher select:hover { background-color: rgba(255, 255, 255, 0.16); } #theme-switcher select option { color: #111; }