/* ─────────────────────────────────────────────────────────────────────
 * build-app-shell.css — Unified Build Agent topbar styling.
 *
 * Loaded by every Build Agent inner page (products, orders, customers,
 * blog, leads, etc.) so they all share the same chrome as the new
 * /manva-dashboard.html and feel like part of one app.
 *
 * Design tokens mirror manva-dashboard.html so the visual language is
 * consistent. Do not branch styles — if the dashboard updates, this
 * stylesheet should be updated to match.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  --bas-bg: #fbf9ff;
  --bas-bg-soft: #ffffff;
  --bas-ink: #0a0f1e;
  --bas-ink-dim: #475569;
  --bas-ink-faint: #94a3b8;
  --bas-rule: rgba(10, 15, 30, .08);
  --bas-rule-strong: rgba(10, 15, 30, .14);
  --bas-m-purple: #7c3aed;
  --bas-m-purple-dim: #6d28d9;
  --bas-m-pink: #ec4899;
  --bas-m-violet: #a78bfa;
  --bas-m-lilac: #ede9fe;
  --bas-serif: 'Fraunces', Georgia, serif;
  --bas-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --bas-shadow-hover: 0 4px 8px rgba(10, 15, 30, .04), 0 18px 36px -12px rgba(124, 58, 237, .18);
}

/* Hide any pre-existing old-style sidebar from the legacy SHARED SIDEBAR
   SNIPPET (the social-agent sidebar that links to scheduler.html,
   hashtag-research.html, pro-dashboard.html, etc.).
   We hide via CSS rather than DOM-removal so any inline JS still bound
   to those nodes doesn't throw. */
body.bas-active aside.sidebar,
body.bas-active aside#sidebar,
body.bas-active .sidebar-backdrop {
  display: none !important;
}

/* Most legacy pages set body { margin-left: 240px } or similar to make
   room for the old sidebar. Reset that so the unified topbar can lay
   out cleanly. Individual page authors can override via .bas-active
   .their-class if they need to. */
body.bas-active {
  margin: 0 !important;
  padding-top: 64px !important;
  background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 50%, #faf5ff 100%) !important;
  font-family: var(--bas-sans) !important;
  color: var(--bas-ink) !important;
  -webkit-font-smoothing: antialiased;
}

body.bas-active main,
body.bas-active .main-content,
body.bas-active .content,
body.bas-active .container,
body.bas-active .page {
  margin-left: 0 !important;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─── Topbar ─── */
.bas-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 9999;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bas-rule);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  font-family: var(--bas-sans);
}

.bas-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bas-ink);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.bas-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bas-m-purple), var(--bas-m-pink));
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}
.bas-brand em {
  font-family: var(--bas-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--bas-m-purple);
}

.bas-divider {
  width: 1px;
  height: 22px;
  background: var(--bas-rule);
  flex-shrink: 0;
}

.bas-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bas-ink-dim);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.bas-breadcrumb a {
  color: var(--bas-ink-dim);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.bas-breadcrumb a:hover { color: var(--bas-m-purple); }
.bas-breadcrumb .sep { color: var(--bas-ink-faint); font-size: 11px; flex-shrink: 0; }
.bas-breadcrumb .current {
  color: var(--bas-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bas-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.bas-bell, .bas-back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--bas-rule);
  background: rgba(255, 255, 255, .6);
  color: var(--bas-ink-dim);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.bas-bell:hover, .bas-back:hover {
  background: #fff;
  color: var(--bas-m-purple);
  border-color: var(--bas-rule-strong);
}

.bas-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bas-m-purple), var(--bas-m-pink));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(124, 58, 237, .3);
  border: none;
  font-family: var(--bas-sans);
}

.bas-avatar-menu {
  position: absolute;
  top: 50px;
  right: 14px;
  background: #fff;
  border: 1px solid var(--bas-rule);
  border-radius: 12px;
  box-shadow: var(--bas-shadow-hover);
  min-width: 220px;
  padding: 6px;
  display: none;
  z-index: 10000;
  font-family: var(--bas-sans);
}
.bas-avatar-menu.open { display: block; }
.bas-avatar-menu .am-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bas-rule);
  margin-bottom: 4px;
}
.bas-avatar-menu .am-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bas-ink);
}
.bas-avatar-menu .am-email {
  font-size: 12px;
  color: var(--bas-ink-faint);
  margin-top: 2px;
}
.bas-avatar-menu a,
.bas-avatar-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--bas-ink-dim);
  text-align: left;
  transition: all .12s;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--bas-sans);
}
.bas-avatar-menu a:hover,
.bas-avatar-menu button:hover {
  background: #faf5ff;
  color: var(--bas-m-purple);
}

/* Mobile collapse — keep only logo + back + avatar */
@media (max-width: 720px) {
  .bas-topbar { padding: 0 14px; gap: 8px; }
  .bas-breadcrumb { font-size: 12px; }
  .bas-breadcrumb .sep,
  .bas-breadcrumb a:not(.bas-back-link) { display: none; }
  .bas-bell { display: none; }
}