/* =========================================================================
   ADMIN SHELL (admin-shell.css) - structure for the internal admin app:
   Layout/AdminLayout (.adm-shell/.adm-root, topbar, nav), the hub card grid
   and the dense header row. Moved out of bento-grid.css (S1, 2026-10-27) so the
   shell is one liftable unit (VD keeps the same split in admin-stub.css).
   Structure only; colour lives in render-*.css / --theme-* tokens.
   ========================================================================= */

/* =========================================================================
   INTERNAL ADMIN HUB (Internal.razor) — bento card-grid master nav.
   Structure only; color/appearance lives in render-*.css. Reuses .bu-panel/
   .bu-bay-grid/.bu-badge/.bu-alert/.bu-soffit — these classes add only the
   hub-specific layout (header row, per-group heading, card-as-link shape,
   the non-navigable Gap card variant). No pill radius (D-S07-UX-04): cards
   stay under .bu-panel's exempted radius, but the card is not itself an
   interactive control requiring the 5px cap discussion — it inherits
   .bu-panel's panel radius, consistent with every other card in the system.
   ========================================================================= */
.adm-hub-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm);
}

.adm-hub-group {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
}

.adm-hub-card-grid {
  padding: 0;
}

/* Card-as-link: NavLink renders an <a>, so the card needs link styles reset
   at the structural layer (no underline, inherit text color from render). */
.adm-hub-card {
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.adm-hub-card:hover {
  transform: translateY(-2px);
}

/* Gap cards are a <div>, not an <a> — non-navigable by construction. The
   reduced opacity + disabled cursor is the honest "coming soon" signal;
   color specifics (border/background dimming) live in render-*.css. */
.adm-hub-card--gap {
  cursor: default;
  opacity: 0.7;
}

.adm-hub-card--gap:hover {
  transform: none;
}

.adm-hub-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
}

.adm-hub-card-foot {
  margin-top: auto;
}

/* =========================================================================
   DIAGNOSTIC SURFACE SHELL (.adm-shell) — owner order 2026-07-04, generalized
   by R2 (same date): the Primer's default is now edge-to-edge full-width
   everywhere (see .bu-bay-grid/.bu-console-header/.bu-console-body above),
   so job (1) below is now a no-op / redundant safety net for this subtree —
   kept as an explicit, harmless override in case a future narrowing default
   is reintroduced elsewhere. Job (2), the greyscale force, is still live
   and is this block's real remaining purpose. Wraps every /internal/* page via
   Layout/AdminLayout.

   1) FULL-WIDTH (redundant no-op under the current default; kept for
      explicitness/safety): forces max-width:none on this subtree's
      bu-bay-grid/bu-console-header/bu-console-body regardless of what the
      Primer default does elsewhere.

   2) GREYSCALE FORCE: sets data-theme="greyscale" on this wrapper regardless
      of the app-wide default (cobalt-dark, set on <html> in App.razor per
      R-S7-10 admin-executive default). CSS attribute selectors match this
      div directly (unlike :root, which only matches <html>), so nesting
      data-theme here scopes the Primer render's grayscale token set to just
      this subtree — the rest of the admin app is untouched. Semantic STATE
      colors (--state-success/--state-warning/--state-error, defined in
      §3.7 above) are functional signals, not brand skin, and are NOT
      overridden by this rule — LIVE/GAP/SCAFFOLD badges stay green/red/
      orange even inside the greyscale shell.
   ========================================================================= */
.adm-shell {
  width: 100%;
  min-height: 100vh;
  font-family: var(--structure-font-family-mono);
}

.adm-shell .bu-bay-grid,
.adm-shell .bu-console-header,
.adm-shell .bu-console-body {
  max-width: none;
  padding-left: var(--structure-gap-xl);
  padding-right: var(--structure-gap-xl);
}

@media (max-width: 768px) {
  .adm-shell .bu-bay-grid,
  .adm-shell .bu-console-header,
  .adm-shell .bu-console-body {
    padding-left: var(--structure-gap-md);
    padding-right: var(--structure-gap-md);
  }
}

/* --- Top bar: one per shell, rendered by Layout/AdminLayout (mirrors VD .adm-topbar). */
.adm-shell-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-md);
  padding: var(--structure-gap-sm) var(--structure-gap-xl);
  font-size: var(--structure-text-sm);
}

.adm-shell-mark {
  font-weight: var(--structure-weight-bold);
  font-size: var(--structure-text-md);
  letter-spacing: 0.5px;
  text-decoration: none;
}

.adm-shell-topbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--structure-gap-md);
  font-size: var(--structure-text-xs);
}

/* --- Horizontal tool tab strip (VD's AdminNav equivalent) — dense single
   row of tool links, current tool highlighted. Structure only. */
.adm-shell-nav {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-xs);
  flex-wrap: wrap;
  padding: var(--structure-gap-sm) var(--structure-gap-xl);
  margin-bottom: var(--structure-gap-sm);
}

.adm-shell-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--structure-radius-max);
  border-width: 1px;
  border-style: solid;
  font-size: var(--structure-text-xs);
  text-decoration: none;
  white-space: nowrap;
}

/* Gap (not built) tools: same pill shape, dashed, not a link - honest visibility. */
.adm-shell-nav span[aria-disabled="true"] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--structure-radius-max);
  border: 1px dashed currentColor;
  font-size: var(--structure-text-xs);
  white-space: nowrap;
  opacity: 0.6;
}

.adm-shell-nav a.is-active {
  font-weight: var(--structure-weight-bold);
}

/* --- Dense diagnostic header row (title | meta | meta), compact like VD's
   .adm-header-row — one line, not a big hero. */
.adm-shell-header {
  padding: var(--structure-gap-sm) var(--structure-gap-xl) var(--structure-gap-md);
}

.adm-shell-header-row {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
  flex-wrap: wrap;
  font-size: var(--structure-text-xs);
}

.adm-shell-title {
  font-weight: var(--structure-weight-bold);
  letter-spacing: 1px;
  font-size: var(--structure-text-sm);
}

.adm-shell-subtitle {
  font-size: var(--structure-text-xs);
  max-width: 90ch;
  margin-top: 0.35rem;
}


.adm-main {
  min-width: 0;
}