/* ============================================================
   Topwebsuite — system-wide dark mode
   Loaded last on every page; activates only under [data-theme="dark"].
   Strategy: (1) redefine the CSS variables both stylesheets already use,
   (2) flip the chrome that uses hardcoded whites, (3) deliberately KEEP the
   document "paper"/preview surfaces light (they are print canvases).
============================================================ */

/* ---------- 1. Variable palettes ---------- */
:root[data-theme="dark"]{
  /* dashboard.css */
  --primary:#3b88ff;
  --primary-dark:#2f6fe0;
  --primary-soft:#16263f;
  --bg:#0a111e;
  --surface:#111b2c;
  --surface-2:#0e1726;
  --text:#e7edf6;
  --muted:#9aa7bd;
  --line:#243248;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#f0556a;
  --shadow:0 14px 34px rgba(0,0,0,.5);
  /* style.css (public/marketing) */
  --white:#111b2c;
  --divider:#243248;
  --blue:#3b88ff;
  --blue-hover:#5a9cff;
  color-scheme:dark;
}

/* ---------- 2. Global element chrome ---------- */
[data-theme="dark"] body{ background:var(--bg); color:var(--text); }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .builder-section input,
[data-theme="dark"] .builder-section select,
[data-theme="dark"] .builder-section textarea,
[data-theme="dark"] .modal-form input,
[data-theme="dark"] .modal-form select,
[data-theme="dark"] .modal-form textarea,
[data-theme="dark"] .pricing-coupon-input,
[data-theme="dark"] .editor-select,
[data-theme="dark"] .editor-size-input{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:var(--muted); }

[data-theme="dark"] table{ color:var(--text); }
[data-theme="dark"] thead th,
[data-theme="dark"] th{ background:var(--surface-2); color:var(--muted); border-color:var(--line); }
[data-theme="dark"] td{ border-color:var(--line); }
[data-theme="dark"] tr{ border-color:var(--line); }
[data-theme="dark"] hr{ border-color:var(--line); }
[data-theme="dark"] .empty-row{ color:var(--muted); }

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2c3c57; border-radius:8px; }
[data-theme="dark"] ::-webkit-scrollbar-track{ background:#0c1422; }

/* ---------- 3. Dashboard surfaces (chrome that used #fff) ---------- */
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .mini-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .compact-panel,
[data-theme="dark"] .summary-left,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .settings-action-card,
[data-theme="dark"] .settings-plan-option,
[data-theme="dark"] .support-card,
[data-theme="dark"] .topbar-dropdown,
[data-theme="dark"] .fab-menu,
[data-theme="dark"] .billing-lifecycle-banner,
[data-theme="dark"] .pricing-shell-card,
[data-theme="dark"] .working-hours-row,
[data-theme="dark"] .dynamic-row,
[data-theme="dark"] .letter-studio-stat,
[data-theme="dark"] .letter-editor-meta,
[data-theme="dark"] .letter-options-menu,
[data-theme="dark"] .editor-drop-menu,
[data-theme="dark"] .inv2-card,
[data-theme="dark"] .bp-modal{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}

/* Chrome buttons / pills / tools that were white */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-filter,
[data-theme="dark"] .action-btn,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .icon-action,
[data-theme="dark"] .menu-toggle,
[data-theme="dark"] .user-card,
[data-theme="dark"] .sidebar-footer .pill,
[data-theme="dark"] .editor-tool,
[data-theme="dark"] .editor-color,
[data-theme="dark"] .editor-media,
[data-theme="dark"] .editor-size-stepper,
[data-theme="dark"] .editor-zoom-btn,
[data-theme="dark"] .wp-options-btn,
[data-theme="dark"] .letter-title-compact,
[data-theme="dark"] .builder-mobile-head,
[data-theme="dark"] .builder-actions,
[data-theme="dark"] .invoice-preview-bar,
[data-theme="dark"] .inv2-header,
[data-theme="dark"] .inv2-footer,
[data-theme="dark"] .inv2-save-draft,
[data-theme="dark"] .inv2-btn-cancel,
[data-theme="dark"] .bp-btn--ghost,
[data-theme="dark"] .ai-usage-btn,
[data-theme="dark"] .pricing-billing-toggle{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}

/* Editor/builder side panels */
[data-theme="dark"] .invoice-builder-sidebar,
[data-theme="dark"] .letter-editor-head{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}

/* Soft tinted backgrounds that were near-white */
[data-theme="dark"] .surface-2,
[data-theme="dark"] .table-wrap{ background:var(--surface-2); border-color:var(--line); }

/* Headings / muted text that were hardcoded slate */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .page-heading h1,
[data-theme="dark"] .panel-header h3{ color:var(--text); }

/* ---------- 4. AI Workspace literal touch-ups ---------- */
[data-theme="dark"] .ai-convo,
[data-theme="dark"] .ai-ov-chip,
[data-theme="dark"] .ai-ov-sug-body b,
[data-theme="dark"] .ai-ov-action b,
[data-theme="dark"] .ai-history-title,
[data-theme="dark"] .ai-usage-tab{ color:var(--text); }
[data-theme="dark"] .ai-image-gen textarea{ background:var(--surface-2); color:var(--text); }

/* ---------- 5. Keep document PAPER + previews light (print canvases) ---------- */
[data-theme="dark"] .invoice-paper-preview,
[data-theme="dark"] .receipt-live-sheet,
[data-theme="dark"] .receipt-live-bottom-bar span,
[data-theme="dark"] .invoice-live-total,
[data-theme="dark"] .letter-page-sheet,
[data-theme="dark"] .letterhead-preview-paper,
[data-theme="dark"] .builder-upload-preview img,
[data-theme="dark"] .signature-upload-preview img,
[data-theme="dark"] #invoicePreviewFrame,
[data-theme="dark"] #receiptPreviewFrame,
[data-theme="dark"] #waybillPreviewFrame,
[data-theme="dark"] #quotationPreviewFrame,
[data-theme="dark"] #letterPreviewFrame{
  background:#ffffff;
  color:#0f172a;
}

/* ---------- 6. Public / marketing / auth (style.css) ---------- */
[data-theme="dark"] .site-header,
[data-theme="dark"] header.site-header{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-shell,
[data-theme="dark"] .public-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .footer,
[data-theme="dark"] footer{
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
}
[data-theme="dark"] .public-shell,
[data-theme="dark"] .marketing,
[data-theme="dark"] main{ color:var(--text); }

/* ---------- 8. Chrome shells that use literal colours ---------- */
[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color:var(--line);
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .sidebar-footer{ border-color:var(--line); }
[data-theme="dark"] .menu-label{ color:var(--muted); }
[data-theme="dark"] .menu-item > a,
[data-theme="dark"] .submenu-toggle{ color:var(--text); }
[data-theme="dark"] .menu-item > a:hover,
[data-theme="dark"] .submenu-toggle:hover{ background:var(--surface-2); }
[data-theme="dark"] .menu-icon{ background:var(--surface-2); }
[data-theme="dark"] .submenu a{ color:var(--muted); }

/* Generic topbar (glass) */
[data-theme="dark"] .topbar{
  background:rgba(14,23,38,.92);
  border-bottom-color:var(--line);
}
/* Dashboard hero topbar — keep brand identity but dim it right down */
[data-theme="dark"] body.dashboard-page .topbar{
  background:linear-gradient(135deg, #14315d 0%, #0c1f3d 100%);
  border-bottom-color:var(--line);
}
[data-theme="dark"] body.dashboard-page .page-heading h1,
[data-theme="dark"] body.dashboard-page .page-heading p{ color:#eaf1ff; }

/* Welcome / promo banners */
[data-theme="dark"] .welcome-banner{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color:var(--line);
}
[data-theme="dark"] .banner-text h2{ color:var(--text); }
[data-theme="dark"] .banner-text p{ color:var(--muted); }
[data-theme="dark"] .banner-text .eyebrow{ background:var(--surface-2); color:var(--primary); }

/* Dropdown panels / toasts */
[data-theme="dark"] .dashboard-toast{ background:#0e1726; color:var(--text); border:1px solid var(--line); }
[data-theme="dark"] .topbar-menu-item:hover,
[data-theme="dark"] .dropdown-action:hover,
[data-theme="dark"] .notification-item:hover{ background:var(--surface-2); }
[data-theme="dark"] .topbar-menu-item small,
[data-theme="dark"] .notification-item small{ color:var(--muted); }

/* Status chips keep their accent but on darker fills */
[data-theme="dark"] .status.draft{ background:#1f2937; color:#cbd5e1; }

/* Dashboard quick-action tiles (were light #f8fbff with now-invisible text) */
[data-theme="dark"] .action-tile{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text);
}
[data-theme="dark"] .action-tile:hover{
  background:var(--surface);
  border-color:#2c3c57;
}
[data-theme="dark"] .action-tile strong{ color:var(--text); }
[data-theme="dark"] .action-tile small{ color:var(--muted); }
[data-theme="dark"] .action-icon{ background:var(--surface); color:var(--primary); }
/* The primary tile + its text stay blue/white */
[data-theme="dark"] .action-tile.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
[data-theme="dark"] .action-tile.primary strong,
[data-theme="dark"] .action-tile.primary small{ color:#fff; }
[data-theme="dark"] .action-tile.primary .action-icon{ background:rgba(255,255,255,.16); color:#fff; }

/* Stat / metric cards and their inner text */
[data-theme="dark"] .stat-card strong,
[data-theme="dark"] .stat-card h3,
[data-theme="dark"] .mini-card strong,
[data-theme="dark"] .compact-panel strong{ color:var(--text); }
[data-theme="dark"] .stat-card small,
[data-theme="dark"] .stat-card span,
[data-theme="dark"] .mini-card small{ color:var(--muted); }

/* ---------- 7. Floating toggle button (injected by theme.js) ---------- */
.tws-theme-toggle{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:2147483000;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.35);
  background:#ffffff;
  color:#0f172a;
  font-size:17px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.tws-theme-toggle:hover{ transform:translateY(-2px); }
[data-theme="dark"] .tws-theme-toggle{
  background:#1b2740;
  color:#ffd66b;
  border-color:rgba(148,163,184,.25);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
@media print{ .tws-theme-toggle{ display:none !important; } }