/* ============================================================================
   Topbar declutter — the full-width white header card is retired. What remains is
   a bare, transparent utility row holding two uniform clusters:
     • left  — the contextual Back chip (shown only when there's history)
     • right — a compact account menu (avatar → dropdown: role, dark mode, logout)
   Each module renders its own title, so the old eyebrow + page-title are hidden.
   Additive, reversible, uses the app's existing teal-blue tokens.
   ========================================================================== */

/* Strip the card down to a transparent row that just positions the two clusters. */
.topbar{
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 8px !important;
  min-height:40px;
  align-items:center;
}
.topbar .eyebrow, .topbar .page-title{ display:none !important; }  /* the module owns its title now */

/* Shared sizing so Back + account trigger are visually uniform (same height/shape/border). */
.topbar-back, .acct-trigger{
  height:40px; box-sizing:border-box;
  border:1px solid #e2e8f0; background:#fff; border-radius:12px;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
  font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background .15s ease, border-color .15s ease;
}
.topbar-back{ gap:6px; padding:0 13px; color:#075985; font-size:13px; }
.topbar-back:hover{ background:#eff6ff; border-color:#cfe0f5; }

/* ── Account menu (top-right) ─────────────────────────────────────────────── */
.acct-menu{ position:relative; }
.acct-trigger{ gap:9px; padding:4px 12px 4px 5px; font-size:13px; color:#0f172a; }
.acct-trigger:hover{ background:#f8fafc; border-color:#cbd5e1; }
.acct-avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#0ea5e9,#075985); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:13px;
}
.acct-name{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-caret{ color:#94a3b8; font-size:11px; margin-left:1px; }

.acct-dropdown{
  position:absolute; top:48px; right:0; z-index:1400; width:224px;
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  box-shadow:0 20px 50px rgba(15,23,42,.16); padding:8px;
}
.acct-dropdown[hidden]{ display:none; }
.acct-dd-head{ display:flex; align-items:center; gap:10px; padding:8px; border-bottom:1px solid #eef2f7; margin-bottom:6px; }
.acct-avatar-lg{ width:38px; height:38px; font-size:15px; }
.acct-dd-name{ font-weight:800; font-size:13px; color:#0f172a; line-height:1.25; }
.acct-dd-role{ font-size:11px; color:#94a3b8; font-weight:700; text-transform:capitalize; }
.acct-dd-row{
  width:100%; display:flex; align-items:center; gap:11px;
  padding:10px 9px; border:0; background:transparent; border-radius:9px;
  font-size:13px; font-weight:700; color:#334155; cursor:pointer; text-align:left;
}
.acct-dd-row:hover{ background:#f4f8fc; }
.acct-dd-ico{ width:18px; text-align:center; font-size:15px; opacity:.85; }
.acct-dd-danger{ color:#b91c1c; }
.acct-dd-danger:hover{ background:#fef2f2; }

/* ── Mobile (<=1180px): compact — avatar-only trigger; don't crowd the header ── */
@media (max-width:1180px){
  .topbar{ margin-bottom:6px !important; }
  .acct-name, .acct-caret{ display:none; }
  .acct-trigger{ width:40px; padding:0; justify-content:center; gap:0; }
  .acct-dropdown{ top:46px; }
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .topbar-back,
html[data-theme="dark"] .acct-trigger{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#e2e8f0; box-shadow:none; }
html[data-theme="dark"] .topbar-back{ color:#7dd3fc; }
html[data-theme="dark"] .acct-trigger:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
html[data-theme="dark"] .acct-dropdown{ background:#0f1e2e; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .acct-dd-head{ border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .acct-dd-name{ color:#e2e8f0; }
html[data-theme="dark"] .acct-dd-role{ color:#8aa0c0; }
html[data-theme="dark"] .acct-dd-row{ color:#cbd5e1; }
html[data-theme="dark"] .acct-dd-row:hover{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .acct-dd-danger{ color:#fca5a5; }
html[data-theme="dark"] .acct-dd-danger:hover{ background:rgba(220,38,38,.12); }