/** * CLA AI Hub — Shared theme system * * Practice tools (planner, payroll-mgmt, tax-compliance-mgmt, accounting-mgmt, * reporting-hub, etc.) ship with a LIGHT theme by default. This file adds an * additive DARK theme that activates when is set. * * The override is intentionally additive — it flips the canonical practice * design tokens (--navy, --white, --off, --border, --text*) and patches a * few common selectors that hardcode backgrounds. Some inline styles will * still render light; those are deliberately left alone to avoid breaking * visual hierarchy on screens we have not yet polished. * * Toggle is injected by /shared/theme.js. Persisted in localStorage as * cla_hub_theme = 'light' | 'dark'. */ html[data-theme="dark"] { color-scheme: dark; --navy: #e6ecf3; /* primary text — was dark navy, now light */ --navy2: #f1f5fb; --white: #1a2138; /* card / surface background */ --off: #0f1626; /* page background */ --off2: #232b3f; /* secondary surface */ --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text: #e6ecf3; --text2: #a8b1c0; --text3: #6b7280; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.32); /* Semantic backgrounds — slightly muted on dark */ --green-bg: rgba(34,197,94,0.12); --red-bg: rgba(239,68,68,0.12); --amber-bg: rgba(245,158,11,0.12); --blue-bg: rgba(59,130,246,0.12); --teal-bg: rgba(20,184,166,0.12); --purple-bg: rgba(139,92,246,0.12); --orange-bg: rgba(249,115,22,0.12); /* Semantic text — keep readable on dark */ --green: #4ade80; --red: #f87171; --amber: #fbbf24; --blue: #60a5fa; --teal: #5eead4; --purple: #c4b5fd; --orange: #fb923c; } html[data-theme="dark"] body { background: var(--off); color: var(--text); } /* Topbar uses --navy as bg in light mode, but in dark mode --navy is now light text. Flip it back to a dark surface so the topbar contrast still works. */ html[data-theme="dark"] .topbar { background: #07111b !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] .topbar a, html[data-theme="dark"] .topbar .tb-name { color: #fff !important; } /* Cards and panels — patch common hardcoded backgrounds */ html[data-theme="dark"] .card, html[data-theme="dark"] .metric, html[data-theme="dark"] .hub-card, html[data-theme="dark"] .info-box, html[data-theme="dark"] .status-box, html[data-theme="dark"] .chat-box { background: var(--white) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Tables — most practice tools use .tbl */ html[data-theme="dark"] .tbl, html[data-theme="dark"] .tbl thead, html[data-theme="dark"] .tbl tr { background: transparent !important; color: var(--text) !important; } html[data-theme="dark"] .tbl th { background: var(--off2) !important; color: var(--text2) !important; border-color: var(--border) !important; } html[data-theme="dark"] .tbl td { border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] .tbl tr:hover td { background: rgba(255,255,255,0.04) !important; } /* Inputs */ html[data-theme="dark"] .field-input, html[data-theme="dark"] input[type="text"]:not(.gh-search-input), html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--off2) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] .field-input::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text3) !important; } /* Buttons */ html[data-theme="dark"] .btn, html[data-theme="dark"] .btn-primary { background: var(--off2) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] .btn-primary { background: #1e40af !important; color: #fff !important; border-color: #1e40af !important; } html[data-theme="dark"] .btn-outline { background: transparent !important; border-color: var(--border) !important; color: var(--text2) !important; } html[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,0.04) !important; color: var(--text) !important; } /* Tab bar */ html[data-theme="dark"] .tab-row { border-bottom-color: var(--border) !important; } html[data-theme="dark"] .tab-btn { color: var(--text3) !important; background: transparent !important; } html[data-theme="dark"] .tab-btn:hover { color: var(--text) !important; } html[data-theme="dark"] .tab-btn.active { color: var(--text) !important; } /* ── SHARED TAB BAR UX IMPROVEMENTS ─────────────────────────────── Active tab: bolder visual weight. Tab row: scroll fade hint on mobile. */ .tab-btn.active { font-weight: 700 !important; border-bottom-width: 3px !important; background: rgba(35,43,81,0.04); } .tab-row { position: relative; } .tab-row::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, var(--off, #f7f8fa)); pointer-events: none; z-index: 1; } html[data-theme="dark"] .tab-row::after { background: linear-gradient(to right, transparent, var(--off, #0f1626)) !important; } html[data-theme="dark"] .tab-btn.active { font-weight: 700 !important; border-bottom-width: 3px !important; background: rgba(255,255,255,0.04) !important; } /* Page titles */ html[data-theme="dark"] .page-title, html[data-theme="dark"] .card-title { color: var(--text) !important; } html[data-theme="dark"] .page-sub { color: var(--text2) !important; } /* Theme toggle button — sits on top of every tool's topbar */ .cla-theme-toggle { position: fixed; top: 14px; right: 24px; z-index: 9999; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: all .15s ease; padding: 0; line-height: 1; } .cla-theme-toggle:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); transform: scale(1.05); } .cla-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(89,215,239,0.4); } html[data-theme="dark"] .cla-theme-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } @media (prefers-reduced-motion: reduce) { .cla-theme-toggle { transition: none; } .cla-theme-toggle:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════ SHARED MOBILE RESPONSIVE — applies to every tool that includes /shared/theme.css (Reporting Hub, Planner, Payroll, Tax Compliance, Legal, TP, Decision Queue, etc.) ═══════════════════════════════════════════════════════════ */ /* Topbar — consistent across all tools */ @media (max-width:768px) { .topbar { height:50px !important; padding:0 14px !important; } .topbar .logo-mark { font-size:10px !important; padding:3px 8px !important; } .tb-name { font-size:12px !important; } .tb-badge { font-size:9px !important; padding:2px 8px !important; } .page-title { font-size:20px !important; } .page-sub { font-size:12px !important; } .main { padding:16px 14px 24px !important; } /* Metrics grids — 2 columns */ .metrics { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; } .metric { padding:12px 14px !important; } .metric-val { font-size:18px !important; } .metric-label { font-size:9px !important; } /* Tab rows — smaller, scrollable */ .tab-row { overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0 !important; } .tab-btn { font-size:11px !important; padding:8px 14px !important; white-space:nowrap; min-height:40px; } /* Tables — tighter, scrollable */ .tbl-wrap, table.tbl { -webkit-overflow-scrolling:touch; } .tbl { font-size:11px !important; } .tbl th, .tbl td { padding:8px 10px !important; } /* Cards */ .card { padding:16px !important; } .card-title { font-size:14px !important; } /* Buttons — minimum touch targets */ .btn, .btn-primary, .btn-outline { min-height:44px; padding:10px 16px !important; font-size:12px !important; } /* Sync banner — compact */ #syncBanner { flex-direction:column !important; gap:8px !important; padding:10px 14px !important; } /* Section labels — never below 9px */ .section-label { font-size:9px !important; } /* Decision layer items in Reporting Hub */ .decision-item { flex-direction:column !important; align-items:flex-start !important; gap:8px !important; } .decision-action { align-self:flex-end; } /* Mode toggle — full width on mobile */ .mode-toggle { width:100%; } .mode-btn { flex:1; font-size:11px !important; padding:8px 10px !important; } /* Grid-5 and grid-2 — collapse */ .grid-5 { grid-template-columns:1fr !important; } .grid-2 { grid-template-columns:1fr !important; } /* Theme toggle — repositioned on mobile */ .cla-theme-toggle { top:10px !important; right:14px !important; width:28px !important; height:28px !important; font-size:13px !important; } /* Hub footer bar — hide on mobile (replaced by mobile-nav) */ #hub-footer { display:none !important; } /* ── SHARED MOBILE BOTTOM NAV (injected by theme.js) ── */ .cla-mobile-nav { display:flex !important; } .main { padding-bottom:80px !important; } } /* Mobile bottom nav — shared across all practice tools */ .cla-mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:62px; background:rgba(35,43,81,0.97); border-top:1px solid rgba(255,255,255,0.10); z-index:200; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:0 4px; box-shadow:0 -2px 16px rgba(0,0,0,0.25); align-items:center; justify-content:space-around; max-width:100%; } html[data-theme="dark"] .cla-mobile-nav { background:rgba(15,18,30,0.97); } .cla-mobile-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:rgba(255,255,255,0.55); font-size:10px; font-weight:600; padding:6px 4px; border-radius:8px; transition:all .15s; min-width:56px; min-height:50px; flex:1; font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; } .cla-mobile-nav a:hover, .cla-mobile-nav a.active { color:#59d7ef; background:rgba(89,215,239,0.08); } .cla-mobile-nav .cmn-icon { font-size:20px; line-height:1; } @media (min-width:769px) { .cla-mobile-nav { display:none !important; } } @media (max-width:480px) { .topbar { height:48px !important; padding:0 10px !important; } .topbar .logo-mark { display:none !important; } .tb-div { display:none !important; } .tb-name { font-size:13px !important; font-weight:700; } .page-title { font-size:18px !important; } .page-sub { font-size:11px !important; } .main { padding:14px 12px 20px !important; } /* Metrics — single column */ .metrics { grid-template-columns:1fr !important; } /* Tabs — even more compact */ .tab-btn { font-size:10px !important; padding:7px 10px !important; } /* Tables — minimum font */ .tbl { font-size:10px !important; } .tbl th, .tbl td { padding:6px 8px !important; } } /* ═══════════════════════════════════════════════════════════ SHARED PAGE TRANSITIONS + ACCESSIBILITY ═══════════════════════════════════════════════════════════ */ /* Smooth page fade-in on navigation */ body { animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0.85; } to { opacity: 1; } } /* Visible focus states for keyboard accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #59d7ef; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════ SHARED UI POLISH — Cards, Metrics, Tables, Buttons Cascades across all 75+ tools for consistent premium feel. ═══════════════════════════════════════════════════════════ */ /* ── Card hover lift — subtle depth on interaction ── */ .card { transition: box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { box-shadow: 0 2px 8px rgba(12,35,64,0.1), 0 8px 24px rgba(12,35,64,0.06); } html[data-theme="dark"] .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2) !important; } /* ── Metric card — interactive feel ── */ .metric { transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: default; } .metric:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(12,35,64,0.1), 0 1px 3px rgba(12,35,64,0.06); border-color: rgba(35,43,81,0.15); } html[data-theme="dark"] .metric:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.16) !important; } /* ── Metric value — smoother typography ── */ .metric-val { line-height: 1.15; letter-spacing: -0.01em; } .metric-sub { line-height: 1.4; } /* ── Buttons — better hover states + smooth transitions ── */ .btn, .btn-primary, .btn-outline { transition: all 0.15s ease; -webkit-font-smoothing: antialiased; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(35,43,81,0.2); } .btn-primary:active { transform: translateY(0); box-shadow: none; } .btn-outline:hover { border-color: rgba(35,43,81,0.25); } html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 2px 12px rgba(30,64,175,0.3) !important; } /* ── Table row hover — smoother ── */ .tbl tbody tr { transition: background 0.1s ease; } .tbl tbody tr:hover td { background: rgba(35,43,81,0.02); } html[data-theme="dark"] .tbl tbody tr:hover td { background: rgba(255,255,255,0.03) !important; } /* ── Table header — slightly more defined ── */ .tbl th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Pills — rounder, slightly larger touch targets ── */ .pill { border-radius: 4px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .pill-orange { background: rgba(249,115,22,0.1); color: #c2410c; } html[data-theme="dark"] .pill-orange { background: rgba(249,115,22,0.15); color: #fb923c; } /* ── Tab bar — smoother active state ── */ .tab-btn { transition: all 0.15s ease; position: relative; } .tab-btn:hover { color: var(--text, #232b51); } .tab-btn.active { color: var(--navy, #232b51); } /* ── Page title area — better vertical rhythm ── */ .page-title { line-height: 1.2; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } .page-sub { line-height: 1.55; } /* ── Card title — flex alignment fix ── */ .card-title { line-height: 1.3; gap: 8px; } /* ── Topbar — subtle bottom shadow for depth ── */ .topbar { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); } /* ── Form inputs — better focus ring ── */ .field-input:focus, .field-textarea:focus, .field-select:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-color: var(--accent, #1e40af); box-shadow: 0 0 0 3px rgba(30,64,175,0.08); } html[data-theme="dark"] .field-input:focus, html[data-theme="dark"] .field-textarea:focus, html[data-theme="dark"] .field-select:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: #59d7ef !important; box-shadow: 0 0 0 3px rgba(89,215,239,0.1) !important; } /* ── Quick action links (shared across TP, Accounting, Tax, etc.) ── */ .quick-action { transition: all 0.15s ease; } .quick-action:hover { transform: translateY(-1px); } /* ── Status indicator dots ── */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot-green { background: var(--green, #166534); } .status-dot-red { background: var(--red, #991b1b); } .status-dot-amber { background: var(--amber, #854d0e); } /* ── Progress bars — smoother animation ── */ .bar-fill { transition: width 0.4s ease; } /* ── Scrollbar styling (light theme) ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(35,43,81,0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(35,43,81,0.25); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* ── Print improvements ── */ @media print { .topbar, .tab-row, .btn, .btn-primary, .btn-outline, [id="hub-footer"], [id="excelTip"], .cla-theme-toggle, .cla-breadcrumb, .cla-mobile-nav { display: none !important; } .main { padding: 16px !important; max-width: 100% !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; } .metric { box-shadow: none !important; } body { background: white !important; color: #232b51 !important; } } /* ── Breadcrumb bar — auto-injected on practice tool pages ── */ .cla-breadcrumb { padding:7px 16px; font-size:11px; color:#8896a8; background:var(--off, #f7f8fa); border-bottom:1px solid var(--border, #e2e6ec); font-family:'DM Sans',sans-serif; display: flex; align-items: center; } .cla-breadcrumb a { color:var(--accent, var(--blue, #1e40af)); text-decoration:none; font-weight:600; transition: color 0.12s ease; } .cla-breadcrumb a:hover { text-decoration:underline; color: var(--navy, #232b51); } .cla-bc-sep { margin:0 6px; opacity:0.4; } .cla-bc-current { font-weight:600; color:var(--text, #232b51); } html[data-theme="dark"] .cla-breadcrumb { background:rgba(255,255,255,0.02); border-bottom-color:rgba(255,255,255,0.08); } html[data-theme="dark"] .cla-breadcrumb a { color:#59d7ef; } html[data-theme="dark"] .cla-bc-current { color:#fff; } /* ── Selection styling ── */ ::selection { background: rgba(30,64,175,0.15); color: var(--navy, #232b51); } html[data-theme="dark"] ::selection { background: rgba(89,215,239,0.2); color: #fff; } /* ── Smooth text rendering ── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Mobile tap targets — minimum 44px for all interactive elements */ @media (max-width: 768px) { .btn, .btn-primary, .btn-outline, .tab-btn, .gen-btn, .ctl-select { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .pill { font-size: 10px; padding: 3px 8px; } }