/* ==== Theme tokens (must be first) ==== */
:root{
  --brand: #0d6efd;      /* primary blue (Bootstrap) */
  --text: #212529;       /* body text */
  --muted: #6c757d;      /* secondary text */
  --bg: #ffffff;         /* page background */
  --bg-soft: #f8f9fa;    /* subtle surface */
  --border: #dee2e6;     /* light gray border */
  --card: #ffffff;       /* card surface */
  --shadow: 0 2px 24px rgba(0,0,0,.06);
}

/* Dark overrides (for /dark/ later) */
[data-bs-theme="dark"]{
  --text: #e9ecef;
  --muted: #adb5bd;
  --bg: #0b0b0c;
  --bg-soft: #141518;
  --border: #2b2f36;
  --card: #111215;
  --shadow: 0 2px 24px rgba(0,0,0,.5);
  --brand: #5aa0ff;      /* optional: dark-friendly blue */
}

/* Semantic surfaces (lets us flip to dark later without changing markup) */
.surface      { background: var(--bg);      color: var(--text); }
.surface-soft { background: var(--bg-soft); color: var(--text); }
.card-surface { background: var(--card);    color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--border); }

/* Header/ Footer shells */
.site-header  { border-bottom: 1px solid var(--border); }
.site-footer  { border-top: 1px solid var(--border); }

/* ===== Homepage inline styles moved from index.php ===== */

/* ✅ Session message formatting */
.session-message {
  white-space: normal !important;
  word-wrap: break-word;
  display: inline-block !important;
  max-width: 100% !important;
  line-height: 1.4;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ✅ Session overlay */
#sessionOverlay {
  position: fixed;
  top: 140px;
  left: 0;
  width: 100%;
  height: calc(100% - 140px);
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  overflow: auto;
}

/* ✅ Lock scroll on body */
body.locked {
  overflow: hidden !important;
}

/* ✅ Live Preview fullscreen modal */
#previewModal.fullscreen .modal-dialog {
  width: 90vw !important;
  max-width: none !important;
}
#previewModal.fullscreen .modal-content {
  height: 90vh !important;
}

/* ✅ Builder visual styling */
.border-dashed { border-style: dashed !important; }

/* ✅ Movement flash animation */
.flash-move {
  animation: flashMove 0.8s ease-in-out;
  outline: 4px dashed #000000;
}
@keyframes flashMove {
  0%   { background-color: #333; }
  100% { background-color: transparent; }
}

/* ✅ Headline */
.hero-headline {
  font-size: 2rem;        /* matches current inline */
  font-weight: 700;       /* fw-bold */
  margin-bottom: 0.25rem; /* mb-1 */
}

/* ✅ Canvas typing styles */
#canvasArea .section-headline { color: #6c757d !important; }
#canvasArea .section-headline .typing-cursor { color: #0d6efd !important; }

.typing-cursor {
  display: inline-block;
  width: auto;
  color: #0d6efd;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ✅ Pending controls */
.section-control.is-pending { opacity: .9 }
.pending-note .spinner-border-sm { width: .9rem; height: .9rem; }

/* ✅ Utility: medium spinner size used in header */
.spinner-border.spinner-border-md { width: 2rem; height: 2rem; }

/* ===== Inline element styles moved from index.php ===== */

/* Logo height */
#aibbLogo {
  height: 70px;
  width: auto;
  max-height: 70px; /* defensive */
}

/* Tagline under logo */
.site-tagline {
  font-size: 1.25rem; /* fs-5 */
  font-weight: 300;   /* fw-light */
  color: var(--text);
}

/* "I Build With..." info (right header text) */
.header-system-info {
  font-size: 1rem;
}

/* Header button group (Subscribe/Login/Logout) */
.header-btns {
  font-size: 0.95rem;
}
.header-btns span {
  cursor: pointer;
}

/* Session time remaining */
#sessionTimeLeft {
  font-size: 0.95rem;
}

/* Sidebar scroll & height */
.sidebar-col {
  overflow-y: auto;
  max-height: 100vh;
}

/* Canvas area dimensions */
#canvasArea {
  min-height: 400px;
  height: calc(100vh - 175px);
  overflow-y: auto;
}

/* SEO-sized H1 in header (force this size regardless of other rules) */
header h1.hero-headline{
  font-size: 2rem !important;      /* your “cheated” H1 size */
  line-height: 1.2 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .25rem;
  color: var(--white);
}

/* Subtext under the H1 */
header .hero-subtext{
  font-size: 1rem;
  color: var(--white);
}
header .hero-subtext .spinner-border-md{ vertical-align: -0.2em; }

/* Final polish — move lingering inline styles into CSS */

/* Header buttons size & pointer */
.header-btns { font-size: .95rem; }
.header-btns span { cursor: pointer; }

/* Section buttons scroller (left panel) */
#sectionButtons { max-height: 260px; overflow-y: auto; }

/* Build input min-width reset to avoid flex squish */
#buildInput { min-width: 0; }

/* Session overlay (already added earlier; keep here for consistency) */
#sessionOverlay {
  position: fixed;
  top: 140px;
  left: 0;
  width: 100%;
  height: calc(100% - 140px);
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1050;
  overflow: auto;
}

/* Medium spinner size utility */
.spinner-border.spinner-border-md { width: 2rem; height: 2rem; }

/* Left panel: make the section list a fixed-height scroller */
.sidebar-col { overflow-y: auto; max-height: 100vh; }
.sidebar-col > .d-flex { min-height: 0; }  /* allow children to shrink inside flex */

.sidebar-col #sectionButtons{
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Theme-aware logo swap */
.theme-logo { height: 70px; width: auto; display: inline-block; }
.theme-logo-dark { display: none; }

[data-bs-theme="dark"] .theme-logo-light { display: none; }
[data-bs-theme="dark"] .theme-logo-dark  { display: inline-block; }

/* Tabs: keep current light look, adapt on dark via tokens */
.site-tabs { border-bottom: 1px solid var(--border); }

/* Non-active tabs (respect your existing header-auto-text/text-dark usage) */
.site-tabs .nav-link {
  color: var(--text);
  border-color: var(--border) var(--border) transparent;
  background: transparent;
}
.site-tabs .nav-link:hover {
  background: var(--bg-soft);
  color: var(--text);
}

/* Active tab — your current "bg-primary text-white fw-semibold border-0 rounded-top" */
.site-tabs .nav-link.active,
.site-tabs .nav-link.bg-primary {
  background: var(--brand);
  color: #fff !important;
  border-color: var(--brand) var(--brand) transparent;
  font-weight: 600;
  border-bottom-color: transparent !important;
}

/* Make the helper class theme-aware (so you can keep header-auto-text in markup) */
.header-auto-text { color: var(--text) !important; }

/* ---------- Tab theme tokens ---------- */
:root{
  /* light defaults (no change from your current look) */
  --tab-active-bg: var(--brand);
  --tab-active-fg: #fff;
  --tab-hover-bg: var(--bg-soft);
  --tab-hover-fg: var(--text);
  --tab-border: var(--border);
}

[data-bs-theme="dark"]{
  /* dark: active tab = yellow; hover = white outline */
  --tab-active-bg: #f1c40f;          /* your AIBB yellow */
  --tab-active-fg: #0b0b0c;          /* readable dark text on yellow */
  --tab-hover-bg: transparent;       /* keep background */
  --tab-hover-fg: #ffffff;           /* white text on hover */
  --tab-border: #ffffff;             /* white outline on hover/inactive border */
}

/* ---------- Tabs (inactive / hover / active) ---------- */
.site-tabs .nav-link{
  color: var(--muted) !important;
  background: transparent;
  border-color: var(--tab-border) var(--tab-border) transparent;
}

.site-tabs .nav-link:hover{
  color: var(--tab-hover-fg) !important;
  background: var(--tab-hover-bg);
  border-color: var(--tab-border) var(--tab-border) transparent;
}

/* Active tab — use theme tokens; override Bootstrap bg-primary */
.site-tabs .nav-link.active,
.site-tabs .nav-link.bg-primary{
  background: var(--tab-active-bg) !important;
  color: var(--tab-active-fg) !important;
  border-color: var(--tab-active-bg) var(--tab-active-bg) transparent !important;
  font-weight: 600;
  border-bottom-color: transparent !important;
}

/* ===== Final tabs fix (light stays blue; dark = yellow active, white-outline hover) ===== */

/* Light defaults */
.site-tabs { --tabs-border: var(--border); }

/* Dark overrides */
[data-bs-theme="dark"] .site-tabs {
  --tabs-border: #ffffff;
  --tab-active-bg: #f1c40f;   /* AIBB yellow */
  --tab-active-fg: #0b0b0c;   /* dark text on yellow */
}

/* Inactive tabs */
.site-tabs .nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* Hover */
.site-tabs .nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* Active tab */
/* Light: brand blue; Dark: tokenized yellow */
.site-tabs .nav-link.active,
.site-tabs .nav-link.bg-primary{
  background: var(--tab-active-bg, var(--brand)) !important;
  color: var(--tab-active-fg, #fff) !important;
  border-color: var(--tab-active-bg, var(--brand)) var(--tab-active-bg, var(--brand)) transparent !important;
  font-weight: 600;
  border-bottom-color: transparent !important;
}

/* Round the active tab top corners (same look as before) */
.site-tabs .nav-link { border-top-left-radius:.375rem; border-top-right-radius:.375rem; }
.site-tabs .nav-link.active { font-weight:600; }

/* ===== Tabs: final overrides ===== */

/* Light defaults */
.site-tabs { --tabs-border: var(--border); }

/* Dark-mode tokens */
[data-bs-theme="dark"] .site-tabs {
  --tabs-border: #ffffff;
  --tab-active-bg: #f1c40f;   /* AIBB yellow */
  --tab-active-fg: #0b0b0c;   /* dark text on yellow */
}

/* Inactive */
.nav.nav-tabs.site-tabs .nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* Hover */
.nav.nav-tabs.site-tabs .nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* Active */
.nav.nav-tabs.site-tabs .nav-link.active{
  background: var(--tab-active-bg, var(--brand)) !important;
  color: var(--tab-active-fg, #fff) !important;
  border-color: var(--tab-active-bg, var(--brand)) var(--tab-active-bg, var(--brand)) transparent !important;
  font-weight: 600;
  border-bottom-color: transparent !important;
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}

/* Make your existing helper class play nice in tabs */
.site-tabs .header-auto-text { color: var(--muted) !important; }

/* ===== Tabs: final, high-specificity overrides ===== */

/* light defaults */
.site-tabs { --tabs-border: var(--border); }

/* dark tokens (for later) */
[data-bs-theme="dark"] .site-tabs{
  --tabs-border:#fff;
  --tab-active-bg:#f1c40f;
  --tab-active-fg:#0b0b0c;
}

/* inactive */
body .nav.nav-tabs.site-tabs .nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
  border-top-left-radius:.375rem; border-top-right-radius:.375rem;
}

/* hover */
body .nav.nav-tabs.site-tabs .nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* active: light=brand blue; dark=yellow */
body .nav.nav-tabs.site-tabs .nav-link.active{
  background: var(--tab-active-bg, var(--brand)) !important;
  color: var(--tab-active-fg, #fff) !important;
  border-color: var(--tab-active-bg, var(--brand)) var(--tab-active-bg, var(--brand)) transparent !important;
  border-bottom-color: transparent !important;
  font-weight:600;
}

/* ===== Tabs: final overrides ===== */

/* light defaults */
.site-tabs { --tabs-border: var(--border); }

/* dark tokens (for later) */
[data-bs-theme="dark"] .site-tabs{
  --tabs-border:#fff;
  --tab-active-bg:#f1c40f;   /* AIBB yellow */
  --tab-active-fg:#0b0b0c;   /* dark text on yellow */
}

/* inactive */
body .nav.nav-tabs.site-tabs .nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
  border-top-left-radius:.375rem;
  border-top-right-radius:.375rem;
}

/* hover */
body .nav.nav-tabs.site-tabs .nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* active: light=brand blue; dark=yellow */
body .nav.nav-tabs.site-tabs .nav-link.active{
  background: var(--tab-active-bg, var(--brand)) !important;
  color: var(--tab-active-fg, #fff) !important;
  border-color: var(--tab-active-bg, var(--brand)) var(--tab-active-bg, var(--brand)) transparent !important;
  border-bottom-color: transparent !important;
  font-weight:600;
}

/* ===== Tabs: hard override in header ===== */
header .nav.nav-tabs.site-tabs > li > a.nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--border) var(--border) transparent !important;
  border-top-left-radius:.375rem; border-top-right-radius:.375rem;
}
header .nav.nav-tabs.site-tabs > li > a.nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--border) var(--border) transparent !important;
}
header .nav.nav-tabs.site-tabs > li > a.nav-link.active{
  background: var(--brand) !important;      /* blue on light */
  color: #fff !important;
  border-color: var(--brand) var(--brand) transparent !important;
  border-bottom-color: transparent !important;
  font-weight:600;
}

/* dark-mode tweak (kept ready for /dark/) */
[data-bs-theme="dark"] header .nav.nav-tabs.site-tabs > li > a.nav-link{
  border-color: #fff #fff transparent !important;
}
[data-bs-theme="dark"] header .nav.nav-tabs.site-tabs > li > a.nav-link.active{
  background: #f1c40f !important;  /* yellow active */
  color: #0b0b0c !important;
  border-color: #f1c40f #f1c40f transparent !important;
}

/* ==== TABS: hard, final overrides (wins over Bootstrap + builder) ==== */

/* Light defaults */
header .nav.nav-tabs.site-tabs { --tabs-border: var(--border); }

/* Dark overrides (for when you copy to /dark/) */
[data-bs-theme="dark"] header .nav.nav-tabs.site-tabs {
  --tabs-border: #fff;
  --tab-active-bg: #f1c40f;  /* AIBB yellow */
  --tab-active-fg: #0b0b0c;  /* readable on yellow */
}

/* Inactive */
header .nav.nav-tabs.site-tabs > li > a.nav-link{
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
  border-top-left-radius:.375rem; border-top-right-radius:.375rem;
}

/* Hover */
header .nav.nav-tabs.site-tabs > li > a.nav-link:hover{
  color: var(--text) !important;
  background: var(--bg-soft) !important;
  border-color: var(--tabs-border) var(--tabs-border) transparent !important;
}

/* Active — light: brand blue; dark: yellow */
header .nav.nav-tabs.site-tabs > li > a.nav-link.active{
  background: var(--tab-active-bg, var(--brand)) !important;
  color: var(--tab-active-fg, #fff) !important;
  border-color: var(--tab-active-bg, var(--brand)) var(--tab-active-bg, var(--brand)) transparent !important;
  border-bottom-color: transparent !important;
  font-weight: 600;
}

/* TEMP DEBUG — remove after confirming */
body{ outline: 2px solid transparent !important; }

/* Sidebar uses light surface (same tone as bg-light) */
.sidebar-col.surface-soft{
  background: var(--bg-soft);
  color: var(--text);
  border-right: 1px solid var(--border);
}

/* Keep your canvas intentionally dark in light mode */
.canvas-surface{
  background: #111;     /* near Bootstrap bg-dark */
  color: #fff;
}
.canvas-surface .section-headline{ color:#adb5bd !important; }

/* Dark-site copy auto-adjusts without markup changes */
[data-bs-theme="dark"] .canvas-surface{
  background: #0f1113;
  color: #e9ecef;
  border: 1px solid var(--border);
}

/* Footer link: never underline, in any state (wins over everything) */
footer.site-footer small a,
footer.site-footer small a:hover,
footer.site-footer small a:focus,
footer.site-footer small a:active,
footer.site-footer small a:visited {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border-bottom: 0 !important;
}

/* === Chat widget styles (moved from inline) === */
:root {
  --aibb-yellow:#f1c40f; 
  --aibb-dark:#1e1e1e; 
  --aibb-mid:#2c2c2c; 
  --aibb-light:#333; 
  --aibb-text:#fff; 
  --aibb-muted:#ccc;
}
#chatbotBtn{
  position:fixed; right:30px; bottom:30px; z-index:100;
  background-color:#f1c40f; color:black; border:none;
  padding:12px 24px; border-radius:6px; font-size:16px;
  box-shadow:0 4px 10px rgba(0,0,0,0.3); cursor:pointer; transition:all .3s ease;
}
#chatbotBtn:hover{ background-color:#000; color:#fff; }
#chatContainer{
  position:fixed; bottom:80px; right:20px; width:360px; height:480px;
  background:var(--aibb-dark); color:var(--aibb-text); border-radius:10px;
  box-shadow:0 0 20px rgba(0,0,0,.4); overflow:hidden; display:flex; flex-direction:column; z-index:9999;
}
.chat-header{ background:var(--aibb-yellow); color:black; padding:12px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; }
.close-btn{ background:#444; color:var(--aibb-text); border:none; padding:4px 8px; border-radius:5px; cursor:pointer; }
.close-btn:hover{ background:#222; }
.chat-body{ flex:1; overflow-y:auto; padding:12px; background:var(--aibb-mid); display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.chat-footer{ padding:10px; background:var(--aibb-dark); border-top:1px solid #444; }
.chat-input-container{ display:flex; gap:10px; }
#chatInput{ flex:1; padding:8px; background:#2a2a2a; border:1px solid #555; border-radius:5px; color:var(--aibb-text); }
#sendBtn{ background:var(--aibb-yellow); color:black; border:none; padding:8px 14px; border-radius:5px; cursor:pointer; }
#sendBtn:hover{ background:#e0b200; }
.user-message,.bot-message{ padding:10px 14px; border-radius:10px; background:var(--aibb-light); max-width:100%; word-wrap:break-word; white-space:pre-wrap; }
.user-message{ background:var(--aibb-yellow); color:black; align-self:flex-end; }
.bot-message{ background:#3a3a3a; color:var(--aibb-muted); align-self:flex-start; }

/* ---------------- DARK MODE FIXES ---------------- */
[data-bs-theme="dark"] body {
  background-color: #121212 !important;  /* overall page background */
  color: #f8f9fa !important;
}

/* Canvas area should stand out (white background) */
[data-bs-theme="dark"] #canvasArea {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-radius: 0.5rem;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

/* Sidebar + gap background */
[data-bs-theme="dark"] .sidebar-col,
[data-bs-theme="dark"] .canvas-surface {
  background-color: #1e1e1e !important; /* Bootstrap dark surface */
  color: #f8f9fa !important;
}

/* Checkbox labels / form controls in sidebar */
[data-bs-theme="dark"] .sidebar-col label,
[data-bs-theme="dark"] .sidebar-col .form-check-label {
  color: #f8f9fa !important;
}

/* Fix tabs: remove white border line */
[data-bs-theme="dark"] .site-tabs {
  border-bottom: none !important;
}

/* Inactive tabs */
[data-bs-theme="dark"] .site-tabs .nav-link {
  background: transparent !important;
  color: #ccc !important;
  border: none !important;
}

/* Hover tabs */
[data-bs-theme="dark"] .site-tabs .nav-link:hover {
  background: #2c2c2c !important;
  color: #fff !important;
}

/* Active tab (yellow, no border line under) */
[data-bs-theme="dark"] .site-tabs .nav-link.active {
  background: #f1c40f !important;
  color: #000 !important;
  border: none !important;
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}

/* ===================== DARK: Left panel + controls ===================== */

/* Make sidebar match the header background */
[data-bs-theme="dark"] .site-header.surface { 
  background-color: #1f1f1f !important;
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] .sidebar-col,
[data-bs-theme="dark"] .surface-soft {
  background-color: #1f1f1f !important;  /* same as header */
  color: #f8f9fa !important;
}

/* Section labels, small text, dividers in the sidebar */
[data-bs-theme="dark"] .sidebar-col label,
[data-bs-theme="dark"] .sidebar-col .small,
[data-bs-theme="dark"] .sidebar-col .text-muted {
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] .sidebar-col hr {
  border-color: #2b2b2b !important;
}

/* Checkboxes: visible border + yellow when checked */
[data-bs-theme="dark"] .sidebar-col .form-check-input {
  background-color: transparent !important;
  border-color: #bfc3c7 !important;
}
[data-bs-theme="dark"] .sidebar-col .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Inputs/selects inside the left panel (e.g., "Free Sections" dropdown) */
[data-bs-theme="dark"] .sidebar-col .form-control,
[data-bs-theme="dark"] .sidebar-col .form-select {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #50555a !important;
}
[data-bs-theme="dark"] .sidebar-col .form-control::placeholder {
  color: #c8c8c8 !important;
}

/* Buttons in the left panel */
[data-bs-theme="dark"] .sidebar-col .btn-outline-light {
  color: #f8f9fa !important;
  border-color: #c2c6ca !important;
}
[data-bs-theme="dark"] .sidebar-col .btn-outline-dark {
  color: #f8f9fa !important;
  border-color: #c2c6ca !important;
}
[data-bs-theme="dark"] .sidebar-col .btn-danger,
[data-bs-theme="dark"] .sidebar-col .btn-success,
[data-bs-theme="dark"] .sidebar-col .btn-primary {
  box-shadow: none !important;
}

/* Canvas stays distinct (grey/near-black outer, white canvas) */
[data-bs-theme="dark"] body { background-color: #121212 !important; }
[data-bs-theme="dark"] #canvasArea {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-radius: .5rem;
  box-shadow: 0 0 12px rgba(0,0,0,.5);
}

/* Tabs: remove bottom white line (re-assert just in case) */
[data-bs-theme="dark"] .site-tabs { border-bottom: none !important; }


/* 🔧 Force Free & Pro section titles to black text */
#sectionButtons > div.bg-white {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important; /* Safari fix */
  font-weight: 600;
  border: 1px solid #dee2e6; /* lighter Bootstrap gray */
  border-radius: .375rem;
}

::placeholder {
  color: #555 !important;
  opacity: 1 !important;
}

/* === FINAL COSMETIC FIXES === */

/* 1. Prevent white flash on hover */
#sectionButtons .section-control:hover {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

/* 2. Keep checkbox checked state in blue */
.form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* 3. (Optional) Remove checkbox glow on focus */
.form-check-input:focus {
  box-shadow: none !important;
}

/* 🛠 Remove white hover on section container buttons */
#sectionButtons .btn-outline-light:hover {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

/* 🛠 Remove white hover on save button */
.custom-save-btn {
  color: #212529;
  border: 1px solid #212529;
  background-color: transparent;
}

[data-bs-theme="dark"] .custom-save-btn {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.custom-save-btn:hover,
.custom-save-btn:focus,
.custom-save-btn:active {
  background-color: transparent !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}