/* Navitas Dashboard — light/dark theme layer.
   The page markup uses inline styles for colors (not CSS classes), so this
   file overrides those inline colors via attribute-value selectors when
   [data-theme="dark"] is set on <html>. Toggled by public/js/theme-toggle.js.
   Applies on top of the existing desktop layout AND the mobile.css layer. */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell {
  background: #14181F !important;
  color: #E7E9EC !important;
}

/* Page background behind cards */
html[data-theme="dark"] main[style*="background:#F3F4F6"],
html[data-theme="dark"] [style*="background:#F3F4F6"] { background: #14181F !important; }
html[data-theme="dark"] [style*="background:#EEF0F2"] { background: #1B212B !important; }
html[data-theme="dark"] [style*="background:#F7F8F9"] { background: #1B212B !important; }
html[data-theme="dark"] [style*="background:#F1F2F4"] { background: #1B212B !important; }
html[data-theme="dark"] [style*="background:#F6F7F8"] { background: #232A35 !important; }
html[data-theme="dark"] [style*="background:#FAFBFC"] { background: #1E2530 !important; }

/* Cards / panels / header / sidebar / aside */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background: #1B212B !important; }
html[data-theme="dark"] header,
html[data-theme="dark"] aside.navitas-sidebar,
html[data-theme="dark"] .navitas-mobile-nav,
html[data-theme="dark"] .navitas-bottom-bar { background: #1B212B !important; border-color: #2B3341 !important; }

/* Borders */
html[data-theme="dark"] [style*="border:1px solid #ECEEF1"],
html[data-theme="dark"] [style*="border-top:1px solid #ECEEF1"],
html[data-theme="dark"] [style*="border-right:1px solid #ECEEF1"],
html[data-theme="dark"] [style*="border-bottom:1px solid #ECEEF1"],
html[data-theme="dark"] [style*="border:1px solid #E3E6EA"] { border-color: #2B3341 !important; }

/* Body / muted text */
html[data-theme="dark"] [style*="color:#1B1F24"] { color: #F0F2F5 !important; }
html[data-theme="dark"] [style*="color:#5A606A"] { color: #A9B0BC !important; }
html[data-theme="dark"] [style*="color:#8A9099"] { color: #9299A6 !important; }
html[data-theme="dark"] [style*="color:#3A3F47"] { color: #C7CCD3 !important; }

/* Brand blue stays legible in both themes; lighten background tints */
html[data-theme="dark"] [style*="background:#E8EFF9"] { background: #1E3555 !important; }
html[data-theme="dark"] [style*="background:#EEF3FA"] { background: #1E3555 !important; }
html[data-theme="dark"] [style*="background:#F3F6FB"] { background: #1E3555 !important; }
html[data-theme="dark"] [style*="color:#0B3670"] { color: #9DC0F2 !important; }

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1B212B !important;
  color: #F0F2F5 !important;
  border-color: #2B3341 !important;
}

/* Scrollbars */
html[data-theme="dark"] { color-scheme: dark; }

/* Modals (sender-deals drill-down, etc.) */
html[data-theme="dark"] #sender-deals-modal > div { background: #1B212B !important; }
html[data-theme="dark"] #sender-deals-body [style*="border-bottom:1px solid #ECEEF1"] { border-color: #2B3341 !important; }
html[data-theme="dark"] #ai-panel { background: #1B212B !important; border-color: #2B3341 !important; }
html[data-theme="dark"] #ai-messages [style*="background:#F1F2F4"] { background: #232A35 !important; color: #E7E9EC !important; }

/* Theme toggle button */
.navitas-theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #E3E6EA; background: #fff; color: #3A3F47;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent;
}
.navitas-theme-toggle:active { transform: scale(0.94); }
html[data-theme="dark"] .navitas-theme-toggle { background: #1B212B !important; border-color: #2B3341 !important; color: #E7E9EC !important; }
.navitas-theme-toggle .moon-icon { display: none; }
html[data-theme="dark"] .navitas-theme-toggle .sun-icon { display: none; }
html[data-theme="dark"] .navitas-theme-toggle .moon-icon { display: block; }


/* QC B1 overflow guard — desktop soft; do NOT clip html/body globally */
@media (min-width: 1024px) {
  body > div.app-shell { max-width: 100%; }
}
/* do NOT set html,body overflow-x:hidden globally — clips desktop UI */