/* ============================================================================
   Babylon brand skin for the Uplon admin shell.
   Loaded AFTER app.min.css so these overrides win.

   Derived from the Babylon brand persona (voice guide — no visual specs):
   precise, institutional, Bitcoin-native, "precision not polish".
     · dark, high-contrast charcoal ground (not Uplon's blue-grey)
     · ONE restrained accent: Babylon gold (#e8a33d) — used sparingly
     · monospace for identifiers/data (agent ids, keys, run ids)
     · no gradients, no glow — shadows softened
   ============================================================================ */

:root {
  --bb-gold: #e8a33d;
  --bb-gold-2: #f0b45a;
  --bb-gold-rgb: 232, 163, 61;
  --bb-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* --- accent: retint Bootstrap primary to Babylon gold (both themes) --- */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  --bs-primary: var(--bb-gold);
  --bs-primary-rgb: var(--bb-gold-rgb);
  --bs-primary-text-emphasis: var(--bb-gold-2);
  --bs-primary-bg-subtle: rgba(var(--bb-gold-rgb), 0.14);
  --bs-primary-border-subtle: rgba(var(--bb-gold-rgb), 0.35);
  --bs-link-color: var(--bb-gold);
  --bs-link-color-rgb: var(--bb-gold-rgb);
  --bs-link-hover-color: var(--bb-gold-2);
}

/* --- dark ground: institutional charcoal, not Uplon's #2c313e blue-grey --- */
:root[data-bs-theme="dark"] {
  --bs-body-bg: #101318;
  --bs-body-bg-rgb: 16, 19, 24;
  --bs-body-color: #c7ccd4;
  --bs-body-color-rgb: 199, 204, 212;
  --bs-secondary-color: #8a929e;
  --bs-emphasis-color: #eef1f5;
  --bs-border-color: #272c35;
  --bs-light: #1b1f27;
  --bs-light-rgb: 27, 31, 39;
  --bs-tertiary-bg: #171b22;
  --bs-box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  --bs-heading-color: #eef1f5;
}
:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .content-page,
:root[data-bs-theme="dark"] .modal-content,
:root[data-bs-theme="dark"] .dropdown-menu {
  --bs-card-bg: #181c23;
  background-color: #181c23;
  border-color: #262b34;
}
:root[data-bs-theme="dark"] .wrapper { background-color: var(--bs-body-bg); }

/* --- sidenav (dark charcoal, gold active rail) --- */
:root[data-bs-theme="dark"][data-menu-color="dark"],
:root[data-menu-color="dark"] {
  --bs-menu-bg: #14171d;
  --bs-menu-item-color: #9aa2ae;
  --bs-menu-item-hover-color: #ffffff;
  --bs-menu-item-hover-bg: #1e232c;
  --bs-menu-item-active-color: var(--bb-gold-2);
  --bs-menu-item-active-bg: rgba(var(--bb-gold-rgb), 0.12);
}
:root[data-menu-color="dark"] .side-nav-title { color: #5f6773; letter-spacing: .06em; }
:root[data-menu-color="dark"] .side-nav-link.active,
:root[data-menu-color="dark"] .side-nav-item > .side-nav-link.active {
  box-shadow: inset 3px 0 0 var(--bb-gold);
}

/* --- topbar --- */
:root[data-bs-theme="dark"][data-topbar-color="dark"],
:root[data-topbar-color="dark"] {
  --bs-topbar-bg: #14171d;
  --bs-topbar-item-color: #9aa2ae;
  --bs-topbar-item-hover-color: #ffffff;
}

/* --- brand wordmark --- */
.bb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bb-brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--bb-gold-2), var(--bb-gold));
  color: #14171d; font-weight: 800; font-family: var(--bb-mono); font-size: 16px;
}
.bb-brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.bb-wordmark { font-weight: 650; letter-spacing: -.01em; font-size: 16px; color: #eef1f5; line-height: 1; }
.bb-wordmark .dot { color: var(--bb-gold); }
.logo-sm .bb-wordmark { display: none; }

/* --- accent buttons, focus, restrained --- */
.btn-primary {
  --bs-btn-bg: var(--bb-gold); --bs-btn-border-color: var(--bb-gold);
  --bs-btn-hover-bg: var(--bb-gold-2); --bs-btn-hover-border-color: var(--bb-gold-2);
  --bs-btn-active-bg: var(--bb-gold-2); --bs-btn-color: #14171d; --bs-btn-hover-color: #14171d;
  --bs-btn-active-color: #14171d; --bs-btn-disabled-bg: var(--bb-gold); --bs-btn-disabled-border-color: var(--bb-gold);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--bb-gold); --bs-btn-border-color: rgba(var(--bb-gold-rgb), .5);
  --bs-btn-hover-bg: var(--bb-gold); --bs-btn-hover-border-color: var(--bb-gold); --bs-btn-hover-color: #14171d;
}
.text-primary { color: var(--bb-gold) !important; }
.bg-primary { background-color: var(--bb-gold) !important; color: #14171d !important; }
*:focus-visible { outline: 2px solid rgba(var(--bb-gold-rgb), .6); outline-offset: 1px; }

/* --- identifiers in monospace (the technical vernacular) --- */
.bb-mono, code, .font-monospace, td .bb-id { font-family: var(--bb-mono); }
.bb-id { font-size: 12.5px; color: var(--bs-secondary-color); }

/* --- status pills (semantic, separate from the gold accent) --- */
.bb-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; }
.bb-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bb-pill.ok { color: #3fbf87; background: rgba(63, 191, 135, .12); }
.bb-pill.warn { color: var(--bb-gold-2); background: rgba(var(--bb-gold-rgb), .14); }
.bb-pill.bad { color: #e5624a; background: rgba(229, 98, 74, .14); }
.bb-pill.muted { color: #8a929e; background: rgba(138, 146, 158, .14); }

/* --- page title, cards: quieter, precise --- */
.page-title { font-weight: 650; letter-spacing: -.01em; }
.card { border-radius: 12px; }
.card-title { font-weight: 620; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }

/* --- login card accent --- */
.bb-auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 6px; }