/* Sidebar + Topbar – bulletproof 1:1 copy of account.html shell styles.
   Every property explicit with !important to neutralize external CSS resets
   (dashboard.min.css * resets, body line-height, *{margin:0;padding:0} inline rules).
   Load AFTER all other CSS. */

/* ==== TOPBAR (settings-topbar) ====
   FIXED positioning – sticky breaks on pages with `body{overflow-x:hidden}`
   (account.html), same root cause as sidebar. Fixed pinned to viewport.
   .settings-body must compensate with padding-top:80px so content doesn't
   render under topbar. */
.settings-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e8ecf0 !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  margin: 0 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}
.acc-topbar-logo {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.acc-topbar-logo img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
}
.topbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
.acc-topbar-help {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: auto !important;
  padding: 8px 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.acc-topbar-help:hover { background: #f0eeff !important; border-color: #c4b5fd !important; color: #7c3aed !important; }
.acc-topbar-help-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #374151 !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* ==== BODY layout ==== */
.settings-body {
  display: flex !important;
  min-height: calc(100vh - 80px) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==== SIDEBAR CONTAINER (desktop) ====
   FIXED positioning instead of sticky. Sticky fails on pages that have
   `body { overflow-x: hidden }` (e.g. account.html) – body becomes the
   scroll container and traps sticky inside its height. Fixed pinned to
   viewport works regardless of any ancestor overflow.
   Mobile (≤760px) overrides this rule with its own fixed slide-out drawer
   in the @media block at the bottom of this file. */
.settings-sidebar {
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 #e8ecf0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  position: fixed !important;
  top: 80px !important;
  left: 0 !important;
  bottom: 0 !important;
  height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
/* Compensate for fixed topbar (80px) + fixed sidebar (288px) – body content
   shifts down + right so nothing renders under fixed elements.
   Mobile resets in @media block (different topbar height + slide-out drawer). */
@media (min-width: 761px) {
  .settings-body {
    padding-left: 288px !important;
    padding-top: 80px !important;
    box-sizing: border-box !important;
  }
  /* Sidebar already starts at top:80px (under fixed topbar) – no double offset */
}

/* Hide legacy elements that account.html also hides */
.sidebar-orb { display: none !important; }
.sidebar-logo-area { display: none !important; }
.sidebar-item { display: none !important; }
.sidebar-back-btn { display: none !important; }
.sidebar-divider { display: none !important; }

/* ==== NAV ==== */
.sidebar-nav {
  flex: 1 !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  list-style: none !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}

/* ==== SECTION LABELS ==== */
.sidebar-section-label {
  display: block !important;
  padding: 18px 14px 4px !important;
  margin: 0 !important;
  border: none !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0.09em !important;
  word-spacing: normal !important;
  line-height: 1.2 !important;
  color: #9ca3af !important;
  background: transparent !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: left !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

/* ==== NAV ITEMS ==== */
/* Hidden attribute must win over display:flex !important */
.sidebar-nav-item[hidden] { display: none !important; }
.sidebar-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  margin: 1px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  line-height: 1.2 !important;
  color: #64748b !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-align: left !important;
  transition: background 0.12s !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  border: none !important;
  background: transparent !important;
  width: calc(100% - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.sidebar-nav-item span {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: inherit !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
}
.sidebar-nav-item svg {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  color: #6b7280 !important;
  stroke: currentColor !important;
}
.sidebar-nav-item:hover { background: #f5f3ff !important; color: #5b21b6 !important; }
.sidebar-nav-item:hover svg { color: #7c3aed !important; }
.sidebar-nav-item.active { background: #ede9fe !important; color: #5b21b6 !important; font-weight: 600 !important; }
.sidebar-nav-item.active svg { color: #7c3aed !important; }
.sidebar-nav-disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ==== USER CARD ==== */
.sidebar-user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 10px !important;
  padding: 10px 12px !important;
  background: #f5f3ff !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.12s !important;
  box-sizing: border-box !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
.sidebar-user-card:hover { background: #ede9fe !important; }
.sidebar-user-av {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.sidebar-user-card-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}
.sidebar-user-card-id {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}

/* ==== LOGOUT ==== */
.sidebar-logout-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 2px 10px 14px !important;
  padding: 9px 12px !important;
  border: none !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  width: calc(100% - 20px) !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.sidebar-logout-btn:hover { background: #fef2f2 !important; color: #ef4444 !important; }
.sidebar-logout-btn svg {
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  color: #6b7280 !important;
  stroke: currentColor !important;
}
.sidebar-logout-btn span {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

/* ============================================================================
 * DARK MODE – settings-* shell + sidebar-nav-* items + acc-topbar-* controls.
 * Shared across account.html, patients.html, patients-add.html,
 * patients-deleted.html, patients-history.html, classification.html.
 * Mobile (≤760px) is force-light by mobile-force-light.js – these rules never
 * activate there since `body.dark-mode` is stripped on mobile.
 * ============================================================================ */

/* ── Layout shell ── */
body.dark-mode .settings-layout {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 30%),
    linear-gradient(160deg, #0f1722 0%, #152131 42%, #16263d 72%, #0d1727 100%) !important;
}
body.dark-mode .settings-body { background: transparent !important; }
body.dark-mode .settings-content {
  background: rgba(11,17,25,0.96) !important;
  color: #e6edf6 !important;
}

/* ── Topbar ── */
body.dark-mode .settings-topbar,
body.dark-mode #topbar.settings-topbar {
  background: linear-gradient(135deg, rgba(16,24,36,0.94), rgba(19,30,48,0.94)) !important;
  border-bottom: 1px solid rgba(96,165,250,0.16) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}
/* Logo swap: dark-logo.js swaps logo_male.png ↔ logo_ciemne.png
   based on body.dark-mode. No CSS filter needed – keep original colors. */

/* Topbar right controls – Help / Bell / Login / Discreet / mode-switch */
body.dark-mode .acc-topbar-help,
body.dark-mode .acc-topbar-discreet,
body.dark-mode .acc-topbar-login,
body.dark-mode .acc-topbar-bell {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(96,165,250,0.20) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .acc-topbar-help:hover,
body.dark-mode .acc-topbar-discreet:hover,
body.dark-mode .acc-topbar-login:hover,
body.dark-mode .acc-topbar-bell:hover {
  background: rgba(96,165,250,0.12) !important;
  border-color: rgba(96,165,250,0.36) !important;
  color: #e6edf6 !important;
}
body.dark-mode .acc-topbar-help-circle {
  background: rgba(96,165,250,0.16) !important;
  color: #93c5fd !important;
}
body.dark-mode .acc-topbar-bell-badge {
  background: #ef4444 !important;
  color: #fff !important;
}
body.dark-mode .topbar-divider {
  background: rgba(96,165,250,0.18) !important;
}
body.dark-mode .mode-switch button {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(96,165,250,0.18) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .mode-switch button:hover {
  background: rgba(96,165,250,0.12) !important;
  color: #e6edf6 !important;
}

/* ── Sidebar shell ── */
body.dark-mode .settings-sidebar {
  background: linear-gradient(180deg, #132033 0%, #17304e 42%, #17406b 100%) !important;
  border-right: 1px solid rgba(96,165,250,0.16) !important;
  box-shadow: 1px 0 0 rgba(96,165,250,0.10) !important;
}

/* Sidebar nav items (current style – buttons) */
body.dark-mode .sidebar-nav-item {
  color: #cbd5e1 !important;
  background: transparent !important;
}
body.dark-mode .sidebar-nav-item svg { color: #94a3b8 !important; }
body.dark-mode .sidebar-nav-item:hover {
  background: rgba(96,165,250,0.14) !important;
  color: #e6edf6 !important;
}
body.dark-mode .sidebar-nav-item:hover svg { color: #93c5fd !important; }
body.dark-mode .sidebar-nav-item.active {
  background: rgba(96,165,250,0.22) !important;
  color: #ffffff !important;
}
body.dark-mode .sidebar-nav-item.active svg { color: #c4b5fd !important; }
body.dark-mode .sidebar-nav-disabled {
  opacity: 0.32 !important;
  color: #64748b !important;
}

/* Section labels */
body.dark-mode .sidebar-section-label {
  color: #64748b !important;
}

/* User card at sidebar bottom */
body.dark-mode .sidebar-user-card {
  background: rgba(96,165,250,0.10) !important;
  border-color: rgba(96,165,250,0.18) !important;
}
body.dark-mode .sidebar-user-card:hover {
  background: rgba(96,165,250,0.18) !important;
}
body.dark-mode .sidebar-user-av {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
}
body.dark-mode .sidebar-user-card-name { color: #e6edf6 !important; }
body.dark-mode .sidebar-user-card-id { color: #94a3b8 !important; }

/* Logout button */
body.dark-mode .sidebar-logout-btn {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(239,68,68,0.18) !important;
  color: #fca5a5 !important;
}
body.dark-mode .sidebar-logout-btn:hover {
  background: rgba(239,68,68,0.14) !important;
  color: #fecaca !important;
}
body.dark-mode .sidebar-logout-btn svg { color: #fca5a5 !important; }

/* Sidebar logo area + sidebar-back-btn (older layout) */
body.dark-mode .sidebar-logo-text { color: #e6edf6 !important; }
body.dark-mode .sidebar-back-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(96,165,250,0.20) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .sidebar-back-btn:hover {
  background: rgba(96,165,250,0.16) !important;
}

/* Sidebar orbs (decorative) – softer in dark */
body.dark-mode .sidebar-orb { opacity: 0.5; }
body.dark-mode .topbar-orb { opacity: 0.4; }

/* Layer language picker (1:1 from app.html) */
body.dark-mode .layer-lang-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(96,165,250,0.22) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .layer-lang-btn:hover {
  background: rgba(96,165,250,0.16) !important;
  color: #e6edf6 !important;
}
body.dark-mode .layer-lang-drop {
  background: #161825 !important;
  border-color: rgba(96,165,250,0.20) !important;
}
body.dark-mode .layer-lang-opt {
  background: transparent !important;
  color: #e6edf6 !important;
}
body.dark-mode .layer-lang-opt:hover {
  background: rgba(124,58,237,0.20) !important;
  color: #c4b5fd !important;
}
body.dark-mode .switch-label span {
  color: #94a3b8 !important;
}

/* ====================================================================
 * TOPBAR LANG PICKER – single compact row button (flag + chevron + label
 * in one row). Overrides global `.layer-item--btn` column flex from
 * topbar.css. Applies on desktop AND mobile.
 * ==================================================================== */
.settings-topbar .layer-lang-item,
#topbar.settings-topbar .layer-lang-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
}
.settings-topbar .layer-lang-item .layer-lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 36px !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.settings-topbar .layer-lang-item .layer-lang-btn:hover {
  border-color: #c4b5fd !important;
  background: #faf8ff !important;
}
.settings-topbar .layer-lang-item .layer-lang-emoji {
  font-size: 18px !important;
  line-height: 1 !important;
}
.settings-topbar .layer-lang-item .layer-lang-chevron {
  font-size: 9px !important;
  color: #94a3b8 !important;
}
.settings-topbar .layer-lang-item .switch-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.settings-topbar .layer-lang-item .switch-label span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1 !important;
}
.settings-topbar .layer-lang-drop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 160px !important;
  margin-top: 0 !important;
}

/* Dark mode topbar lang */
body.dark-mode .settings-topbar .layer-lang-item .layer-lang-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(96,165,250,0.22) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .settings-topbar .layer-lang-item .layer-lang-btn:hover {
  background: rgba(96,165,250,0.16) !important;
  color: #e6edf6 !important;
}
body.dark-mode .settings-topbar .layer-lang-item .switch-label span {
  color: #cbd5e1 !important;
}

/* Hide injected topbar-toolbox row if it sneaks in (legacy) */
.settings-topbar .tbtb-row,
#topbar .tbtb-row { display: none !important; }

/* ====================================================================
 * MOBILE LAYOUT (≤760px) – sidebar slide-out drawer + minimal topbar.
 * Mirrors account.html mobile shell. Used by patients-* pages too.
 * Mobile is force-light by mobile-force-light.js – these rules render
 * light only (dark variants kept for desktop dark mode).
 * ==================================================================== */
.acc-mob-hamburger,
.acc-mob-lang,
.acc-sidebar-backdrop { display: none; }

@media (max-width: 760px) {
  /* Topbar minimal – logo + lang only */
  #topbar.settings-topbar {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 12px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  .settings-topbar .topbar-divider,
  .settings-topbar .mode-switch,
  .settings-topbar .acc-topbar-help,
  .settings-topbar .acc-topbar-login {
    display: none !important;
  }
  /* Lang picker shown on mobile too – replaces former .acc-mob-lang */
  .settings-topbar .layer-lang-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .settings-topbar .layer-lang-item .switch-label {
    display: none !important;
  }
  .settings-topbar .layer-lang-drop {
    left: auto !important;
    right: 0 !important;
    min-width: 140px !important;
  }
  .settings-topbar .logo img { height: 36px !important; }
  .settings-topbar .controls,
  .settings-topbar .topbar-right {
    margin-left: auto !important;
    gap: 8px !important;
  }

  /* Hamburger toggle */
  .acc-mob-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(124,58,237,0.18);
    color: #6d28d9;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  .acc-mob-hamburger:active { background: rgba(124,58,237,0.10); }

  /* Mobile language picker */
  .acc-mob-lang { display: inline-flex !important; position: relative; }
  .acc-mob-lang-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
  }
  .acc-mob-lang-flag { font-size: 16px; line-height: 1; }
  .acc-mob-lang-chev { font-size: 9px; color: #94a3b8; }
  .acc-mob-lang-drop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.18);
    min-width: 140px;
    overflow: hidden;
    z-index: 9100;
  }
  .acc-mob-lang.open .acc-mob-lang-drop { display: block; }
  .acc-mob-lang-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
  }
  .acc-mob-lang-opt:hover { background: #f5f3ff; }

  /* Sidebar drawer */
  .settings-sidebar {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 86% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    z-index: 9000 !important;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.20) !important;
    padding: 12px 0 !important;
  }
  body.acc-sidebar-open .settings-sidebar {
    transform: translateX(0);
  }
  .settings-sidebar .sidebar-orb,
  .settings-topbar .topbar-orb {
    display: none !important;
  }

  /* Backdrop */
  .acc-sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(15,23,42,0.50);
    z-index: 8990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.20s;
  }
  body.acc-sidebar-open .acc-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Content full width */
  .settings-content {
    padding: 14px 12px 24px !important;
    min-height: calc(100vh - 60px) !important;
  }
  /* Mobile: reset desktop padding-left + adjust padding-top for 60px mobile topbar */
  .settings-body {
    min-height: calc(100vh - 60px) !important;
    padding-left: 0 !important;
    padding-top: 60px !important;
  }
}