@charset "UTF-8";
/* =========================================================
   File: css/components/offcanvas.css
   Title: Offcanvas + Modal Surfaces (Theme, Structure, Scrollbars)
   Updated: 2026-02-16
   Depends on: css/variables.css (tokens), Bootstrap 5
   Scope:
   • Offcanvas defaults (dark) + opt-in light variant
   • Header structure + utility sizing
   • Scrollbar styling (scoped)
   • Guardrails to prevent white-on-white in light panels
========================================================= */


/* =========================================================
   01) OFFCANVAS — DEFAULT (DARK) THEME
========================================================= */

.offcanvas {
  background-color: var(--color-offcanvas-bg, #181B20) !important;
  color: var(--color-text-light, #fff);
  padding-inline: 2rem;
}


/* =========================================================
   02) OFFCANVAS — HEADER STRUCTURE
========================================================= */

.offcanvas-header {
  padding-top: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.offcanvas-title {
  flex: 1 1 auto;
  min-width: 0;         /* allow truncation/wrap within flex row */
  margin-right: 0.5rem;
}


/* =========================================================
   03) OFFCANVAS — LIGHT VARIANT (OPT-IN)
   Usage: <div class="offcanvas ... offcanvas--light">
========================================================= */

.offcanvas.offcanvas--light {
  background-color: #fff !important;
  color: #000 !important;
}

.offcanvas.offcanvas--light .offcanvas-header,
.offcanvas.offcanvas--light .offcanvas-body {
  background-color: #fff !important;
  color: #000 !important;
}

.offcanvas.offcanvas--light .offcanvas-header {
  border-bottom-color: rgba(0, 0, 0, 1) !important;
}

/* Close-circle hover tuning for light panels */
.offcanvas.offcanvas--light .close-circle:hover  { background-color: rgba(0, 0, 0, 0.08); }
.offcanvas.offcanvas--light .close-circle:active { background-color: rgba(0, 0, 0, 0.16); }


/* =========================================================
   04) OFFCANVAS — RESPONSIVE WIDTH
========================================================= */

@media (max-width: 575.98px) {
  .offcanvas {
    width: 60vw !important;
    max-width: 60vw !important;
  }
}


/* =========================================================
   05) OFFCANVAS UTILITIES
========================================================= */

.offcanvas-bottom {
  height: 60vh;       /* set to 100vh for full-screen */
  max-height: 100vh;
}

@media (max-width: 768px) {
  .offcanvas-bottom { height: 100vh; }
}


/* =========================================================
   06) SCROLLBARS (SCOPED)
   Notes:
   • Avoid global “*” rules; scope to offcanvas/modal only.
   • Default tuned for dark panels; light variant overrides below.
========================================================= */

.offcanvas,
.modal,
.offcanvas *,
.modal * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.05);
}

.offcanvas::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 6px;
}

.offcanvas::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.offcanvas::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.offcanvas::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* Light offcanvas scrollbar overrides */
.offcanvas.offcanvas--light,
.offcanvas.offcanvas--light * {
  scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.05);
}

.offcanvas.offcanvas--light::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.offcanvas.offcanvas--light::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.35); }
.offcanvas.offcanvas--light::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.55); }


/* =========================================================
   07) GUARDRAILS — PREVENT WHITE-ON-WHITE IN LIGHT PANELS
   Why:
   • Some content may include .text-white (tables, utilities, etc.)
   • Light offcanvas must always remain readable
========================================================= */

/* Ensure light panels render dark text even if nested rules vary */
.offcanvas.offcanvas--light,
.offcanvas.offcanvas--light .offcanvas-body {
  color: #111 !important;
}

/* Neutralize accidental .text-white inside light panels */
.offcanvas.offcanvas--light .text-white {
  color: #111 !important;
}

/* Bootstrap tables often use CSS vars for text/borders */
.offcanvas.offcanvas--light .table {
  --bs-table-color: #111;
  --bs-table-border-color: rgba(0, 0, 0, 0.25);
}


/* =========================================================
   END OF FILE — css/components/offcanvas.css
========================================================= */