:root {
  --ore: #e67e22;
  --rock: #1b1f23;
  --rock-2: #2b3137;
  --page-bg: #f4f5f7;
}
[data-bs-theme="dark"] {
  --page-bg: #0f1216;
}
body { background: var(--page-bg); }

/* ============================================================
   LEFT SIDEBAR NAVIGATION
   Sidebar is the dark --rock shade in both light & dark themes.
   Static fixed column on lg+, off-canvas drawer below lg.
   ============================================================ */
:root { --sidebar-w: 240px; }

.app-nav { background: var(--rock); color: #cfd4d9; }
.app-brand { color: var(--ore) !important; }
.app-brand i { color: var(--ore); }

/* Mobile top bar */
.app-topbar { background: var(--rock); }
.app-topbar .app-burger { color: #fff; font-size: 1.4rem; line-height: 1; }
.app-topbar .app-burger:focus { box-shadow: none; }

/* Sidebar shell */
.app-sidebar { width: var(--sidebar-w); }
.app-sidebar.offcanvas-lg { color: #cfd4d9; }

/* On lg+, the offcanvas-lg renders as a static block in normal flow.
   Make it a fixed full-height left column. */
/* Persistent sidebar only on true desktops (xl+). Tablets/iPads (incl. landscape
   ~1024-1194px) use the off-canvas hamburger drawer so the menu is touch-friendly. */
@media (min-width: 1200px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 1030;
    overflow: hidden;
  }
}

/* ============================================================
   HORIZONTAL-OVERFLOW GUARDS
   Keep content within the viewport at any width. We use
   overflow-x:clip on the content wrapper (NOT html/body
   overflow-x:hidden, which would break position:sticky on the
   mobile .app-topbar / nested scrollers on iOS). min-width:0
   lets flex/grid children actually shrink.
   ============================================================ */
.app-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
.table-responsive { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
.overflow-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
   PERSISTENT SIDEBAR OFFSET + DESKTOP COLLAPSE (xl+)
   Placed AFTER the overflow guard so the calc width wins over
   .app-content { max-width:100% }. On xl+ the content sits to the
   right of the 240px fixed sidebar and is exactly viewport-minus-
   sidebar wide (no horizontal scroll). The collapse toggle hides
   the sidebar and reflows content full-width; state is persisted.
   ============================================================ */
.app-sidebar-collapse,            /* collapse chevron — desktop only */
.app-reopen { display: none; }    /* floating reopen — desktop+collapsed only */

.app-reopen {
  position: fixed; top: .5rem; left: .5rem; z-index: 1035;
  width: 2.4rem; height: 2.4rem; border-radius: 8px;
  color: #fff; font-size: 1.3rem; line-height: 1;
}
.app-sidebar-collapse { color: #cfd4d9; }
.app-sidebar-collapse:hover { color: #fff; }

@media (min-width: 1200px) {
  .app-content { margin-left: var(--sidebar-w); max-width: calc(100% - var(--sidebar-w)); }
  .app-sidebar-collapse { display: inline-flex; }
  html.nav-collapsed .app-sidebar { display: none; }
  html.nav-collapsed .app-content { margin-left: 0; max-width: 100%; }
  html.nav-collapsed .app-reopen { display: inline-flex; align-items: center; justify-content: center; }
}

.app-sidebar-body { height: 100%; overflow-y: auto; }

.app-sidebar-brand {
  font-size: 1.2rem;
  padding: 1rem 1rem .75rem;
  gap: .4rem;
  text-decoration: none;
}
.app-sidebar-brand i { font-size: 1.4rem; }

/* Nav links inside the sidebar */
.app-sidebar-nav { padding: .25rem .5rem; margin: 0; }
.app-sidebar-nav .nav-link {
  color: #cfd4d9;
  border-radius: 8px;
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 500;
}
.app-sidebar-nav .nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.app-sidebar-nav .nav-link:hover,
.app-sidebar-nav .nav-link:focus { background: var(--rock-2); color: #fff; }
.app-sidebar-nav .nav-link.active {
  background: var(--ore) !important;
  color: #fff !important;
  font-weight: 600;
}

.app-sidebar-footer { padding-bottom: .5rem; }
.app-sidebar-divider { border-color: rgba(255,255,255,.12); margin: .5rem .75rem; opacity: 1; }
.app-sidebar-user {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem .25rem;
  color: #9aa3ab; font-size: .85rem;
}
.app-sidebar-user i { font-size: 1.1rem; }

.btn-ore { background: var(--ore); border-color: var(--ore); color: #fff; }
.btn-ore:hover { background: #cf6f1c; border-color: #cf6f1c; color: #fff; }
.text-ore { color: var(--ore); }

.stat-card { border: none; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-card .stat-icon { font-size: 1.8rem; opacity: .85; }

.card { border: none; border-radius: 12px; box-shadow: 0 1px 5px rgba(0,0,0,.06); }
.table-responsive { border-radius: 10px; }

#map { height: 70vh; min-height: 420px; width: 100%; border-radius: 12px; }
.area-photo { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }
.receipt-thumb { max-height: 60px; border-radius: 6px; }

.pipeline-col { min-width: 240px; }
.stage-badge { font-size: .72rem; }

/* Larger tap targets on mobile */
@media (max-width: 768px) {
  .btn { padding: .5rem .85rem; }
  .table td, .table th { font-size: .9rem; }
}

/* Theme toggle button — styled as a sidebar nav-link in both themes */
#theme-toggle {
  color: #cfd4d9;
  text-decoration: none;
  background: transparent;
}
#theme-toggle:hover,
#theme-toggle:focus { background: var(--rock-2); color: #fff; box-shadow: none; }
#theme-toggle i { font-size: 1.1rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
#theme-toggle span { font-weight: 500; }

/* ============================================================
   DARK MODE
   Bootstrap 5.3 handles most components via data-bs-theme="dark".
   These overrides fix the custom/hardcoded light styles and the
   common helper classes used across templates we can't edit.
   ============================================================ */
[data-bs-theme="dark"] body {
  color: #e6e8ea;
}

/* Surfaces: cards / stat cards on a slightly raised dark panel */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat-card {
  background-color: #1b1f23;
  border: 1px solid #2b3137;
  color: #e6e8ea;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .card .text-muted,
[data-bs-theme="dark"] .text-muted { color: #9aa3ab !important; }

/* Helper classes that assume a light surface */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light { background-color: #1b1f23 !important; }
/* Lighten .text-dark on dark surfaces, but NOT on colored badges (e.g.
   bg-warning/bg-info text-dark) where dark text is intentional & readable. */
[data-bs-theme="dark"] .text-dark:not(.badge) { color: #e6e8ea !important; }

/* Tables: table-light thead reads as near-white otherwise */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table > thead.table-light th,
[data-bs-theme="dark"] .table > :not(caption) > * > .table-light {
  --bs-table-bg: #23272d;
  --bs-table-color: #e6e8ea;
  background-color: #23272d;
  color: #e6e8ea;
  border-color: #2b3137;
}

/* Borders that were drawn for light backgrounds */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: #2b3137 !important; }

/* Brand button stays consistent (slightly lifted in dark) */
[data-bs-theme="dark"] .btn-ore { color: #fff; }

/* Map container: keep tiles readable, give it a dark frame */
[data-bs-theme="dark"] #map { background: #1b1f23; }

/* List groups / cards inside dashboards */
[data-bs-theme="dark"] .list-group-item {
  background-color: #1b1f23;
  color: #e6e8ea;
  border-color: #2b3137;
}

/* Assistant chat — the template hardcodes light surfaces in its own <style>,
   so override them here (white bubbles would hide the light reply text). */
[data-bs-theme="dark"] .chat-scroll { background: #15181c; }
[data-bs-theme="dark"] .bubble-ai {
  background: #23272d; border-color: #2b3137; color: #e6e8ea;
}
[data-bs-theme="dark"] .action-card {
  background: #1b1f23; border-color: #2b3137; color: #e6e8ea;
}
[data-bs-theme="dark"] .action-card.tier3 { background: #2a1f1f; border-color: #5a2b2b; }
[data-bs-theme="dark"] .ac-chip { background: #1e2a1e; }

/* Leaflet popups / controls are not Bootstrap components — theme them too. */
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip,
[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-control-layers {
  background: #23272d; color: #e6e8ea; border-color: #2b3137;
}
[data-bs-theme="dark"] .leaflet-popup-content a { color: var(--ore); }