/* ============================================================
   Custom additions on top of Bootstrap 5
   All colours / spacing / typography come from Bootstrap —
   only truly app-specific pieces live here.
   ============================================================ */

/* ── Hidden utility (used throughout JS) ─────────────────── */
.hidden { display: none !important; }

/* ── Page navigation bar ─────────────────────────────────── */

/* Inactive links: use muted text colour instead of Bootstrap's primary blue */
.page-nav .nav-link:not(.active) {
  color: var(--bs-secondary-color);
}
.page-nav .nav-link:not(.active):hover,
.page-nav .nav-link:not(.active):focus {
  color: var(--bs-body-color);
}

/* Tablet/mobile: scroll nav items horizontally without showing a scrollbar */
.page-nav-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}
.page-nav-scroller::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}

/* Products sub-nav row: compact height, slightly muted text */
.page-nav--products .nav-underline {
  --bs-nav-underline-gap: 0;
}
.page-nav__product-link {
  font-size: 0.8rem !important;
  color: var(--bs-secondary-color);
}
.page-nav__product-link:not(.active):hover,
.page-nav__product-link:not(.active):focus {
  color: var(--bs-body-color);
}
.page-nav__products-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  padding-right: 0.25rem;
  white-space: nowrap;
}

/* ── Boomi wordmark in the navbar ────────────────────────── */
.boomi-nav-logo {
  height: 54px;
  width: auto;
  flex-shrink: 0;
}
.boomi-nav-logo .bwm-dot  { fill: #FF7C69; }
.boomi-nav-logo .bwm-word { fill: #033d58; }
[data-bs-theme="dark"] .boomi-nav-logo .bwm-word { fill: #ffffff; }

/* ── Dot inside status / level badges ────────────────────── */
.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Timezone abbreviation pill ──────────────────────────── */
.tz-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: 1px 6px;
  color: var(--bs-secondary-color);
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.03em;
}

/* ── Raw JSON pre block ───────────────────────────────────── */
.raw-pre {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  color: var(--bs-secondary-color);
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre;
  max-height: 400px;
  display: none;
}
.raw-pre.visible { display: block; }

/* ── Action chip (monospace badge for audit action) ──────── */
.action-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--bs-font-monospace);
  background: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-primary);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
  border-radius: var(--bs-border-radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Type raw value (small mono below human-readable label) ─ */
.type-raw-text {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.3;
}

/* ── Tiny uppercase meta label inside cards ──────────────── */
.meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.65;
}

/* ── Audit card meta separator ───────────────────────────── */
.audit-meta-sep {
  opacity: 0.3;
  user-select: none;
}

/* ── Cursor pointer utility ──────────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ── Disclaimer footer ───────────────────────────────────── */
:root { --footer-h: 42px; }

.app-disclaimer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;    /* below debug panel (1000) */
  background-color: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  padding: 10px 0;
  min-height: var(--footer-h);
}
body.nav-left .app-disclaimer {
  margin-left: var(--sbar-width);
  transition: var(--sbar-transition);
}
body.nav-left.sidebar-mini .app-disclaimer {
  margin-left: var(--sbar-mini-width);
}
/* Lift debug panel above the footer; offset left to clear the sidebar */
.api-dbg { bottom: var(--footer-h) !important; }
body.nav-left .api-dbg { left: var(--sbar-width); transition: var(--sbar-transition); }
body.nav-left.sidebar-mini .api-dbg { left: var(--sbar-mini-width); }
/* Keep main content from being obscured by the fixed footer */
#app { padding-bottom: calc(var(--footer-h) + 8px); }
.app-disclaimer .container-xl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.boomi-footer-mark {
  height: 20px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── EDI debug panel pre blocks ──────────────────────────── */
.edi-debug-pre {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 0.5rem 0.75rem;
  white-space: pre;
}
.edi-debug-pre--error {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

/* ── Global API debug panel ──────────────────────────────── *
 * Fixed at the bottom of the viewport across all pages.      *
 * Uses its own explicit dark palette so it's readable on any *
 * Bootswatch theme.                                          *
 * ─────────────────────────────────────────────────────────── */

/* Palette tokens (panel-local; don't rely on BS CSS vars) */
:root {
  --dbg-bg:        #12121e;
  --dbg-bg-alt:    #1c1c2e;
  --dbg-border:    #2e2e45;
  --dbg-text:      #c9d1d9;
  --dbg-muted:     #6e7681;
  --dbg-ok:        #3fb950;
  --dbg-err:       #f85149;
  --dbg-warn:      #d29922;
  --dbg-badge-bg:  #21213a;
  --dbg-btn-bg:    #21213a;
  --dbg-btn-hover: #2e2e50;
  --dbg-row-err:   rgba(248, 81, 73, 0.08);
  --dbg-row-hover: rgba(255,255,255,0.04);
}

.api-dbg {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;   /* above Bootstrap dropdowns, below sidebar (1040) and modals (1055) */
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', 'Menlo', monospace;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--dbg-text);
}

/* ─── Bar (always visible) ─── */
.api-dbg__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dbg-bg);
  border-top: 1px solid var(--dbg-border);
  height: 33px;
  padding: 0 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.api-dbg__bar:hover { background: var(--dbg-bg-alt); }
.api-dbg__bar--has-errors { border-top-color: var(--dbg-err); }

.api-dbg__left,
.api-dbg__right { display: flex; align-items: center; gap: 8px; }

.api-dbg__label {
  font-weight: 600;
  color: var(--dbg-text);
  white-space: nowrap;
}

.api-dbg__badge {
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--dbg-badge-bg);
  color: var(--dbg-muted);
  white-space: nowrap;
}
.api-dbg__badge--err {
  background: rgba(248, 81, 73, 0.18);
  color: var(--dbg-err);
  font-weight: 600;
}

.api-dbg__btn {
  background: var(--dbg-btn-bg);
  border: 1px solid var(--dbg-border);
  border-radius: 4px;
  color: var(--dbg-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}
.api-dbg__btn:hover { background: var(--dbg-btn-hover); }

/* ─── Log area (expanded) ─── */
.api-dbg__log {
  background: var(--dbg-bg);
  border-top: 1px solid var(--dbg-border);
  height: 260px;
}
.api-dbg__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

/* ─── Log table ─── */
.api-dbg__table {
  border-collapse: collapse;
  min-width: 100%;
  width: 100%;
}
.api-dbg__table thead {
  position: sticky;
  top: 0;
  background: var(--dbg-bg-alt);
  z-index: 1;
}
.api-dbg__table th {
  border-bottom: 1px solid var(--dbg-border);
  color: var(--dbg-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.api-dbg__table td {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 3px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Row states */
.api-dbg__row { transition: background 0.1s; }
.api-dbg__row:hover { background: var(--dbg-row-hover); }
.api-dbg__row--err  { background: var(--dbg-row-err); }
.api-dbg__row--err:hover { background: rgba(248, 81, 73, 0.14); }

/* Cell types */
.api-dbg__icon-ok  { color: var(--dbg-ok);  font-weight: 700; }
.api-dbg__icon-err { color: var(--dbg-err); font-weight: 700; }

.api-dbg__method {
  color: #79c0ff;
  font-weight: 600;
  width: 40px;
}
.api-dbg__ep {
  color: var(--dbg-text);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.api-dbg__st     { color: var(--dbg-ok);  font-weight: 600; }
.api-dbg__st--err{ color: var(--dbg-err); font-weight: 600; }

.api-dbg__ms   { color: var(--dbg-muted); }
.api-dbg__time { color: var(--dbg-muted); }

.api-dbg__errmsg {
  color: var(--dbg-err);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-dbg__retry {
  color: var(--dbg-warn);
  font-size: 10px;
  margin-left: 5px;
}

/* ── Faded nav separator ─────────────────────────────────────
 * Replaces border-bottom on nav rows. Draws a 1px gradient line
 * at the bottom of each row that fades out at the content
 * container boundary — rendered as a background layer so it
 * can't be obscured by adjacent sibling elements.
 *
 * The gradient is centred and constrained to ~1320px (container-xl).
 * On viewports narrower than that it gracefully becomes full-width.
 * ─────────────────────────────────────────────────────────── */
.nav-sep {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent 0%,
    var(--bs-border-color) 10%,
    var(--bs-border-color) 90%,
    transparent 100%
  ) 1;
}

/* ── Runtimes compare pill ───────────────────────────────── */
.rt-compare-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Runtimes collapsible sidebar ────────────────────────── */
#rt-sidebar {
  transition: width 200ms cubic-bezier(0.62, 0.28, 0.23, 0.99),
              min-width 200ms cubic-bezier(0.62, 0.28, 0.23, 0.99),
              opacity 150ms cubic-bezier(0.62, 0.28, 0.23, 0.99);
  overflow: hidden;
}
#rt-sidebar.rt-sidebar--collapsed {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  border-width: 0 !important;
}
/* Collapse the flex gap so no dead space remains */
#rt-layout:has(#rt-sidebar.rt-sidebar--collapsed) {
  gap: 0 !important;
}

/* ── Step tracker (shared by health page and dead process detector) ──────────
 * .dead-tracker/.dead-step classes defined inline in integrations.js;
 * .hc-tracker uses the same visual language via these shared rules.
 * ─────────────────────────────────────────────────────────────────────────── */
.hc-tracker { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1.25rem 1.5rem 1rem; margin-bottom: 1.25rem; display: none; }
.hc-tracker.is-visible { display: block; }
.hc-tracker-row { display: flex; align-items: flex-start; justify-content: center; }
.hc-step { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 100px; }
.hc-step-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s; }
.hc-step-label { font-size: .68rem; text-align: center; margin-top: .35rem; color: var(--bs-secondary-color); transition: color .25s, font-weight .25s; line-height: 1.2; }
.hc-step-line { flex: 1; height: 2px; background: var(--bs-border-color); margin-top: 16px; min-width: 24px; transition: background .3s; }
.hc-step-check { display: none; font-size: .8rem; color: #fff; font-weight: 700; }
.hc-step-spinner { display: none; width: .75rem; height: .75rem; border-width: 2px; color: #fff; }
.hc-step-icon { color: var(--bs-secondary-color); transition: color .25s; }
.hc-step[data-state="active"] .hc-step-dot    { border-color: var(--bs-primary); background: var(--bs-primary); }
.hc-step[data-state="active"] .hc-step-spinner { display: inline-block !important; }
.hc-step[data-state="active"] .hc-step-icon   { display: none; }
.hc-step[data-state="active"] .hc-step-label  { color: var(--bs-primary); font-weight: 600; }
.hc-step[data-state="done"]   .hc-step-dot    { border-color: var(--bs-success); background: var(--bs-success); }
.hc-step[data-state="done"]   .hc-step-check  { display: inline; }
.hc-step[data-state="done"]   .hc-step-icon   { display: none; }
.hc-step[data-state="complete"] .hc-step-dot  { border-color: var(--bs-success); background: var(--bs-success); }
.hc-step[data-state="complete"] .hc-step-check { display: inline; }
.hc-step[data-state="complete"] .hc-step-icon { display: none; }
.hc-step[data-state="complete"] .hc-step-label { color: var(--bs-success); font-weight: 600; }
.hc-step-line.is-done { background: var(--bs-success); }

@media print {
  .hc-tracker { display: none !important; }
}

/* ── Print styles ────────────────────────────────────────────
 * Applied when the user prints or saves as PDF.
 * Hides nav chrome; makes cards print-friendly.
 * ─────────────────────────────────────────────────────────── */
@media print {
  /* Hide global navigation and API log */
  .sticky-top,
  #api-debug-panel,
  .app-disclaimer          { display: none !important; }

  /* Cards: drop shadow, add hairline border, avoid mid-card page breaks */
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  /* Remove overflow clipping so all content renders */
  .overflow-hidden,
  .overflow-y-auto,
  .overflow-auto           { overflow: visible !important; }

  /* Let the detail panel expand to full width (sidebar is already d-print-none) */
  #rt-sections             { overflow: visible !important; }

  /* Ensure backgrounds/badges print (browser-permitting) */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ── Health page print fixes ──────────────────────────────── */

  /* Status bar: unpin from viewport, hide interactive controls */
  #hc-status-bar {
    position: static !important;
    break-inside: avoid;
  }
  #btn-hc-run-all,
  #hc-period-select,
  label[for="hc-period-select"],
  #hc-progress-bar-wrap,
  #hc-progress-label,
  .hc-run-btn,
  .hc-drilldown-btn        { display: none !important; }

  /* Force 2-column card grid on print (3 columns is too tight) */
  #hc-status-bar ~ * .col-xl-4 { flex: 0 0 50% !important; max-width: 50% !important; }

  /* Item label: allow wrapping instead of truncating */
  #hc-status-bar ~ * .text-truncate {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
  }

  /* Card body flex: prevent min-width-0 from collapsing content */
  #hc-status-bar ~ * .min-width-0 { min-width: 0 !important; overflow: visible !important; }

  /* Expand the "How it works" details block */
  details { display: block !important; }
  details > summary { display: none !important; }
  details[open] > *,
  details > *:not(summary) { display: block !important; }

  /* Category headings: keep with their cards */
  .mb-4 > p.text-uppercase { break-after: avoid; }

  /* Give each category room to breathe across pages */
  .mb-4 { break-inside: avoid-page; }
}

/* ── Integrations — inline schedule expansion ────────────── */
.pkg-chevron {
  transition: transform 200ms cubic-bezier(0.62, 0.28, 0.23, 0.99);
  color: var(--bs-secondary-color);
}
.pkg-chevron.open { transform: rotate(90deg); }

.pkg-expand-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
  border-radius: 3px;
}
.pkg-expand-btn:hover .pkg-chevron { color: var(--bs-body-color); }
.pkg-expand-btn:focus-visible { outline: 2px solid var(--bs-primary); }

.pkg-detail-row td { padding: 0 !important; border-top: none !important; }

.pkg-detail-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 260ms cubic-bezier(0.62, 0.28, 0.23, 0.99);
  background: var(--bs-tertiary-bg);
  border-top: 1px dashed var(--bs-border-color);
}
.pkg-detail-body.open { max-height: 800px; }

.pkg-detail-inner { padding: .75rem .75rem .75rem 2.25rem; }

.sch-runtime-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.sch-runtime-row:last-of-type { border-bottom: none; }

.sch-runtime-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 170px;
  flex-shrink: 0;
}

.sch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: 3px 8px;
  font-size: .78rem;
}
.sch-pill--listener {
  background: rgba(var(--bs-info-rgb), .07);
  border-color: rgba(var(--bs-info-rgb), .3);
}

.sch-cron-chip {
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 3px;
  padding: 0 5px;
  color: var(--bs-secondary-color);
}

/* ── Security Watch clickable rows ───────────────────────── */
.watch-sec-row {
  transition: background-color 0.1s;
}
.watch-sec-row:hover {
  background-color: var(--bs-tertiary-bg);
}
.watch-sec-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

/* Execution ID copy icon — appears on row hover */
tr:hover .ex-exec-id { opacity: .45 !important; }
tr:hover .ex-exec-id:hover { opacity: 1 !important; }

/* ── Left sidebar navigation ─────────────────────────────────────────────── */

:root {
  --sbar-width:      220px;
  --sbar-mini-width:  54px;
  /* --bs-dark is defined per Bootswatch theme — sidebar picks it up automatically.
     The #273E59 fallback applies only for the custom Boomi theme (which doesn't set --bs-dark). */
  --sbar-bg:         var(--bs-dark, #273E59);
  --sbar-accent:     var(--bs-primary, #4A90D9);
  --sbar-text:       rgba(255,255,255,.88);
  --sbar-text-muted: rgba(255,255,255,.50);
  --sbar-hover-bg:   rgba(255,255,255,.09);
  --sbar-active-bg:  rgba(255,255,255,.16);
  --sbar-panel-bg:   rgba(0,0,0,.2);
  --sbar-transition: width 220ms cubic-bezier(.4,0,.2,1),
                     margin-left 220ms cubic-bezier(.4,0,.2,1);
}

/* Dark Bootstrap themes: brighter accent, deeper panel overlay */
[data-bs-theme="dark"] {
  --sbar-accent:    var(--bs-primary, #6aabf7);
  --sbar-panel-bg:  rgba(0,0,0,.35);
}

/* Sidebar element */
#boomi-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sbar-width);
  background: var(--sbar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1040;
  transition: width 220ms cubic-bezier(.4,0,.2,1);
  box-shadow: 2px 0 8px rgba(0,0,0,.18);
}

/* Mini (icon-only) state */
body.sidebar-mini #boomi-sidebar {
  width: var(--sbar-mini-width);
}

/* Shift the main content area right when sidebar is open */
body.nav-left #app {
  margin-left: var(--sbar-width);
  transition: var(--sbar-transition);
}
body.nav-left.sidebar-mini #app {
  margin-left: var(--sbar-mini-width);
}

/* In left nav mode: hide only the nav tab rows (sticky-top is inside #app which already shifts) */
body.nav-left .sticky-top > nav {
  display: none !important;
}
/* Hide topbar buttons and dropdowns that move to the sidebar in left nav mode */
body.nav-left #btn-nav-toggle,
body.nav-left #btn-nav-mode-toggle {
  display: none !important;
}
body.nav-left .sticky-top > div .dropdown {
  display: none !important;
}

/* ── Sidebar brand / header ───────────────────────────────────────────────── */

.sbar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: .85rem .6rem .85rem .75rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  gap: .4rem;
}

.sbar-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.sbar-title {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  overflow: hidden;
  transition: opacity 150ms ease, max-width 150ms ease;
}

.sbar-title-line1 {
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
  white-space: nowrap;
  line-height: 1.2;
}

.sbar-title-line2 {
  font-weight: 400;
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  line-height: 1.2;
}

body.sidebar-mini .sbar-title { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; }

.sbar-brand-actions {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
  align-self: flex-end;
}

/* In mini mode: center just the collapse button, hide title/mode-toggle */
body.sidebar-mini .sbar-brand { align-items: center; justify-content: center; padding: .6rem 0; }
body.sidebar-mini .sbar-logo-wrap { display: none; }
body.sidebar-mini #sbar-mode-toggle { display: none; }

.sbar-icon-btn {
  background: none;
  border: none;
  color: var(--sbar-text-muted);
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.sbar-icon-btn:hover { color: #fff; background: var(--sbar-hover-bg); }

/* ── Sidebar nav ──────────────────────────────────────────────────────────── */

.sbar-nav {
  flex: 1;
  min-height: 0;          /* allow flex shrink when panels open */
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sbar-nav::-webkit-scrollbar { width: 4px; }
.sbar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.sbar-section-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sbar-text-muted);
  padding: .65rem .75rem .2rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 150ms ease;
}

body.sidebar-mini .sbar-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.sbar-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .48rem .75rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--sbar-text);
  font-size: .8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  border-radius: 0;
}

.sbar-item:hover {
  background: var(--sbar-hover-bg);
  color: #fff;
}

.sbar-item.active {
  background: var(--sbar-active-bg);
  border-left-color: var(--sbar-accent);
  color: #fff;
  font-weight: 600;
}

/* Collapse icon and label */
.sbar-item .sbar-icon {
  flex-shrink: 0;
  opacity: .8;
}
.sbar-item.active .sbar-icon { opacity: 1; }

.sbar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

body.sidebar-mini .sbar-item .sbar-label { opacity: 0; max-width: 0; overflow: hidden; flex-shrink: 1; }
body.sidebar-mini .sbar-item { justify-content: center; border-left-width: 0; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-mini .sbar-item.active { background: var(--sbar-active-bg); }

.sbar-badge {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: rgba(232,121,0,.22);
  color: #f9a63a;
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* ── Sidebar bottom area (panels + footer anchored together) ──────────────── */

.sbar-bottom-area {
  position: relative;
  flex-shrink: 0;
}

/* Panels pop up from the bottom area, overlaying the nav */
.sbar-inline-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  max-height: 50vh;
  background: var(--sbar-bg);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -6px 16px rgba(0,0,0,.3);
}
.sbar-inline-panel.open { display: flex; }

.sbar-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .75rem .25rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sbar-panel-close {
  background: none;
  border: none;
  color: var(--sbar-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .15rem;
  cursor: pointer;
  border-radius: 3px;
  transition: color .1s, background .1s;
}
.sbar-panel-close:hover { color: #fff; background: var(--sbar-hover-bg); }

.sbar-panel-title {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sbar-text-muted);
}

.sbar-panel-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sbar-panel-list::-webkit-scrollbar { width: 4px; }
.sbar-panel-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.sbar-panel-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .42rem .75rem;
  background: none;
  border: none;
  color: var(--sbar-text);
  font-size: .78rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s;
}
.sbar-panel-row:hover { background: var(--sbar-hover-bg); color: #fff; }
.sbar-panel-row.active { color: #fff; font-weight: 600; }

.sbar-panel-muted {
  display: block;
  padding: .4rem .75rem;
  font-size: .75rem;
  color: var(--sbar-text-muted);
}

.sbar-panel-sep {
  border-top: 1px solid rgba(255,255,255,.08);
  margin: .2rem 0;
}

.sbar-panel-add {
  color: rgba(255,255,255,.6);
  font-size: .75rem;
}

.sbar-acct-check {
  width: .9rem;
  flex-shrink: 0;
  text-align: center;
}

.sbar-acct-id {
  font-family: var(--bs-font-monospace);
  font-size: .73rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar footer ───────────────────────────────────────────────────────── */

.sbar-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  padding: .25rem 0;
}

.sbar-footer-item {
  border-radius: 0;
}

.sbar-account-id {
  font-family: var(--bs-font-monospace);
  font-size: .72rem;
  color: var(--sbar-text-muted);
}

body.sidebar-mini .sbar-account-id { opacity: 0; max-width: 0; overflow: hidden; }
body.sidebar-mini .sbar-footer { padding-left: 0; padding-right: 0; align-items: center; }