/* ════════════════════════════════════════════════════════════
   Global Dark Mode — all pages (non-newhome)
   Activated via body.dark-mode class
   Injected by server.js injectDarkModeAssets()
   ════════════════════════════════════════════════════════════ */

/* ── CSS Color Token System ─────────────────────────────── */
:root {
  --dm-bg:        #ffffff;
  --dm-bg-card:   #f5f5f5;
  --dm-bg-input:  #ffffff;
  --dm-bg-header: rgba(255, 255, 255, 0.92);
  --dm-text:      #111111;
  --dm-text-muted:#555b6e;
  --dm-border:    #e0e0e0;
  --dm-shadow:    rgba(0, 0, 0, 0.08);
  --dm-btn-sec-bg:#f3f4f6;
  --dm-btn-sec-text:#111111;
  --dm-btn-sec-border:#d1d5db;
  --dm-icon:      inherit;
  --dm-hover-card:#ebebeb;
  --dm-table-head:#f9fafb;
  --dm-brand-red: #bb1226;
}

body.dark-mode {
  --dm-bg:        #0f0f0f;
  --dm-bg-card:   #1e1e1e;
  --dm-bg-input:  #1a1a1a;
  --dm-bg-header: rgba(18, 18, 18, 0.96);
  --dm-text:      #ffffff;
  --dm-text-muted:#bbbbbb;
  --dm-border:    #2a2a2a;
  --dm-shadow:    rgba(0, 0, 0, 0.5);
  --dm-btn-sec-bg:#2a2a2a;
  --dm-btn-sec-text:#ffffff;
  --dm-btn-sec-border:#444444;
  --dm-icon:      #e8eaf0;
  --dm-hover-card:#2a2a2a;
  --dm-table-head:#121212;
  --dm-brand-red: #ff2a2a;
}

/* ── Smooth transitions on key elements ────────────────── */
body,
header,
aside,
nav,
main,
footer,
section,
article,
.card,
a,
input,
select,
textarea,
table,
th,
td,
button,
label,
.dark-mode-toggle-global {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── Body / root background ────────────────────────────── */
body.dark-mode {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Main app layout (index.html) ──────────────────────── */
body.dark-mode #app-container {
  background-image: radial-gradient(circle at 10% 20%, #1a1a1a 0%, #111111 90%) !important;
}

body.dark-mode #main-view {
  background-color: var(--dm-bg) !important;
}

/* ── Top header bar ────────────────────────────────────── */
body.dark-mode header,
body.dark-mode .bg-white\/90 {
  background-color: var(--dm-bg-header) !important;
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode header h2,
body.dark-mode header .text-gray-800 {
  color: #f0f2f7 !important;
}

body.dark-mode header .text-gray-600,
body.dark-mode header .text-gray-500 {
  color: var(--dm-text-muted) !important;
}

body.dark-mode header .hover\:text-brand-600:hover {
  color: var(--dm-brand-red) !important;
}

/* ── Icon visibility (FontAwesome only — avoid breaking multi-color SVGs) */
body.dark-mode .text-gray-500 i,
body.dark-mode .text-gray-600 i,
body.dark-mode .text-slate-400 i,
body.dark-mode .text-slate-500 i {
  color: var(--dm-text-muted);
}

/* ── Tailwind white/light backgrounds → dark ───────────── */
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-slate-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-slate-100,
body.dark-mode .bg-gray-200,
body.dark-mode .bg-slate-200,
body.dark-mode .bg-white\/90,
body.dark-mode .bg-slate-50\/50 {
  background-color: var(--dm-bg-card) !important;
}

/* ── Cards and panels ──────────────────────────────────── */
body.dark-mode .card,
body.dark-mode [class*="rounded-xl"],
body.dark-mode [class*="rounded-2xl"],
body.dark-mode [class*="rounded-lg"] {
  background-color: var(--dm-bg-card);
  border-color: var(--dm-border);
}

body.dark-mode .card:hover,
body.dark-mode [class*="rounded-xl"]:hover,
body.dark-mode [class*="rounded-lg"]:hover {
  background-color: var(--dm-hover-card);
}

/* ── Shadows ───────────────────────────────────────────── */
body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-xl {
  box-shadow: 0 2px 12px var(--dm-shadow) !important;
}

/* ── Text — headings ───────────────────────────────────── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700,
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-700 {
  color: #f0f2f7 !important;
}

/* ── Text — muted/secondary ────────────────────────────── */
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400,
body.dark-mode .text-slate-600,
body.dark-mode .text-slate-500,
body.dark-mode .text-slate-400,
body.dark-mode .text-muted {
  color: var(--dm-text-muted) !important;
}

body.dark-mode p {
  color: #cccccc;
}

body.dark-mode label {
  color: #d4d8e0 !important;
}

/* ── Borders ───────────────────────────────────────────── */
body.dark-mode .border,
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-slate-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-gray-300 {
  border-color: var(--dm-border) !important;
}

/* ── Buttons — primary (red brand, stays visible) ──────── */
body.dark-mode .bg-primary,
body.dark-mode [class*="bg-primary"],
body.dark-mode button.bg-primary,
body.dark-mode a.bg-primary {
  background-color: var(--dm-brand-red) !important;
  color: #ffffff !important;
}

/* ── Buttons — secondary / outline ─────────────────────── */
body.dark-mode .btn-secondary,
body.dark-mode button:not([class*="bg-"]):not(.dark-mode-toggle-global):not([class*="bg-primary"]):not([class*="bg-red"]):not([class*="bg-brand"]),
body.dark-mode .border-gray-200.hover\:border-primary {
  background-color: var(--dm-btn-sec-bg) !important;
  color: var(--dm-btn-sec-text) !important;
  border-color: var(--dm-btn-sec-border) !important;
}

body.dark-mode button:hover:not([class*="bg-primary"]):not([class*="bg-red"]):not([class*="bg-brand"]):not(.dark-mode-toggle-global) {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

/* ── Keep explicitly dark buttons (slate-800) dark ─────── */
body.dark-mode .bg-slate-800,
body.dark-mode button.bg-slate-800 {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #444 !important;
}

body.dark-mode .bg-slate-800:hover,
body.dark-mode button.bg-slate-800:hover {
  background-color: #252525 !important;
}

/* ── Form inputs ───────────────────────────────────────── */
body.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text) !important;
  border-color: #3a3a3a !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #666c7a !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--dm-brand-red) !important;
  box-shadow: 0 0 0 3px rgba(187, 18, 38, 0.2) !important;
}

body.dark-mode select option {
  background-color: var(--dm-bg-input);
  color: var(--dm-text);
}

/* ── Tables ────────────────────────────────────────────── */
body.dark-mode table {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
}

body.dark-mode th,
body.dark-mode thead tr {
  background-color: var(--dm-table-head) !important;
  color: #f0f2f7 !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode td {
  border-color: var(--dm-border) !important;
  color: #cccccc !important;
}

body.dark-mode tbody tr:hover td,
body.dark-mode tr:hover {
  background-color: var(--dm-hover-card) !important;
}

/* ── Modals / dialogs ──────────────────────────────────── */
body.dark-mode [id$="-modal"],
body.dark-mode [role="dialog"],
body.dark-mode .modal-content,
body.dark-mode .modal-backdrop + div {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ── Login page specifics ──────────────────────────────── */
body.dark-mode.bg-gray-50 {
  background-color: var(--dm-bg) !important;
}

body.dark-mode .max-w-md,
body.dark-mode .max-w-lg,
body.dark-mode .max-w-xl {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .rounded-2xl.shadow-xl.bg-white,
body.dark-mode .rounded-2xl.shadow-xl {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
}

/* ── Login page: demo buttons ──────────────────────────── */
body.dark-mode .border-gray-200.rounded-lg:not(.bg-primary) {
  background-color: var(--dm-bg-input) !important;
  border-color: #3a3a3a !important;
  color: var(--dm-text) !important;
}

body.dark-mode .border-gray-200.rounded-lg:hover {
  background-color: var(--dm-hover-card) !important;
}

/* ── Finance page elements ─────────────────────────────── */
body.dark-mode .stat-card,
body.dark-mode [class*="stat-card"] {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .stat-card:hover,
body.dark-mode [class*="stat-card"]:hover {
  background-color: var(--dm-hover-card) !important;
}

/* Override brand-theme.css light enforcement in dark mode.
   Note: .bg-slate-800 is intentionally handled separately below
   (kept dark for the role-switcher button, not promoted to card-level). */
body.dark-mode .bg-slate-900,
body.dark-mode .bg-slate-700,
body.dark-mode .bg-zinc-900,
body.dark-mode .bg-zinc-800,
body.dark-mode .bg-zinc-700,
body.dark-mode .bg-gray-900,
body.dark-mode .bg-gray-800,
body.dark-mode .bg-gray-700 {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ── Navbar ────────────────────────────────────────────── */
body.dark-mode nav,
body.dark-mode .navbar {
  background-color: #121212 !important;
}

/* ── Scrollbar ─────────────────────────────────────────── */
body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* ── Global dark mode toggle button (floating) ─────────── */
.dark-mode-toggle-global {
  position: fixed;
  bottom: 80px;
  left: 16px;
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #d0d4de;
  background: #ffffff;
  color: #171a20;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.dark-mode-toggle-global:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

body.dark-mode .dark-mode-toggle-global {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #f0f2f7;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dark-mode-toggle-global:hover {
  background: #2a2a2a;
}

/* ── Tenant badge (main app header) ─────────────────────── */
body.dark-mode #tenant-badge {
  background-color: var(--dm-bg-card) !important;
  border-color: #3a3a3a !important;
}

body.dark-mode #tenant-id-display {
  color: var(--dm-text-muted) !important;
}

/* ── Role menu dropdown ────────────────────────────────── */
body.dark-mode #role-menu {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ── Sidebar nav items ─────────────────────────────────── */
body.dark-mode #nav-menu a,
body.dark-mode #nav-menu button {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode #nav-menu a:hover,
body.dark-mode #nav-menu button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Watermark ─────────────────────────────────────────── */
body.dark-mode .text-slate-300 {
  color: #2a2a2a !important;
}