/* =========================================================================
   Shell chrome — top navigation bar + body base + content offset.

   Loaded by base.html for EVERY page (after tokens.css, before the page's
   own {% block head %} stylesheets). The <nav> bar is rendered by base.html
   itself, so its styling must be guaranteed by the shell — not by individual
   page templates. Previously the nav styles lived only in dashboard.css
   (classic) and dashboard_next.css (next), which left /learn, /ops, and
   /ui-lab with an unstyled nav (garbled inline text).

   The rules below are duplicated verbatim from dashboard_next.css (next UI,
   scoped to body[data-ui="next"]) and dashboard.css (classic UI, here scoped
   to body[data-ui="classic"] to prevent leaking). On dashboard pages both
   shell.css and the dashboard stylesheet load; the dashboard stylesheet
   comes later in the cascade and wins at equal specificity, so dashboard
   rendering is unchanged. On non-dashboard pages only shell.css provides
   the chrome.

   Also provides body base styles (margin, background, font) and a top
   margin for non-dashboard content containers (.aa-learn, .aa-ops, .aa-lab)
   so they clear the position:fixed nav bar — dashboard pages handle this
   via their own .wrap { margin-top: 56px/60px } rule.
   ========================================================================= */

/* ---- Classic-UI custom properties (scoped so they never leak into next) - */
body[data-ui="classic"] {
  --bg:   #0f1419;
  --card: #1a212b;
  --mut:  #8a97a8;
  --line: #2a3543;
  --txt:  #e6edf3;
}

/* ---- Body base --------------------------------------------------------- */
body[data-ui="next"] {
  margin: 0;
  background: var(--aa-color-page);
  color: var(--aa-color-text-primary);
  font: var(--aa-fs-base)/var(--aa-lh-normal) var(--aa-font-sans);
}
body[data-ui="next"] * { box-sizing: border-box; }
body[data-ui="next"] code {
  font-family: var(--aa-font-mono); font-size: 0.9em;
  background: var(--aa-color-brand-soft); color: var(--aa-color-brand-ink);
  padding: 1px 5px; border-radius: var(--aa-radius-xs);
}

body[data-ui="classic"] {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.45 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
body[data-ui="classic"] * { box-sizing: border-box; }

/* ---- Top navigation bar (next UI) -------------------------------------- */
/* Use .aa-topnav (set on the <nav> in base.html) so these rules do NOT leak
   onto the mobile bottom command bar (<nav class="aa-bottomnav">), which
   would otherwise inherit top:0 + bottom:0 and stretch to full viewport
   height, covering all page content. */
body[data-ui="next"] .aa-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--aa-z-nav);
  display: flex; align-items: center; gap: var(--aa-space-4);
  padding: var(--aa-space-3) var(--aa-space-6);
  background: var(--aa-color-card);
  border-bottom: var(--aa-border-1) var(--aa-border-style) var(--aa-color-line);
  box-shadow: var(--aa-shadow-sm);
  font-size: var(--aa-fs-sm);
}
body[data-ui="next"] .aa-topnav > span:first-child {
  font-weight: var(--aa-fw-bold); font-size: var(--aa-fs-md);
  color: var(--aa-color-brand); white-space: nowrap;
}
body[data-ui="next"] .aa-topnav button {
  background: none; border: var(--aa-border-1) var(--aa-border-style) var(--aa-color-line);
  color: var(--aa-color-text-secondary); padding: 4px 12px;
  border-radius: var(--aa-radius-sm); cursor: pointer; font-size: var(--aa-fs-xs);
  white-space: nowrap;
}
body[data-ui="next"] .aa-topnav button:hover { border-color: var(--aa-color-brand); color: var(--aa-color-brand); }
body[data-ui="next"] .aa-topnav .nav-right { display: flex; align-items: center; gap: var(--aa-space-3); flex: 0 0 auto; margin-left: auto; }
body[data-ui="next"] .nav-link {
  color: var(--aa-color-text-secondary); text-decoration: none; font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold); padding: 4px 10px; border-radius: var(--aa-radius-sm);
  transition: background var(--aa-transition-fast), color var(--aa-transition-fast);
}
body[data-ui="next"] .nav-link:hover { background: var(--aa-color-brand-soft); color: var(--aa-color-brand); }
body[data-ui="next"] .nav-link-active { background: var(--aa-color-brand-soft); color: var(--aa-color-brand); }
body[data-ui="next"] .nav-link:focus-visible,
body[data-ui="next"] .capture-status-badge:focus-visible {
  outline: none;
  box-shadow: var(--aa-shadow-focus);
}
body[data-ui="next"] .capture-status-badge {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 10px; border-radius: var(--aa-radius-pill); font-size: var(--aa-fs-xs);
  color: var(--aa-color-text-secondary);
  border: var(--aa-border-1) var(--aa-border-style) var(--aa-color-line);
  white-space: nowrap; user-select: none; transition: all var(--aa-transition-fast);
}
body[data-ui="next"] .capture-status-badge:hover { border-color: var(--aa-color-brand); color: var(--aa-color-brand); }
body[data-ui="next"] .capture-status-badge .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--aa-color-text-muted); }
body[data-ui="next"] .capture-status-badge .dot--idle { background: var(--aa-color-text-muted); }
body[data-ui="next"] .capture-status-badge .dot--running { background: var(--aa-status-warning-fg); }
body[data-ui="next"] .capture-status-badge .dot--complete { background: var(--aa-status-ok-fg); }
body[data-ui="next"] .capture-status-badge .dot--error { background: var(--aa-status-error-fg); }

/* ---- Top navigation bar (classic UI) ---------------------------------- */
body[data-ui="classic"] .aa-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  background: #141b24; border-bottom: 1px solid var(--line); font-size: 13px;
}
body[data-ui="classic"] .aa-topnav > span:first-child {
  font-weight: 700; font-size: 15px; white-space: nowrap;
}
body[data-ui="classic"] .aa-topnav button {
  background: none; border: 1px solid var(--line); color: var(--mut); padding: 4px 12px;
  border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap;
}
body[data-ui="classic"] .aa-topnav button:hover { border-color: var(--txt); color: var(--txt); }
body[data-ui="classic"] .aa-topnav .nav-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
body[data-ui="classic"] .nav-link {
  color: #8b9dc3; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; transition: all .2s;
}
body[data-ui="classic"] .nav-link:hover { background: rgba(255,255,255,.08); color: #c4d2e8; }
body[data-ui="classic"] .nav-link-active { background: rgba(139,157,195,.15); color: #c4d2e8; }
body[data-ui="classic"] .capture-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 3px 10px; border-radius: 12px; font-size: 12px;
  color: var(--mut); border: 1px solid var(--line); transition: all .2s;
  white-space: nowrap; user-select: none;
}
body[data-ui="classic"] .capture-status-badge:hover { border-color: var(--txt); color: var(--txt); }
body[data-ui="classic"] .capture-status-badge .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8a97a8; transition: background .3s; }
body[data-ui="classic"] .capture-status-badge .dot--idle { background: #8a97a8; }
body[data-ui="classic"] .capture-status-badge .dot--running { background: #e6b455; }
body[data-ui="classic"] .capture-status-badge .dot--complete { background: #5ad17f; }
body[data-ui="classic"] .capture-status-badge .dot--error { background: #ef6d6d; }

/* ---- Content offset for non-dashboard pages ----------------------------
   Dashboard pages use .wrap (with its own margin-top: 56px/60px) to clear
   the fixed nav. Pages whose root container is .aa-learn / .aa-ops / .aa-lab
   do not have .wrap, so they need an explicit top margin here.            */
body[data-ui="next"] .aa-learn,
body[data-ui="next"] .aa-ops,
body[data-ui="next"] .aa-lab {
  margin-top: 56px;
}
body[data-ui="classic"] .aa-learn,
body[data-ui="classic"] .aa-ops,
body[data-ui="classic"] .aa-lab {
  margin-top: 60px;
}