/* AiNemix Portal – Theme System v2.0
   Dark:  body.kmportal-dark  (default, applied via JS on load)
   Light: no class needed — portal.css base styles = light theme
   Content: layout improvements apply to both modes
*/

/* ═══ CONTENT LAYOUT — both modes ═══════════════════════════════════════════ */

/* Remove double wrapper gap — tools get full card width */
.kmportal-main > .kmportal-card:first-child { margin-top: 0; }

/* Tool content: use full width, no artificial max-width from shell */
.kmportal-main { padding: 0 2px; }

/* Remove max-width caps from tool root elements so they fill the panel */
.imf-wrap,
.kmveh-root,
.km-bauradar-root,
#kmBrRoot,
.km-briefing-root,
.km-leads-root,
.km-social-root,
.km-rag-root,
.km-stacking-root,
.km-voice-root,
.km-account-root { max-width: none !important; width: 100% !important; }

/* Stat grids: use auto-fill so cards spread across full width */
.imf-stats {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
.kmveh-kpis {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}

/* Card padding: slightly more breathing room */
.kmportal-card { padding: 20px 22px !important; }

/* Shell gap: tighter on wide screens so tools get more room */
.kmportal-shell { gap: 14px !important; }

/* Sidebar slightly narrower — more space for content */
.kmportal-shell { grid-template-columns: 262px minmax(0, 1fr) !important; }
.kmportal-shell.nav-collapsed { grid-template-columns: 66px minmax(0, 1fr) !important; }

/* ═══ DARK THEME — body.kmportal-dark ═══════════════════════════════════════ */

body.kmportal-dark,
body.kmportal-dark.kmportal-body {
  background: #050c1c !important;
  color: #e2e8f0 !important;
}

body.kmportal-dark .kmportal-shell {
  color: #e2e8f0 !important;
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  margin: 10px auto !important;
  padding: 0 !important;
}

body.kmportal-dark .kmportal-nav {
  background: rgba(5, 12, 28, 0.88) !important;
  border-color: rgba(72, 163, 255, 0.15) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.kmportal-dark .kmportal-brand {
  background: linear-gradient(135deg, rgba(72,163,255,.10), rgba(14,34,84,.25)) !important;
  border-color: rgba(72, 163, 255, 0.13) !important;
}

body.kmportal-dark .kmportal-brand-title { color: #e2e8f0 !important; }
body.kmportal-dark .kmportal-brand-sub   { color: rgba(148,163,184,.75) !important; }

body.kmportal-dark .kmportal-nav-links {
  scrollbar-color: rgba(72,163,255,.22) transparent !important;
}
body.kmportal-dark .kmportal-nav-links::-webkit-scrollbar-thumb {
  background: rgba(72,163,255,.22) !important;
}

body.kmportal-dark .kmportal-nav-link { color: rgba(148,163,184,.85) !important; }
body.kmportal-dark .kmportal-nav-link:hover {
  background: rgba(72,163,255,.09) !important;
  border-color: rgba(72,163,255,.24) !important;
  color: #e2e8f0 !important;
}
body.kmportal-dark .kmportal-nav-link.is-active {
  background: linear-gradient(135deg, rgba(72,163,255,.20), rgba(29,78,216,.12)) !important;
  border-color: rgba(72,163,255,.42) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(72,163,255,.15) !important;
}
body.kmportal-dark .kmportal-ico  { color: inherit !important; }
body.kmportal-dark .kmportal-nav-name { color: inherit !important; }

body.kmportal-dark .kmportal-nav-footer {
  background: rgba(5,12,28,.60) !important;
  border-color: rgba(72,163,255,.10) !important;
}
body.kmportal-dark .kmportal-user-name { color: rgba(148,163,184,.80) !important; }
body.kmportal-dark .kmportal-logout    { color: #f87171 !important; }

body.kmportal-dark .kmportal-nav-toggle-wrap {
  border-color: rgba(72,163,255,.09) !important;
}
body.kmportal-dark .kmportal-nav-toggle {
  background: rgba(72,163,255,.05) !important;
  border-color: rgba(72,163,255,.13) !important;
  color: rgba(148,163,184,.50) !important;
}
body.kmportal-dark .kmportal-nav-toggle:hover {
  background: rgba(72,163,255,.11) !important;
  border-color: rgba(72,163,255,.34) !important;
  color: #48a3ff !important;
}

body.kmportal-dark .kmportal-card,
body.kmportal-dark .kmportal-panel {
  background: rgba(6,14,36,.84) !important;
  border-color: rgba(72,163,255,.13) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #e2e8f0 !important;
}

body.kmportal-dark .kmportal-table-wrap { border-color: rgba(72,163,255,.11) !important; }
body.kmportal-dark .kmportal-table th {
  background: rgba(5,12,28,.96) !important;
  color: rgba(148,163,184,.80) !important;
  border-color: rgba(72,163,255,.09) !important;
}
body.kmportal-dark .kmportal-table td {
  border-color: rgba(72,163,255,.07) !important;
  color: #e2e8f0 !important;
}

body.kmportal-dark .kmportal-pill            { border-color: rgba(72,163,255,.18) !important; color: #94a3b8 !important; }
body.kmportal-dark .kmportal-pill.sent        { border-color: rgba(16,185,129,.35) !important; color: #6ee7b7 !important; }
body.kmportal-dark .kmportal-pill.error       { border-color: rgba(239,68,68,.35) !important;  color: #fca5a5 !important; }
body.kmportal-dark .kmportal-pill.draft       { border-color: rgba(72,163,255,.35) !important; color: #93c5fd !important; }

body.kmportal-dark .kmportal-btn {
  background: rgba(6,14,36,.75) !important;
  border-color: rgba(72,163,255,.24) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.30) !important;
}
body.kmportal-dark .km-btn {
  background: rgba(6,14,36,.72) !important;
  border-color: rgba(72,163,255,.22) !important;
  color: #e2e8f0 !important;
}
body.kmportal-dark .km-btnPrimary {
  background: linear-gradient(135deg, #0e2254, #1d4ed8) !important;
  border-color: rgba(72,163,255,.45) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(29,78,216,.30) !important;
}

body.kmportal-dark .kmportal-map    { border-color: rgba(72,163,255,.16) !important; }
body.kmportal-dark .kmportal-inlineRange {
  background: rgba(6,14,36,.70) !important;
  border-color: rgba(72,163,255,.18) !important;
  color: #e2e8f0 !important;
}
body.kmportal-dark .kmportal-muted  { color: rgba(148,163,184,.65) !important; }

/* ── Dark canvas background ── */
body.kmportal-dark #ainx-bgfx-canvas { opacity: 1 !important; }
body:not(.kmportal-dark) #ainx-bgfx-canvas { opacity: 0 !important; pointer-events: none !important; }

/* ── Theme toggle button ── */
#km-theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgba(12,23,64,.18);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  font-size: 12px; font-weight: 800; color: rgba(12,23,64,.65);
  transition: all .18s; white-space: nowrap;
}
#km-theme-toggle:hover {
  background: rgba(12,23,64,.06);
  border-color: rgba(12,23,64,.30);
}
body.kmportal-dark #km-theme-toggle {
  border-color: rgba(72,163,255,.25) !important;
  color: rgba(148,163,184,.80) !important;
  background: rgba(72,163,255,.05) !important;
}
body.kmportal-dark #km-theme-toggle:hover {
  background: rgba(72,163,255,.12) !important;
  border-color: rgba(72,163,255,.40) !important;
  color: #e2e8f0 !important;
}

@media (max-width: 980px) {
  .kmportal-shell {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }
}