/* =========================================================
 * App styles (Bootstrap 5 layout helpers) — consolidated
 * =========================================================
 * - Fixed-top navbar (JS writes --header-h)
 * - Sticky sidebar (desktop), offcanvas (mobile)
 * - Clean content surface + cards/tables
 * - Settings + Dashboard sections
 * - Dark mode tweaks
 * =======================================================*/

/* ========= Vars ========= */
:root{
  --header-h: 56px;       /* overwritten by JS in header/footer */
  --sidebar-w: 280px;     /* informative; can be read by custom JS/CSS */
  --divider: rgba(0,0,0,.06);
  --accent: #0d6efd;      /* Bootstrap primary */

  /* UI palette */
  --fg:#222; --muted:#666;
  --ok:#0a7d2b; --warn:#d9822b; --no:#b91c1c;
  --chip:#eef3ff; --bd:#e5e7eb; --bg:#fff;
}

/* ========= Base ========= */
html, body { height: 100%; }
body {
  padding-top: max(var(--header-h, 56px), 56px); /* single source of truth */
  background-color: #f7f8fb;                     /* light app background */
  color: var(--fg);
  font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Topbar shadow for separation */
.navbar.fixed-top { box-shadow: 0 2px 10px -6px rgba(0,0,0,.25); }

/* ========= Main layout ========= */
.app-main { min-height: calc(100vh - var(--header-h, 56px)); }

/* Sidebar (desktop) */
.app-sidebar{
  position: sticky;
  top: calc(var(--header-h, 56px) + 0.75rem);
  max-height: calc(100vh - var(--header-h, 56px) - 1.5rem);
  overflow-y: auto;

  padding: .5rem .75rem .75rem;
  background: #fff;
  border-right: 1px solid var(--divider);
  border-radius: .5rem;
  box-shadow:
    1px 0 0 rgba(255,255,255,.6) inset,
    8px 0 18px -14px rgba(0,0,0,.25);
}

/* Content column */
.app-content{
  padding-top: 1rem;
  padding-bottom: 2rem;
  background: #f7f8fb;
  box-shadow: inset 12px 0 16px -18px rgba(33,37,41,.28);
  min-height: calc(100vh - var(--header-h, 56px));
}

/* Content surface helper */
.content-surface{
  background:#fff;
  border:1px solid var(--divider);
  border-radius:.5rem;
  box-shadow:0 4px 18px -10px rgba(0,0,0,.25);
}

/* ========= Sidebar nav ========= */
.app-sidebar .text-uppercase.text-muted{
  letter-spacing:.06em; font-weight:700; opacity:.75;
}
.app-sidebar .nav{ margin-top:.25rem; }
.app-sidebar .nav-link{
  color:#333;
  padding:.475rem .5rem;
  border-radius:.5rem;
  display:inline-flex; align-items:center; gap:.35rem;
  position:relative;
  transition: background-color .15s ease, color .15s ease, transform .02s ease;
}
.app-sidebar .nav-link:hover{ background: rgba(0,0,0,.035); text-decoration:none; }
.app-sidebar .nav-link.active{
  color: var(--accent);
  background: rgba(13,110,253,.08);
  font-weight:600;
}
.app-sidebar .nav-link.active::before{
  content:""; position:absolute; left:-0.75rem; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--accent); box-shadow:0 0 0 2px rgba(13,110,253,.12);
}
/* Sub-level links a bit tighter/indented */
.app-sidebar .nav .ms-3 .nav-link{ padding-left:.85rem; font-size:.965rem; }

/* Collapse chevron animation */
.app-sidebar .bi-chevron-down{ transition: transform .2s ease; }
.app-sidebar .rotate .bi-chevron-down{ transform: rotate(180deg); }

/* ========= Offcanvas (mobile sidebar) ========= */
#sidebarOffcanvas{
  background:#fff;
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.35);
}
#sidebarOffcanvas .nav{ margin-top:.25rem; }
#sidebarOffcanvas .nav-link{ color:#333; border-radius:.5rem; }
#sidebarOffcanvas .nav-link:hover{ background: rgba(0,0,0,.04); }
#sidebarOffcanvas .nav-link.active{
  color: var(--accent);
  background: rgba(13,110,253,.08);
  font-weight:600;
}

/* ========= Tables & Cards ========= */
.table code{ color:#0a58ca; }
.table thead th a{ color:inherit; text-decoration:none; }
.table thead th a:hover{ text-decoration:underline; }
.card-header{ font-weight:600; }
.card{
  background:#fff;
  border-color: var(--divider);
  border-radius:.5rem;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.25);
}

/* Page title separator */
.container-fluid > .page-title-row{
  border-bottom:1px solid var(--divider);
  padding-bottom:.5rem; margin-bottom:1rem;
}

/* ========= Settings page ========= */
.settings-page .settings-title{
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  margin:.25rem 0 1rem; font-weight:700;
}
.settings-content{ display:grid; gap:1rem; }
.settings-card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:.65rem; box-shadow:0 6px 16px -12px rgba(0,0,0,.25);
}
.settings-card__header{
  padding:.75rem 1rem; border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; gap:.5rem;
  background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,0));
  border-top-left-radius:.65rem; border-top-right-radius:.65rem;
}
.settings-card__title{ margin:0; font-size:1.05rem; font-weight:700; }
.settings-card__section{ padding:1rem; }

/* Categories grid */
.settings-categories{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:.75rem;
}
.settings-category{
  grid-column: span 12;
  display:grid; grid-template-columns: 44px 1fr; gap:.75rem; align-items:start;
  padding:.6rem .7rem;
  border:1px dashed rgba(0,0,0,.06); border-radius:.5rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.settings-category:hover{
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.03);
}
.settings-category__icon{
  height:44px; width:44px; border-radius:.5rem; display:grid; place-items:center;
  background: rgba(13,110,253,.08); color:#0d6efd; font-size:1.15rem;
}
.settings-category__desc h3{ margin:0 0 .25rem; font-size:1rem; font-weight:700; }
.settings-category__desc p{ margin:0; color:#6c757d; }
.page-size-medium{ max-width:1100px; margin-inline:auto; }

/* Responsive spans for settings categories */
@media (min-width: 576px){ .settings-category{ grid-column: span 6; } }
@media (min-width: 992px){ .settings-category{ grid-column: span 4; } }

/* ========= Dashboard section (scoped to section.container) ========= */
section.container{ display:block; margin-top:.5rem; }
section.container .title{ margin:.2rem 0 .4rem; font-size:1.6rem; }
section.container .meta{ display:flex; gap:.6rem; align-items:center; font-size:.9rem; }
section.container .badge{ padding:.15rem .4rem; border-radius:.4rem; }
section.container .badge.ok{ background:#e7f7ee; color:#146c43; border:1px solid #bfead2; }
section.container .badge.warn{ background:#fff4e5; color:#8a4b12; border:1px solid #ffe1bd; }
section.container .muted{ color:#666; }

/* Filters */
section.container .filters{ margin:.8rem 0 1rem; }
section.container .filters .row{ display:flex; gap:1rem; align-items:end; flex-wrap:wrap; }
section.container .filters .group{ display:flex; flex-direction:column; gap:.35rem; }
section.container .filters .group.grow{ flex:1; }
section.container .segmented{ display:inline-flex; border:1px solid #ddd; border-radius:.5rem; overflow:hidden; }
section.container .segmented a{ padding:.35rem .6rem; text-decoration:none; color:#333; border-right:1px solid #ddd; }
section.container .segmented a:last-child{ border-right:none; }
section.container .segmented .active{ background:#f0f3f7; font-weight:600; }
section.container .counter{ font-size:1.4rem; font-weight:800; }

/* Stat cards & charts */
section.container .cards{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin:1rem 0;
}
section.container .card{ border:1px solid #e5e7eb; border-radius:.8rem; padding:.8rem .9rem; background:#fff; }
section.container .card-title{ font-weight:600; margin-bottom:.3rem; }
section.container .card-metric{ font-size:1.4rem; font-weight:800; }
section.container .card-sub{ color:#666; font-size:.9rem; }

section.container .charts{ display:block; }
section.container .chart-card{
  width:100%; margin-bottom:1rem;
  border:1px solid #e5e7eb; border-radius:.8rem; padding:.8rem .9rem; background:#fff;
}
section.container .chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
section.container .chart-card canvas{
  width:100% !important; height:auto !important; display:block;
}

/* Tables in dashboard */
section.container .tbl{ margin-top:.6rem; width:100%; }
section.container .tbl summary{ cursor:pointer; color:#0b5cab; margin-bottom:.4rem; }
section.container .tbl-wrap{ width:100%; overflow-x:auto; }
section.container .tbl table{
  width:100%; table-layout:auto; border-collapse:collapse; font-size:.95rem;
}
section.container .tbl th,
section.container .tbl td{ padding:.5rem .6rem; border-top:1px solid #eee; }
section.container .tbl th{ text-align:left; background:#fafafa; }
section.container .tbl td.num{ text-align:right; font-variant-numeric: tabular-nums; }

/* ========= Utility chips/badges/tables (global) ========= */
.wrap{ max-width:1350px; margin:0 auto; }
.muted{ color:var(--muted); }
.chips span{
  display:inline-block; background:var(--chip); border:1px solid #dde5ff;
  padding:4px 8px; border-radius:999px; margin:2px 6px 2px 0; font-size:12px;
}
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid #ddd; }
.ok{ color:#fff; background:var(--ok); border-color:var(--ok); }
.warn{ color:#fff; background:var(--warn); border-color:var(--warn); }
.no{ color:#fff; background:var(--no); border-color:var(--no); }
table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:8px 10px; border-bottom:1px solid #eee; vertical-align:top; }
th{ background:#fafafa; position:sticky; top:0; z-index:1; }
.nowrap{ white-space:nowrap; }
.mono{ font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; }
/* No internal scroll container anymore */
.scroll{ overflow:visible; max-height:none; }
.tbl-sm td, .tbl-sm th{ padding:6px 8px; }
.pill{ display:inline-block; border:1px solid #ddd; border-radius:6px; padding:2px 6px; font-size:12px; margin-right:4px; }
.tour-h{ font-weight:700; font-size:15px; margin:10px 0 6px; }

/* Buttons & small layout helpers */
.switch{ display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.btn{ appearance:none; border:0; background:#111; color:#fff; padding:.8rem 1rem; border-radius:12px; cursor:pointer; }
.btn-secondary{ background:#444; }
.sep{ height:1px; background:#e9e9ee; margin:14px 0; }
.row-compact{ display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.row-compact > div{ min-width:220px; }
.badge-req{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:9999px; font-size:11px; line-height:1; background:#e11d48; color:#fff; }
.ms-auto{ margin-left:auto !important; }

/* ========= Responsive tweaks ========= */
@media (max-width: 991.98px){
  /* Sidebar becomes offcanvas on mobile: lighten desktop visuals */
  .app-sidebar{
    position: static;
    max-height: none;
    border-right: none;
    box-shadow: none;
    border-radius: 0;
    padding: .25rem .25rem .5rem;
  }
  .app-content{
    box-shadow: none;  /* offcanvas overlay creates separation */
    background: #fff;  /* maximize readability on mobile */
    padding: 1rem;
  }
}

/* ========= Dark mode ========= 
@media (prefers-color-scheme: dark){
  body{ background-color:#FFF; color:#ddd; }
  .app-sidebar{ background:#FFF; border-right-color:#1f2937; box-shadow:none; }
  .app-content{ background:#FFF; box-shadow:none; }
  .content-surface,
  .card,
  section.container .card,
  section.container .chart-card{
    background:#111; border-color:#333; box-shadow:none;
  }
  section.container .badge.ok{ background:#093; color:#eafff1; border-color:#064; }
  section.container .badge.warn{ background:#663; color:#ffe; border-color:#995; }
  section.container .segmented{ border-color:#555; }
  section.container .segmented a{ color:#ddd; border-right-color:#555; }
  section.container .segmented .active{ background:#333; }
  section.container th, section.container td{ border-top-color:#333; }
}*/