/* ============================================================================
   Global Back button — ONE shared control in the topbar (the app's single, shared
   page header), so every page gets the SAME back affordance in the SAME spot
   (top-left of the header). Additive; uses the app's existing teal-blue tokens.
   Logic lives in js/tabs.js (goBack / updateBackButton). It navigates the app's
   own tab history, never a raw browser back.
   ========================================================================== */

/* Left cluster of the topbar: Back button + the title block sit together, so the
   topbar's space-between still pushes the action buttons to the right. */
.topbar-left { display:flex; align-items:center; gap:14px; min-width:0; }

.topbar-back {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #dbeafe; background:#fff; color:#075985;
  font-weight:800; font-size:13px; line-height:1;
  padding:9px 13px; border-radius:12px; cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.topbar-back:hover { background:#eff6ff; border-color:#bfdbfe; }
.topbar-back:active { transform:translateY(1px); }
.topbar-back:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }
.topbar-back svg { display:block; }
.topbar-back[hidden] { display:none; }   /* overrides inline-flex when there's nowhere to go back to */

/* Mobile (<=1180px): compact, icon-only, comfortable touch target; don't crowd the header. */
@media (max-width:1180px) {
  .topbar-back-txt { display:none; }
  .topbar-back { padding:0; width:40px; height:40px; justify-content:center; gap:0; border-radius:12px; }
  .topbar-left { gap:10px; }
}

/* Dark mode */
html[data-theme="dark"] .topbar-back {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#7dd3fc; box-shadow:none;
}
html[data-theme="dark"] .topbar-back:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }