:root {
  --bg-base: #0f172a;
  --bg-surface: #1e293b;
  --bg-elevated: #0f172a;
  --bg-app: #0f1117;
  --border: #1e293b;
  --border-hover: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-faint: #475569;
  --accent: #3b82f6;
  --accent-bg: #1e3a5f;
  --accent-text: #60a5fa;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --sidebar-bg: #0d1526;
  --header-bg: #0f172a;
}
html[data-theme='light'] {
  --bg-base: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-app: #e2e8f0;
  --border: #cbd5e1;
  --border-hover: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --accent: #2563eb;
  --accent-bg: #dbeafe;
  --accent-text: #1d4ed8;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --sidebar-bg: #f8fafc;
  --header-bg: #ffffff;
}
html[data-theme='light'] .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--border);
}
html[data-theme='light'] .nav-item {
  color: var(--text-secondary);
}
html[data-theme='light'] .nav-item:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-item.active {
  background: var(--accent-bg);
  color: var(--accent-text);
}
html[data-theme='light'] .nav-item.active svg {
  color: var(--accent-text);
}
html[data-theme='light'] .nav-item.parent-active {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-item.parent-active svg {
  color: var(--text-primary);
}
html[data-theme='light'] .nav-item.parent-active .nav-chevron {
  color: var(--text-muted);
}
html[data-theme='light'] .sidebar-bottom {
  border-top-color: var(--border) !important;
}
html[data-theme='light'] .sidebar-logo-text {
  color: var(--text-primary);
}
html[data-theme='light'] .sidebar-logo {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .sidebar-toggle:hover {
  color: var(--text-secondary);
  background: #e2e8f0;
}
html[data-theme='light'] .nav-sub-group-toggle {
  color: var(--text-muted);
}
html[data-theme='light'] .nav-sub-group-toggle:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-sub-group-toggle.parent-active {
  color: var(--text-secondary);
}
html[data-theme='light'] .nav-sub-item {
  color: var(--text-muted);
}
html[data-theme='light'] .nav-sub-item:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-sub-item.active {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-left-color: var(--accent);
}
html[data-theme='light'] .nav-flyout-section {
  color: var(--text-muted);
  border-top-color: var(--border);
}
html[data-theme='light'] .nav-flyout-label {
  color: var(--text-secondary);
}
html[data-theme='light'] .nav-flyout-label:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-flyout-item {
  color: var(--text-muted);
}
html[data-theme='light'] .nav-flyout-item:hover {
  background: #e2e8f0;
  color: var(--text-primary);
}
html[data-theme='light'] .nav-flyout-item.active {
  color: var(--accent-text);
  background: var(--accent-bg);
  border-left-color: var(--accent);
}
html[data-theme='light'] .nav-item.active .nav-count {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: transparent;
}
html[data-theme='light'] .sidebar.collapsed .nav-item::after {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] #roleUserDisplay {
  background: var(--accent-bg) !important;
  border-color: var(--border) !important;
  color: var(--accent-text) !important;
}
html[data-theme='light'] .sidebar-bottom button {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme='light'] .sidebar-bottom button:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
html[data-theme='light'] .notif-panel {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .card,
html[data-theme='light'] .dash-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .dash-card-label {
  color: var(--text-muted);
}
html[data-theme='light'] .dash-card-val {
  color: var(--text-primary);
}
html[data-theme='light'] .dash-card-sub {
  color: var(--text-muted);
}
html[data-theme='light'] .dash-section-title {
  color: var(--text-primary);
}
html[data-theme='light'] .dash-group-title {
  color: var(--text-muted);
}
html[data-theme='light'] .settings-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] .ck-modal {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
html[data-theme='light'] .ck-modal-head {
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-modal-foot {
  border-color: var(--border);
}
html[data-theme='light'] .ck-modal-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-modal-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-btn-ghost {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-btn-ghost:hover {
  border-color: var(--border-hover);
}
html[data-theme='light'] .ck-modal-backdrop {
  background: rgba(0, 0, 0, 0.3);
}
/* messenger module: see /messenger.css (was lines 309-311) */
/* calendar module: see /calendar.css (was lines 314-315) */
/* meetings module: see /meetings.css (was lines 313-313) */
html[data-theme='light'] .modal-card {
  background: var(--bg-surface);
}
html[data-theme='light'] .modal-overlay {
  background: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] table th {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
html[data-theme='light'] th.sortable:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
html[data-theme='light'] table td {
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] tr:hover td {
  background: var(--bg-elevated);
}
html[data-theme='light'] tr.group-row td {
  background: var(--bg-elevated);
  border-bottom-color: var(--border);
}
html[data-theme='light'] tr.group-row.expanded td {
  background: #dbeafe;
}
html[data-theme='light'] .group-name {
  color: var(--text-primary);
}
html[data-theme='light'] .group-name-btn.no-expand:hover .group-name {
  color: var(--text-primary);
}
/* ══════════════════════════════════════════════════
     COMPREHENSIVE LIGHT THEME OVERRIDES
     ══════════════════════════════════════════════════ */
/* ── Global catch-all for hardcoded dark backgrounds ── */
html[data-theme='light'] [style*='background:#0f172a'],
html[data-theme='light'] [style*='background: #0f172a'] {
  background: var(--bg-base) !important;
}
html[data-theme='light'] [style*='background:#1e293b'],
html[data-theme='light'] [style*='background: #1e293b'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='background:#111827'],
html[data-theme='light'] [style*='background: #111827'] {
  background: var(--bg-elevated) !important;
}
html[data-theme='light'] [style*='color:#f1f5f9'],
html[data-theme='light'] [style*='color: #f1f5f9'] {
  color: var(--text-primary) !important;
}
html[data-theme='light'] [style*='color:#e2e8f0'],
html[data-theme='light'] [style*='color: #e2e8f0'] {
  color: var(--text-primary) !important;
}
html[data-theme='light'] [style*='color:#94a3b8'],
html[data-theme='light'] [style*='color: #94a3b8'] {
  color: var(--text-muted) !important;
}
html[data-theme='light'] [style*='color:#64748b'],
html[data-theme='light'] [style*='color: #64748b'] {
  color: var(--text-muted) !important;
}
html[data-theme='light'] [style*='border-color:#334155'],
html[data-theme='light'] [style*='border-color: #334155'] {
  border-color: var(--border) !important;
}
html[data-theme='light'] [style*='background:#0f1117'],
html[data-theme='light'] [style*='background: #0f1117'] {
  background: var(--bg-elevated) !important;
}
html[data-theme='light'] [style*='background:#0c111d'],
html[data-theme='light'] [style*='background: #0c111d'] {
  background: var(--bg-base) !important;
}
html[data-theme='light'] [style*='background:#0a0f1a'],
html[data-theme='light'] [style*='background: #0a0f1a'] {
  background: #f8fafc !important;
}
html[data-theme='light'] [style*='background:#020617'],
html[data-theme='light'] [style*='background: #020617'] {
  background: var(--bg-base) !important;
}
html[data-theme='light'] [style*='background:#111c2e'],
html[data-theme='light'] [style*='background: #111c2e'] {
  background: var(--bg-elevated) !important;
}
html[data-theme='light'] [style*='background:#1a2332'],
html[data-theme='light'] [style*='background: #1a2332'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='border:1px solid #1e293b'],
html[data-theme='light'] [style*='border: 1px solid #1e293b'] {
  border-color: var(--border) !important;
}
html[data-theme='light'] [style*='border-bottom:1px solid #1e293b'],
html[data-theme='light'] [style*='border-bottom: 1px solid #1e293b'] {
  border-bottom-color: var(--border) !important;
}
html[data-theme='light'] [style*='color:#cbd5e1'],
html[data-theme='light'] [style*='color: #cbd5e1'] {
  color: var(--text-secondary) !important;
}
html[data-theme='light'] [style*='color:#475569'],
html[data-theme='light'] [style*='color: #475569'] {
  color: var(--text-muted) !important;
}
html[data-theme='light'] [style*='color:#334155'],
html[data-theme='light'] [style*='color: #334155'] {
  color: var(--text-muted) !important;
}
html[data-theme='light'] [style*='background:#0d1526'],
html[data-theme='light'] [style*='background: #0d1526'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='background-color:#0d1526'],
html[data-theme='light'] [style*='background-color: #0d1526'] {
  background-color: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='border:2px solid #0d1526'],
html[data-theme='light'] [style*='border: 2px solid #0d1526'] {
  border-color: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='background:#1e3a5f'],
html[data-theme='light'] [style*='background: #1e3a5f'] {
  background: var(--accent-bg) !important;
}
html[data-theme='light'] [style*='linear-gradient(135deg,#0f172a'],
html[data-theme='light'] [style*='linear-gradient(135deg, #0f172a'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='linear-gradient(135deg,#0a1a14'],
html[data-theme='light'] [style*='linear-gradient(135deg, #0a1a14'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='linear-gradient(135deg,#1a0a0a'],
html[data-theme='light'] [style*='linear-gradient(135deg, #1a0a0a'] {
  background: var(--bg-surface) !important;
}
html[data-theme='light'] [style*='background:#0c111d'],
html[data-theme='light'] [style*='background: #0c111d'] {
  background: var(--bg-base) !important;
}
html[data-theme='light'] [style*='background:#162032'],
html[data-theme='light'] [style*='background: #162032'] {
  background: var(--bg-elevated) !important;
}
html[data-theme='light'] [style*='background:#1a2d48'],
html[data-theme='light'] [style*='background: #1a2d48'] {
  background: #dbeafe !important;
}
html[data-theme='light'] [style*='background:#243048'],
html[data-theme='light'] [style*='background: #243048'] {
  background: var(--bg-elevated) !important;
}

/* ── Sidebar ── */
html[data-theme='light'] .nav-flyout {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .nav-flyout-header {
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] .nav-count {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
/* ── Calendar ── */
/* calendar module: see /calendar.css (was lines 396-410) */
/* ── Calls ── */
html[data-theme='light'] .call-controls {
  background: rgba(255, 255, 255, 0.9);
}
html[data-theme='light'] .call-ctrl-btn {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
html[data-theme='light'] .call-incoming {
  background: var(--bg-surface);
  border-color: var(--border);
}
/* ── Meetings ── */
/* meetings module: see /meetings.css (was lines 413-433) */
/* ── Messenger ── */
/* messenger module: see /messenger.css (was lines 436-464) */
/* ── Tasks ── */
/* tasks module: see /tasks.css (was lines 406-516) */
html[data-theme='light'] .tkd-modal {
  background: var(--bg-base);
  border-color: var(--border);
}
html[data-theme='light'] .tkd-right {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-topbar {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-title-input {
  color: var(--text-primary);
}
html[data-theme='light'] .tkd-prop-select {
  color: var(--text-primary);
}
html[data-theme='light'] .tkd-prop-select:hover {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-prop-input {
  color: var(--text-primary);
}
html[data-theme='light'] .tkd-prop-input:hover {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-desc {
  color: var(--text-secondary);
}
html[data-theme='light'] .tkd-desc:hover {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-footer {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-activity-head {
  border-color: var(--border);
}
html[data-theme='light'] .tkd-section-head {
  color: var(--text-primary);
}
html[data-theme='light'] .tkd-comment-input {
  border-color: var(--border);
}
/* Task modal — comprehensive light theme */
html[data-theme='light'] .tkd-right {
  background: #f8fafc !important;
  border-left: 1px solid var(--border);
}
html[data-theme='light'] .tkd-activity-body {
  color: var(--text-secondary);
}
html[data-theme='light'] .tkd-comments-body {
  color: var(--text-secondary);
}
html[data-theme='light'] .tkd-modal {
  background: #fff !important;
  border-color: #cbd5e1 !important;
}
html[data-theme='light'] .tkd-modal select {
  color-scheme: light;
}
html[data-theme='light'] .tkd-modal input[type='date'] {
  color-scheme: light;
}
html[data-theme='light'] .tkd-modal input[type='datetime-local'] {
  color-scheme: light;
}
html[data-theme='light'] .tkd-modal input[type='time'] {
  color-scheme: light;
}
html[data-theme='light'] .tkd-modal .tkd-comment-input textarea {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html[data-theme='light'] .tkd-modal .tkd-comment-input textarea:focus {
  border-color: #7c3aed !important;
}
html[data-theme='light'] .tkd-modal .tkd-comment-input label {
  color: #475569 !important;
}
html[data-theme='light'] .tkd-modal .tkd-comment-input label:hover {
  color: #0f172a !important;
  background: #e2e8f0 !important;
}
html[data-theme='light'] .tkd-activity-head {
  background: #f8fafc;
}
html[data-theme='light'] .tkd-activity-head span {
  color: #0f172a !important;
}
html[data-theme='light'] .tkd-activity-head div[style*='background:#1e293b'] {
  background: #e2e8f0 !important;
}
html[data-theme='light'] .tkd-activity-head button {
  color: #475569 !important;
}
html[data-theme='light'] .tkd-activity-head button[style*='background:#7c3aed'] {
  color: #fff !important;
}
/* tasks module: see /tasks.css (was lines 549-552) */
html[data-theme='light'] .tkd-footer {
  background: #fff;
  border-color: var(--border);
}
html[data-theme='light'] .tkd-footer button[style*='background:#1e293b'] {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme='light'] .tkd-footer button[style*='background:transparent'] {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html[data-theme='light'] .tkd-left {
  scrollbar-color: #cbd5e1 transparent;
}
html[data-theme='light'] .tkd-right {
  scrollbar-color: #cbd5e1 transparent;
}
html[data-theme='light'] .tkd-left::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
html[data-theme='light'] .tkd-right::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
html[data-theme='light'] .tkd-topbar {
  background: #fff;
}
/* tasks module: see /tasks.css (was lines 561-562) */
/* ── Time Tracker ── */
html[data-theme='light'] .ck-timer-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-timer-display {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-input {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] #ckTimerNotes {
  border-bottom-color: var(--border) !important;
  color: var(--text-primary);
}
html[data-theme='light'] #ckTimerProject,
html[data-theme='light'] #ckTimerClient,
html[data-theme='light'] #ckTimerClientDisplay {
  color: var(--text-primary) !important;
}
html[data-theme='light'] #ckTimerProject option,
html[data-theme='light'] #ckTimerClient option {
  color: var(--text-primary);
  background: var(--bg-surface);
}
html[data-theme='light'] .ck-mode-tabs {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-mode-tab {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-mode-tab.active {
  background: var(--accent-bg);
  color: var(--accent-text);
}
html[data-theme='light'] .ck-target-wrap {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-target-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ck-target-track {
  background: #e2e8f0;
}
html[data-theme='light'] .ck-target-label {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-target-val {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-target-pct {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-stat {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-day-header {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-day-date {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-day-total-val {
  color: #db2777;
}
html[data-theme='light'] .ck-col-header {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-col-header span {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-entry-row {
  background: var(--bg-surface);
  border-color: var(--border);
  border-bottom-color: var(--bg-elevated);
}
html[data-theme='light'] .ck-entry-row:hover {
  background: var(--bg-elevated);
}
html[data-theme='light'] .ck-inv-badge {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
html[data-theme='light'] .ck-entry-invoice {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-entry-row:last-child {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ck-entry-desc {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-entry-proj-client {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-entry-time-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-entry-time-sep {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-entry-cal {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-entry-duration {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-entry-play {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-entry-play:hover {
  color: var(--accent);
}
html[data-theme='light'] .ck-entry-kebab {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-entry-kebab:hover {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-edit-notes-ta {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #3b82f6 !important;
}
html[data-theme='light'] .ck-entry-menu {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .ck-entry-menu-item {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-entry-menu-item:hover {
  background: var(--bg-elevated);
}
html[data-theme='light'] .ck-quick-select {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .ck-quick-item {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ck-quick-item:hover {
  background: var(--bg-elevated);
}
html[data-theme='light'] .ck-quick-item-desc {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-quick-item-proj {
  color: #db2777;
}
html[data-theme='light'] .ck-clear-btn {
  color: var(--text-secondary);
  border-color: var(--border);
}
html[data-theme='light'] .ck-clear-btn:hover {
  background: var(--bg-elevated);
}
html[data-theme='light'] .ck-toolbar-btn {
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-toolbar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme='light'] .ck-footer {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-del-btn {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-bulk-bar {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-bulk-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-chart-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-timesheet {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-entries-empty {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-freeze-btn {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-freeze-btn:hover {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-freeze-btn.active {
  color: var(--accent);
}
/* ── Date Range Picker ── */
html[data-theme='light'] .drp-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .drp-panel {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .drp-presets {
  border-right-color: var(--border);
}
html[data-theme='light'] .drp-preset {
  color: var(--text-secondary);
}
html[data-theme='light'] .drp-preset:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
html[data-theme='light'] .drp-preset.active {
  background: var(--accent-bg);
  color: var(--accent-text);
}
html[data-theme='light'] .drp-cal-title {
  color: var(--text-primary);
}
html[data-theme='light'] .drp-nav {
  color: var(--text-muted);
}
html[data-theme='light'] .drp-nav:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
html[data-theme='light'] .drp-dh {
  color: var(--text-muted);
}
html[data-theme='light'] .drp-d {
  color: var(--text-secondary);
}
html[data-theme='light'] .drp-d:hover:not(.drp-d-empty) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
html[data-theme='light'] .drp-d-other {
  color: #cbd5e1;
}
html[data-theme='light'] .drp-d-inrange {
  background: #dbeafe;
  color: #1d4ed8;
}
/* ── Rates ── */
html[data-theme='light'] .rate-type-toggle {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .rate-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .rate-type-sel {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
html[data-theme='light'] .rate-currency-select {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .rate-updated {
  color: var(--text-muted);
}
/* ── User Management ── */
/* users module: see /users.css (was lines 655-665) */
/* ── Invoice ── */
html[data-theme='light'] .inv-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .inv-card-header {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
html[data-theme='light'] .inv-card-header.active {
  background: #eef2ff;
  color: #4f46e5;
  border-bottom-color: #c7d2fe;
}
html[data-theme='light'] .inv-banner.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
html[data-theme='light'] .inv-banner.orange {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
html[data-theme='light'] #invPaymentSummary {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
html[data-theme='light'] #invPaySummaryText {
  color: var(--text-secondary) !important;
}
html[data-theme='light'] .inv-col-headers span {
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-card-footer {
  border-color: var(--border);
}
html[data-theme='light'] .inv-select-wrap select {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-empty {
  color: var(--text-muted);
}
html[data-theme='light'] .inv-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-saved-box {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .inv-edit-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: #6366f1;
}
html[data-theme='light'] .inv-edit-btn:hover {
  background: #eff6ff;
  border-color: #6366f1;
}
html[data-theme='light'] .inv-preview-btn:disabled {
  color: var(--text-muted);
  border-color: var(--border);
  opacity: 0.5;
}
html[data-theme='light'] .inv-tooltip {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-charges-title {
  color: var(--text-primary);
}
html[data-theme='light'] .inv-toggle-track {
  background: var(--bg-elevated);
}
html[data-theme='light'] .inv-help-btn {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #475569;
}
html[data-theme='light'] .inv-help-btn:hover {
  background: #cbd5e1;
  border-color: #6c7aed;
  color: #6366f1;
}
html[data-theme='light'] .inv-csel,
html[data-theme='light'] .inv-cdesc,
html[data-theme='light'] .inv-camount {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-camount.neg {
  color: #ef4444;
}
html[data-theme='light'] .inv-amt-prefix.neg {
  color: #ef4444;
}
html[data-theme='light'] .inv-del-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-muted);
}
html[data-theme='light'] .inv-del-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #ef4444;
}
html[data-theme='light'] .inv-add-line {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-preview-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-preview-modal {
  background: var(--bg-surface);
}
html[data-theme='light'] .inv-pv-table th {
  background: var(--bg-elevated);
}
html[data-theme='light'] .inv-pv-table td {
  border-color: var(--border);
}
html[data-theme='light'] .inv-tooltip {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-tl-dot {
  border-color: var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
}
html[data-theme='light'] .inv-tl-dot.active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #3b82f6;
}
html[data-theme='light'] .inv-tl-dot.done {
  border-color: #10b981;
  background: #ecfdf5;
  color: #10b981;
}
html[data-theme='light'] .inv-tl-label {
  color: var(--text-muted);
}
html[data-theme='light'] .inv-tl-date {
  color: var(--text-muted);
}
html[data-theme='light'] .inv-tl-line {
  background: var(--border);
}
html[data-theme='light'] .inv-tl-line.done {
  background: #10b981;
}
html[data-theme='light'] .inv-type-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-type-btn:hover {
  border-color: #94a3b8;
  color: var(--text-primary);
}
html[data-theme='light'] .inv-type-btn.active {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #2563eb;
}
html[data-theme='light'] .inv-period-select {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-period-arrow {
  color: var(--text-muted);
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .inv-period-arrow:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
html[data-theme='light'] .inv-toggle-track {
  background: #cbd5e1;
}
html[data-theme='light'] .inv-save-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-save-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  border-color: #cbd5e1;
}
html[data-theme='light'] .inv-notes-field {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-send-summary {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .inv-dup-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: #4f46e5;
}
html[data-theme='light'] .inv-dup-btn:hover {
  background: #eef2ff;
  border-color: #4f46e5;
}
html[data-theme='light'] .inv-charge-tpl-item {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .inv-modal {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
html[data-theme='light'] .inv-modal-head {
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-modal:not(.inv-preview-modal) .inv-modal-foot {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .inv-preview-modal .inv-modal-foot {
  background: var(--bg-elevated);
}
html[data-theme='light'] .inv-btn-ghost {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .inv-btn-ghost:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}
/* ── Onboarding ── */
html[data-theme='light'] .ob-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ob-backdrop {
  background: rgba(0, 0, 0, 0.3);
}
html[data-theme='light'] .ob-btn-secondary {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ob-contract-body {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ob-sig-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ob-sig-clear {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-sig-canvas {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ob-asset-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ob-dl-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ob-progress-step {
  color: var(--text-muted);
}
/* ── Auth / Login ── */
html[data-theme='light'] .login-screen {
  background: var(--bg-base);
}
html[data-theme='light'] .login-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .login-field {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .login-logo-text {
  color: var(--text-primary);
}
html[data-theme='light'] .pwd-change-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
/* ── Modals ── */
html[data-theme='light'] .modal-body {
  background: var(--bg-surface);
}
html[data-theme='light'] .modal-header {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .modal-footer {
  background: var(--bg-surface);
  border-color: var(--border);
}
/* ── Settings ── */
html[data-theme='light'] .settings-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .settings-card-title {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
/* settings module: see /settings.css (was lines 742-760) */
html[data-theme='light'] .bkp-schedule-row select {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .bkp-list {
  border-color: var(--border);
}
html[data-theme='light'] .bkp-row {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .bkp-row:hover {
  background: var(--bg-elevated);
}
html[data-theme='light'] .bkp-row-date {
  color: var(--text-primary);
}
html[data-theme='light'] .bkp-row-meta {
  color: var(--text-muted);
}
html[data-theme='light'] .bkp-row-btn {
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .bkp-row-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
html[data-theme='light'] .bkp-now-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .bkp-now-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
html[data-theme='light'] .bkp-empty {
  color: var(--text-muted);
}
html[data-theme='light'] .field-input.readonly {
  background-color: var(--bg-base);
}
/* ── Onboarding (light theme) ── */
html[data-theme='light'] .ob-backdrop {
  background: rgba(241, 245, 249, 0.97);
}
html[data-theme='light'] .ob-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ob-header h2 {
  color: var(--text-primary);
}
html[data-theme='light'] .ob-header p {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-progress-step .ob-prog-bar {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ob-progress-step .ob-prog-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-step h3 {
  color: var(--text-primary);
}
html[data-theme='light'] .ob-step .ob-desc {
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-btn-secondary {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-btn-secondary:hover {
  color: var(--text-primary);
  border-color: #94a3b8;
}
html[data-theme='light'] .ob-btn-primary:disabled {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-color: var(--border);
}
html[data-theme='light'] .ob-contract-body {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-sig-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ob-sig-header {
  color: var(--text-primary);
}
html[data-theme='light'] .ob-sig-clear {
  border-color: var(--border);
  color: var(--text-muted);
}
html[data-theme='light'] .ob-sig-clear:hover {
  border-color: #94a3b8;
  color: var(--text-primary);
}
html[data-theme='light'] .ob-sig-canvas {
  background: #f8fafc;
  border-color: var(--border);
}
html[data-theme='light'] .ob-sig-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-sig-consents {
  border-top-color: var(--border);
}
html[data-theme='light'] .ob-sig-consent-row {
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-sig-note {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-check-row {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ob-check-row label {
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-asset-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ob-asset-card img {
  border-color: var(--border);
}
html[data-theme='light'] .ob-dl-btn:disabled {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-color: var(--border);
}
html[data-theme='light'] .ob-instr-toggle {
  color: var(--text-muted);
}
html[data-theme='light'] .ob-instr-toggle:hover {
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-instr-body {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ob-instr-body ol {
  color: var(--text-secondary);
}
html[data-theme='light'] .ob-instr-body ol strong {
  color: var(--text-primary);
}
html[data-theme='light'] .ob-pay-hint {
  color: var(--text-muted);
}
/* ── Time Tracker (light theme) ── */
html[data-theme='light'] .ck-stat {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-stat-value {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-stat-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-stat-sub {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-clear-btn {
  border-color: var(--border);
  color: var(--text-muted);
}
html[data-theme='light'] .ck-timesheet th {
  background: #e2e8f0;
  color: #334155;
  border-color: var(--border);
}
html[data-theme='light'] .ck-timesheet td {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] .ck-timesheet td.ts-today {
  background: rgba(59, 130, 246, 0.08);
}
html[data-theme='light'] .ck-timesheet td.ts-has-hours {
  color: #059669;
}
html[data-theme='light'] .ck-timesheet .ts-project {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-timesheet .ts-total {
  color: var(--text-primary);
  background: #e2e8f0;
  font-family: 'DM Mono', 'SF Mono', monospace;
}
html[data-theme='light'] .ck-timesheet .ts-empty {
  color: #cbd5e1;
}
html[data-theme='light'] .ck-timesheet .ts-totals-row td {
  background: #e2e8f0;
  border-top: 2px solid var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .ck-compare-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-compare-value {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-digest-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-digest-title {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-digest-row {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ck-template-item {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .ck-template-name {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-rpt-preset {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-rpt-preset.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-text);
}
html[data-theme='light'] .ck-rpt-stat {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-rpt-stat-num {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-rpt-stat-label {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-rpt-bar-track {
  background: var(--bg-elevated);
}
html[data-theme='light'] .ck-rpt-bar-label {
  color: var(--text-secondary);
}
html[data-theme='light'] .ck-rpt-bar-pct {
  color: var(--text-muted);
}
html[data-theme='light'] .ck-rpt-table th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ck-rpt-table td {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
html[data-theme='light'] .ck-rpt-table tr:hover td {
  background: #f1f5f9;
}
html[data-theme='light'] .ck-rpt-table tfoot td {
  border-top-color: var(--border);
}
html[data-theme='light'] .ck-bulk-bar {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .ck-bulk-count {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-tag-input {
  color: var(--text-primary);
}
html[data-theme='light'] .ck-timer-task-project {
  color: var(--text-primary);
}
/* ── Tasks (light theme) ── */
/* tasks module: see /tasks.css (was lines 815-824) */
/* ── Notifications ── */
html[data-theme='light'] .notif-item {
  border-bottom-color: var(--border);
}
/* ── Video Calls ── */
html[data-theme='light'] .call-local-video {
  background: var(--bg-elevated);
}
html[data-theme='light'] .call-audio-avatar {
  background: var(--bg-elevated);
}
html[data-theme='light'] .call-name {
  color: var(--text-primary);
}
html[data-theme='light'] .call-incoming-name {
  color: var(--text-primary);
}
/* ── Calendar ── */
/* calendar module: see /calendar.css (was lines 847-847) */
/* ── Meetings ── */
/* meetings module: see /meetings.css (was lines 894-898) */
/* ── Messenger (light theme) ── */
/* messenger module: see /messenger.css (was lines 929-964) */
/* ── Audit Log ── */
html[data-theme='light'] .audit-row {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .audit-row:hover {
  background: #f1f5f9;
}
html[data-theme='light'] .audit-header {
  color: var(--text-muted);
}
/* ── Payments ── */
html[data-theme='light'] .pm-tiles {
  border-bottom-color: var(--border);
}
html[data-theme='light'] .pm-tile {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
/* ── User Management (light theme) ── */
/* users module: see /users.css (was lines 886-888) */
/* ── Invoice (light theme extras) ── */
html[data-theme='light'] .inv-pill {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .inv-send-summary-total {
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme='light'] .inv-confirm-header {
  border-color: var(--border);
}
html[data-theme='light'] .inv-confirm-title {
  color: var(--text-primary);
}
html[data-theme='light'] .inv-send-summary-row {
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-send-summary-row strong {
  color: var(--text-primary);
}
html[data-theme='light'] .inv-modal-text {
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-modal-text strong {
  color: var(--text-primary);
}
html[data-theme='light'] .inv-modal-ex.gray {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: var(--text-secondary);
}
html[data-theme='light'] .inv-modal-ex.gray .inv-modal-ex-title {
  color: var(--text-muted);
}
html[data-theme='light'] .inv-modal-ex.red {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
html[data-theme='light'] .inv-modal-ex.red .inv-modal-ex-title {
  color: #dc2626;
}
html[data-theme='light'] .inv-charge-tpl-name {
  color: var(--text-primary);
}
/* ── Onboarding filter ── */
html[data-theme='light'] .ob-filter-tile {
  background: var(--bg-elevated);
  border-color: var(--border);
}
/* ── Password Change ── */
html[data-theme='light'] .pwd-change-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .pwd-change-card h3 {
  color: var(--text-primary);
}
html[data-theme='light'] .pwd-change-card p {
  color: var(--text-secondary);
}
/* ── Role Switcher ── */
html[data-theme='light'] .role-switcher {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .role-switcher-label {
  color: var(--text-secondary);
}
html[data-theme='light'] .role-tabs {
  background: var(--bg-elevated);
  border-color: var(--border);
}
html[data-theme='light'] .role-tab {
  color: var(--text-muted);
}
html[data-theme='light'] .role-tab.active {
  background: var(--accent-bg);
  color: var(--accent-text);
}
html[data-theme='light'] .role-user-sel {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
/* ── Tables & Reports ── */
html[data-theme='light'] .table-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .table-toolbar {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .report-card {
  background: var(--bg-surface);
  border-color: var(--border);
}
html[data-theme='light'] .prof-header-bg {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
}
html[data-theme='light'] .prof-avatar:not([style*='background']) {
  border-color: var(--bg-surface);
  background: #eff6ff;
  color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .prof-close-btn {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}
html[data-theme='light'] .prof-close-btn:hover {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
html[data-theme='light'] .prof-section-header {
  color: var(--text-muted);
  border-color: var(--border);
}
html[data-theme='light'] .prof-section-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .prof-save-btn {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
html[data-theme='light'] .hdr-user-badge {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
html[data-theme='light'] .hdr-user-badge:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
/* users module: see /users.css (was lines 929-932) */
html[data-theme='light'] .report-mark-btn {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .report-table th {
  background: var(--bg-elevated);
}
html[data-theme='light'] .report-table td {
  border-color: var(--border);
}
/* ── Shared form inputs / filters ── */
html[data-theme='light'] .search-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .field-input {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .filter-select {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] .period-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme='light'] .period-btn:hover,
html[data-theme='light'] .period-btn.active {
  background: var(--accent-bg);
  color: var(--accent-text);
}
html[data-theme='light'] .period-nav {
  color: var(--text-muted);
}
html[data-theme='light'] .toggle-track {
  background: var(--bg-elevated);
}
html[data-theme='light'] .paid-toggle {
  background: var(--bg-elevated);
}
html[data-theme='light'] .file-drop-zone {
  border-color: var(--border);
}
html[data-theme='light'] .file-drop-zone:hover,
html[data-theme='light'] .file-drop-zone.drag {
  border-color: var(--accent);
  background: var(--accent-bg);
}
html[data-theme='light'] .file-drop-label {
  color: var(--text-muted);
}
/* ── Keyboard Shortcuts Panel ── */
.kbd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.kbd-overlay.open {
  display: flex;
}
.kbd-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
}
.kbd-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kbd-section {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}
.kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.kbd-row span:first-child {
  color: var(--text-secondary);
  font-size: 13px;
}
.kbd-key {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
  min-width: 28px;
  text-align: center;
}
/* ── Voice Message ── */
/* messenger module: see /messenger.css (was lines 1045-1049) */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes emlToastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition:
    background 0.2s,
    color 0.2s;
}

input,
select,
textarea {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #475569;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
input::placeholder,
textarea::placeholder {
  color: #475569;
  opacity: 1;
  transition: opacity 0.2s;
}
input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.5;
}
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #0c111d;
}
/* appearance: none is !important-ed so no selector-specific override using
     the `background:` shorthand can bring back Chrome's native dark-mode
     select rendering, which paints a triangle/crosshatch pattern over the
     chosen value (ticket: "green cover of text"). Individual selects can
     still paint their own chevron; they just can't opt back into native. */
select {
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 24px;
}
select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
}
input[type='checkbox'],
input[type='radio'] {
  width: auto;
  padding: 0;
  appearance: auto;
  -webkit-appearance: auto;
  background: none;
  border: none;
  box-shadow: none;
  transition: none;
}
input[type='checkbox']:hover,
input[type='radio']:hover {
  border: none;
}
input[type='range'] {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}
input[type='range']:hover {
  border: none;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='time'] {
  cursor: pointer;
  position: relative;
}
input[type='date']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
input[type='color'] {
  padding: 2px;
  cursor: pointer;
}
input[type='file'] {
  cursor: pointer;
}
html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme='light'] input:hover,
html[data-theme='light'] select:hover,
html[data-theme='light'] textarea:hover {
  border-color: #94a3b8;
}
html[data-theme='light'] input:focus,
html[data-theme='light'] select:focus,
html[data-theme='light'] textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
html[data-theme='light'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder {
  color: #94a3b8;
}
html[data-theme='light'] input:disabled,
html[data-theme='light'] select:disabled,
html[data-theme='light'] textarea:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}

/* Build 1006 Phase A — app shell is a CSS Grid. The sidebar lives in its
     own grid track on desktop (220px expanded, 52px collapsed) so width
     transitions animate the actual track, not a margin-left hack on
     content. On mobile (data-layout="mobile"), the sidebar is removed
     from grid flow and overlays via position: absolute + transform. */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.app-shell:has(.sidebar.collapsed) {
  grid-template-columns: 52px 1fr;
}
/* Build 1009 — #appBackdrop must be display:none by default at every
     breakpoint. Without this, the backdrop div claims the first grid
     track on desktop (220px), pushes the sidebar into track 2 (1fr),
     and shoves .app-content into a hidden second row. */
#appBackdrop {
  display: none;
}

/* Build 1018 — mobile hamburger button. Hidden on desktop (the
     sidebar is always visible there). Shown on mobile only when the
     sidebar is collapsed (off-screen) — once the user opens the
     sidebar, the floating button hides because the in-sidebar
     toggle becomes reachable. */
#mobileMenuBtn {
  display: none;
}

/* ── Sidebar ── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 60;
  overflow: hidden;
  min-width: 0;
}
.sidebar.collapsed {
  overflow: visible;
}
/* Icon-only mode when collapsed */
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-logo > svg,
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-count,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .nav-sub,
.sidebar.collapsed .role-switcher,
.sidebar.collapsed #appVersion {
  display: none;
}
.sidebar.collapsed .sidebar-bottom {
  padding: 8px 6px;
}
.sidebar.collapsed .sidebar-bottom button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
.sidebar.collapsed .sidebar-bottom button span {
  display: none;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px 0;
  border-left-color: transparent !important;
}
.sidebar.collapsed .nav-item.active {
  border-left-color: #3b82f6 !important;
}
.sidebar.collapsed .sidebar-logo {
  justify-content: center;
  padding: 18px 0;
}
/* Flyout panel (shown on hover when collapsed) */
.nav-flyout {
  display: none;
  position: absolute;
  left: 48px;
  top: 0;
  min-width: 178px;
  background: #111c2e;
  border: 1px solid #1e293b;
  border-left: none;
  border-radius: 0 10px 10px 0;
  z-index: 200;
  padding: 6px 0;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5);
  padding-left: 4px;
}
.nav-flyout-header {
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #334155;
}
.nav-flyout-section {
  padding: 10px 14px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
  border-top: 1px solid #1e293b;
  margin-top: 4px;
}
.nav-sub-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 46px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  border-left: 3px solid transparent;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.nav-sub-group-toggle svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.nav-sub-group-toggle:hover {
  background: #1e2d45;
  color: #94a3b8;
}
.nav-sub-group-toggle.parent-active {
  color: #94a3b8;
}
.nav-sub-group {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-sub-group.open {
  max-height: 200px;
}
.nav-sub-group .nav-sub-item {
  padding-left: 62px;
}
.nav-flyout-label {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  border-left: 2px solid transparent;
}
.nav-flyout-label:hover {
  background: #1e2d45;
  color: #f1f5f9;
}
.nav-flyout-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  border-left: 2px solid transparent;
}
.nav-flyout-item svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.nav-flyout-item:hover {
  background: #1e2d45;
  color: #94a3b8;
}
.nav-flyout-item.active {
  color: #60a5fa;
  background: #1e3a5f;
  border-left-color: #3b82f6;
}
.sidebar.collapsed .nav-item {
  position: relative;
}
.sidebar.collapsed .nav-item.has-flyout:hover > .nav-flyout {
  display: block;
}
.sidebar.collapsed.no-flyout .nav-item.has-flyout:hover > .nav-flyout {
  display: none;
}
.sidebar.collapsed .nav-item.has-flyout::after {
  display: none;
}
/* Simple tooltip for items without flyout */
.sidebar.collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  border: 1px solid #334155;
  z-index: 300;
}
.sidebar.collapsed .nav-item:not(.has-flyout):hover::after {
  opacity: 1;
}

.sidebar-logo {
  padding: 18px 14px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #1e293b;
  white-space: nowrap;
  min-height: 62px;
}
.sidebar-logo svg {
  flex-shrink: 0;
}
.sidebar-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
  letter-spacing: 0.3px;
  text-transform: none;
  font-variant: normal;
  font-family:
    'Inter',
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-toggle {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition:
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sidebar-toggle:hover {
  color: #94a3b8;
  background: #1e293b;
}
.sidebar-toggle .toggle-collapse {
  display: block;
}
.sidebar-toggle .toggle-expand {
  display: none;
}
.sidebar.collapsed .sidebar-toggle .toggle-collapse {
  display: none;
}
.sidebar.collapsed .sidebar-toggle .toggle-expand {
  display: block;
}

.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #475569;
  padding: 16px 16px 4px 19px;
  user-select: none;
}
.sidebar.collapsed .nav-section-label {
  display: none;
}
.nav-list {
  padding: 10px 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.sidebar.collapsed .nav-list {
  overflow: visible;
}
.nav-list::-webkit-scrollbar {
  width: 4px;
}
.nav-list::-webkit-scrollbar-track {
  background: transparent;
}
.nav-list::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 2px;
}
.nav-list::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.nav-item:hover {
  background: #1e2d45;
  color: #94a3b8;
}
.nav-item.active {
  background: #1e3a5f;
  color: #60a5fa;
  border-left-color: #3b82f6;
}
.nav-item.active svg {
  color: #3b82f6;
}
.nav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: #1e293b;
  color: #475569;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.nav-item.active .nav-count {
  background: #1e3a5f;
  color: #60a5fa;
  border-color: #3b82f640;
}
.nav-item.parent-active {
  background: #131f35;
  color: #94a3b8;
}
.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: #475569;
}
.nav-chevron.open {
  transform: rotate(90deg);
}
.nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-sub.open {
  max-height: 500px;
}
.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 46px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  border-left: 3px solid transparent;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.nav-sub-item svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.nav-sub-item:hover {
  background: #1e2d45;
  color: #94a3b8;
}
.nav-sub-item.active {
  background: #1e3a5f;
  color: #60a5fa;
  border-left-color: #3b82f6;
}
.nav-sub-item.role-hidden,
.nav-flyout-item.role-hidden,
.nav-sub-group-toggle.role-hidden,
.nav-sub-group.role-hidden {
  display: none;
}
/* Module hidden (disabled or role-excluded): don't show in nav at all */
.nav-hidden {
  display: none !important;
}
/* Build 977 — Favorites star. Subtle by default; filled when starred,
     hollow on hover for non-starred items. Sits absolute on the right
     side of the row so it doesn't shift the label/icon layout. */
.nav-sub-item {
  position: relative;
}
.fav-star {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
  color: #475569;
  line-height: 0;
}
.nav-sub-item:hover .fav-star {
  opacity: 0.7;
}
.fav-star:hover {
  color: #fbbf24;
  opacity: 1 !important;
  background: #1e293b;
}
.fav-star.starred {
  opacity: 0.85;
  color: #fbbf24;
}
.fav-star.starred:hover {
  opacity: 1;
  color: #f59e0b;
}
/* Build 978 — Favorites empty state. Shown but muted + unclickable
     so the user knows the section exists ("star anything to fill it")
     without it eating clicks or being highlighted as the active page. */
.nav-item.fav-empty {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.nav-item.fav-empty .nav-chevron {
  display: none;
}
/* Build 980 — Pin icon for default-favorite. Sits to the LEFT of
     the star (right: 38px leaves room for star at right: 12px). Same
     hover/visible pattern as the star: filled blue when set, muted +
     hover-revealed otherwise. Only rendered inside #favoritesSubNav. */
.fav-pin {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
  color: #475569;
  line-height: 0;
}
.nav-sub-item:hover .fav-pin {
  opacity: 0.7;
}
.fav-pin:hover {
  color: #60a5fa;
  opacity: 1 !important;
  background: #1e293b;
}
.fav-pin.pinned {
  opacity: 0.85;
  color: #60a5fa;
}
.fav-pin.pinned:hover {
  opacity: 1;
  color: #3b82f6;
}
/* Module NEW (enabled) badge */
.nav-new > .nav-item-label::after,
.nav-sub-item.nav-new::after {
  content: 'NEW';
  margin-left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #065f46;
  color: #34d399;
  vertical-align: middle;
}
.nav-health {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-health::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-health.connected::before {
  background: var(--nh-color, #10b981);
  box-shadow: 0 0 4px var(--nh-color, #10b981) 80;
}
.nav-health.partial::before {
  background: #f59e0b;
  box-shadow: 0 0 4px #f59e0b80;
}
.nav-health.disconnected::before {
  background: #ef4444;
  box-shadow: 0 0 4px #ef444480;
}
.ob-tab:hover {
  color: #94a3b8;
}
.ob-tab.active {
  color: #60a5fa;
  border-bottom-color: #3b82f6;
}
.ob-tab-panel {
  animation: obTabFadeIn 0.2s ease;
}
@keyframes obTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ob-filter-tile {
  background: #0f172a;
  color: #64748b;
}
.ob-filter-tile:hover {
  border-color: #475569;
  color: #94a3b8;
}
.ob-filter-tile.active {
  background: #1e3a5f;
  color: #60a5fa;
  border-color: #3b82f6;
}

/* Task Board */
/* Task Sidebar */
.sb-edge-toggle {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
  opacity: 0;
}
.sb-edge-toggle:hover {
  background: #334155;
  color: #e2e8f0;
  border-color: #475569;
}
/* messenger module: see /messenger.css (was lines 1187-1188) */
.sb-edge-expand {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0 6px 6px 0;
  color: #64748b;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
}
.sb-edge-expand:hover {
  background: #334155;
  color: #e2e8f0;
  border-color: #475569;
}
html[data-theme='light'] .sb-edge-toggle,
html[data-theme='light'] .sb-edge-expand {
  background: #fff;
  border-color: #e2e8f0;
  color: #64748b;
}
html[data-theme='light'] .sb-edge-toggle:hover,
html[data-theme='light'] .sb-edge-expand:hover {
  background: #f1f5f9;
  color: #1e293b;
}
/* tasks module: see /tasks.css (was lines 1056-1102) */

/* Filter Panel */
/* tasks module: see /tasks.css (was lines 1105-1143) */

/* Toolbar Icon Buttons */
/* tasks module: see /tasks.css (was lines 1146-1161) */
/* Assignee Filter Popup */
/* tasks module: see /tasks.css (was lines 1163-1175) */

/* Inline Status Picker */
/* tasks module: see /tasks.css (was lines 1178-1191) */

/* Custom Fields / Add Column */
/* tasks module: see /tasks.css (was lines 1194-1215) */

/* tasks module: see /tasks.css (was lines 1217-1283) */
@keyframes tkPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* tasks module: see /tasks.css (was lines 1285-1286) */

/* Task List View */
/* tasks module: see /tasks.css (was lines 1289-1318) */

/* tasks module: see /tasks.css (was lines 1320-1328) */

/* tasks module: see /tasks.css (was lines 1330-1331) */

/* Inline hover actions on task rows */
/* tasks module: see /tasks.css (was lines 1334-1338) */

/* Bulk popup menus */
/* tasks module: see /tasks.css (was lines 1341-1351) */

/* Task Favorites Star */
/* tasks module: see /tasks.css (was lines 1354-1356) */
/* Inline Edit Cell */
/* tasks module: see /tasks.css (was lines 1358-1358) */
/* Workload View */
/* tasks module: see /tasks.css (was lines 1360-1367) */
/* Duplicate Warning */
/* tasks module: see /tasks.css (was lines 1369-1370) */
/* Import/Export Buttons */
/* tasks module: see /tasks.css (was lines 1372-1374) */
/* Checklist Template */
/* tasks module: see /tasks.css (was lines 1376-1378) */
/* Keyboard shortcut hint */
/* tasks module: see /tasks.css (was lines 1380-1381) */

/* Status & Priority colored pills */
.tkd-prop-select.tkd-status-backlog {
  color: #64748b;
}
.tkd-prop-select.tkd-status-todo {
  color: #94a3b8;
}
.tkd-prop-select.tkd-status-in_progress {
  color: #60a5fa;
}
.tkd-prop-select.tkd-status-review {
  color: #c084fc;
}
.tkd-prop-select.tkd-status-done {
  color: #34d399;
}
.tkd-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.tkd-priority-pill.low {
  background: #1e293b;
  color: #64748b;
}
.tkd-priority-pill.medium {
  background: #422006;
  color: #ef4444;
}
.tkd-priority-pill.high {
  background: #450a0a;
  color: #f87171;
}
.tkd-priority-pill.urgent {
  background: #7f1d1d;
  color: #fca5a5;
  animation: tk-ai-pulse 2s infinite;
}
.tkd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.tkd-status-pill.backlog {
  background: #1e293b;
  color: #64748b;
}
.tkd-status-pill.todo {
  background: #1e293b;
  color: #94a3b8;
}
.tkd-status-pill.in_progress {
  background: #172554;
  color: #60a5fa;
}
.tkd-status-pill.review {
  background: #2e1065;
  color: #c084fc;
}
.tkd-status-pill.done {
  background: #052e16;
  color: #34d399;
}
.tkd-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tkd-status-pill.backlog .tkd-status-dot {
  background: #475569;
}
.tkd-status-pill.todo .tkd-status-dot {
  background: #94a3b8;
}
.tkd-status-pill.in_progress .tkd-status-dot {
  background: #3b82f6;
}
.tkd-status-pill.review .tkd-status-dot {
  background: #a855f7;
}
.tkd-status-pill.done .tkd-status-dot {
  background: #10b981;
}

/* Light-theme overrides for task priority/status pills (build 963) */
html[data-theme='light'] .tkd-priority-pill.low {
  background: #f1f5f9;
  color: #475569;
}
html[data-theme='light'] .tkd-priority-pill.medium {
  background: #fef3c7;
  color: #b45309;
}
html[data-theme='light'] .tkd-priority-pill.high {
  background: #fee2e2;
  color: #b91c1c;
}
html[data-theme='light'] .tkd-priority-pill.urgent {
  background: #fecaca;
  color: #7f1d1d;
}
html[data-theme='light'] .tkd-status-pill.backlog {
  background: #e5e7eb;
  color: #475569;
}
html[data-theme='light'] .tkd-status-pill.todo {
  background: #f1f5f9;
  color: #475569;
}
html[data-theme='light'] .tkd-status-pill.in_progress {
  background: #dbeafe;
  color: #1e40af;
}
html[data-theme='light'] .tkd-status-pill.review {
  background: #f3e8ff;
  color: #6b21a8;
}
html[data-theme='light'] .tkd-status-pill.done {
  background: #dcfce7;
  color: #15803d;
}

/* Dark-friendly checkboxes in task modal */
.tkd-modal input[type='checkbox'] {
  accent-color: #7c3aed;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.tkd-modal select {
  color-scheme: dark;
}
.tkd-modal input[type='date'] {
  color-scheme: dark;
}
.tkd-modal input[type='datetime-local'] {
  color-scheme: dark;
}
.tkd-modal input[type='time'] {
  color-scheme: dark;
}
/* Task Detail Modal (ClickUp-style) */
.tkd-modal {
  display: flex;
  width: 96vw;
  max-width: 1140px;
  height: 90vh;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
}
.tkd-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}
.tkd-right {
  width: 320px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: #0a0f1a;
}
.tkd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
.tkd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  color: #94a3b8;
}
.tkd-title-wrap {
  padding: 8px 28px 2px;
}
.tkd-title-input {
  width: 100%;
  background: none;
  border: none;
  color: #f1f5f9;
  font-size: 28px;
  font-weight: 700;
  font-family: inherit;
  padding: 8px 0 4px;
  outline: none;
  line-height: 1.25;
}
.tkd-title-input:focus {
}
.tkd-title-input:empty::before {
  content: attr(data-placeholder);
  color: #334155;
  font-weight: 600;
  pointer-events: none;
}
.tkd-title-input::placeholder {
  color: #334155;
  font-weight: 600;
}
.tkd-props {
  padding: 4px 28px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.tkd-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  min-height: 40px;
  transition: background 0.12s;
  margin: 0 -8px;
  border-radius: 8px;
}
.tkd-prop-row:hover {
  background: #1e293b30;
}
.tkd-prop-row.full-width {
}
.tkd-prop-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  width: 90px;
  min-width: 90px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tkd-prop-label svg {
  color: #475569;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.tkd-prop-value {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.tkd-prop-select {
  background: transparent;
  border: 1px solid transparent;
  color: #e2e8f0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.tkd-prop-select:hover {
  border-color: #1e293b;
  background: #1e293b40;
}
.tkd-prop-select:focus {
  border-color: #7c3aed;
  outline: none;
  box-shadow: 0 0 0 2px #7c3aed20;
}
.tkd-prop-input {
  background: transparent;
  border: 1px solid transparent;
  color: #e2e8f0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s;
  box-sizing: border-box;
}
.tkd-prop-input:hover {
  border-color: #1e293b;
  background: #1e293b40;
}
.tkd-prop-input:focus {
  border-color: #7c3aed;
  outline: none;
  box-shadow: 0 0 0 2px #7c3aed20;
}
.tkd-section {
  padding: 8px 28px;
}
.tkd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  padding: 10px 0 6px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.tkd-desc {
  width: 100%;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #cbd5e1;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
  outline: none;
  border-radius: 10px;
  box-sizing: border-box;
  min-height: 64px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  overflow-y: auto;
}
.tkd-desc:hover {
  border-color: #334155;
}
.tkd-desc:focus {
  border-color: #7c3aed;
  background: #0f172a;
  box-shadow: 0 0 0 3px #7c3aed12;
}
.tkd-desc::placeholder {
  color: #334155;
}
.tkd-desc[contenteditable='true']:empty::before {
  content: attr(data-placeholder);
  color: #334155;
  pointer-events: none;
}
.tkd-desc ul,
.tkd-desc ol {
  margin: 4px 0 4px 22px;
  padding: 0;
}
.tkd-desc li {
  margin: 2px 0;
}
.tkd-desc b,
.tkd-desc strong {
  font-weight: 700;
  color: #f1f5f9;
}
.tkd-desc i,
.tkd-desc em {
  font-style: italic;
}
.tkd-desc-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #0a0f1a;
  border: 1px solid #1e293b;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  align-items: center;
}
.tkd-desc-toolbar + .tkd-desc {
  border-radius: 0 0 10px 10px;
  border-top: none;
}
.tkd-desc-tb-btn {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  min-width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.12s,
    color 0.12s;
}
.tkd-desc-tb-btn:hover {
  background: #1e293b;
  color: #cbd5e1;
}
.tkd-desc-tb-btn.active {
  background: #7c3aed20;
  color: #a78bfa;
}
.tkd-desc-tb-btn svg {
  width: 14px;
  height: 14px;
}
.tkd-desc-tb-sep {
  width: 1px;
  height: 16px;
  background: #1e293b;
  margin: 0 2px;
}
.tkd-actions {
  padding: 8px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tkd-action-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.12s;
  margin: 0 -10px;
}
.tkd-action-link:hover {
  color: #a78bfa;
  background: #7c3aed10;
}
.tkd-action-link svg {
  flex-shrink: 0;
}
.tkd-link-btn {
  background: none;
  border: 1px solid #334155;
  color: #3b82f6;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.tkd-link-btn:hover {
  background: #3b82f620;
  border-color: #3b82f6;
}
.tkd-footer {
  padding: 14px 28px;
  border-top: 1px solid #1e293b;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  margin-top: auto;
  background: #0c1222;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
/* Activity panel */
.tkd-activity-head {
  padding: 20px 20px 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tkd-activity-body {
  flex: 1;
  padding: 14px 20px;
  overflow-y: auto;
  min-height: 100px;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}
.tkd-comments-body {
  display: flex;
  flex-direction: column;
  padding: 0 20px 14px;
  flex: 1;
  overflow: hidden;
}
.tkd-comment-input {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #1e293b;
  flex-shrink: 0;
  margin: 0 -20px;
  width: calc(100% + 40px);
  box-sizing: border-box;
}
/* tasks module: see /tasks.css (was lines 1457-1490) */

/* ── AI Agent Task Styles ── */
/* tasks module: see /tasks.css (was lines 1493-1501) */

/* tasks module: see /tasks.css (was lines 1503-1504) */
@keyframes tkAiFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* tasks module: see /tasks.css (was lines 1506-1520) */

/* AI badge in task list / board */
/* tasks module: see /tasks.css (was lines 1523-1531) */
@keyframes tk-ai-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* AI Results panel */
/* tasks module: see /tasks.css (was lines 1535-1547) */

/* Light theme overrides */
/* tasks module: see /tasks.css (was lines 1550-1557) */
/* sidebar-footer removed — unused */

/* Dashboard KPI */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.dash-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 18px 20px;
  transition: border-color 0.15s;
}
.dash-card:hover {
  border-color: #334155;
}
.dash-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}
.dash-card-val {
  font-size: 28px;
  font-weight: 800;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-card-sub {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}
.dash-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dash-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 12px;
}
.dash-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 24px 0 10px;
  padding-left: 2px;
}
.dash-group-title:first-child {
  margin-top: 0;
}

/* Leave Management */
.leave-act-btn {
  background: none;
  border: 1px solid #334155;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  transition: all 0.15s;
}
.leave-act-btn:hover {
  border-color: #475569;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme='light'] .leave-act-btn {
  border-color: #cbd5e1;
  color: #64748b;
}
html[data-theme='light'] .leave-act-btn:hover {
  border-color: #94a3b8;
  color: #1e293b;
  background: rgba(0, 0, 0, 0.04);
}
.leave-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 11px;
}
.leave-cal-header {
  text-align: center;
  font-weight: 700;
  color: #64748b;
  padding: 6px 0;
  text-transform: uppercase;
  font-size: 9px;
}
.leave-cal-day {
  text-align: center;
  padding: 6px 2px;
  border-radius: 4px;
  color: #94a3b8;
  cursor: default;
}
.leave-cal-day.today {
  background: #1e3a5f;
  color: #60a5fa;
  font-weight: 700;
}
.leave-cal-day.leave {
  background: rgba(251, 146, 60, 0.15);
  color: #ef4444;
}
.leave-cal-day.approved {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.leave-cal-day.empty {
  color: #1e293b;
}

/* Notifications */
.notif-bell {
  position: relative;
  cursor: pointer;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 360px;
  max-height: 420px;
  overflow-y: auto;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  z-index: 1300;
  display: none;
}
.notif-panel.open {
  display: block;
}
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid #0f172a;
  cursor: pointer;
  transition: background 0.1s;
}
.notif-item:hover {
  background: #0f172a;
}
.notif-item.unread {
  border-left: 3px solid #3b82f6;
}
.notif-time {
  font-size: 10px;
  color: #475569;
  margin-top: 4px;
}

/* Audit Log */
/* ── Calendar ── */
/* Calendar modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}
.modal-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #1e293b;
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
}
.modal-header button,
.modal-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 20px;
  padding: 4px;
  line-height: 1;
}
.modal-header button:hover,
.modal-close:hover {
  color: #f1f5f9;
}
.modal-body {
  padding: 20px;
}
.modal-body label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  margin-top: 14px;
}
.modal-body label:first-child {
  margin-top: 0;
}
.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  padding: 8px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: #3b82f6;
}
.modal-body .form-row {
  display: flex;
  gap: 12px;
}
.modal-body .form-row > div {
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #1e293b;
}
.modal-footer button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.modal-footer .btn-cancel,
.modal-btn-secondary {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.modal-footer .btn-cancel:hover,
.modal-btn-secondary:hover {
  background: #334155;
  color: #e2e8f0;
}
.modal-footer .btn-save,
.modal-btn-primary {
  background: #3b82f6;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.modal-footer .btn-save:hover,
.modal-btn-primary:hover {
  background: #2563eb;
}
/* calendar module: see /calendar.css (was lines 1631-1678) */
/* Week view */
/* calendar module: see /calendar.css (was lines 1680-1689) */
/* Color picker dots */
/* calendar module: see /calendar.css (was lines 1691-1692) */

/* ── Calls ── */
/* messenger module: see /messenger.css (was lines 1818-1818) */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}
.call-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.call-ringing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 40px;
}
.call-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #1e3a5f;
  border: 3px solid #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #60a5fa;
  animation: callPulse 2s ease-in-out infinite;
}
@keyframes callPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
  }
}
.call-name {
  font-size: 22px;
  font-weight: 600;
  color: #f1f5f9;
}
.call-status {
  font-size: 14px;
  color: #94a3b8;
  animation: callDots 1.5s infinite;
}
@keyframes callDots {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.call-actions-ring {
  display: flex;
  gap: 20px;
  margin-top: 24px;
}
.call-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.call-btn:hover {
  transform: scale(1.1);
}
.call-btn-end {
  background: #ef4444;
}
.call-btn-end:hover {
  filter: brightness(1.2);
}
.call-btn-accept {
  background: #10b981;
}
.call-btn-accept:hover {
  filter: brightness(1.2);
}
.call-active {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.call-video-area {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.call-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-local-video {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 180px;
  height: 135px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #334155;
  background: #0f1117;
  z-index: 2;
}
.call-audio-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0f1117;
}
.call-info-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.call-info-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 6px;
}
.call-info-timer {
  font-size: 12px;
  color: #10b981;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.call-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 12px 24px;
  background: #1e293b;
  border-radius: 12px;
  border: 1px solid #334155;
}
.call-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #334155;
  border: none;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.call-ctrl-btn:hover {
  background: #475569;
}
.call-ctrl-btn.active {
  background: #ef4444;
  color: #fff;
}
/* Speaking animations */
.call-avatar-lg.speaking {
  animation: callSpeakPulse 0.6s ease-in-out infinite;
  border-color: #10b981;
}
@keyframes callSpeakPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
    transform: scale(1.04);
  }
}
.call-ctrl-btn.speaking {
  background: #10b981;
  color: #fff;
  animation: callMicPulse 0.5s ease-in-out infinite;
}
@keyframes callMicPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
}
/* Recording animation */
.call-ctrl-btn.recording {
  background: #ef4444;
  color: #fff;
  animation: callRecPulse 1s ease-in-out infinite;
}
@keyframes callRecPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
}
.call-rec-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 3;
}
.call-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: callRecDot 1s ease-in-out infinite;
}
@keyframes callRecDot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* Incoming call toast */
.call-incoming {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: callSlideIn 0.3s ease-out;
}
@keyframes callSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* calendar module: see /calendar.css (was lines 1738-1740) */
.call-incoming-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.call-incoming-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e3a5f;
  border: 2px solid #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #60a5fa;
}
.call-incoming-name {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
}
.call-incoming-type {
  font-size: 11px;
  color: #94a3b8;
}
.call-incoming-actions {
  display: flex;
  gap: 10px;
}

/* ── Meetings ── */
/* meetings module: see /meetings.css (was lines 1802-1845) */
@keyframes mtgPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* meetings module: see /meetings.css (was lines 1847-1865) */
/* Meeting conference overlay */
/* meetings module: see /meetings.css (was lines 1867-1902) */
/* Create meeting modal */
/* meetings module: see /meetings.css (was lines 1904-1921) */

/* ── Messenger ── */
/* messenger module: see /messenger.css (was lines 1993-2075) */

/* ── Messenger: Typing indicator ── */
/* messenger module: see /messenger.css (was lines 2078-2078) */
@keyframes msgTypingPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ── Messenger: Message status checkmarks ── */
/* messenger module: see /messenger.css (was lines 2082-2085) */

/* ── Messenger: Emoji reactions ── */
/* messenger module: see /messenger.css (was lines 2088-2095) */

/* ── Messenger: Reply/Quote ── */
/* messenger module: see /messenger.css (was lines 2098-2112) */

/* ── Messenger: Group conversations ── */
/* messenger module: see /messenger.css (was lines 2115-2124) */

/* ── Messenger: Edit & Delete ── */
/* messenger module: see /messenger.css (was lines 2127-2134) */

/* ── Messenger: Pinned messages ── */
/* messenger module: see /messenger.css (was lines 2137-2146) */

/* ── Messenger: Online/Offline status ── */
/* messenger module: see /messenger.css (was lines 2149-2153) */

/* ─────────────────────────────────────────────────────────────────
     Native messenger v2 — Teams-inspired refinement (scoped to
     #msgNativeRoot so legacy callers are unaffected).
     ───────────────────────────────────────────────────────────────── */
/* messenger module: see /messenger.css (was lines 2159-2160) */

/* Sidebar */
/* messenger module: see /messenger.css (was lines 2163-2167) */
/* Title bar above the search */
/* messenger module: see /messenger.css (was lines 2169-2198) */
/* New conversation icon button */
/* messenger module: see /messenger.css (was lines 2200-2212) */
/* Section label "Recent" before conv list */
/* messenger module: see /messenger.css (was lines 2214-2221) */
/* Conversation rows */
/* messenger module: see /messenger.css (was lines 2223-2285) */

/* Chat area */
/* messenger module: see /messenger.css (was lines 2288-2326) */

/* Message bubbles — keep bubbles but soften to Teams style */
/* messenger module: see /messenger.css (was lines 2329-2359) */
#msgNativeRoot .msg-date-sep::before,
/* messenger module: see /messenger.css (was lines 2361-2366) */

  /* Compose area */
/* messenger module: see /messenger.css (was lines 2369-2387) */
  #msgNativeRoot .msg-compose button.msg-send-btn,
/* messenger module: see /messenger.css (was lines 2389-2401) */
  #msgNativeRoot .msg-compose button.msg-send-btn:hover,
/* messenger module: see /messenger.css (was lines 2403-2405) */
  /* Attach (paperclip) button next to compose */
/* messenger module: see /messenger.css (was lines 2407-2420) */

  /* Back pill (legacy #rcExitBtn moved into sidebar header) */
  #msgNativeRoot #rcExitBtn,
/* messenger module: see /messenger.css (was lines 2424-2437) */

  /* Native new-conv modal */
/* messenger module: see /messenger.css (was lines 2440-2440) */

  /* #2 Hide the legacy "+" button — search now creates new chats */
/* messenger module: see /messenger.css (was lines 2443-2443) */
  /* Always hide the legacy global-search-results panel; we use msg-v2-userhits */
/* messenger module: see /messenger.css (was lines 2445-2445) */

  /* #3 Messenger sits INSIDE the normal dashboard chrome (header + sidebar
     stay visible). Use the available content area, not 100vh. The legacy
     body:has() rules that wiped the dashboard chrome are gone. */
/* messenger module: see /messenger.css (was lines 2450-2455) */

  /* #7 Emoji picker panel — position:fixed so JS can place it at the caret */
/* messenger module: see /messenger.css (was lines 2458-2489) */

  /* #6 @-mention dropdown — restyle for v2 */
  #msgNativeRoot .msg-mention-dropdown,
/* messenger module: see /messenger.css (was lines 2493-2498) */
  #msgNativeRoot .msg-mention-dropdown-item,
/* messenger module: see /messenger.css (was lines 2500-2505) */
  #msgNativeRoot .msg-mention-dropdown-item:hover,
/* messenger module: see /messenger.css (was lines 2507-2509) */

  /* #4 Per-conv ... menu (context menu) — v2 styling */
  #msgNativeRoot .msg-ctx-menu,
/* messenger module: see /messenger.css (was lines 2513-2520) */
  #msgNativeRoot .msg-ctx-item,
/* messenger module: see /messenger.css (was lines 2522-2526) */
  #msgNativeRoot .msg-ctx-item:hover,
/* messenger module: see /messenger.css (was lines 2528-2528) */

  /* #9 In-conv message search bar */
/* messenger module: see /messenger.css (was lines 2531-2561) */

  /* Hide stale legacy siblings between messages and compose so they don't
     leave dividing lines or floating background strips. */
  #msgNativeRoot #msgPinnedBar:empty,
  #msgNativeRoot #msgTypingIndicator:empty,
  #msgNativeRoot #msgAttachPreview:empty,
/* messenger module: see /messenger.css (was lines 2568-2573) */
  /* Also kill these legacy panels' background/border when populated so they
     blend with the v2 chat background instead of showing the old #0d1526 strip. */
/* messenger module: see /messenger.css (was lines 2576-2585) */

  /* Inline user-search results panel below the conversation list */
/* messenger module: see /messenger.css (was lines 2588-2630) */

  /* ── Messenger: Message search ── */
/* messenger module: see /messenger.css (was lines 2633-2640) */

  /* ── Messenger: @Mentions ── */
/* messenger module: see /messenger.css (was lines 2643-2648) */

  /* ── Messenger: Link previews ── */
/* messenger module: see /messenger.css (was lines 2651-2652) */

  /* ── Messenger: Image lightbox ── */
/* messenger module: see /messenger.css (was lines 2655-2660) */

  /* ── Messenger: Broadcast ── */
/* messenger module: see /messenger.css (was lines 2663-2672) */

  /* ── Messenger: Forward ── */
/* messenger module: see /messenger.css (was lines 2675-2682) */

  /* ── Messenger: Edit input ── */
/* messenger module: see /messenger.css (was lines 2685-2690) */

  /* ── Messenger LIGHT theme overrides (build 773) ── */
/* messenger module: see /messenger.css (was lines 2693-2721) */
  html[data-theme="light"] #msgNativeRoot .msg-date-sep::before,
/* messenger module: see /messenger.css (was lines 2723-2730) */

  /* ── Build 774: Teams-style message grouping ── */
/* messenger module: see /messenger.css (was lines 2733-2743) */
  #msgNativeRoot .msg-recv-row.msg-run-cont .msg-msg-header,
/* messenger module: see /messenger.css (was lines 2745-2748) */

  /* ── Build 774: Sidebar section labels ── */
/* messenger module: see /messenger.css (was lines 2751-2757) */

  /* ── Build 778: filter chips ── */
/* messenger module: see /messenger.css (was lines 2760-2766) */

  /* ── Build 778: collapsible section toggle ── */
/* messenger module: see /messenger.css (was lines 2769-2772) */

  /* ── Build 778: bigger chat-head + tab strip placeholder ── */
/* messenger module: see /messenger.css (was lines 2775-2777) */

  /* ── Build 778: compose area polish ── */
/* messenger module: see /messenger.css (was lines 2780-2780) */
  #msgNativeRoot .msg-compose .msg-send-btn,
/* messenger module: see /messenger.css (was lines 2782-2782) */

  /* ── Build 780: Teams-style quoted reply ── */
/* messenger module: see /messenger.css (was lines 2785-2794) */

  /* ── Build 780: jump-to-latest floating pill ── */
/* messenger module: see /messenger.css (was lines 2797-2800) */

  /* ── Build 780: flash highlight when jumping to a quoted message ── */
/* messenger module: see /messenger.css (was lines 2803-2803) */
  @keyframes msgFlashAnim {
  0%,
  30% {
    background: rgba(91, 95, 199, 0.25);
  }
  100% {
    background: transparent;
  }
}

.audit-row {
  display: grid;
  grid-template-columns: 160px 100px 110px 90px 90px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  font-size: 12px;
  align-items: center;
}
.audit-row:hover {
  background: #1e293b40;
}
.audit-header {
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ── App Content ── */
/* Build 1006 — was a flex item with margin-left animation; now a grid
     track filler. min-width: 0 lets descendants shrink below their
     intrinsic min-content width inside the grid cell. */
.app-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--header-bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.header-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}
.header .badge {
  background: #3b82f6;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.5px;
}
.header-spacer {
  flex: 1;
}

/* Messenger page: full-viewport mode.
     When the messenger tab is active, hide the dashboard sidebar AND the
     global header so the Rocket.Chat iframe owns the entire viewport. A
     floating exit button (#rcExitBtn) is the only way back to the rest of
     the dashboard while messenger is open. */
/* Phase 4 (build 771): the legacy RC-iframe full-viewport rules are removed.
     The native messenger now sits inside the normal dashboard chrome — header,
     sidebar, and page title stay visible like every other page. */

.period-nav {
  padding: 12px 28px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #1e293b;
  background: #0f1117;
}
.period-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.period-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
  font-weight: 600;
}
.period-btn:hover:not(.active) {
  background: #263449;
  color: #e2e8f0;
}

/* ── Pages ── */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.page.active {
  display: flex;
  flex-direction: column;
}
.page-body {
  padding: 24px 28px;
  flex: 1;
  overflow-y: auto;
}

/* ── Payment Summary ── */
.report-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}
.report-card .report-title {
  padding: 14px 22px;
  border-bottom: 1px solid #334155;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-table th {
  background: #0f172a;
  color: #64748b;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 9px 20px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid #1e293b;
  font-weight: 600;
}
.report-table th:first-child {
  text-align: left;
}
.report-table td {
  padding: 12px 20px;
  border-bottom: 1px solid #1a2234;
  text-align: right;
  white-space: nowrap;
  color: #cbd5e1;
}
.report-table td:first-child {
  text-align: left;
}
.report-table tr:last-child td {
  border-bottom: none;
}
.report-table tr:hover td {
  background: #1a2d40;
}
.report-table .pm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #f1f5f9;
}
.report-table .pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.report-table .money {
  font-variant-numeric: tabular-nums;
}
.report-table .money-zero {
  color: #334155;
}
.report-table .money-fee {
  color: #f59e0b;
}
.report-table .money-transfer {
  color: #60a5fa;
  font-weight: 600;
}
.report-table .money-unpaid {
  color: #f1f5f9;
  font-weight: 600;
}
.report-table tr.total-row td {
  background: #162032;
  border-top: 2px solid #3b82f6;
  font-weight: 700;
  color: #60a5fa;
  font-size: 14px;
}
.nb-table th,
.nb-table td {
  text-align: left !important;
}
.report-mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: 1px solid #334155;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.15s;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 10px;
}
.report-mark-btn:hover {
  border-color: #10b981;
  color: #10b981;
  background: #10b98110;
}
.report-mark-btn.all-paid {
  border-color: #10b981;
  color: #10b981;
  background: #10b98118;
}

/* ── Effort Table Card ── */
.table-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}
.table-toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.table-toolbar h3 {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.toolbar-spacer {
  flex: 1;
}
.filter-select {
  background: #0f1117;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.filter-select:focus {
  outline: none;
  border-color: #3b82f6;
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap svg {
  position: absolute;
  left: 8px;
  color: #475569;
  pointer-events: none;
}
.search-input {
  background: #0f1117;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 6px 10px 6px 28px;
  border-radius: 6px;
  font-size: 12px;
  width: 320px;
  transition:
    border-color 0.15s,
    width 0.2s;
}
.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  width: 400px;
}
.search-input::placeholder {
  color: #475569;
}

/* PM Tiles */
.pm-tiles {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #1e293b;
  flex-wrap: wrap;
  align-items: center;
}
.pm-tiles-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 4px;
}
.pm-tile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #334155;
  background: #0f1117;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pm-tile:hover {
  border-color: #475569;
  color: #94a3b8;
}
.pm-tile.active {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #60a5fa;
}
.pm-tile.tile-crypto.active {
  background: #3d1a6e;
  border-color: #7c3aed;
  color: #c4b5fd;
}
.pm-tile.tile-payoneer.active {
  background: #0c2e4a;
  border-color: #0ea5e9;
  color: #38bdf8;
}
.pm-tile.tile-direct.active {
  background: #1e293b;
  border-color: #64748b;
  color: #94a3b8;
}
.pm-tile-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.pm-tile-count {
  font-size: 10px;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 2px;
}

.scroll-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  background: #0f172a;
  color: #64748b;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 9px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #1e293b;
}
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: #cbd5e1;
  background: #162032;
}
th.sort-asc,
th.sort-desc {
  color: #60a5fa;
}
.sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.4;
  font-style: normal;
}
th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
  opacity: 1;
  color: #60a5fa;
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid #1a2234;
  color: #cbd5e1;
  white-space: nowrap;
}
tr:hover td {
  background: #243048;
}
tr:last-child td {
  border-bottom: none;
}

.badge-pm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  min-width: 70px;
  text-align: center;
  box-sizing: border-box;
}
.pm-crypto {
  background: #7c3aed22;
  color: #a78bfa;
  border: 1px solid #7c3aed44;
}
.pm-payoneer {
  background: #0ea5e922;
  color: #38bdf8;
  border: 1px solid #0ea5e944;
}
.pm-direct {
  background: #64748b22;
  color: #94a3b8;
  border: 1px solid #64748b44;
}

.hours-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hours-bar .bar {
  height: 6px;
  border-radius: 3px;
  min-width: 2px;
}

tr.group-row td {
  background: #162032;
  border-bottom: 1px solid #334155;
}
tr.group-row.expanded td {
  background: #1a2d48;
  border-bottom: none;
}
.group-chevron {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  transition: transform 0.2s;
  vertical-align: middle;
  color: #475569;
  flex-shrink: 0;
}
tr.group-row.expanded .group-chevron {
  transform: rotate(90deg);
  color: #3b82f6;
}
.group-name-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: rgba(59, 130, 246, 0.12);
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}
.group-name-btn:hover {
  background: rgba(59, 130, 246, 0.22);
}
.group-name-btn:hover .group-name {
  color: #93bbfc;
}
.group-name-btn.no-expand {
  cursor: default;
  background: none;
}
.group-name-btn.no-expand:hover {
  background: none;
}
.group-name-btn.no-expand:hover .group-name {
  color: #f1f5f9;
}
.group-name {
  font-weight: 700;
  color: #60a5fa;
  font-size: 14px;
}
.group-name-btn.no-expand .group-name {
  color: #f1f5f9;
}
.group-meta {
  font-size: 12px;
  color: #64748b;
  margin-left: 6px;
}

tr.child-row td {
  background: #0f1822;
  border-bottom: 1px solid #111c2b;
}
tr.child-row td:first-child {
  padding-left: 44px;
}
tr.child-row.hidden {
  display: none;
}
tr.child-row.is-paid td {
  opacity: 0.5;
}
tr.child-row.is-paid td:first-child {
  opacity: 1;
}
tr.child-row:hover td {
  background: #162232;
}

.paid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #334155;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.15s;
  white-space: nowrap;
}
.paid-toggle:hover {
  border-color: #10b981;
  color: #10b981;
  background: #10b98110;
}
.paid-toggle.is-paid {
  border-color: #10b981;
  color: #10b981;
  background: #10b98118;
}
.paid-toggle.is-paid:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #ef444410;
}
.paid-toggle.part-paid {
  border-color: #f59e0b;
  color: #f59e0b;
  background: #f59e0b10;
}
.payment-addr {
  display: block;
  font-size: 10px;
  color: #475569;
  margin-top: 2px;
  font-family: monospace;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Extension Config Cards ── */
.ext-cfg-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ext-cfg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}
.ext-cfg-header svg {
  color: var(--accent-text);
  flex-shrink: 0;
  opacity: 0.8;
}
.ext-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 20px;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ext-cfg-row:last-child {
  border-bottom: none;
}
.ext-cfg-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.ext-cfg-row > span {
  flex: 1;
}
.ext-cfg-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 20px 10px 42px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ext-cfg-num {
  width: 50px;
  padding: 5px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
.ext-cfg-num:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.ext-cfg-time {
  padding: 5px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  color-scheme: dark;
  transition: border-color 0.15s;
}
.ext-cfg-time:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.ext-cfg-domain-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
}
.ext-cfg-domain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ext-cfg-domain-name {
  flex: 1;
  color: var(--text-primary);
}
.ext-cfg-domain-cat {
  color: var(--text-secondary);
  font-size: 11px;
}
.ext-cfg-domain-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ext-cfg-domain-row:hover .ext-cfg-domain-del {
  opacity: 1;
}
html[data-theme='light'] .ext-cfg-header {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .ext-cfg-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme='light'] .ext-cfg-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
html[data-theme='light'] .ext-cfg-time {
  color-scheme: light;
}

/* ══════════════════════════════════════════════════════
     TK-16: COMPREHENSIVE LIGHT THEME FIXES (build 730)
     ══════════════════════════════════════════════════════ */

/* ── Global color-scheme for native controls ── */
html[data-theme='light'] {
  color-scheme: light;
}
html[data-theme='light'] input[type='date'],
html[data-theme='light'] input[type='datetime-local'],
html[data-theme='light'] input[type='time'],
html[data-theme='light'] input[type='month'],
html[data-theme='light'] input[type='week'],
html[data-theme='light'] select {
  color-scheme: light;
}

/* ── Page loader ── */
html[data-theme='light'] .page-loader .spinner {
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-top-color: #3b82f6 !important;
}
html[data-theme='light'] .page-loader .loader-text {
  color: rgba(0, 0, 0, 0.4) !important;
}
html[data-theme='light'] .table-loader .spinner {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-top-color: #3b82f6 !important;
}

/* ── Header / top bar ── */
html[data-theme='light'] .header {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%) !important;
  border-bottom-color: #e2e8f0 !important;
}

/* ── Period navigation bar ── */
html[data-theme='light'] .period-nav {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

/* ── Notifications ── */
html[data-theme='light'] .notif-item {
  border-bottom-color: #e2e8f0 !important;
}
html[data-theme='light'] .notif-item:hover {
  background: #f1f5f9 !important;
}
html[data-theme='light'] .notif-item.unread {
  background: rgba(59, 130, 246, 0.04);
}
html[data-theme='light'] .notif-time {
  color: #64748b;
}

/* ── Modal overlays ── */
html[data-theme='light'] .modal-card {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme='light'] .modal-header {
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme='light'] .modal-header button,
html[data-theme='light'] .modal-close {
  color: #64748b !important;
}
html[data-theme='light'] .modal-header button:hover,
html[data-theme='light'] .modal-close:hover {
  color: #0f172a !important;
}
html[data-theme='light'] .modal-body {
  background: #fff !important;
}

/* ── Report / payment tables ── */
html[data-theme='light'] .report-card .report-title {
  border-bottom-color: #e2e8f0 !important;
  color: #64748b !important;
}
html[data-theme='light'] .report-table th {
  background: #f8fafc !important;
  color: #64748b !important;
  border-bottom-color: #e2e8f0 !important;
}
html[data-theme='light'] .report-table td {
  border-bottom-color: #f1f5f9 !important;
  color: #334155 !important;
}
html[data-theme='light'] .report-table tr:hover td {
  background: #f1f5f9 !important;
}
html[data-theme='light'] .report-table .pm-label {
  color: #0f172a !important;
}
html[data-theme='light'] .report-table .money-zero {
  color: #cbd5e1 !important;
}

/* ── Task board columns & cards ── */
/* tasks module: see /tasks.css (was lines 2059-2077) */

/* ── Task toolbar ── */
/* tasks module: see /tasks.css (was lines 2080-2085) */

/* ── Task filter panel ── */
/* tasks module: see /tasks.css (was lines 2088-2108) */

/* ── Task detail modal (tkd) additional ── */
html[data-theme='light'] .tkd-left {
  scrollbar-color: #cbd5e1 transparent !important;
}
html[data-theme='light'] .tkd-activity-body {
  scrollbar-color: #cbd5e1 transparent !important;
}
html[data-theme='light'] .tkd-topbar {
  background: #fff !important;
}
html[data-theme='light'] .tkd-footer {
  background: #f8fafc !important;
}
html[data-theme='light'] .tkd-prop-select {
  background: transparent !important;
}
html[data-theme='light'] .tkd-prop-input {
  background: transparent !important;
}
html[data-theme='light'] .tkd-desc {
  background: transparent !important;
}

/* ── Settings cards ── */
html[data-theme='light'] .settings-card {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme='light'] .settings-card-body {
  background: #fff !important;
}

/* ── Leave management ── */
html[data-theme='light'] .leave-cal-day.empty {
  color: #e2e8f0 !important;
}
html[data-theme='light'] .leave-cal-day {
  color: #475569 !important;
}
html[data-theme='light'] .leave-cal-day.today {
  background: #dbeafe !important;
  color: #2563eb !important;
}
html[data-theme='light'] .leave-cal-header {
  color: #94a3b8 !important;
}

/* ── Scrollbar overrides for light theme ── */
html[data-theme='light'] .nav-list {
  scrollbar-color: #cbd5e1 transparent !important;
}
/* messenger module: see /messenger.css (was lines 3082-3083) */
/* calendar module: see /calendar.css (was lines 2205-2205) */

/* ── Emoji panel (messages) ── */
/* messenger module: see /messenger.css (was lines 3087-3087) */

/* ── Inline elements with hardcoded dark text/borders ── */
html[data-theme='light'] [style*='background:#334155'],
html[data-theme='light'] [style*='background: #334155'] {
  background: #e2e8f0 !important;
}
html[data-theme='light'] [style*='background:#263449'],
html[data-theme='light'] [style*='background: #263449'] {
  background: #f1f5f9 !important;
}
html[data-theme='light'] [style*='border:1px solid #334155'],
html[data-theme='light'] [style*='border: 1px solid #334155'] {
  border-color: #cbd5e1 !important;
}
html[data-theme='light'] [style*='border-bottom:1px solid #334155'],
html[data-theme='light'] [style*='border-bottom: 1px solid #334155'] {
  border-bottom-color: #cbd5e1 !important;
}
html[data-theme='light'] [style*='border-color:#1e293b'],
html[data-theme='light'] [style*='border-color: #1e293b'] {
  border-color: #e2e8f0 !important;
}
html[data-theme='light'] [style*='color:#f1f5f9'],
html[data-theme='light'] [style*='color: #f1f5f9'] {
  color: #0f172a !important;
}
html[data-theme='light'] [style*='background:#1a2d40'],
html[data-theme='light'] [style*='background: #1a2d40'] {
  background: #f1f5f9 !important;
}
html[data-theme='light'] [style*='background:#1a2234'],
html[data-theme='light'] [style*='background: #1a2234'] {
  background: #f8fafc !important;
}

/* ── Scrollbar webkit overrides (for Chrome/Safari) ── */
html[data-theme='light'] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html[data-theme='light'] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
html[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── Miscellaneous catch-all ── */
html[data-theme='light'] .ext-cfg-time {
  color-scheme: light !important;
}
html[data-theme='light'] code,
html[data-theme='light'] pre {
  background: #f1f5f9 !important;
  color: #334155 !important;
}
html[data-theme='light'] .page-body {
  color: var(--text-primary);
}
html[data-theme='light'] hr {
  border-color: #e2e8f0 !important;
}
html[data-theme='light'] ::selection {
  background: #dbeafe;
  color: #1e293b;
}

/* ── Settings Page ── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 960px;
}
@media (max-width: 800px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}
.settings-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
}
.settings-card-title {
  padding: 14px 20px;
  border-bottom: 1px solid #334155;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-card-body {
  padding: 20px;
}
.field-row {
  margin-bottom: 16px;
}
.field-row:last-child {
  margin-bottom: 0;
}
.field-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-input {
  width: 100%;
  background-color: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field-input:hover {
  border-color: #475569;
}
.field-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.field-input.fld-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}
.field-input.fld-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.fld-err {
  color: #f87171;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.4;
}
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus,
.field-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  caret-color: #e2e8f0 !important;
  transition: background-color 9999s ease-out 0s;
}
.field-input[type='password'] {
  letter-spacing: 2px;
}
.field-input.readonly {
  color: #94a3b8;
  cursor: default;
  background-color: #0c111d;
}
.field-row-inline {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
}
.settings-save-btn {
  margin-top: 18px;
  background: #3b82f6;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.settings-save-btn:hover {
  background: #2563eb;
}
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}
.conn-status.ok {
  background: #10b98120;
  color: #10b981;
  border: 1px solid #10b98140;
}
.conn-status.err {
  background: #ef444420;
  color: #ef4444;
  border: 1px solid #ef444440;
}
.conn-test-btn {
  background: none;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.conn-test-btn:hover {
  border-color: #3b82f6;
  color: #60a5fa;
}

/* Fee sliders */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.slider-row:last-child {
  margin-bottom: 0;
}
.slider-pm-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #94a3b8;
  font-weight: 600;
  min-width: 90px;
}
.slider-pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
input[type='range'] {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #1e3a5f;
  outline: none;
  cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: 2px solid #0f172a;
}
.slider-val {
  font-size: 13px;
  font-weight: 700;
  color: #60a5fa;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.toggle-row:last-child {
  margin-bottom: 0;
}
.toggle-label {
  font-size: 13px;
  color: #94a3b8;
}
.toggle-label small {
  display: block;
  font-size: 11px;
  color: #475569;
  margin-top: 2px;
}
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #475569;
  transition:
    transform 0.2s,
    background 0.2s;
}
.toggle-switch input:checked + .toggle-track {
  background: #1e3a5f;
  border-color: #3b82f6;
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: #3b82f6;
}
.toggle-switch.toggle-sm {
  width: 30px;
  height: 16px;
}
.toggle-sm .toggle-track {
  border-radius: 8px;
}
.toggle-sm .toggle-track::after {
  width: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
}
.toggle-sm input:checked + .toggle-track::after {
  transform: translateX(12px);
}

.section-note {
  font-size: 12px;
  color: #475569;
  margin-top: 12px;
  line-height: 1.5;
}
/* Settings Tabs */
/* settings module: see /settings.css (was lines 2306-2311) */
/* Settings Enhancements */
/* settings module: see /settings.css (was lines 2313-2321) */

/* Profile Page */
.prof-header {
  position: relative;
}
.prof-header-bg {
  height: 72px;
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #3b82f6 100%);
}
.prof-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1e3a5f;
  border: 3px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #60a5fa;
  margin-top: -32px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.prof-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  line-height: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.prof-close-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.prof-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #334155;
}
.prof-section-toggle {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.prof-section-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}
.prof-section-body {
  padding: 18px 20px;
}
.prof-save-btn {
  width: auto;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.prof-save-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}
/* settings module: see /settings.css (was lines 2335-2355) */

/* ── Backup Management ── */
.bkp-schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bkp-schedule-row select {
  font-family: inherit;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
}
.bkp-schedule-row .bkp-retention {
  font-size: 11px;
  color: #64748b;
}
.bkp-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #1e293b;
  border-radius: 8px;
  margin-top: 10px;
}
.bkp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
  font-size: 11px;
}
.bkp-row:last-child {
  border-bottom: none;
}
.bkp-row:hover {
  background: #1e293b33;
}
.bkp-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bkp-row-date {
  color: #e2e8f0;
  font-weight: 600;
}
.bkp-row-meta {
  color: #64748b;
  font-size: 10px;
}
.bkp-row-actions {
  display: flex;
  gap: 6px;
}
.bkp-row-btn {
  padding: 4px 10px;
  border: 1px solid #334155;
  border-radius: 5px;
  background: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.bkp-row-btn:hover {
  border-color: #3b82f6;
  color: #60a5fa;
}
.bkp-row-btn.restore:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}
.bkp-row-btn.delete:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.bkp-now-btn {
  padding: 7px 16px;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #0f1117;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bkp-now-btn:hover {
  border-color: #3b82f6;
  color: #60a5fa;
}
.bkp-empty {
  padding: 20px;
  text-align: center;
  color: #475569;
  font-size: 11px;
}
.bkp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  background: #10b98115;
  color: #10b981;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
}
.bkp-status.warn {
  background: #f59e0b15;
  color: #f59e0b;
}

/* ── Time Tracker ── */
.ck-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.ck-stat {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px 20px;
}
.ck-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.ck-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1;
}
.ck-stat-sub {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}
.ck-stat-active {
  border: 1.5px solid #818cf8 !important;
  background: #1e2847 !important;
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.15);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-table th {
  background: #0f172a;
  color: #64748b;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 9px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #1e293b;
  font-weight: 600;
}
.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #1a2234;
  color: #cbd5e1;
  white-space: nowrap;
}
.compare-table tr:hover td {
  background: #243048;
}
.compare-table tr:last-child td {
  border-bottom: none;
}
.compare-table .amt-up {
  color: #22c55e;
  font-weight: 700;
}
.compare-table .amt-down {
  color: #ef4444;
  font-weight: 700;
}
.compare-table .reason {
  color: #64748b;
  font-size: 12px;
}
.compare-section-header td {
  padding: 14px 14px 6px !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #818cf8;
  letter-spacing: 1px;
  border-bottom: 2px solid #818cf830 !important;
  background: #818cf808 !important;
  border-left: 3px solid #818cf8 !important;
}
.compare-table td.amt-bold {
  font-weight: 600;
}
.compare-bar {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  min-width: 2px;
}

.ck-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px 20px;
  align-items: flex-end;
}
.ck-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}
.ck-field-sm {
  flex: 0 0 100px;
  min-width: 100px;
}
.ck-field-wide {
  flex: 2;
  min-width: 200px;
}
.ck-field-btn {
  flex: 0 0 auto;
  min-width: 110px;
}
.ck-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ck-input {
  background: #0f1117;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
}
.ck-input:focus {
  outline: none;
  border-color: #3b82f6;
}
#ckTimerNotes::placeholder {
  color: #e2e8f0;
  font-weight: 600;
}

.pw-hints {
  font-size: 11px;
  margin: 6px 0 2px;
  line-height: 1.8;
}
.pw-hint {
  color: #64748b;
  transition: color 0.2s;
}
.pw-hint.pass {
  color: #10b981;
}
.pw-hint.pass::before {
  content: '\2713 ';
}
.pw-hint.fail::before {
  content: '\2717 ';
}
.pw-hint.fail {
  color: #ef4444;
}

.ck-submit-btn {
  background: #3b82f6;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  height: 36px;
}
.ck-submit-btn:hover {
  background: #2563eb;
}
.ck-clear-btn {
  background: none;
  border: 1px solid #334155;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.ck-clear-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.ck-footer {
  padding: 12px 20px;
  border-top: 1px solid #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #475569;
}
.ck-del-btn {
  background: none;
  border: none;
  color: #334155;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 14px;
  transition: color 0.15s;
}
.ck-del-btn:hover {
  color: #ef4444;
}
.addr-copy {
  cursor: pointer;
  font-size: 10px;
  color: #475569;
  font-family: monospace;
  transition: color 0.15s;
}
.addr-copy:hover {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.addr-copy.copied {
  color: #10b981;
}
.badge-billable {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.badge-yes {
  background: #10b98118;
  color: #10b981;
  border: 1px solid #10b98130;
}
.badge-no {
  background: #f59e0b18;
  color: #f59e0b;
  border: 1px solid #f59e0b30;
}
.billable-toggle {
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.billable-toggle:hover {
  filter: brightness(1.2);
}
.billable-toggle.billable-true {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.billable-toggle.billable-false {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ── Time Tracker Enhancements ── */
.ck-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ck-toolbar-btn {
  background: none;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.ck-toolbar-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.ck-toolbar-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}
.ck-target-wrap {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 14px 20px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
}
.ck-target-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ck-target-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ck-target-track {
  width: 100%;
  height: 10px;
  background: #0f1117;
  border-radius: 5px;
  overflow: hidden;
}
.ck-target-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s;
}
.ck-target-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}
.ck-target-pct {
  font-size: 12px;
  color: #475569;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ck-timesheet {
  width: 100%;
  border-collapse: collapse;
}
.ck-timesheet th,
.ck-timesheet td {
  padding: 10px 12px;
  border: 1px solid #334155;
  font-size: 12px;
}
.ck-timesheet th {
  background: #1e293b;
  color: #94a3b8;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ck-timesheet td {
  background: #0f1117;
  color: #e2e8f0;
  text-align: center;
  font-family: 'DM Mono', 'SF Mono', monospace;
}
.ck-timesheet td.ts-today {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.4);
}
.ck-timesheet td.ts-has-hours {
  color: #10b981;
  font-weight: 700;
}
.ck-timesheet td.ts-empty {
  color: #334155;
}
.ck-timesheet .ts-project {
  text-align: left;
  font-weight: 600;
  color: #f1f5f9;
  min-width: 140px;
  white-space: nowrap;
  font-family: inherit;
}
.ck-timesheet .ts-total {
  font-weight: 700;
  color: #f1f5f9;
  background: #1e293b;
}
.ck-timesheet .ts-totals-row td {
  border-top: 2px solid #475569;
  background: #1e293b;
  font-weight: 700;
}
.ck-timesheet input[type='text'] {
  background: transparent;
  border: none;
  color: inherit;
  text-align: center;
  width: 54px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  padding: 2px;
}
.ck-timesheet input[type='text']:focus {
  outline: 1px solid #3b82f6;
  border-radius: 2px;
}
.ck-bulk-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  margin-bottom: 12px;
}
.ck-bulk-bar.visible {
  display: flex;
}
.ck-bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.ck-bulk-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ck-bulk-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.ck-bulk-btn.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.ck-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.ck-chart-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
}
.ck-chart-title {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.ck-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-top: 8px;
}
.ck-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: #3b82f6;
  min-width: 8px;
  position: relative;
  transition: height 0.3s;
  cursor: default;
}
.ck-bar.overtime {
  background: #ef4444;
}
.ck-bar-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #475569;
  white-space: nowrap;
}
.ck-bar-value {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #94a3b8;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}
.ck-pie-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ck-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ck-pie-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
}
.ck-pie-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ck-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.ck-compare-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.ck-compare-title {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ck-compare-value {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  font-family: 'DM Mono', monospace;
}
.ck-compare-diff {
  font-size: 11px;
  margin-top: 4px;
}
.ck-compare-diff.up {
  color: #10b981;
}
.ck-compare-diff.down {
  color: #ef4444;
}
.ck-compare-diff.same {
  color: #64748b;
}
.ck-approval-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.ck-approval-draft {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}
.ck-approval-submitted {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.ck-approval-approved {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.ck-approval-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.ck-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.25);
  margin: 1px 2px;
}
.ck-tag .remove {
  cursor: pointer;
  opacity: 0.5;
  font-size: 11px;
}
.ck-tag .remove:hover {
  opacity: 1;
}
.ck-tag-input {
  background: transparent;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-size: 11px;
  border-radius: 10px;
  padding: 1px 8px;
  width: 60px;
  outline: none;
}
.ck-tag-input:focus {
  border-color: #818cf8;
}
.ck-lock-icon {
  color: #475569;
  font-size: 10px;
  margin-left: 4px;
}
.ck-overtime-flag {
  color: #ef4444;
  font-weight: 700;
  font-size: 11px;
}
.ck-fav-star {
  cursor: pointer;
  font-size: 14px;
  color: #334155;
  transition: color 0.15s;
}
.ck-fav-star.active {
  color: #f59e0b;
}
.ck-fav-star:hover {
  color: #f59e0b;
}
.ck-digest-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 20px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.ck-digest-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 12px;
}
.ck-digest-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: #94a3b8;
  border-bottom: 1px solid #1e293b;
}
.ck-digest-row strong {
  color: #f1f5f9;
  font-family: 'DM Mono', monospace;
}
.ck-template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.ck-template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0f1117;
  border: 1px solid #334155;
  border-radius: 6px;
}
.ck-template-name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}
.ck-template-meta {
  font-size: 11px;
  color: #475569;
}
/* Report */
.ck-rpt-preset {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #94a3b8;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
  font-family: inherit;
}
.ck-rpt-preset:hover {
  border-color: #475569;
}
.ck-rpt-preset.active {
  border-color: #3b82f6;
  background: #1e3a5f;
  color: #60a5fa;
}
.ck-rpt-stat {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.ck-rpt-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #f1f5f9;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ck-rpt-stat-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ck-rpt-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.ck-rpt-bar-label {
  width: 180px;
  font-size: 12px;
  color: #94a3b8;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.ck-rpt-bar-track {
  flex: 1;
  background: #0f172a;
  border-radius: 4px;
  overflow: hidden;
  height: 26px;
}
.ck-rpt-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: width 0.3s;
  min-width: fit-content;
}
.ck-rpt-bar-val {
  font-size: 11px;
  color: white;
  font-weight: 600;
  white-space: nowrap;
}
.ck-rpt-bar-pct {
  font-size: 11px;
  color: #64748b;
  width: 45px;
  text-align: right;
  flex-shrink: 0;
}
.ck-rpt-table {
  width: 100%;
  border-collapse: collapse;
}
.ck-rpt-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #1e293b;
}
.ck-rpt-table td {
  padding: 10px 14px;
  font-size: 13px;
  color: #e2e8f0;
  border-bottom: 1px solid #1e293b15;
}
.ck-rpt-table tr:hover td {
  background: #111827;
}
.ck-rpt-table .rpt-hours {
  text-align: right;
  font-weight: 700;
  color: #a78bfa;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ck-rpt-table .rpt-pct {
  text-align: right;
  color: #64748b;
  font-size: 12px;
}
.ck-rpt-table .rpt-amount {
  text-align: right;
  color: #10b981;
  font-weight: 600;
  font-size: 12px;
}
.ck-rpt-table tfoot td {
  font-weight: 700;
  border-top: 2px solid #334155;
}
@media (max-width: 768px) {
  .ck-chart-row,
  .ck-compare {
    grid-template-columns: 1fr;
  }
}

/* ── Time Tracker Timer ── */
.ck-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.ck-mode-tab {
  padding: 7px 18px;
  border-radius: 7px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: #475569;
  transition: all 0.15s;
}
.ck-mode-tab.active {
  background: #0f172a;
  color: #f1f5f9;
  box-shadow: 0 1px 4px #0004;
}
.ck-mode-tab:hover:not(.active) {
  color: #94a3b8;
}
.ck-timer-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ck-timer-display {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 32px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.05em;
  min-width: 120px;
  transition: color 0.3s;
}
.ck-timer-display.running {
  color: #10b981;
}
.ck-timer-display.paused {
  color: #f59e0b;
}
.ck-timer-btns {
  display: flex;
  gap: 8px;
}
.ck-timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.ck-timer-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ck-timer-start {
  background: #2196f3;
  color: #fff;
}
.ck-timer-start:hover:not(:disabled) {
  background: #1976d2;
}
.ck-timer-pause {
  background: #f59e0b;
  color: #fff;
}
.ck-timer-pause:hover:not(:disabled) {
  background: #d97706;
}
.ck-timer-stop {
  background: #ef4444;
  color: #fff;
}
.ck-timer-stop:hover:not(:disabled) {
  background: #dc2626;
}
.ck-freeze-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 3px;
  line-height: 1;
  opacity: 0.7;
  transition: all 0.15s;
}
.ck-freeze-btn:hover {
  opacity: 1;
  color: #cbd5e1;
}
.ck-freeze-btn.active {
  opacity: 1;
  color: #3b82f6;
}
.ck-timer-discard-btn {
  display: none;
  background: none;
  border: 1px solid #475569;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  align-items: center;
  justify-content: center;
}
.ck-timer-discard-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
/* Quick-select dropdown */
.ck-quick-select {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0 0 8px 8px;
  z-index: 60;
  box-shadow: 0 8px 24px #0008;
}
.ck-quick-select.open {
  display: block;
}
.ck-quick-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #0f172a;
}
.ck-quick-item:hover {
  background: #334155;
}
.ck-quick-item:last-child {
  border-bottom: none;
}
.ck-quick-item-desc {
  font-size: 13px;
  color: #e2e8f0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-quick-item-proj {
  font-size: 12px;
  color: #f472b6;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ck-quick-item-proj .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f472b6;
  flex-shrink: 0;
}
.ck-timer-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ck-timer-fill-note {
  font-size: 12px;
  color: #475569;
  margin-left: auto;
}
/* ── Day-Grouped Entries ── */
.ck-day-group {
  margin-bottom: 2px;
}
.ck-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px 8px 0 0;
  margin-top: 12px;
}
.ck-day-header:first-child {
  margin-top: 0;
}
.ck-day-date {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.ck-day-date span {
  font-weight: 400;
  color: #64748b;
  margin-left: 6px;
  font-size: 12px;
}
.ck-day-total {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
}
.ck-day-total-label {
  font-weight: 400;
}
.ck-day-total-val {
  font-size: 16px;
  font-weight: 700;
  color: #f472b6;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ck-col-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 20px;
  background: #0f172a;
  border-left: 1px solid #334155;
  border-right: 1px solid #334155;
  border-bottom: 1px solid #1e293b;
}
.ck-col-header#_ckColHeader {
  height: 24px;
}
.ck-col-header span {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ck-entry-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #0f172a;
  border-left: 1px solid #334155;
  border-right: 1px solid #334155;
  border-bottom: 1px solid #1e293b;
  transition: background 0.1s;
  min-height: 56px;
}
.ck-entry-row:hover {
  background: #111827;
}
.ck-entry-row.ck-invoiced {
  opacity: 0.7;
  pointer-events: none;
}
.ck-entry-row.ck-invoiced .ck-entry-desc,
.ck-entry-row.ck-invoiced .ck-entry-proj-client,
.ck-entry-row.ck-invoiced .ck-entry-duration,
.ck-entry-row.ck-invoiced .ck-entry-actions {
  pointer-events: auto;
}
.ck-inv-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #16a34a20;
  color: #4ade80;
  border: 1px solid #16a34a40;
  border-radius: 4px;
  vertical-align: middle;
  pointer-events: auto;
}
.ck-inv-label {
  display: inline-block;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #7c3aed20;
  color: #a78bfa;
  border: 1px solid #7c3aed40;
  border-radius: 4px;
  vertical-align: middle;
}
.ck-entry-invoice {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.ck-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 80px;
}
.ck-entry-lock {
  display: flex;
  align-items: center;
  color: #64748b;
  pointer-events: auto;
}
.ck-entry-row:last-child {
  border-radius: 0 0 8px 8px;
  border-bottom: 1px solid #334155;
}
.ck-entry-desc {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.ck-entry-desc.empty {
  color: #475569;
  font-style: italic;
}
.ck-entry-proj-client {
  flex: 0 1 240px;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-entry-proj-client .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f472b6;
  flex-shrink: 0;
}
.ck-entry-times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: 205px;
}
.ck-entry-time-input {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #e2e8f0;
  font-size: 12px;
  padding: 6px 8px;
  width: 90px;
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ck-entry-time-sep {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}
.ck-entry-time-manual {
  color: #64748b;
  font-size: 12px;
  font-style: italic;
}
.ck-entry-cal {
  color: #475569;
  flex-shrink: 0;
  cursor: default;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.ck-entry-cal svg {
  width: 18px;
  height: 18px;
}
.ck-entry-duration {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
  text-align: right;
}
.ck-entry-play {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ck-entry-play:hover {
  color: #3b82f6;
}
.ck-entry-play svg {
  width: 18px;
  height: 18px;
}
.ck-entry-kebab {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.ck-entry-kebab:hover {
  color: #94a3b8;
}
.ck-entry-kebab svg {
  width: 18px;
  height: 18px;
}
.ck-entry-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  min-width: 140px;
  z-index: 50;
  box-shadow: 0 8px 24px #0008;
  overflow: hidden;
}
.ck-entry-menu.open {
  display: block;
}
.ck-entry-menu-item {
  padding: 8px 14px;
  font-size: 12px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-entry-menu-item:hover {
  background: #334155;
}
.ck-entry-menu-item.danger {
  color: #ef4444;
}
.ck-entry-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}
.ck-entries-empty {
  text-align: center;
  padding: 48px 20px;
  color: #334155;
  font-size: 14px;
}
@media (max-width: 768px) {
  .ck-entry-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ck-entry-proj-client,
  .ck-entry-times,
  .ck-entry-icon,
  .ck-entry-cal {
    display: none;
  }
}

/* ── Timer Start Modal ── */
.ck-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.ck-modal-backdrop.open {
  display: flex;
}
.ck-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: invModalIn 0.18s ease;
}
.ck-modal-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #334155;
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ck-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid #334155;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ck-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ck-modal-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ck-modal-input {
  background-color: #0f1117;
  border: 1.5px solid #334155;
  color: #e2e8f0;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.ck-modal-input:focus {
  border-color: #3b82f6;
}
.ck-timer-task {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ck-timer-task-project {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-timer-task-meta {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Role user selector ── */
.role-user-row {
  margin-top: 8px;
  display: none;
}
.role-user-row.visible {
  display: block;
}
.role-user-sel {
  width: 100%;
  background: #0f1117;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
.role-user-sel:focus {
  outline: none;
  border-color: #3b82f6;
}

/* ── Rates ── */
.rate-type-toggle {
  display: flex;
  border: 1px solid #334155;
  border-radius: 6px;
  overflow: hidden;
}
.rate-type-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.rate-type-btn.active {
  background: #3b82f6;
  color: white;
}
.rate-input {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  width: 90px;
  text-align: right;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.rate-input:hover {
  border-color: #475569;
}
.rate-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.rate-type-sel {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 24px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.rate-type-sel:hover {
  border-color: #475569;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
}
.rate-type-sel:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.rate-save-indicator {
  font-size: 10px;
  color: #059669;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  right: 0;
  top: -14px;
  white-space: nowrap;
}
.rate-save-indicator.visible {
  opacity: 1;
}
.rate-currency-select {
  background: #0f1117;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 12px;
}
.rate-effective {
  font-size: 12px;
  color: #10b981;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rate-updated {
  font-size: 11px;
  color: #334155;
}
@media (max-width: 800px) {
  .ck-stats {
    grid-template-columns: 1fr 1fr;
  }
}
/* ── Date Range Picker ── */
.drp-wrap {
  position: relative;
  display: inline-block;
}
.drp-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  border: 1.5px solid #334155;
  border-radius: 7px;
  color: #e2e8f0;
  padding: 6px 13px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.drp-btn:hover {
  border-color: #475569;
}
.drp-btn svg {
  color: #64748b;
  flex-shrink: 0;
}
.drp-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 600;
  background: #1a2234;
  border: 1px solid #334155;
  border-radius: 12px;
  display: none;
  flex-direction: row;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.drp-panel.open {
  display: flex;
}
.drp-presets {
  width: 156px;
  border-right: 1px solid #1e293b;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.drp-preset {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  font-family: inherit;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.drp-preset:hover {
  background: #1e293b;
  color: #f1f5f9;
}
.drp-preset.active {
  background: #1e3a5f;
  color: #60a5fa;
  font-weight: 600;
}
.drp-cals {
  display: flex;
  gap: 20px;
  padding: 16px 18px;
}
.drp-cal {
  min-width: 218px;
}
.drp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drp-cal-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.drp-nav {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 7px;
  border-radius: 5px;
  line-height: 1;
}
.drp-nav:hover {
  color: #f1f5f9;
  background: #334155;
}
.drp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.drp-dh {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  padding: 3px 0 6px;
}
.drp-d {
  text-align: center;
  padding: 5px 3px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #94a3b8;
  user-select: none;
}
.drp-d:hover:not(.drp-d-empty) {
  background: #334155;
  color: #f1f5f9;
}
.drp-d-other {
  color: #2d3f55;
}
.drp-d-empty {
  cursor: default;
}
.drp-d-inrange {
  background: #1e3a5f;
  color: #93c5fd;
  border-radius: 0;
}
.drp-d-start {
  background: #3b82f6 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px 0 0 4px;
}
.drp-d-end {
  background: #3b82f6 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0 4px 4px 0;
}
.drp-d-single {
  background: #3b82f6 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px !important;
}
.drp-d-today {
  outline: 1.5px solid #3b82f6;
  outline-offset: -1.5px;
}
.file-drop-zone {
  border: 1.5px dashed #334155;
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  position: relative;
}
.file-drop-zone:hover,
.file-drop-zone.drag {
  border-color: #3b82f6;
  background: #1e293b;
}
.file-drop-zone input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.file-drop-label {
  font-size: 12px;
  color: #475569;
  pointer-events: none;
}
.file-drop-label strong {
  color: #60a5fa;
}
.file-status {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}
.file-status.ok {
  background: #10b98118;
  color: #10b981;
  border: 1px solid #10b98130;
}
.file-status.err {
  background: #ef444418;
  color: #ef4444;
  border: 1px solid #ef444430;
}
/* ── User Management ── */
/* users module: see /users.css (was lines 2702-2726) */

/* Header user badge */
.hdr-user-badge {
  display: none;
  align-items: center;
  gap: 8px;
  background: #1e3a5f;
  border: 1px solid #2d5a9e;
  border-radius: 22px;
  padding: 4px 14px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.hdr-user-badge:hover {
  background: #1e4a7f;
  border-color: #3b82f6;
}
.hdr-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
/* users module: see /users.css (was lines 2732-2749) */
/* ── Invoice Page ── */
.inv-wrap {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.inv-subtitle {
  font-size: 13px;
  color: #475569;
  margin-top: 3px;
}
.inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 4px;
}
.inv-badge .inv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inv-badge.pending {
  background: #2d200620;
  border: 1px solid #f59e0b40;
  color: #f59e0b;
}
.inv-badge.pending .inv-dot {
  background: #f59e0b;
}
.inv-badge.sent {
  background: #05201420;
  border: 1px solid #10b98140;
  color: #10b981;
}
.inv-badge.sent .inv-dot {
  background: #10b981;
}
.inv-badge.paid {
  background: #05966920;
  border: 1px solid #05966960;
  color: #34d399;
}
.inv-badge.paid .inv-dot {
  background: #34d399;
}
.inv-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.inv-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
}
.inv-card-header {
  padding: 13px 20px;
  border-bottom: 1px solid #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  background: #0f172a;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.inv-card-header.active {
  background: #1e2f54;
  color: #818cf8;
  border-bottom-color: #3730a360;
}
.inv-card-header.locked {
  background: #0f172a;
  color: #334155;
}
.inv-card-body {
  padding: 20px;
}
.inv-card-footer {
  padding: 13px 20px;
  border-top: 1px solid #1e293b;
  display: flex;
  justify-content: flex-end;
}
.inv-field-group {
  margin-bottom: 18px;
}
.inv-field-group:last-child {
  margin-bottom: 0;
}
.inv-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 7px;
}
.inv-label .inv-req {
  color: #ef4444;
  margin-left: 1px;
}
.inv-pills {
  display: flex;
  gap: 8px;
}
.inv-pill {
  padding: 6px 14px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  cursor: default;
  user-select: none;
}
.inv-select-wrap {
  position: relative;
}
.inv-select-wrap select {
  width: 100%;
  appearance: none;
  background: #0f1117;
  border: 1.5px solid #334155;
  border-radius: 8px;
  padding: 9px 34px 9px 36px;
  font-size: 13px;
  font-family: inherit;
  color: #e2e8f0;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.inv-select-wrap select:focus {
  border-color: #6c7aed;
}
.inv-select-wrap select:disabled {
  color: #334155;
  cursor: not-allowed;
}
.inv-select-wrap select option[value=''] {
  color: #475569;
}
.inv-sel-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  width: 20px;
}
.inv-sel-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #475569;
}
.inv-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.5;
}
.inv-banner.blue {
  background: #0c1a2e;
  border: 1px solid #1e3a5f;
  color: #60a5fa;
}
.inv-banner.orange {
  background: #1f0d0020;
  border: 1px solid #92400e40;
  color: #ef4444;
}
.inv-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: #334155;
  font-size: 13px;
  text-align: center;
}
.inv-upwork-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.inv-upwork-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #0a1a0a;
  border: 1px solid #14532d40;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-upwork-state p {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
}
.inv-input {
  width: 100%;
  background: #0f1117;
  border: 1.5px solid #334155;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.15s;
}
.inv-input:focus {
  border-color: #6c7aed;
}
.inv-input.err {
  border-color: #ef4444;
}
.inv-input.ok {
  border-color: #10b981;
}
.inv-vmsg {
  font-size: 11px;
  margin-top: 5px;
  font-weight: 600;
}
.inv-vmsg.err {
  color: #ef4444;
}
.inv-vmsg.ok {
  color: #10b981;
}
.inv-saved-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-saved-box {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #0f1117;
  border: 1.5px solid #1e293b;
  color: #94a3b8;
  word-break: break-all;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.inv-saved-box.req {
  border-color: #ef444440;
}
.inv-saved-box .inv-req-text {
  color: #ef4444;
  font-size: 12px;
}
.inv-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #818cf8;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    background 0.15s;
  font-family: inherit;
}
.inv-edit-btn:hover {
  border-color: #6c7aed;
  background: #1e2a54;
}
.inv-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: #6c7aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-save-btn:hover:not(:disabled) {
  background: #5b6bdc;
}
.inv-save-btn:disabled {
  background: #1e293b;
  color: #334155;
  cursor: not-allowed;
  border: 1px solid #334155;
}
.inv-charges-card {
  transition: box-shadow 0.2s;
}
.inv-charges-card.active {
  box-shadow: 0 4px 16px rgba(108, 122, 237, 0.12);
}
.inv-charges-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-charges-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #334155;
  transition: color 0.2s;
}
.inv-charges-title.active {
  color: #818cf8;
}
.inv-toggle-wrap {
  position: relative;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}
.inv-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.inv-toggle-track {
  position: absolute;
  inset: 0;
  background: #334155;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.inv-toggle-wrap input:checked + .inv-toggle-track {
  background: #6c7aed;
}
.inv-toggle-wrap.disabled .inv-toggle-track {
  cursor: not-allowed;
  opacity: 0.5;
}
.inv-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
  pointer-events: none;
}
.inv-toggle-wrap input:checked ~ .inv-toggle-knob {
  transform: translateX(20px);
}
.inv-help-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #334155;
  background: #0f172a;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}
.inv-help-btn:hover {
  border-color: #6c7aed;
  color: #818cf8;
}
.inv-col-headers {
  display: grid;
  grid-template-columns: 180px 1fr 120px 38px;
  gap: 8px;
  padding-bottom: 8px;
  transition: opacity 0.2s;
}
.inv-col-headers.dim {
  opacity: 0.45;
}
.inv-col-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.05em;
}
.inv-charge-row {
  display: grid;
  grid-template-columns: 180px 1fr 120px 38px;
  gap: 8px;
  margin-bottom: 8px;
  transition: opacity 0.2s;
}
.inv-charge-row.dim {
  opacity: 0.4;
  pointer-events: none;
}
.inv-csel,
.inv-cdesc {
  background: #0f1117;
  border: 1.5px solid #334155;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #e2e8f0;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  height: 38px;
}
.inv-csel {
  appearance: none;
  cursor: pointer;
  padding-right: 26px;
  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='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
.inv-csel:focus,
.inv-cdesc:focus {
  border-color: #6c7aed;
}
.inv-csel-err {
  border-color: #ef4444 !important;
  background-color: #fef2f222;
}
.inv-amount-cell {
  position: relative;
  display: flex;
  align-items: center;
}
.inv-amt-prefix {
  position: absolute;
  left: 10px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: #475569;
  pointer-events: none;
  z-index: 1;
  transition: color 0.1s;
}
.inv-amt-prefix.neg {
  color: #ef4444;
}
.inv-camount {
  width: 100%;
  background: #0f1117;
  border: 1.5px solid #334155;
  border-radius: 7px;
  padding: 8px 10px 8px 22px;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #e2e8f0;
  text-align: right;
  outline: none;
  transition:
    border-color 0.15s,
    color 0.1s;
  box-sizing: border-box;
  height: 38px;
}
.inv-camount:focus {
  border-color: #6c7aed;
}
.inv-camount.neg {
  color: #ef4444;
}
.inv-del-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid #334155;
  border-radius: 7px;
  background: #0f1117;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  font-size: 13px;
  flex-shrink: 0;
}
.inv-del-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.inv-add-line {
  width: 100%;
  padding: 9px;
  border: 1.5px dashed #334155;
  border-radius: 8px;
  background: none;
  color: #6c7aed;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
  margin-top: 4px;
}
.inv-add-line:hover {
  border-color: #6c7aed;
}
.inv-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 4px;
}
.inv-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.inv-preview-btn:hover:not(:disabled) {
  color: #f1f5f9;
  border-color: #475569;
  background: #1e293b;
}
.inv-preview-btn:disabled {
  color: #334155;
  border-color: #1e293b;
  cursor: not-allowed;
  pointer-events: none;
}
.inv-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #334155;
  z-index: 10;
}
.inv-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 24px;
  border: 5px solid transparent;
  border-top-color: #334155;
}
#invPreviewWrap:hover .inv-tooltip.visible,
#invSendWrap:hover .inv-tooltip.visible {
  display: block;
}
.inv-modal.inv-preview-modal {
  max-width: 960px;
  width: 92vw;
  border: none;
  border-radius: 6px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.inv-preview-modal .inv-modal-body {
  padding: 0;
  background: #f5f0e8;
  border-radius: 6px 6px 0 0;
  overflow-y: auto;
  max-height: calc(90vh - 60px);
}
.inv-preview-modal .inv-modal-foot {
  background: #1e293b;
  border-top: 1px solid #334155;
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.inv-pv {
  padding: 36px 40px;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #1a1a1a;
  font-size: 13px;
}
.inv-pv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.inv-pv-title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}
.inv-pv-number {
  font-size: 11px;
  color: #888;
  font-family: -apple-system, sans-serif;
  margin-top: 4px;
}
.inv-pv-date {
  text-align: right;
  font-size: 12px;
  color: #555;
  line-height: 1.8;
  white-space: nowrap;
}
.inv-pv-section-title {
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.inv-pv-party {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0 16px;
  border-top: 1px solid #ccc;
  margin-bottom: 24px;
  gap: 16px;
}
.inv-pv-party-left {
  font-size: 12px;
  color: #333;
  line-height: 1.7;
}
.inv-pv-party-left strong {
  color: #1a1a1a;
}
.inv-pv-party-right {
  text-align: right;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}
.inv-pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: -apple-system, sans-serif;
  margin-bottom: 8px;
}
.inv-pv-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid #1a1a1a;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: #1e293b;
}
.inv-pv-table th:first-child {
  border-radius: 3px 0 0 0;
}
.inv-pv-table th:last-child {
  border-radius: 0 3px 0 0;
}
.inv-pv-table th.r {
  text-align: right;
}
.inv-pv-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #ddd;
  color: #333;
}
.inv-pv-table td.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.inv-pv-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}
.inv-pv-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 0;
  margin-top: 14px;
  gap: 16px;
}
.inv-pv-total-left {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  font-family: -apple-system, sans-serif;
}
.inv-pv-total-right {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: -apple-system, sans-serif;
  white-space: nowrap;
}
.inv-pv-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid #ccc;
}
.inv-pv-footer-left {
  font-size: 11px;
  color: #555;
  line-height: 1.6;
}
.inv-pv-footer-left strong {
  color: #1a1a1a;
}
.inv-pv-initials {
  font-size: 26px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0.05em;
  font-family: 'Georgia', serif;
}
.inv-send-wrap {
  position: relative;
  display: inline-block;
}
.inv-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  background: #6c7aed;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(108, 122, 237, 0.3);
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.inv-send-btn:hover:not(:disabled) {
  background: #5b6bdc;
  box-shadow: 0 6px 18px rgba(108, 122, 237, 0.4);
}
.inv-send-btn:disabled {
  background: #1e293b;
  color: #334155;
  box-shadow: none;
  cursor: not-allowed;
  border: 1px solid #334155;
}
.inv-send-btn.sent {
  background: #059669;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
  cursor: default;
}
.inv-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.inv-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 18px;
  border: 5px solid transparent;
  border-top-color: #334155;
}
.inv-send-wrap:hover .inv-tooltip {
  display: block;
}
/* Invoice Enhancements */
.inv-reminder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #451a0320;
  border: 1px solid #f59e0b40;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #fbbf24;
}
.inv-reminder svg {
  flex-shrink: 0;
}
.inv-reminder strong {
  color: #fcd34d;
}
.inv-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 16px 0;
}
.inv-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  position: relative;
}
.inv-tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #334155;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #475569;
  z-index: 1;
  transition: all 0.2s;
}
.inv-tl-dot.active {
  border-color: #3b82f6;
  background: #1e3a5f;
  color: #60a5fa;
}
.inv-tl-dot.done {
  border-color: #10b981;
  background: #064e3b;
  color: #10b981;
}
.inv-tl-label {
  font-size: 10px;
  color: #475569;
  font-weight: 600;
  text-align: center;
}
.inv-tl-label.active {
  color: #60a5fa;
}
.inv-tl-label.done {
  color: #10b981;
}
.inv-tl-date {
  font-size: 9px;
  color: #334155;
}
.inv-tl-line {
  flex: 1;
  height: 2px;
  background: #334155;
  margin: 0 -8px;
  position: relative;
  top: -12px;
  z-index: 0;
}
.inv-tl-line.done {
  background: #10b981;
}
.inv-tl-line.active {
  background: linear-gradient(to right, #10b981, #334155);
}
.inv-period-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inv-type-switcher {
  display: flex;
  gap: 6px;
}
.inv-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid #334155;
  border-radius: 8px;
  background: #0f172a;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.inv-type-btn:hover {
  border-color: #475569;
  color: #94a3b8;
}
.inv-type-btn.active {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #60a5fa;
}
.inv-period-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0f1117;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  border: 1.5px solid #334155;
  color: #e2e8f0;
  color-scheme: dark;
}
.inv-period-select:hover {
  border-color: #475569;
}
.inv-period-select:focus {
  border-color: #3b82f6;
  outline: none;
}
.inv-period-select option {
  background: #0f172a;
  color: #e2e8f0;
}
/* TK-53 (build 878): the open option list in Chrome's dark-mode native
     select renders a crosshatched triangle pattern over the hovered/selected
     row. `color-scheme: dark` + explicit :checked/:hover styling stops the
     pattern bleeding through. */
.inv-period-select option:checked {
  background: #1e3a5f;
  color: #f8fafc;
  font-weight: 600;
}
.inv-period-select option:hover {
  background: #1e293b;
  color: #f8fafc;
}
.inv-period-select::-ms-expand {
  display: none;
}
.inv-period-arrow {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  font-family: inherit;
}
.inv-period-arrow:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.inv-notes-field {
  width: 100%;
  min-height: 60px;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #e2e8f0;
  outline: none;
  resize: vertical;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.inv-notes-field:hover {
  border-color: #475569;
}
.inv-notes-field:focus {
  border-color: #6c7aed;
  box-shadow: 0 0 0 3px rgba(108, 122, 237, 0.15);
}
.inv-charge-receipt {
  font-size: 10px;
  color: #475569;
  font-style: italic;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-send-summary {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
}
.inv-send-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
  color: #94a3b8;
}
.inv-send-summary-row strong {
  color: #f1f5f9;
  font-family: 'DM Mono', monospace;
}
.inv-send-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
  margin-top: 6px;
  border-top: 1px solid #334155;
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
}
.inv-dup-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #818cf8;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.inv-dup-btn:hover {
  border-color: #6c7aed;
  background: #1e2a54;
}
.inv-charge-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.inv-charge-tpl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #0f1117;
  border: 1px solid #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.inv-charge-tpl-item:hover {
  border-color: #6c7aed;
}
.inv-charge-tpl-name {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
}
.inv-charge-tpl-meta {
  font-size: 10px;
  color: #475569;
}
/* Invoice modals */
.inv-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.inv-modal-backdrop.open {
  display: flex;
}
.inv-modal {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: invModalIn 0.18s ease;
}
.inv-modal.wide {
  max-width: 440px;
}
@keyframes invModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.inv-modal-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #334155;
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.inv-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inv-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #334155;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.inv-modal-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
}
.inv-modal-ex {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
}
.inv-modal-ex.gray {
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #94a3b8;
}
.inv-modal-ex.red {
  background: #2d060620;
  border: 1px solid #ef444430;
  color: #fca5a5;
}
.inv-modal-ex-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.inv-modal-ex.gray .inv-modal-ex-title {
  color: #475569;
}
.inv-modal-ex.red .inv-modal-ex-title {
  color: #ef4444;
}
.inv-modal-ex code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
}
.inv-confirm-icon {
  width: 48px;
  height: 48px;
  background: #2d200620;
  border: 1px solid #f59e0b30;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-confirm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid #334155;
}
.inv-confirm-header svg {
  flex-shrink: 0;
}
.inv-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.inv-btn-primary {
  padding: 9px 20px;
  background: #6c7aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-btn-primary:hover {
  background: #5b6bdc;
}
.inv-btn-full {
  width: 100%;
  display: block;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.inv-btn-ghost {
  padding: 9px 20px;
  background: #0f172a;
  color: #94a3b8;
  border: 1.5px solid #334155;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.inv-btn-ghost:hover {
  border-color: #475569;
}
.inv-intro-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.inv-intro-check input[type='checkbox'] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #6c7aed;
}
.inv-intro-check label {
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}
@media (max-width: 768px) {
  .inv-two-col {
    grid-template-columns: 1fr;
  }
  .inv-col-headers,
  .inv-charge-row {
    grid-template-columns: 1fr 1fr 100px 38px;
  }
}

/* ── Invoice full-screen ── */
.inv-wrap {
  max-width: none;
  width: 100%;
}
#page-invoice .page-body {
  padding: 20px 28px;
}

/* ── Roles ── */
.role-switcher {
  padding: 12px 14px;
  border-top: 1px solid #1e293b;
  margin-top: auto;
}
.role-switcher-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #334155;
  margin-bottom: 8px;
}
.role-tabs {
  display: flex;
  gap: 4px;
  background: #0d1526;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 3px;
}
.role-tab {
  flex: 1;
  padding: 5px 0;
  border-radius: 5px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  font-family: inherit;
  text-align: center;
}
.role-tab.active {
  background: #1e3a5f;
  color: #60a5fa;
}
.nav-item.role-hidden {
  display: none;
}

/* ── Login Screen ── */
/* Hidden by default — JS reveals only when there's no session. Without
     this gate, the login card briefly paints during the auth check on
     reload of an authenticated tab and produces a one-frame flash. */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f1117;
  display: none;
  align-items: center;
  justify-content: center;
}
.login-screen.visible {
  display: flex;
}
.login-card {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 16px;
  padding: 40px 36px;
  width: 380px;
  max-width: 90vw;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(96, 165, 250, 0.15);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo svg {
  margin-bottom: 8px;
}
.login-logo-text {
  font-size: 26px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.4px;
  text-transform: none;
  font-variant: normal;
  font-family:
    'Inter',
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.login-field input:hover {
  border-color: #475569;
}
.login-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  caret-color: #e2e8f0 !important;
  transition: background-color 9999s ease-out 0s;
}
.login-btn {
  width: 100%;
  padding: 11px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  margin-top: 8px;
}
.login-btn:hover {
  background: #2563eb;
}
.grecaptcha-badge {
  visibility: hidden;
}
.login-error {
  color: #ef4444;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}
.login-invite {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #64748b;
}

/* ── Force Password Change Modal ── */
.pwd-change-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
}
.pwd-change-backdrop.open {
  display: flex;
}
.pwd-change-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 32px;
  width: 380px;
  max-width: 90vw;
}
.pwd-change-card h3 {
  color: #f1f5f9;
  font-size: 16px;
  margin-bottom: 4px;
}
.pwd-change-card p {
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 20px;
}

/* Onboarding Wizard */
.ob-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0f1117;
  display: none;
  align-items: center;
  justify-content: center;
}
.ob-backdrop.open {
  display: flex;
}
.ob-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 0;
  width: 1100px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
}
.ob-header {
  padding: 24px 32px 0;
  text-align: center;
}
.ob-header h2 {
  color: #f1f5f9;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
.ob-header p {
  color: #64748b;
  font-size: 12px;
  margin: 0;
}
/* Progress bar with labels */
.ob-progress {
  display: flex;
  gap: 4px;
  padding: 18px 32px 0;
}
.ob-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ob-progress-step .ob-prog-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #1e293b;
  border: 1px solid #334155;
  transition: all 0.3s;
}
.ob-progress-step.done .ob-prog-bar {
  background: #3b82f6;
  border-color: #3b82f6;
}
.ob-progress-step.active .ob-prog-bar {
  background: #3b82f680;
  border-color: #3b82f6;
}
.ob-progress-step .ob-prog-label {
  font-size: 9px;
  color: #334155;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  white-space: nowrap;
}
.ob-progress-step.done .ob-prog-label {
  color: #3b82f6;
}
.ob-progress-step.active .ob-prog-label {
  color: #94a3b8;
}
.ob-body {
  padding: 20px 32px;
}
.ob-step {
  display: none;
}
.ob-step.active {
  display: block;
}
.ob-step h3 {
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-step .ob-desc {
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 14px;
}
.ob-footer {
  padding: 0 32px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ob-btn {
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ob-btn-primary {
  background: #3b82f6;
  color: white;
}
.ob-btn-primary:hover:not(:disabled) {
  background: #2563eb;
}
.ob-btn-primary:disabled {
  background: #1e293b;
  color: #475569;
  cursor: not-allowed;
  border: 1px solid #334155;
}
.ob-btn-secondary {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}
.ob-btn-secondary:hover {
  color: #f1f5f9;
  border-color: #475569;
}
.ob-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #1e293b;
}
.ob-check-row:last-child {
  border-bottom: none;
}
.ob-check-row label {
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
}
.ob-check-row input[type='checkbox'] {
  accent-color: #3b82f6;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Contract step */
.ob-contract-body {
  max-height: 420px;
  overflow-y: auto;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.75;
  color: #cbd5e1;
  position: relative;
  font-family:
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #334155 #0b1220;
}
.ob-contract-body::-webkit-scrollbar {
  width: 10px;
}
.ob-contract-body::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
}
.ob-contract-body p {
  margin: 0 0 10px 0;
}
.ob-contract-body h1,
.ob-contract-body h2,
.ob-contract-body h3 {
  color: #f1f5f9;
  margin: 20px 0 10px 0;
}
.ob-contract-body strong {
  color: #f1f5f9;
}
.ob-sig-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-sig-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
}
.ob-sig-clear {
  margin-left: auto;
  background: none;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.ob-sig-clear:hover {
  border-color: #475569;
  color: #e2e8f0;
}
.ob-sig-status {
  font-size: 11px;
  margin-left: 4px;
}
.ob-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob-sig-label {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ob-sig-canvas {
  background: #0a0f1a;
  border: 1px solid #334155;
  border-radius: 6px;
  cursor: crosshair;
  width: 100%;
  height: 68px;
  touch-action: none;
}
.ob-sig-consents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid #1e293b;
}
.ob-sig-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
  line-height: 1.4;
}
.ob-sig-consent-row input {
  accent-color: #3b82f6;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ob-sig-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #475569;
  line-height: 1.4;
}
/* Download asset card */
.ob-asset-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ob-asset-card img {
  border-radius: 8px;
  border: 2px solid #334155;
}
.ob-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  background: #3b82f6;
  color: white;
}
.ob-dl-btn:hover {
  background: #2563eb;
}
.ob-dl-btn:disabled {
  background: #1e293b;
  color: #475569;
  border: 1px solid #334155;
  cursor: not-allowed;
}
.ob-dl-btn.downloaded {
  background: #10b98120;
  color: #10b981;
  border: 1px solid #10b98140;
}
.ob-dl-btn.downloaded svg {
  stroke: #10b981;
}
/* Setup instructions toggle */
.ob-instr-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  margin-bottom: 8px;
}
.ob-instr-toggle:hover {
  color: #94a3b8;
}
.ob-instr-toggle svg {
  transition: transform 0.2s;
}
.ob-instr-toggle.open svg {
  transform: rotate(90deg);
}
.ob-instr-body {
  display: none;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ob-instr-body.open {
  display: block;
}
.ob-instr-body ol {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.8;
}
.ob-instr-body ol strong {
  color: #f1f5f9;
}
/* Completion step */
.ob-complete {
  text-align: center;
  padding: 30px 20px;
}
.ob-complete-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #10b98118;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ob-complete h3 {
  font-size: 18px !important;
  margin-bottom: 6px !important;
}
.ob-complete .ob-desc {
  font-size: 13px;
  margin-bottom: 0 !important;
}
/* Payment hints */
.ob-pay-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ══════════════════════════════════════════════
     GUI STANDARDIZATION — Unified styles
     ══════════════════════════════════════════════ */

/* ── Standardized Tables ── */
table {
  font-size: 12px;
}
th {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  background: var(--bg-base);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid #1a2234;
  color: #cbd5e1;
  font-size: 12px;
}
tr:hover td {
  background: rgba(30, 41, 59, 0.25);
}
/* users module: see /users.css (was lines 3068-3069) */

/* ── Standardized Form Inputs ── */
/* users module: see /users.css (was lines 3072-3081) */
input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='file']):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ── Standardized Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: #2563eb;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-danger:hover {
  background: #dc2626;
}

/* ── Unified Modal Styling ── */
/* users module: see /users.css (was lines 3094-3101) */

/* ── Unified Empty States ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-faint);
  text-align: center;
}
.empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--border-hover);
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.empty-state-desc {
  font-size: 12px;
  color: var(--text-faint);
  max-width: 280px;
  line-height: 1.5;
}

/* ── Dashboard Layout Fix ── */
.dash-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.dash-card {
  background: var(--bg-surface);
  border-color: var(--border-hover);
}
.dash-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
}
.dash-card-val {
  font-size: 26px;
}
.dash-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Notification Panel Polish ── */
.notif-panel {
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}
.notif-item {
  font-size: 12px;
  line-height: 1.5;
}
.notif-item.unread {
  background: rgba(59, 130, 246, 0.04);
}

/* ── Audit Log Polish ── */
.audit-row {
  border-radius: 0;
  transition: background 0.1s;
}

/* ── Card Consistency ── */
.report-card,
.table-card,
.settings-card,
.inv-card,
.ck-stat {
  border-radius: var(--radius-lg);
}

/* ── Scrollbar Standardization ── */
/* users module: see /users.css (was lines 3130-3133) */
/* tasks module: see /tasks.css (was lines 2936-2938) */

/* ── Status Badge Utility ── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-status.success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.badge-status.warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-status.danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge-status.info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-text);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.badge-status.neutral {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {
  .dash-info-grid {
    grid-template-columns: 1fr;
  }
  .inv-two-col {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
}
/* users module: see /users.css (was lines 3152-3183) */
.network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #dc3545;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  display: none;
  animation: slideDown 0.3s ease;
}
.network-banner.show {
  display: block;
}
.network-banner .reconnecting {
  opacity: 0.7;
  font-size: 12px;
  margin-left: 8px;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.page-loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
}
.page-loader.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.page-loader .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.page-loader .loader-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.table-loader {
  display: flex;
  justify-content: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}
.table-loader .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
}
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.app-modal {
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border, #2d2d3d);
  border-radius: 12px;
  padding: 24px;
  min-width: 340px;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  color: var(--text-primary, #f1f5f9);
}
.app-modal h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text-primary, #f1f5f9);
}
.app-modal p {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.app-modal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.app-modal .modal-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.app-modal .modal-btn-primary {
  background: #4a9eff;
  color: #fff;
}
.app-modal .modal-btn-primary:hover {
  background: #3a8eef;
}
.app-modal .modal-btn-danger {
  background: #dc3545;
  color: #fff;
}
.app-modal .modal-btn-danger:hover {
  background: #c82333;
}
.app-modal .modal-btn-cancel {
  background: var(--bg-elevated, #2a2a3a);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--border, transparent);
}
.app-modal .modal-btn-cancel:hover {
  background: var(--bg-app, #333345);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Build 905 — batch bug fixes (tickets 73/74/82/96/104/110) ──────── */

/* [73][74][82] Tell the browser to paint native <select> UA widgets with a
   dark color scheme so the option dropdown isn't white-on-light-grey. */
html:not([data-theme='light']) select,
html:not([data-theme='light']) .field-input,
html:not([data-theme='light']) input[type='text'],
html:not([data-theme='light']) input[type='email'],
html:not([data-theme='light']) input[type='search'],
html:not([data-theme='light']) input[type='number'],
html:not([data-theme='light']) input[type='date'],
html:not([data-theme='light']) input[type='time'],
html:not([data-theme='light']) input[type='datetime-local'],
html:not([data-theme='light']) textarea {
  color-scheme: dark;
}

/* Ensure every rendered <option> has a dark bg + light text — defensive, since
   Chrome honors the above color-scheme but Firefox needs explicit colors. */
html:not([data-theme='light']) select option,
html:not([data-theme='light']) select optgroup {
  background: #0f172a;
  color: #e2e8f0;
}

/* Build 885 (TK-82): build 905's blanket `select { color-scheme: dark }`
   only fixed the OUTER select chrome — the OPTION list still showed the
   browser's default light hover/checked treatment on the filter dropdowns
   (`Created by`, `Recurring`, etc). Be explicit about option states for the
   filter row, mirroring what we did for .inv-period-select option. */
html:not([data-theme='light']) .tk-filter-row-value select {
  color-scheme: dark;
  background-color: #0f172a;
  color: #e2e8f0;
}
html:not([data-theme='light']) .tk-filter-row-value select option {
  background: #0f172a;
  color: #e2e8f0;
}
html:not([data-theme='light']) .tk-filter-row-value select option:checked {
  background: #1e3a5f;
  color: #f8fafc;
  font-weight: 600;
}
html:not([data-theme='light']) .tk-filter-row-value select option:hover {
  background: #1e293b;
  color: #f8fafc;
}

/* [96] Negative money amounts should be red, not green. Any element carrying
   both .money (or .amount) and .negative gets the danger color. Also handle
   the common acc-total / inv-total / tk-total classes. */
.money.negative,
.amount.negative,
.acc-total.negative,
.inv-total.negative,
.tk-total.negative,
.rate-effective.negative,
[data-negative='true'] {
  color: #ef4444 !important;
}

/* [104] Give sent/received message bubbles vertical padding so text and emoji
   don't hug the top edge. Scoped to native messenger so it can't regress
   other bubble variants. */
#msgNativeRoot .msg-bubble,
#msgNativeRoot .msg-bubble-sent,
#msgNativeRoot .msg-bubble-received {
  padding: 10px 14px !important;
  line-height: 1.45;
}

/* [110] Message status checkmarks (sent/delivered/read) — bump contrast so
   they're visible against the blue sent-bubble background. */
#msgNativeRoot .msg-check,
#msgNativeRoot .msg-status-check,
#msgNativeRoot .msg-bubble-sent .msg-meta svg {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

/* ── [111] Build 882 — Leave Request modal UX polish (TK-133 follow-up) ──
   Chips + balance pill + inline range calendar + duration readout. */
.leave-req-as {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin: -8px 0 14px;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.07);
  border-left: 2px solid #6366f1;
  border-radius: 0 4px 4px 0;
}
.leave-req-as strong {
  color: var(--text-primary, #f1f5f9);
  font-weight: 600;
}
.leave-balance-pill {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.1);
  color: #c4b5fd;
  border: 1px solid rgba(168, 85, 247, 0.3);
  white-space: nowrap;
  align-self: end;
  height: fit-content;
}
.leave-balance-pill.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}
.leave-balance-pill.muted {
  background: rgba(100, 116, 139, 0.12);
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.3);
}
.leave-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.leave-chip {
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 14px;
  background: var(--bg-elevated, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.12s;
}
.leave-chip:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
  color: #c7d2fe;
}
.leave-chip.active {
  background: rgba(99, 102, 241, 0.22);
  border-color: #6366f1;
  color: #e0e7ff;
}
.leave-range-cal {
  background: var(--bg-elevated, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.leave-range-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.leave-range-cal-month {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
}
.leave-range-cal-nav {
  display: flex;
  gap: 4px;
}
.leave-range-cal-nav button {
  background: transparent;
  border: 1px solid var(--border, #334155);
  color: var(--text-secondary, #94a3b8);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.leave-range-cal-nav button:hover {
  background: var(--bg-elevated, #1e293b);
  color: var(--text-primary, #f1f5f9);
}
.leave-range-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.leave-range-cal-dow {
  font-size: 9px;
  color: var(--text-muted, #64748b);
  text-align: center;
  padding: 3px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.leave-range-cal-day {
  font-size: 11px;
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
  border-radius: 3px;
  color: var(--text-secondary, #cbd5e1);
  user-select: none;
}
.leave-range-cal-day:hover {
  background: rgba(99, 102, 241, 0.15);
}
.leave-range-cal-day.other {
  color: #475569;
  opacity: 0.5;
}
.leave-range-cal-day.weekend {
  color: #64748b;
}
.leave-range-cal-day.today {
  outline: 1px solid #38bdf8;
  outline-offset: -1px;
}
.leave-range-cal-day.in-range {
  background: rgba(99, 102, 241, 0.18);
  color: #e0e7ff;
  border-radius: 0;
}
.leave-range-cal-day.range-start {
  background: #6366f1;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-weight: 600;
}
.leave-range-cal-day.range-end {
  background: #6366f1;
  color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
.leave-range-cal-day.range-start.range-end {
  border-radius: 4px;
}
.leave-range-cal-day.past {
  color: #475569;
  cursor: not-allowed;
  opacity: 0.4;
}
.leave-range-cal-day.past:hover {
  background: transparent;
}
.leave-duration {
  font-size: 12px;
  color: var(--text-secondary, #cbd5e1);
  padding: 8px 10px;
  background: rgba(16, 185, 129, 0.08);
  border-left: 2px solid #10b981;
  border-radius: 0 4px 4px 0;
  min-height: 18px;
}
.leave-duration:empty {
  display: none;
}
.leave-duration b {
  color: #10b981;
  font-weight: 600;
}

/* ── [112] Build 883 — NEEDS INFO card accent (TK-133 follow-up) ──
   When tasks.aiStatus === 'needs_info' the card gets a left amber stripe
   plus a subtle background tint. Prevents the silent "moved to Review with
   needs_info still set" pattern from the 04-25 audit. */
.tk-card.needs-info-card {
  border-left: 3px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.04) !important;
}
.tk-card.needs-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #f59e0b;
  opacity: 0;
  transition: opacity 0.15s;
}
.tk-card.needs-info-card:hover {
  background: rgba(245, 158, 11, 0.07) !important;
}

/* ── Build 948 — Light-theme: Chrome autofill + mrdConfirm modal ──
   Two leftover dark-on-dark spots in light mode:
   1. Inputs Chrome auto-fills get :-webkit-autofill which paints them dark
      (the rule at line 1450 was dark-only). HR wizard's email + address
      block are the visible offenders.
   2. mrdConfirm overlay uses inline #1e293b BG + #f1f5f9 title + #94a3b8 body —
      dark on dark in light mode. Override with !important since style="" wins. */
html[data-theme='light'] .field-input:-webkit-autofill,
html[data-theme='light'] .field-input:-webkit-autofill:hover,
html[data-theme='light'] .field-input:-webkit-autofill:focus,
html[data-theme='light'] .field-input:-webkit-autofill:active,
html[data-theme='light'] input:-webkit-autofill,
html[data-theme='light'] input:-webkit-autofill:hover,
html[data-theme='light'] input:-webkit-autofill:focus,
html[data-theme='light'] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated, #f9fafb) inset !important;
  -webkit-text-fill-color: var(--text-primary, #111827) !important;
  caret-color: var(--text-primary, #111827) !important;
}
html[data-theme='light'] #mrdConfirmOverlay > div {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme='light'] #mrdConfirmTitle {
  color: #111827 !important;
}
html[data-theme='light'] #mrdConfirmMessage {
  color: #4b5563 !important;
}
html[data-theme='light'] #mrdConfirmCancel {
  border-color: #d1d5db !important;
  color: #4b5563 !important;
}
html[data-theme='light'] #mrdConfirmCancel:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* Build 996 (#476680399) — Light-theme My Profile reinforcement.
   Several dynamically-rendered subsections (profileScheduleHost,
   payment-method select, country picker on the onboarding wizard)
   rendered inline dark backgrounds against a light viewport. These
   rules force every input/select/textarea inside the profile page
   (and the schedule host that injects into it) to honor the light
   theme's elevated surface + primary text tokens. !important defeats
   the style="" attributes on dynamically-built rows. */
html[data-theme='light'] #page-profile input:not([type='checkbox']):not([type='radio']),
html[data-theme='light'] #page-profile select,
html[data-theme='light'] #page-profile textarea,
html[data-theme='light'] #profileScheduleHost input:not([type='checkbox']):not([type='radio']),
html[data-theme='light'] #profileScheduleHost select,
html[data-theme='light'] #profileScheduleHost textarea {
  background: var(--bg-elevated, #f9fafb) !important;
  color: var(--text-primary, #111827) !important;
  border-color: var(--border, #d1d5db) !important;
}
html[data-theme='light'] #page-profile select option,
html[data-theme='light'] #profileScheduleHost select option {
  background: #ffffff;
  color: #111827;
}
html[data-theme='light'] #page-profile .report-card,
html[data-theme='light'] #page-profile .prof-section-body,
html[data-theme='light'] #profileScheduleHost .report-card {
  background: var(--bg-surface, #ffffff) !important;
  border-color: var(--border, #e5e7eb) !important;
  color: var(--text-primary, #111827) !important;
}
html[data-theme='light'] #page-profile .field-label,
html[data-theme='light'] #profileScheduleHost .field-label {
  color: var(--text-muted, #6b7280) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Build 1006 — mobile layout (≤ 640px)
   Phase A converted .app-shell to CSS Grid + the JS layout-sync
   (matchMedia → html[data-layout]) handles breakpoint transitions. This
   block holds the per-element mobile rules: page padding, table
   overflow, form widths, etc. Builds 1005's band-aid was the seed;
   builds 1006 expanded coverage to per-page chrome.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* On mobile the sidebar leaves grid flow and overlays via absolute
     positioning. The grid collapses to a single content column. */
  .app-shell,
  .app-shell:has(.sidebar.collapsed) {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
  }
  .sidebar:not(.collapsed) {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  /* Backdrop element (real div with onclick=toggleSidebar). The default
     `display: none` is set outside this media query (see Build 1009
     fix) so the div doesn't grab a grid track on desktop. Here we
     give it visual + position rules and re-show it when the sidebar
     is open in mobile mode. */
  #appBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 50;
    cursor: pointer;
  }
  .app-shell:has(.sidebar:not(.collapsed)) #appBackdrop {
    display: block;
  }

  /* Build 1018 — show floating hamburger when sidebar is collapsed.
     Tap → toggleSidebar() slides the sidebar in. The button hides
     itself when the sidebar is open (the in-sidebar .sidebar-toggle
     is reachable then). */
  #mobileMenuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    background: var(--bg-elevated, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 10px;
    color: var(--text-primary, #f1f5f9);
    cursor: pointer;
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  #mobileMenuBtn:hover,
  #mobileMenuBtn:focus {
    color: var(--accent-text, #60a5fa);
    border-color: var(--accent, #3b82f6);
    outline: none;
  }
  /* Hide the floating button when sidebar is open (the in-sidebar
     toggle takes over). */
  .app-shell:has(.sidebar:not(.collapsed)) #mobileMenuBtn {
    display: none;
  }

  /* Page chrome: shrink padding so content actually fits. */
  .page-body {
    padding: 12px 12px;
  }
  .header {
    padding: 0 12px;
    gap: 8px;
  }
  .header-title {
    font-size: 15px;
  }
  .tkd-topbar {
    padding: 12px 12px 6px;
    flex-wrap: wrap;
  }

  /* Search inputs were `width: 320px` (focus 400px) — full-width on phone. */
  .search-input,
  .search-input:focus {
    width: 100% !important;
    max-width: 100%;
  }

  /* Header user pill: hide the name text, keep avatar + ADMIN badge. */
  .user-pill .user-name,
  #userBadge .user-name {
    display: none;
  }

  /* Stat tile grids on dashboards: 2-up at 481-640px, 1-up below. */
  .ck-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Phase D — touch + form ergonomics.
     • All clickable controls ≥ 44px tap target (Apple HIG).
     • Inputs ≥ 16px font-size to defeat iOS auto-zoom on focus.
     • Modals capped at viewport height minus ~80px so the mobile
       keyboard doesn't bury the submit button. */
  button,
  .btn,
  .icon-btn,
  .nav-item,
  [role='button'] {
    min-height: 44px;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .modal,
  .modal-card,
  .dialog-card,
  .kbd-card,
  .msg-modal-card,
  .tk-modal-card {
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 380px) {
  .ck-stats {
    grid-template-columns: 1fr;
  }
  .header-title {
    font-size: 14px;
  }
}

/* Build 1033 — global UI bundle.
   seq 208 (avatar colors uniform in light theme), 209 (invoice reminder
   yellow-on-light), 210 (brand logo invisible + purple underline). */

/* seq 210 — Brand logo: prevent default <a> underline and ensure visible color
   in light theme. The logo is rendered inside .sidebar-logo as <span class="sidebar-logo-text">
   sometimes wrapped in an <a> for routing. */
.sidebar-logo a,
.sidebar-logo a:visited,
.sidebar-logo a:hover {
  text-decoration: none !important;
  color: inherit;
}
.sidebar-logo-text {
  color: var(--text-primary, #f1f5f9);
}
html[data-theme='light'] .sidebar-logo-text {
  color: #0f172a !important;
}
html[data-theme='light'] .sidebar-logo a,
html[data-theme='light'] .sidebar-logo a:visited {
  color: #0f172a !important;
  text-decoration: none !important;
}

/* seq 208 — Avatars must keep their unique per-user color hues in light theme.
   Earlier light-theme rules (e.g. line 538 .prof-avatar) hardcoded a single
   blue palette, overriding inline `background: hsl(...)` styles via specificity.
   Restore per-instance colors by NOT touching .avatar/.tk-list-assignee-av/
   .hdr-user-avatar elements that already carry inline hsl() backgrounds. */
html[data-theme='light'] .avatar[style*='background'],
html[data-theme='light'] .tk-list-assignee-av[style*='background'],
html[data-theme='light'] .hdr-user-avatar[style*='background'],
html[data-theme='light'] .ts-avatar[style*='background'],
html[data-theme='light'] .msg-avatar[style*='background'] {
  /* The inline style wins; we only ensure the text remains readable. */
  filter: none;
}
/* Bare fallback for avatars without inline color (initials shown) */
html[data-theme='light'] .avatar:not([style*='background']),
html[data-theme='light'] .hdr-user-avatar:not([style*='background']) {
  background: #e0e7ff;
  color: #3730a3;
}

/* seq 209 — Invoice reminder banner: dark-on-yellow in light theme. The original
   .inv-reminder uses semi-transparent dark background + bright yellow text — fine
   on dark theme, illegible on light. */
html[data-theme='light'] .inv-reminder {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
}
html[data-theme='light'] .inv-reminder strong {
  color: #451a03 !important;
}
html[data-theme='light'] .inv-reminder svg {
  color: #b45309 !important;
  stroke: #b45309 !important;
}

.nav-item,
.nav-item *,
.nav-sub-item,
.nav-sub-item *,
.nav-flyout-item,
.nav-flyout-item *,
.nav-sub-group-toggle,
.nav-sub-group-toggle *,
.hdr-user-badge,
.hdr-user-badge * {
  text-decoration: none !important;
}

/* Phase C — table standardisation. .scroll-wrap is the canonical
   horizontal-scroll container for any data-dense table. The
   data-mobile="hide" attribute is opt-in: any column header or cell
   tagged with it is dropped on mobile to keep critical columns
   visible without forcing a horizontal scroll. */
.scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .table-card,
  .report-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-mobile='hide'] {
    display: none !important;
  }
}

/* ── Build 1058 patches — bundled bug-fix sweep ─────────────────────── */

/* TK-210 — Brand logo invisible in light theme.
   Earlier seq 210 added `color: #0f172a !important` but the inherited
   `.sidebar-logo-text` rule sets `background: linear-gradient + -webkit-
   text-fill-color: transparent`, which paints the gradient OVER the
   color. In light theme cancel the gradient so the explicit color
   shows. */
html[data-theme='light'] .sidebar-logo-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}

/* TK-217 — mrdPrompt input retains dark background in light theme.
   The input has hardcoded inline `background:#0f172a; color:#e2e8f0`
   for the dark default; override via attribute selector + theme. */
html[data-theme='light'] #mrdPromptInput {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme='light'] #mrdPromptInput:focus {
  border-color: #2563eb !important;
}
/* mrdConfirm + mrdAlert containers/text inherit from dark — repaint light. */
html[data-theme='light'] #mrdPromptOverlay > div,
html[data-theme='light'] #mrdConfirmOverlay > div,
html[data-theme='light'] #mrdAlertOverlay > div {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* TK-197 — Status / ID badges should not be selectable text. The naked
   text-node highlight breaks out of the rounded chip silhouette. */
.tk-status-badge,
.tk-priority-badge,
.tk-id-tag,
.task-status-badge,
.task-priority-badge,
.tk-list-status,
.tk-card-status {
  user-select: none;
  -webkit-user-select: none;
}

/* TK-204 — Status / Priority dropdown popups: bump specificity so light
   theme wins over any dark inline-styled popovers nested under them. */
html[data-theme='light'] .tk-status-picker,
html[data-theme='light'] .tk-status-picker-list,
html[data-theme='light'] .tk-fields-popup,
html[data-theme='light'] .tk-bulk-popup,
html[data-theme='light'] .tk-popup,
html[data-theme='light'] .tk-sort-popup,
html[data-theme='light'] .tk-status-pop {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
html[data-theme='light'] .tk-status-picker-item,
html[data-theme='light'] .tk-fields-popup-item,
html[data-theme='light'] .tk-bulk-popup-item {
  color: var(--text-primary) !important;
}
html[data-theme='light'] .tk-status-picker-item:hover,
html[data-theme='light'] .tk-fields-popup-item:hover,
html[data-theme='light'] .tk-bulk-popup-item:hover {
  background: var(--bg-elevated) !important;
}

/* ── Build 1150: hover/focus rules replacing inline onmouseover/onmouseout/onfocus/onblur ── */
/* Pre-login forgot-password link hover (was inline style.color toggle in index.html). */
.login-forgot-link {
  color: #64748b;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s;
}
.login-forgot-link:hover {
  color: #3b82f6;
}

/* mrdPrompt / mrdConfirm Cancel button hover (was inline style.background+color toggle). */
.mrd-modal-cancel-btn {
  padding: 8px 18px;
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.mrd-modal-cancel-btn:hover {
  background: #334155;
  color: #e2e8f0;
}

/* mrdPrompt OK button hover (purple). */
.mrd-modal-ok-purple {
  padding: 8px 18px;
  background: #7c3aed;
  border: none;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}
.mrd-modal-ok-purple:hover {
  background: #6d28d9;
}

/* mrdPrompt input focus border color (was inline style.borderColor toggle). */
#mrdPromptInput {
  width: 100%;
  box-sizing: border-box;
  background: #0f172a;
  border: 1px solid #475569;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
#mrdPromptInput:focus {
  border-color: #7c3aed;
}