/* ─────────────────────────────────────────────────────────────
   AgenticBoard — Light theme overrides
   Active when <html> has class "light" (instead of "dark").
   Default (no .light) = dark theme, unchanged.
   ───────────────────────────────────────────────────────────── */

/* --- Backgrounds ------------------------------------------------ */
html.light .bg-slate-900   { background-color: #f8fafc; } /* page bg          */
html.light .bg-slate-800   { background-color: #ffffff; } /* sidebar / cards  */
html.light .bg-slate-800\/50  { background-color: rgba(241,245,249,.5); }
html.light .bg-slate-800\/95  { background-color: rgba(255,255,255,.95); }
html.light .bg-slate-700   { background-color: #e2e8f0; } /* active nav / btns*/
html.light .bg-slate-700\/50 { background-color: rgba(226,232,240,.5); }
html.light .bg-slate-600   { background-color: #cbd5e1; }
html.light .bg-slate-500   { background-color: #94a3b8; }

/* --- Text ------------------------------------------------------- */
html.light .text-slate-100 { color: #0f172a; }
html.light .text-slate-200 { color: #1e293b; }
html.light .text-slate-300 { color: #334155; }
html.light .text-slate-400 { color: #64748b; }
html.light .text-slate-500 { color: #94a3b8; }

/* --- Borders ---------------------------------------------------- */
html.light .border-slate-800    { border-color: #e2e8f0; }
html.light .border-slate-700    { border-color: #e2e8f0; }
html.light .border-slate-700\/15 { border-color: rgba(226,232,240,.15); }
html.light .border-slate-700\/50 { border-color: rgba(226,232,240,.5); }
html.light .border-slate-600    { border-color: #cbd5e1; }

/* --- Hover states ---------------------------------------------- */
html.light .hover\:bg-slate-700:hover     { background-color: #e2e8f0; }
html.light .hover\:bg-slate-700\/50:hover { background-color: rgba(226,232,240,.5); }
html.light .hover\:bg-slate-600:hover     { background-color: #cbd5e1; }
html.light .hover\:bg-slate-800\/50:hover { background-color: rgba(241,245,249,.5); }
html.light .hover\:bg-slate-500:hover     { background-color: #94a3b8; }
html.light .hover\:text-slate-100:hover   { color: #0f172a; }
html.light .hover\:text-slate-200:hover   { color: #1e293b; }

/* --- Scrollbar (overrides inline <style>) ---------------------- */
html.light ::-webkit-scrollbar-track { background: #e2e8f0; }
html.light ::-webkit-scrollbar-thumb { background: #94a3b8; }
html.light ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* --- EasyMDE editor (overrides inline <style>) ----------------- */
html.light .EasyMDEContainer { background: #ffffff; }
html.light .EasyMDEContainer .editor-toolbar { background: #f1f5f9; border-color: #cbd5e1; }
html.light .EasyMDEContainer .editor-toolbar button { color: #64748b; }
html.light .EasyMDEContainer .editor-toolbar button.active,
html.light .EasyMDEContainer .editor-toolbar button:hover { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
html.light .EasyMDEContainer .CodeMirror { background: #ffffff; border-color: #cbd5e1; color: #1e293b; }
html.light .EasyMDEContainer .CodeMirror-cursor { border-left-color: #6366f1; }
html.light .EasyMDEContainer .editor-preview { background: #f8fafc; color: #1e293b; }
html.light .EasyMDEContainer .editor-preview pre { background: #f1f5f9; }
html.light .EasyMDEContainer .CodeMirror-selected { background: #c7d2fe; }

/* --- Markdown content (overrides inline <style>) --------------- */
html.light .md-content code { background: #f1f5f9; }
html.light .md-content pre { background: #f8fafc; }
html.light .md-content blockquote { border-left-color: #cbd5e1; color: #64748b; }
html.light .md-content a { color: #4f46e5; }
html.light .md-content th,
html.light .md-content td { border-color: #cbd5e1; }

/* ═════════════════════════════════════════════════════════════
   Dark theme — enhanced contrast
   Active when <html> has class "dark" (default).
   Makes the page background darker (near-black) so sidebar and
   cards stand out more, and strengthens border visibility.
   ═════════════════════════════════════════════════════════════ */

/* --- Backgrounds: page bg darker, surfaces stay slate-800 ------ */
html.dark .bg-slate-900      { background-color: #020617; } /* near-black page bg */
html.dark .bg-slate-800      { background-color: #111827; } /* deeper card gray  */
html.dark .bg-slate-800\/50  { background-color: rgba(17,24,39,.5); }

/* --- Borders: slightly brighter for more separation ------------ */
html.dark .border-slate-700    { border-color: #475569; } /* slate-600 */
html.dark .border-slate-700\/15 { border-color: rgba(71,85,105,.15); }
html.dark .border-slate-700\/50 { border-color: rgba(71,85,105,.5); }
html.dark .border-slate-800    { border-color: #334155; } /* slate-700 */

/* --- Scrollbar: match darker page bg --------------------------- */
html.dark ::-webkit-scrollbar-track { background: #020617; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* --- Message form: compact when not focused, expanded on focus --- */
.msg-compact .EasyMDEContainer { display: none !important; }
.msg-expanded .EasyMDEContainer .CodeMirror {
  min-height: 120px !important;
}