/* ========================================================================== Hermes — ThetaNexus design system Light/dark theming via data-theme on ========================================================================== */ :root, [data-theme="light"] { --bg: 0 0% 100%; --fg: 240 10% 3.9%; --card: 0 0% 100%; --card-fg: 240 10% 3.9%; --muted: 240 4.8% 95.9%; --muted-fg: 240 3.8% 46.1%; --subtle-fg: 240 4% 60%; --border: 240 5.9% 90%; --input-bg: 0 0% 100%; --primary: 217 91% 60%; --primary-fg: 0 0% 100%; --primary-hover: 217 91% 52%; --primary-soft: 217 91% 96%; --sidebar: 222 47% 11%; --sidebar-fg: 213 27% 84%; --sidebar-active: 221 83% 53%; --sidebar-hover: 217 33% 17%; --sidebar-muted: 215 20% 65%; --danger: 0 84% 60%; --success: 142 71% 45%; --warning: 38 92% 50%; --radius: 0.75rem; --radius-sm: 0.5rem; --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); } [data-theme="dark"] { --bg: 240 10% 3.9%; --fg: 0 0% 98%; --card: 240 6% 10%; --card-fg: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-fg: 240 5% 64.9%; --subtle-fg: 240 4% 52%; --border: 240 3.7% 20%; --input-bg: 240 6% 10%; --primary-soft: 217 91% 15%; --sidebar: 240 10% 3.9%; --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100vh; background: hsl(var(--bg)); color: hsl(var(--fg)); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-fg) / 0.4); } a { color: hsl(var(--primary)); text-decoration: none; } a:hover { color: hsl(var(--primary-hover)); } /* ---------- App shell ---------- */ .app-shell { display: flex; height: 100vh; background: hsl(var(--bg)); } /* ---------- Sidebar ---------- */ .sidebar { width: 240px; flex-shrink: 0; background: hsl(var(--sidebar)); color: hsl(var(--sidebar-fg)); display: flex; flex-direction: column; padding: 16px 12px; transition: transform 0.22s ease; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; border-bottom: 1px solid hsl(var(--sidebar-hover)); margin-bottom: 14px; } .sidebar-brand-logo { width: 36px; height: 36px; background: hsl(var(--primary)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; box-shadow: 0 2px 8px hsl(var(--primary) / 0.35); } .sidebar-brand-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #fff; font-size: 16px; line-height: 1; } .sidebar-brand-sub { color: hsl(var(--sidebar-muted)); font-size: 11px; margin-top: 2px; } .sidebar-nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: hsl(var(--sidebar-fg)); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background-color 0.12s, color 0.12s; user-select: none; } .nav-item:hover { background: hsl(var(--sidebar-hover)); color: #fff; } .nav-item.active { background: hsl(var(--sidebar-active)); color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .nav-item .nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .nav-item .badge { margin-left: auto; background: hsl(var(--primary)); color: #fff; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; min-width: 20px; text-align: center; } .nav-item.active .badge { background: rgba(255,255,255,0.25); } .sidebar-footer { margin-top: 10px; padding-top: 12px; border-top: 1px solid hsl(var(--sidebar-hover)); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .sidebar-footer-label { color: hsl(var(--sidebar-muted)); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; } .sidebar-quick-capture { background: hsl(var(--sidebar-hover)); color: #fff; border: 1px solid hsl(var(--sidebar-hover)); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; resize: none; width: 100%; } .sidebar-quick-capture::placeholder { color: hsl(var(--sidebar-muted)); } .sidebar-quick-capture:focus { outline: none; border-color: hsl(var(--primary)); } .sidebar-btn { background: transparent; color: hsl(var(--sidebar-fg)); border: 1px solid hsl(var(--sidebar-hover)); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; } .sidebar-btn:hover { background: hsl(var(--sidebar-hover)); color: #fff; } .sidebar-btn.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; } .sidebar-btn.primary:hover { background: hsl(var(--primary-hover)); } .ms-status-pill { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: hsl(var(--sidebar-hover) / 0.6); border: 1px solid hsl(var(--sidebar-hover)); border-radius: 8px; font-size: 11.5px; color: hsl(var(--sidebar-fg)); text-decoration: none; } .ms-status-pill:hover { background: hsl(var(--sidebar-hover)); color: #fff; } .ms-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--success)); flex-shrink: 0; } /* ---------- Main wrapper + topbar ---------- */ .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; background: hsl(var(--bg)); } .topbar { height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--bg)); flex-shrink: 0; gap: 12px; } .topbar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; color: hsl(var(--fg)); margin: 0; } .topbar-sub { font-size: 12px; color: hsl(var(--muted-fg)); margin: 0; } .topbar-actions { display: flex; align-items: center; gap: 14px; color: hsl(var(--muted-fg)); font-size: 13px; } .ws-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: hsl(var(--muted-fg)); } .ws-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--muted-fg)); display: inline-block; } .ws-dot.online { background: hsl(var(--success)); } .ws-dot.offline { background: hsl(var(--danger)); } .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: hsl(var(--muted)); color: hsl(var(--fg)); border: 1px solid hsl(var(--border)); border-radius: 8px; font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background 0.12s; } .theme-toggle:hover { background: hsl(var(--border)); } .logout-link { color: hsl(var(--muted-fg)); font-size: 12px; background: transparent; border: none; cursor: pointer; font-family: inherit; } .logout-link:hover { color: hsl(var(--danger)); } /* ---------- Pages ---------- */ main.content-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .page { display: none; } .page.active { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---------- Cards ---------- */ .card { background: hsl(var(--card)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: var(--radius) !important; color: hsl(var(--card-fg)) !important; box-shadow: var(--shadow-card); } /* ---------- Chat message bubbles ---------- */ .msg-user { background: hsl(var(--primary)) !important; color: #fff !important; border-radius: 16px 16px 4px 16px !important; margin-left: auto; padding: 12px 14px !important; max-width: 70% !important; box-shadow: 0 1px 3px hsl(var(--primary) / 0.3); } .msg-user p, .msg-user .text-sm, .msg-user .text-gray-200, .msg-user .text-gray-600 { color: #fff !important; } .msg-user .text-xs { color: rgba(255,255,255,0.75) !important; } .msg-hermes { background: hsl(var(--card)) !important; color: hsl(var(--card-fg)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: 16px 16px 16px 4px !important; padding: 12px 14px !important; max-width: 70% !important; box-shadow: var(--shadow-card); } /* ---------- Priority accents ---------- */ .priority-high { border-left: 3px solid hsl(var(--danger)) !important; } .priority-med { border-left: 3px solid hsl(var(--warning)) !important; } .priority-low { border-left: 3px solid hsl(var(--muted-fg)) !important; } /* ---------- Tab buttons ---------- */ .tab-btn { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: hsl(var(--muted-fg)) !important; background: transparent !important; border: 1px solid transparent; cursor: pointer; transition: all 0.12s; font-family: inherit; } .tab-btn:hover:not(.active) { color: hsl(var(--fg)) !important; background: hsl(var(--muted)) !important; } .tab-btn.active { background: hsl(var(--primary)) !important; color: #fff !important; } /* ---------- Animations ---------- */ .slide-in { animation: slideIn 0.2s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } /* ---------- Form elements ---------- */ input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="password"], textarea, select { background: hsl(var(--input-bg)) !important; color: hsl(var(--fg)) !important; border: 1px solid hsl(var(--border)) !important; font-family: inherit !important; border-radius: var(--radius-sm) !important; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: hsl(var(--primary)) !important; box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15) !important; } textarea { resize: none; } ::placeholder { color: hsl(var(--muted-fg) / 0.65) !important; } /* Select arrow */ select { appearance: none; padding-right: 28px !important; 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='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-position: right 8px center !important; background-repeat: no-repeat !important; } /* ---------- Mobile ---------- */ .mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 50; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); padding: 8px 12px; border-radius: 8px; color: hsl(var(--fg)); font-size: 18px; cursor: pointer; box-shadow: var(--shadow-card); } .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 35; } @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.4); } .sidebar.open { transform: translateX(0); } .sidebar.open ~ .sidebar-scrim { display: block; } .mobile-menu-btn { display: block; } .topbar { padding-left: 64px; } .main-wrap { width: 100%; } /* Collapse multi-col grids to single column */ .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 { grid-template-columns: 1fr !important; } } /* ========================================================================== Tailwind utility overrides — map the legacy dark palette into the new design tokens so existing markup and JS-emitted classes pick up the reskin. ========================================================================== */ /* Background colors */ .bg-gray-900 { background-color: hsl(var(--card)) !important; } .bg-gray-900\/60, .bg-gray-900\/80 { background-color: hsl(var(--card)) !important; } .bg-gray-800 { background-color: hsl(var(--muted)) !important; } .bg-gray-800\/40, .bg-gray-800\/50, .bg-gray-800\/60, .bg-gray-800\/80 { background-color: hsl(var(--muted)) !important; } .bg-gray-700 { background-color: hsl(var(--muted)) !important; } /* Inline-style dark backgrounds from legacy markup */ body [style*="background:#07070f"], body [style*="background:#09091a"], body [style*="background:#0f0f1a"], body [style*="background:#0f1a2e"] { background: hsl(var(--bg)) !important; } /* Text overrides */ .text-white { color: hsl(var(--fg)) !important; } .text-gray-100, .text-gray-200, .text-gray-300 { color: hsl(var(--fg)) !important; } .text-gray-400 { color: hsl(var(--muted-fg)) !important; } .text-gray-500, .text-gray-600, .text-gray-700 { color: hsl(var(--muted-fg)) !important; } /* Border overrides */ .border-gray-700, .border-gray-800, .border-gray-700\/40, .border-gray-700\/60, .border-gray-800\/50, .border-gray-800\/40 { border-color: hsl(var(--border)) !important; } /* Primary (indigo → Theta Blue) */ .bg-indigo-600, .bg-indigo-500 { background-color: hsl(var(--primary)) !important; color: #fff !important; } .bg-indigo-600\/40 { background-color: hsl(var(--primary) / 0.12) !important; color: hsl(var(--primary)) !important; } .bg-indigo-600\/50, .bg-indigo-600\/70 { background-color: hsl(var(--primary) / 0.22) !important; color: hsl(var(--primary)) !important; } .bg-indigo-900, .bg-indigo-900\/20 { background-color: hsl(var(--primary) / 0.12) !important; } .hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-600\/70:hover { background-color: hsl(var(--primary-hover)) !important; color: #fff !important; } .text-indigo-200, .text-indigo-300, .text-indigo-400 { color: hsl(var(--primary)) !important; } .hover\:text-indigo-300:hover { color: hsl(var(--primary-hover)) !important; } .border-indigo-500, .border-indigo-800, .border-indigo-800\/40 { border-color: hsl(var(--primary)) !important; } .focus\:border-indigo-500:focus { border-color: hsl(var(--primary)) !important; } /* Blue → Theta Blue (consistency) */ .bg-blue-600, .bg-blue-500 { background-color: hsl(var(--primary)) !important; color: #fff !important; } .bg-blue-900, .bg-blue-900\/20 { background-color: hsl(var(--primary) / 0.12) !important; } .hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover { background-color: hsl(var(--primary-hover)) !important; } .text-blue-300, .text-blue-400 { color: hsl(var(--primary)) !important; } .border-blue-500, .border-blue-900\/40 { border-color: hsl(var(--primary)) !important; } /* Green accents (success — ✓ Send, Approve, in-progress) */ .bg-green-600, .bg-green-500 { background-color: hsl(var(--success)) !important; color: #fff !important; } .bg-green-600\/50 { background-color: hsl(var(--success) / 0.2) !important; color: hsl(var(--success)) !important; } .hover\:bg-green-500:hover, .hover\:bg-green-600:hover { background-color: hsl(142 71% 38%) !important; } .text-green-200, .text-green-300, .text-green-400 { color: hsl(var(--success)) !important; } .border-green-500 { border-color: hsl(var(--success)) !important; } /* Amber / Orange (warning) */ .bg-amber-600, .bg-amber-500, .bg-amber-700 { background-color: hsl(var(--warning)) !important; color: #fff !important; } .hover\:bg-amber-500:hover, .hover\:bg-amber-600:hover { background-color: hsl(38 92% 42%) !important; } .text-amber-300, .text-amber-400 { color: hsl(var(--warning)) !important; } .border-amber-500, .border-amber-700\/30 { border-color: hsl(var(--warning)) !important; } /* Red (danger) */ .bg-red-600, .bg-red-500 { background-color: hsl(var(--danger)) !important; color: #fff !important; } .text-red-400 { color: hsl(var(--danger)) !important; } .hover\:text-red-400:hover { color: hsl(var(--danger)) !important; } /* Yellow/Orange accents (priority badges) */ .text-yellow-400 { color: hsl(var(--warning)) !important; } .text-orange-400 { color: hsl(25 95% 53%) !important; } /* Purple accent */ .bg-purple-900\/40 { background-color: hsl(280 60% 30% / 0.2) !important; } .text-purple-400 { color: hsl(280 70% 60%) !important; } /* Placeholder adjustments */ .placeholder-gray-600::placeholder, .placeholder-gray-700::placeholder { color: hsl(var(--muted-fg) / 0.55) !important; } /* Focus ring helpers */ .focus\:outline-none:focus { outline: none !important; } /* Ensure card-styled inputs and textareas blend with theme */ .card input, .card textarea, .card select { background: hsl(var(--input-bg)) !important; color: hsl(var(--fg)) !important; border-color: hsl(var(--border)) !important; } /* Legacy dark surfaces used in inline markup */ .bg-gray-800\/70, .bg-gray-900\/70 { background-color: hsl(var(--muted)) !important; } /* Soft hover surfaces */ .hover\:bg-gray-700:hover { background-color: hsl(var(--border)) !important; } .hover\:bg-gray-600:hover { background-color: hsl(var(--border)) !important; } .hover\:bg-gray-800\/60:hover { background-color: hsl(var(--muted)) !important; } .hover\:text-gray-300:hover, .hover\:text-gray-400:hover, .hover\:text-gray-500:hover { color: hsl(var(--fg)) !important; } /* Settings/arcadia placeholder pages */ .placeholder-page { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 64px 24px; text-align: center; color: hsl(var(--muted-fg)); } .placeholder-page .icon { font-size: 32px; opacity: 0.6; } .placeholder-page h3 { color: hsl(var(--fg)); margin: 0; font-size: 18px; } .placeholder-page p { margin: 0; font-size: 13px; max-width: 360px; } /* Time entry modal backdrop clean */ #time-entry-modal { background: rgba(0,0,0,0.55) !important; } [data-theme="light"] #time-entry-modal { background: rgba(15,23,42,0.45) !important; }