/* ──────────────────────────────────────────────────────────────────────────
   Eden dark mode.

   Every Eden template builds on the same CSS variables, so dark mode is mostly
   a matter of redefining them on <html data-theme="dark">. Bootstrap's own dark
   mode is switched on at the same time (data-bs-theme="dark"), which covers its
   cards, tables, dropdowns and form controls.

   One wrinkle: --forest is used both as a surface (sidebar, buttons) and as a
   text colour (headings). Dark green text on a dark page is unreadable, so in
   dark mode --forest becomes a light green for text, and the surfaces that
   relied on it are given their own dark greens below.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --forest: #7ec99b;          /* text/accent — light enough to read on dark */
  --forest-md: #5fae7f;
  --forest-lt: #9adcb4;
  --amber: #d9a44f;
  --amber-lt: #f0d49a;

  --parch: #161713;
  --parchment: #161713;
  --paper: #1e201a;
  --ink: #f2efe6;
  --muted: #a8a293;
  --ink-muted: #a8a293;
  --border: #33362c;
  --border-lt: #262922;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow: 0 4px 16px rgba(0,0,0,.5);

  /* Eden's dark greens, used where --forest was a background in light mode. */
  --surface-deep: #101a13;
  --surface-green: #16412a;
  color-scheme: dark;
}

/* ── Page and shell ─────────────────────────────────────────────────────── */
html[data-theme="dark"] body { background: var(--parch); color: var(--ink); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .nav-wrap { background: var(--surface-deep); border-color: var(--border); }
/* The sidebar keeps a dark panel in dark mode. !important is needed because
   --forest becomes a light green for text, and because Bootstrap's responsive
   offcanvas forces its own background on the suite sidebar. */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar.offcanvas-lg { background: var(--surface-deep) !important; border-right: 1px solid var(--border); }
html[data-theme="dark"] .main, html[data-theme="dark"] main { background: var(--parch); }

/* ── Cards and panels ───────────────────────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .device,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .ws-row,
html[data-theme="dark"] .manual-wrap .manual-body,
html[data-theme="dark"] .table-wrap { background: var(--paper); border-color: var(--border); color: var(--ink); }
html[data-theme="dark"] .card-hdr { border-color: var(--border); }

/* Bootstrap surfaces that carry their own light colours. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background: var(--paper) !important; color: var(--ink) !important; }
html[data-theme="dark"] .text-dark { color: var(--ink) !important; }
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom { border-color: var(--border) !important; }

/* ── Buttons that used --forest as a background ─────────────────────────── */
html[data-theme="dark"] .btn-p,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-hero-primary,
html[data-theme="dark"] .btn-install,
html[data-theme="dark"] .btn-n.btn-dark { background: var(--surface-green); border-color: var(--surface-green); color: #fff; }
html[data-theme="dark"] .btn-p:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-success:hover { background: #1d5637; border-color: #1d5637; color: #fff; }
html[data-theme="dark"] .btn-o,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-hero-ghost { color: var(--ink); border-color: var(--border); background: transparent; }
html[data-theme="dark"] .btn-o:hover { background: var(--border-lt); color: var(--ink); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .tbl th,
html[data-theme="dark"] .ws-table th,
html[data-theme="dark"] table.table th { color: var(--muted); border-color: var(--border); background: transparent; }
html[data-theme="dark"] .tbl td,
html[data-theme="dark"] .ws-table td,
html[data-theme="dark"] table.table td { border-color: var(--border); color: var(--ink); }
html[data-theme="dark"] .tbl tbody tr:hover { background: rgba(255,255,255,.03); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"] {
  background: #14160f; color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .form-control::placeholder { color: #7d776a; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background: #14160f; color: var(--ink); border-color: var(--forest-md); box-shadow: 0 0 0 .2rem rgba(126,201,155,.15); }

/* ── Suite components (chips, stats, status pills, heat map) ────────────── */
html[data-theme="dark"] .chip,
html[data-theme="dark"] .stat-icon { background: var(--surface-green); color: #dff0e5; }
html[data-theme="dark"] .stat-icon.lt { background: var(--border-lt); color: var(--forest-lt); }
html[data-theme="dark"] .stat-icon.amber { background: #5a4218; color: var(--amber-lt); }
html[data-theme="dark"] .sb-good { background: #14351f; color: #8fd8a6; }
html[data-theme="dark"] .sb-warn { background: #40341a; color: #e8c383; }
html[data-theme="dark"] .sb-bad  { background: #45211f; color: #f0a5a0; }
html[data-theme="dark"] .sb-neutral { background: var(--border-lt); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .bar, html[data-theme="dark"] .ws-bar { background: var(--border-lt); border-color: var(--border); }
html[data-theme="dark"] .heat .low { background: #17371f; color: #8fd8a6; }
html[data-theme="dark"] .heat .medium { background: #40341a; color: #e8c383; }
html[data-theme="dark"] .heat .high { background: #4b2d17; color: #f0b98a; }
html[data-theme="dark"] .heat .extreme { background: #45211f; color: #f0a5a0; }
html[data-theme="dark"] .caveat { background: #35290f; color: #e8c383; }
html[data-theme="dark"] .empty { color: var(--muted); }

/* ── Landing page ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .section-label { color: var(--amber); }
html[data-theme="dark"] .app-section,
html[data-theme="dark"] .how-section,
html[data-theme="dark"] .pricing-section { background: var(--border-lt); }
html[data-theme="dark"] .feat-icon { background: var(--surface-green); color: #dff0e5; }
html[data-theme="dark"] .feat-icon.lt { background: var(--border-lt); color: var(--forest-lt); }
html[data-theme="dark"] .feat-icon.amber { background: #5a4218; color: var(--amber-lt); }
html[data-theme="dark"] .feat-new { background: #4a3a14; color: var(--amber-lt); }

/* ── Manual ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .manual-shot img { border-color: var(--border); box-shadow: 0 3px 14px rgba(0,0,0,.5); }
html[data-theme="dark"] .callout { background: var(--border-lt); border-color: var(--border); color: var(--ink); }
html[data-theme="dark"] .callout.tip { background: #14351f; border-color: #235c39; }
html[data-theme="dark"] .callout.warn { background: #40341a; border-color: #6b5420; }
html[data-theme="dark"] .toc a { color: var(--muted); }
html[data-theme="dark"] .toc a:hover, html[data-theme="dark"] .toc a.active { color: var(--forest-lt); }
html[data-theme="dark"] code, html[data-theme="dark"] kbd { background: var(--border-lt); color: var(--forest-lt); }

/* ── Topbar controls: language and appearance ───────────────────────────
   One pill shape for both, sized to match the user chip beside them. The
   Bootstrap caret is suppressed: the button draws its own chevron, and the
   default one made the language button look like an unstyled select box.
   ────────────────────────────────────────────────────────────────────── */
.eden-lang-btn, .eden-theme-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  height: 32px; border-radius: 16px; font-size: .78rem; line-height: 1;
  font-family: 'DM Sans', system-ui, sans-serif; white-space: nowrap; flex: 0 0 auto;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.eden-theme-btn { width: 32px; padding: 0; font-size: .95rem; }
.eden-lang-btn { padding: 0 .55rem 0 .6rem; }
.eden-lang-btn.dropdown-toggle::after { display: none !important; }
.eden-lang-btn .bi-globe2 { font-size: .9rem; opacity: .75; }
.eden-lang-btn .eden-lang-code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .04em; font-weight: 500; }
.eden-lang-btn .eden-lang-caret { font-size: .55rem; opacity: .5; }

/* On a light bar (main app topbar, landing nav, sign-in). */
.eden-lang-light, .eden-theme-light { color: #1a1208; border: 1px solid #e2d9cc; background: #fff; }
.eden-lang-light:hover, .eden-theme-light:hover { background: #f6f3ee; border-color: #c9bfae; }
/* On a dark bar (suite portal topbar). */
.eden-lang-dark, .eden-theme-dark { color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.eden-lang-dark:hover, .eden-theme-dark:hover { background: rgba(255,255,255,.16); color: #fff; }
.eden-lang-btn:focus-visible, .eden-theme-btn:focus-visible { outline: 2px solid var(--amber, #c4903c); outline-offset: 2px; }

/* In dark mode a "light" bar is dark, so the light variant follows it. */
html[data-theme="dark"] .eden-lang-light, html[data-theme="dark"] .eden-theme-light {
  color: var(--ink); background: var(--border-lt); border-color: var(--border);
}
html[data-theme="dark"] .eden-lang-light:hover, html[data-theme="dark"] .eden-theme-light:hover {
  background: #2b2e25; border-color: #444737;
}

.eden-lang-menu { min-width: 172px; font-size: .85rem; padding: .3rem; }
.eden-lang-menu .dropdown-item { border-radius: 6px; cursor: pointer; border: none; background: none; width: 100%; text-align: inherit; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.eden-lang-menu .dropdown-item.active { background: #0d3320; color: #fff; }
html[data-theme="dark"] .eden-lang-menu .dropdown-item.active { background: var(--surface-green); }

/* The bar itself never wraps or scrolls sideways. */
.topbar { flex-wrap: nowrap; overflow: visible; }
.topbar > * { min-width: 0; }
.topbar-brand, .topbar-user, .eden-lang, .eden-theme-btn, .topbar-menu { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .topbar { gap: .45rem !important; padding: 0 .7rem !important; }
  .topbar-brand { font-size: 1rem; }
  .topbar-brand .role-chip { display: none; }
}

/* Narrow phones: the globe alone is enough, and nothing may wrap the bar. */
@media (max-width: 420px) {
  .eden-lang-btn { padding: 0; width: 32px; gap: 0; }
  .eden-lang-btn .eden-lang-code, .eden-lang-btn .eden-lang-caret { display: none; }
}

/* Screenshots and print stay light: printed pages are read on paper. */
@media print {
  html[data-theme="dark"] { --parch: #fff; --parchment: #fff; --paper: #fff; --ink: #1a1208;
                            --muted: #6b5d4f; --border: #e2d9cc; --forest: #0d3320; }
  html[data-theme="dark"] body { background: #fff; color: #1a1208; }
  .eden-theme-btn { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html.theme-ready body, html.theme-ready .card, html.theme-ready .sidebar, html.theme-ready .topbar {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark mode, round two: the places where --forest was a *background*.
   Turning that variable into a light green (so headings stay readable) left
   these elements pale green with white text on them. Each gets its own dark
   surface instead.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .topnav,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .panel-left,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .how-section,
html[data-theme="dark"] #mobileNav .offcanvas-header,
html[data-theme="dark"] .offcanvas-header { background: var(--surface-deep) !important; color: var(--ink); }
html[data-theme="dark"] .topnav { border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .topnav.scrolled { background: var(--surface-deep) !important; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
html[data-theme="dark"] .nav-brand { color: var(--ink); }
html[data-theme="dark"] .nav-links a { color: var(--muted); }
html[data-theme="dark"] .nav-links a:hover { color: var(--forest-lt); background: rgba(255,255,255,.06); }
html[data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--border); }
html[data-theme="dark"] .btn-ghost:hover { border-color: var(--forest-md); color: var(--forest-lt); }
html[data-theme="dark"] footer a, html[data-theme="dark"] .footer a { color: var(--muted) !important; }
html[data-theme="dark"] footer strong { color: var(--ink); }

/* Round icons, avatars and progress bars that were solid forest. */
html[data-theme="dark"] .user-avatar,
html[data-theme="dark"] .uavatar,
html[data-theme="dark"] .topbar-avatar,
html[data-theme="dark"] .stat-icon-box,
html[data-theme="dark"] .feat-icon,
html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .btn-eden,
html[data-theme="dark"] .btn-solid,
html[data-theme="dark"] .btn-cta-primary,
html[data-theme="dark"] .btn-plan,
html[data-theme="dark"] .btn-submit { background: var(--surface-green) !important; border-color: var(--surface-green) !important; color: #eaf6ee !important; }
html[data-theme="dark"] .btn-eden:hover,
html[data-theme="dark"] .btn-solid:hover,
html[data-theme="dark"] .btn-cta-primary:hover,
html[data-theme="dark"] .btn-plan:hover,
html[data-theme="dark"] .btn-submit:hover { background: #1d5637 !important; color: #fff !important; }
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-outline-primary:hover { background: var(--surface-green) !important; border-color: var(--surface-green) !important; color: #eaf6ee !important; }

/* ── Forms: every control, label and helper ─────────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
  background-color: #14160f !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .input-group-text { color: var(--muted) !important; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7d776a !important; opacity: 1; }
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] legend { color: var(--ink); }
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] small.text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] input:disabled { background-color: #1b1d16 !important; color: #8c8677 !important; }
html[data-theme="dark"] .form-check-input { background-color: #14160f; border-color: var(--border); }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--forest-md); border-color: var(--forest-md); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus {
  border-color: var(--forest-md) !important;
  box-shadow: 0 0 0 .2rem rgba(126,201,155,.18) !important;
}
/* Date and file pickers draw their own icons: keep them visible. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: var(--border-lt); color: var(--ink); border: 1px solid var(--border);
}
html[data-theme="dark"] .dropzone, html[data-theme="dark"] .upload-zone {
  background: #14160f; border-color: var(--border); color: var(--muted);
}
html[data-theme="dark"] fieldset, html[data-theme="dark"] .form-section,
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button {
  background: var(--paper); color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--border-lt); color: var(--forest-lt); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--paper); color: var(--forest-lt); border-color: var(--border) var(--border) var(--paper); }
html[data-theme="dark"] .alert-success { background: #14351f; color: #8fd8a6; border-color: #235c39; }
html[data-theme="dark"] .alert-warning { background: #40341a; color: #e8c383; border-color: #6b5420; }
html[data-theme="dark"] .alert-danger  { background: #45211f; color: #f0a5a0; border-color: #7c3330; }
html[data-theme="dark"] .alert-info    { background: #16303a; color: #96cfe0; border-color: #24596b; }

/* Drawer menus in dark mode. */
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] #mobileNav .nav-link { color: var(--ink); }
html[data-theme="dark"] #mobileNav .nav-link:hover,
html[data-theme="dark"] #mobileNav .nav-link.active { background: var(--border-lt); color: var(--forest-lt); }
html[data-theme="dark"] #mobileNav .sid-group-hdr { color: var(--muted); }