/* =============================================================================
   Shell chrome for the NTT DATA Migration Suite central SPA, loaded once after
   design-system.css (which owns every token and shared component). This file
   holds only the header and its nav, the fixed-viewport layout, and the stat
   strip the dashboards share. Route pages add their own layout through
   routes/<route>.css, swapped per mount by router.js.
   ========================================================================== */

/* Fixed-viewport shell: the page never scrolls, only <main> does. */
body.dmc-shell { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.dmc-shell header { flex: 0 0 auto; position: relative; z-index: 50; }
body.dmc-shell main { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }

/* Header: brand on the left, the nav on the right. */
.dmc-header { padding: 10px var(--sp-7) 10px var(--sp-5); }
.dmc-header .brand-logo { height: 48px; margin-top: 5px; }
.dmc-header .brand-home { display: flex; }
.dmc-nav { display: flex; align-items: center; gap: var(--sp-6); }
.dmc-nav-links { display: flex; align-items: center; gap: var(--sp-1); }
.dmc-nav-link {
  display: inline-flex; align-items: center; padding: 8px 14px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-sm);
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.dmc-nav-link:hover { background: var(--surface-hover); text-decoration: none; }
.dmc-nav-link.is-current { color: var(--accent); background: var(--accent-soft-bg); }
.dmc-nav-user { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); }
.dmc-nav-name { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* router.js renders a breadcrumb and a Project Settings slot into the header
   for dmweb's scoped routes; central has neither, its nav is the wayfinding. */
header .page-crumb, header .header-settings-slot { display: none; }

/* Stat strip (the usage and activity totals). */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.stat { flex: 1 1 140px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.stat .num { font-size: 22px; font-weight: var(--fw-semibold); }
.stat .lbl { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--muted); margin-top: 2px; }
.stat.err .num { color: var(--err); }

/* A quiet pill for a state that is switched off (a disabled user, a viewer). */
.pill.off { background: var(--surface-hover); color: var(--muted); }