/* ==========================================================================
   Boiling Harmonies — Site Theme (LIGHT)
   Order: Tokens → Resets → Global Layout → Navbar → Dropdowns → Cards/Tables
          → Forms/Buttons → Modals → Utilities → Profile Page → Stacking
   ========================================================================== */

/* --- 1) Design Tokens (CSS variables) ----------------------------------- */
:root {
  /* Page */
  --bs-body-bg: #ffffff;
  --bs-body-color: #0b0f14;

  /* Dark utility base */
  --bs-dark-rgb: 0, 0, 0;

  /* Surfaces */
  --bh-card-bg: #ffffff;
  --bh-card-border: #e5e7eb;

  /* Inputs */
  --bh-input-bg: #ffffff;
  --bh-input-fg: #0b0f14;
  --bh-input-border: #cbd5e1;

  /* Accent */
  --bh-accent: #000000;
  --bh-accent-contrast: #ffffff;

  /* Dropdowns (light) */
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-link-color: #0b0f14;
  --bs-dropdown-link-hover-color: #646464;
  --bs-dropdown-link-hover-bg: #ffffff;
  --bs-dropdown-link-active-bg: #eef1f5;
  --bs-dropdown-border-color: #e5e7eb;
  --bs-dropdown-divider-bg: #eceff3;

  /* Layout helpers */
  --bh-player-h: 0px;            /* set by JS: player_reserve.js */
  --nav-h: 56px;                 /* fallback, JS updates it */

  /* Stacking ladder (modal > player > navbar > content) */
  --z-modal: 5000;
  --z-backdrop: 4990;
  --z-player: 3000;
  --z-navbar: 2000;
}

/* --- 2) Resets & Base ---------------------------------------------------- */
html, body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  margin: 0;                           /* kill browser default top margin */
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

/* Keep main content clear of the floating player */
#page, main, .page-wrap {
  padding-bottom: max(16px, var(--bh-player-h));
}

/* True black helpers */
.bg-dark,
.text-bg-dark {
  background-color: #000 !important;
  color: #fff !important;
}

/* Links & misc */
a { color: #0b5ed7; }
a:hover, a:focus { color: #084298; }
hr { border-color: var(--bh-card-border); }

/* --- 3) Navbar (fixed top, true black) ---------------------------------- */
.navbar,
.navbar.bg-dark,
.navbar.navbar-dark {
  --bs-bg-opacity: 1 !important;
  background-color: #000 !important;
  border-bottom: 1px solid #161616 !important;
  color: #fff;
}

/* Fixed and spaced */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-navbar);
  padding-left: 2rem;
  padding-right: 2rem;
}
body { padding-top: var(--nav-h); }  /* reserve space equal to navbar height */

/* Branding & links */
.navbar .container,
.navbar .container-fluid { background: transparent !important; position: relative; }
.navbar .navbar-brand,
.navbar .nav-link { color:#fff !important; opacity:.92; }
.navbar .navbar-nav { gap: 1rem; }

/* Hover / focus states */
.navbar .nav-link:hover{
  background:#717171 !important;
  color:#fff !important;
  opacity:1;
}
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible{
  background:#343333 !important;
  color:#fff !important;
  opacity:1;
  outline:none !important;
  box-shadow:0 0 0 .2rem rgba(255,255,255,.15) !important;
}

/* Toggler icon visible on black */
.navbar .navbar-toggler { border-color:#444 !important; position: relative; z-index: calc(var(--z-navbar) + 1); }
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(239,68,68,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Navbar CTA (Subscribe) */
.navbar .btn-primary{
  background:#000 !important;
  border-color:#444 !important;
  color:#fff !important;
  box-shadow:none !important;
}
.navbar .btn-primary:hover,
.navbar .btn-primary:active{
  background:#000 !important;
  border-color:#444 !important;
  color:#fff !important;
}
.navbar .btn-primary:focus,
.navbar .btn-primary:focus-visible{
  background:#1a1a1a !important;
  border-color:#666 !important;
  outline:none !important;
  box-shadow:0 0 0 .2rem rgba(255,255,255,.15) !important;
}

/* --- 4) Dropdowns -------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--bs-dropdown-bg) !important;
  color: var(--bs-dropdown-link-color) !important;
  border-color: var(--bs-dropdown-border-color) !important;
}
.dropdown-menu .dropdown-item { color: var(--bs-dropdown-link-color) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: var(--bs-dropdown-link-hover-bg) !important; }

/* Navbar-opened dropdowns remain dark */
.navbar .dropdown-menu {
  background:#000 !important;
  border-color:#161616 !important;
}
.navbar .dropdown-item { color:#e5e7eb !important; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background:#717171 !important; color:#fff !important; }

/* --- 5) Cards & Tables --------------------------------------------------- */
.card {
  background: var(--bh-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bh-card-border) !important;
}
.table { color: var(--bs-body-color); }
.table thead th, .table td, .table th { border-color: var(--bh-card-border); }

/* --- 6) Forms & Buttons -------------------------------------------------- */
/* Global inputs (light) */
.form-control, .form-select, .form-check-input {
  background: var(--bh-input-bg) !important;
  color: var(--bh-input-fg) !important;
  border-color: var(--bh-input-border) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bh-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(30,144,255,.15) !important;
}

/* Labels (keep requested style) */
.form-label {
  margin-bottom: .5rem;
  color: #000;
  font-weight: bold;
}

/* Buttons */
.btn-primary {
  background: var(--bh-accent) !important;
  border-color: var(--bh-accent) !important;
  color: var(--bh-accent-contrast) !important;
}
.btn-outline-light { color:#fff !important; border-color:#161616 !important; }
.btn-outline-light:hover { background:#161616 !important; }

/* Checkboxes — native color + consistent look (no Bootstrap SVG) */
.form-check-input {
  appearance: auto; -webkit-appearance:auto; -moz-appearance:auto;
  width: 1.1em; height: 1.1em; cursor: pointer;
  accent-color: var(--bh-accent, #000);
  background-image: none !important;
}
.form-check-input:checked {
  background-color: var(--bh-accent, #000) !important;
  border-color: var(--bh-accent, #000) !important;
}
.form-check-label { cursor: pointer; }

/* --- 7) Modals (light content; strong backdrop) ------------------------- */
.modal .modal-content {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#e5e7eb !important;
}
.modal .modal-header,
.modal .modal-footer { border-color:#e5e7eb !important; }
.modal .btn-close { filter:none !important; opacity:.7; }
.modal .btn-close:hover { opacity:1; }

.modal .form-control,
.modal .form-select,
.modal .form-check-input {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#cbd5e1 !important;
}
.modal .form-control:focus,
.modal .form-select:focus {
  border-color: var(--bh-accent) !important;
  box-shadow: 0 0 0 .25rem rgba(30,144,255,.15) !important;
}
.modal .form-text, .modal .text-muted { color:#6b7280 !important; }
.modal-backdrop.show { background:#000; opacity:.55; display: none; }

/* --- 8) Utility: force any surface to light ----------------------------- */
.surface-light,
.modal-content.surface-light,
.card.surface-light {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#e5e7eb !important;
}
.surface-light .form-control,
.surface-light .form-select,
.surface-light .form-check-input {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#cbd5e1 !important;
}
.surface-light .form-control:focus,
.surface-light .form-select:focus {
  border-color:#111 !important;
  box-shadow:none !important;
}
.surface-light .btn-primary {
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}

/* --- 9) Auth pages (explicitly white) ----------------------------------- */
body[data-path^="/accounts/"] {
  background:#ffffff !important;
  color:#0b0f14 !important;
}
body[data-path^="/accounts/"] .card,
body[data-path^="/accounts/"] .modal-content {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#e5e7eb !important;
}
body[data-path^="/accounts/"] .form-control,
body[data-path^="/accounts/"] .form-select,
body[data-path^="/accounts/"] .form-check-input {
  background:#ffffff !important;
  color:#0b0f14 !important;
  border-color:#cbd5e1 !important;
}
body[data-path^="/accounts/"] .btn-primary {
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}

/* --- 10) Profile Page --------------------------------------------------- */
/* Header (avatar + title) */
.profile-page .profile-header img {
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  border-radius: 50%;
}
.profile-page h2 {
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0;
}

/* Cards look (default) */
.profile-page .card {
  background: #ffffff !important;
  color: #0b0f14 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.04);
  overflow: hidden;
}
.profile-page .card > .card-header {
  background: #f3f4f6 !important;
  color: #0b0f14 !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 600;
}

/* Profile buttons (black CTAs) */
.profile-page .btn-primary {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.profile-page .btn-primary:hover,
.profile-page .btn-primary:focus {
  background: #111 !important;
  border-color: #111 !important;
}
.profile-page .btn-outline-light {
  color: #fff !important;
  border-color: #2a2a2a !important;
}
.profile-page .btn-outline-light:hover {
  background: #2a2a2a !important;
}

/* Inputs on white */
.profile-page .form-control,
.profile-page .form-select,
.profile-page .form-check-input {
  background: #ffffff !important;
  color: #0b0f14 !important;
  border-color: #cbd5e1 !important;
}
.profile-page .form-control:focus,
.profile-page .form-select:focus {
  border-color: #000 !important;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,.12) !important;
}

/* Badges & dividers */
.profile-page .badge {
  border-radius: 999px;
  font-weight: 600;
  padding: .35rem .6rem;
}
.profile-page hr,
.profile-page .card hr {
  border-color: #e5e7eb;
  opacity: 1;
}

/* Optional inverted card */
.profile-page .card.card-inverted {
  background: #000 !important;
  color: #d1d5db !important;
  border-color: #161616 !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.25);
}
.profile-page .card.card-inverted > .card-header {
  background: #2b2b2b !important;
  color: #ffffff !important;
  border-bottom-color: #161616 !important;
}
.profile-page .card.card-inverted .btn-primary {
  background: #111 !important;
  border-color: #444 !important;
}
.profile-page .card.card-inverted .text-muted { color: #9ca3af !important; }

/* Avatar camera button */
.profile-page .avatar-action{
  position:absolute;
  right:70px;
  bottom:0px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:9999px;
  background:rgba(0,0,0,.7);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  cursor:pointer;
  transition:.12s ease;
}
.profile-page .avatar-action:active{ transform:scale(.97); }

/* --- 11) Misc legacy overrides kept (from earlier theme) ---------------- */
.card-header {
  font-weight: 600;
  background: #757575;
  border-bottom: 1px solid #59595a;
}
.card-body { background: #d4d3d3; }
.modal-content.surface-light { background:#1c1c1c; color:#eee; }
.list-group-item { background: transparent; }
.form-control, .form-select { background:#121212; color:#e6e6e6; border-color:#2b2b2b; }
.form-control:focus, .form-select:focus {
  background:#161616; color:#fff; border-color:#555; box-shadow:none;
}
/* Modal sizing helpers */
.modal .form-control, .modal .form-select { width: 100%; max-width: 100%; }
.modal .list-group-item { background: transparent; border-color: #333; }

/* Player intentionally hidden (popout, etc.) */
body.no-player,
body.popout {
  --bh-player-h: 0px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- 12) Final authoritative stacking order ----------------------------- */
/* Modal above everything */
.modal-backdrop { z-index: var(--z-backdrop) !important; }
.modal,
.modal.show,
.modal .modal-dialog,
.modal .modal-content { z-index: var(--z-modal) !important; }

/* Player above navbar */
#site-player { z-index: var(--z-player) !important; }

/* Keep content below both player and navbar. Do not create stacking context. */
#page, main, .page-wrap, .container {
  position: relative;
  z-index: 1;
}

/* =========================================================
   FINAL OVERRIDE — modal must be above player & navbar
   ========================================================= */

/* Use "near-max" z-indexes so nothing in your app can beat them */
:root{
  --z-modal-abs: 2147483000;   /* dialog/content */
  --z-backdrop-abs: 2147482000;/* backdrop */
}

/* Backdrop above everything (including player) */
.modal-backdrop,
.modal-backdrop.show {
  position: fixed !important;
  z-index: var(--z-backdrop-abs) !important;
}

/* Dialog ABOVE the backdrop */
.modal,
.modal.show,
.modal .modal-dialog,
.modal .modal-content {
  position: relative; /* Bootstrap manages fixed on .modal */
  z-index: var(--z-modal-abs) !important;
}

/* While a modal is open, push the player well below the backdrop */
body.modal-open #site-player {
  z-index: 1000 !important;        /* definitely < backdrop */
}

/* Safety: if the player has inner elements with their own z-index,
   don't let them escape above the container while a modal is open. */
body.modal-open #site-player *,
body.modal-open #site-player .glass-player {
  z-index: auto !important;
}

/* Your normal stacking (outside modals): player > navbar > content */
#site-player { z-index: 3000 !important; }
.navbar      { z-index: 2000 !important; }
#page, main, .page-wrap, .container { position: relative; z-index: 1; }

/* --- Restore Bootstrap modal positioning & viewport overlay --- */
.modal,
.modal.show {
  position: fixed !important;   /* overlay the viewport */
  inset: 0 !important;          /* top/right/bottom/left: 0 */
}

.modal-backdrop,
.modal-backdrop.show {
  position: fixed !important;   /* cover the viewport */
  inset: 0 !important;
}

/* Do NOT force position on inner pieces; let Bootstrap handle them */
.modal .modal-dialog,
.modal .modal-content {
  position: static !important;  /* undo any earlier 'relative' */
}

/* Keep stacking order: modal > player > navbar */
.modal            { z-index: 2147483000 !important; }
.modal-backdrop   { z-index: 2147482000 !important; }
body.modal-open #site-player { z-index: 1000 !important; } /* below backdrop during modal */
#site-player      { z-index: 3000 !important; }             /* normal state */
.navbar           { z-index: 2000 !important; }


/* shrink-to-fit + click-through wrapper in compact mode */
#site-player.min{
  display:inline-block;
  width:auto;
  max-width:none;
  pointer-events:none;     /* wrapper ignores clicks */
}
#site-player.min .glass-player{
  pointer-events:auto;     /* pill still interactive */
}

/* Ensure the invisible file input never blocks the camera button */
.avatar-stack { position: relative; }
#avatar-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;        /* ← key: let the click reach the button */
}
#avatar-camera-btn{ z-index: 2; } /* you already have z-index:4; either is fine */