/* ---- shell ---- */
/* Signature Linebooker chrome: a solid-petrol header with the wordmark in a white badge
   and the brand-triad gradient strip beneath — the same treatment as the Finance build.
   The header keeps its fixed petrol identity in BOTH themes (the dark theme only recolours
   the working canvas below), so the fixed literals here are deliberate, not token drift. */
.topbar {
  background: #005e85;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #005e85 0 58%, #6baa2c 58% 82%, #f5821f 82% 100%) 1;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.topbar-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex-wrap: wrap; }

/* White badge holding the logo + product name, legible on the petrol header (the logo
   asset is drawn in petrol/grey for a light canvas, so it needs a light backing rather
   than being recoloured). */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-logo { height: 22px; width: auto; display: block; }
.brand-product {
  color: var(--brand-d);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  line-height: 1.2;
  padding-left: 0.6rem;
  border-left: 3px solid var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar .subtitle { color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; }

.topbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.topbar-legend .leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.topbar-legend i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.topbar-legend i.f { background: var(--f-fulfil); }
.topbar-legend i.r { background: var(--f-rel); }
.topbar-legend i.o { background: var(--f-ontime); }
.topbar-legend i.p { background: var(--f-pod); }
.topbar-legend i.a { background: var(--f-acc); }
.topbar-legend i.tp { background: var(--f-podtime); }

/* theme toggle — moon in light mode, sun in dark. Sits on the petrol header, so it is
   styled as translucent-white chrome rather than a surface control. */
.theme-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); transform: rotate(15deg); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 15px; height: 15px; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- auth + freshness (production-hardening pass) ---------- */

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* On the petrol header: translucent-white chrome, matching the theme toggle. */
.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 0.72rem/1 var(--sans);
  padding: 0.42rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.logout-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }

.freshness-status-root { position: relative; }
.freshness-chips { display: flex; align-items: center; gap: 0.35rem; }
.freshness-chip-wrap { position: relative; }
.freshness-chip {
  max-width: 24rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 0.67rem/1.25 var(--sans);
  padding: 0.4rem 0.62rem;
  cursor: pointer;
  text-align: left;
}
.freshness-chip.healthy { border-color: rgba(154, 230, 184, 0.85); background: rgba(21, 128, 61, 0.32); }
.freshness-chip.overdue,
.freshness-chip.failed { border-color: rgba(254, 202, 202, 0.9); background: rgba(185, 28, 28, 0.34); }
.freshness-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.freshness-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  font: 500 0.78rem/1.45 var(--sans);
}
.freshness-popover p { margin: 0; }
.freshness-popover p + p { margin-top: 0.55rem; color: var(--muted); }
.data-change-marker {
  margin: 0.45rem auto 0;
  width: min(94%, 1280px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-overlay[hidden] { display: none; }
.boot-overlay { z-index: 110; }
.boot-card .login-hint { margin-top: 0; }

.login-card {
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-image: var(--hero-gradient) 1;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.login-logo {
  height: 30px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0.15rem;
}
/* The wordmark is petrol/grey for a light canvas; on the dark theme's dark card it needs
   a white chip to stay legible. */
[data-theme="dark"] .login-logo {
  background: #fff;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}
.login-card h2 {
  font: 800 1rem/1.2 var(--sans);
  letter-spacing: 0.04em;
  color: var(--brand);
  margin: 0;
}
.login-hint {
  margin: -0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font: 600 0.72rem/1 var(--sans);
  color: var(--muted);
}
.login-card input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font: 500 0.85rem/1.2 var(--sans);
  padding: 0.5rem 0.6rem;
  outline: none;
  transition: border-color 0.15s;
}
.login-card input:focus { border-color: var(--brand-l); }
.login-error {
  font-size: 0.76rem;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
}
.login-card button[type="submit"] {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font: 700 0.8rem/1 var(--sans);
  padding: 0.6rem;
  cursor: pointer;
  transition: background 0.15s;
}
.login-card button[type="submit"]:hover:not(:disabled) { background: var(--brand-l); }
.login-card button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* ============================================================================
   INCREMENT-1 OPS WORKBENCH — workspace nav, router views, shared components.
   All colours come from the existing theme tokens, so light/dark work for free.
   ========================================================================== */

/* ---- workspace nav strip (under .topbar) ---- */
.workspace-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 1.15rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 9;
  scrollbar-width: none;
}
.workspace-nav::-webkit-scrollbar { display: none; }
.ws-tab {
  flex: none;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ws-tab:hover { background: var(--surface2); color: var(--brand-d); }
.ws-tab.active { background: var(--brand); color: #fff; }
[data-theme="dark"] .ws-tab.active { color: #0e1319; }

/* ---- view containers ---- */
.ws-view[hidden] { display: none; }

/* ============================================================================
   STEP 4 SHELL — session gate, authenticated navigation and account chrome.
   Existing analytical view selectors remain unchanged above this bounded block.
   ========================================================================== */
.topbar { z-index: 120; }
.workspace-nav { z-index: 105; }
#view-outlet[hidden], #dialog-root[hidden] { display: none; }

.shell-state-overlay { z-index: 100; }
.shell-card form { display: flex; flex-direction: column; gap: 0.8rem; }
.shell-notice {
  font-size: 0.76rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
}
.shell-action { align-self: flex-start; }
.shell-password-hint { margin: 0; }
.shell-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

.ws-nav-group {
  align-self: center;
  color: var(--faint);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  text-transform: uppercase;
  white-space: nowrap;
}

.account-menu-root { position: relative; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 600 0.72rem/1 var(--sans);
  padding: 0.48rem 0.65rem;
  cursor: pointer;
}
.account-trigger:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }
.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 150;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.account-menu[hidden] { display: none; }
.account-menu strong { font-size: 0.82rem; overflow-wrap: anywhere; }
.account-role { color: var(--muted); font-size: 0.72rem; margin-bottom: 0.35rem; }
.account-menu button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: 600 0.78rem/1.2 var(--sans);
  padding: 0.5rem;
  text-align: left;
}
.account-menu button:hover:not(:disabled) { background: var(--surface2); color: var(--brand-d); }
.account-menu button:disabled { opacity: 0.55; cursor: default; }
.account-error { color: var(--red); font-size: 0.72rem; padding: 0.35rem 0.5rem 0; }

.shell-dialog-overlay { z-index: 130; }

@media (max-width: 720px) {
  .ws-nav-group { margin-left: 0.2rem; padding-left: 0.45rem; }
  .account-menu { position: fixed; right: 0.75rem; top: 4rem; }
}