/* LayerOne console and client portal shell.
   Command column, workbench grid, and the remaining Bootstrap-era bridges.
   Console 2.0 chrome that must win over app.css lives at the end of
   components.css. See docs/phase-49-console-2.md. */
.l1-console-body {
  --l1-console-bg: var(--l1-ground, #152a52);
  --surface: var(--l1-shell-bg);
  --surface-subtle: var(--l1-shell-hover);
  --surface-active: var(--l1-brand-soft);
  --line: var(--l1-line);
  --line-soft: var(--l1-line-translucent);
  --text: var(--l1-shell-ink);
  --text-soft: var(--l1-shell-ink-muted);
  --muted: var(--l1-shell-ink-muted);
  --accent: var(--l1-brand);
  --accent-strong: var(--l1-brand-strong);
  --accent-soft: var(--l1-brand-soft);
  --accent-border: var(--l1-brand-border);
  --radius-card: var(--l1-radius-md);
  --radius-control: var(--l1-radius-sm);
  --l1-console-content-max: 1320px;
  --l1-console-content-width: 100%;
  background: var(--l1-ground, #152a52);
}

.l1-console-body .l1-navbar-dashboard {
  border-bottom: 1px solid var(--l1-line);
  box-shadow: none;
}

.l1-console-shell,
.l1-client-portal-body .dashboard-shell {
  background: transparent;
  grid-template-columns: var(--l1-sidebar-w, 296px) minmax(0, 1fr);
}

/* Command column. Always the dark rail, both themes. Descendant rules read
   re-pointed --l1-shell-* tokens so nav links, labels, badges, and the mode
   switch follow without being rewritten. */
.l1-console-sidebar,
.l1-client-portal-body .sidebar {
  background: var(--l1-rail-bg);
  border-right: 0;
  box-shadow: none;
  color: var(--l1-rail-ink);
  display: flex;
  flex-direction: column;
}

.l1-console-body .l1-console-sidebar {
  --l1-shell-bg: var(--l1-rail-bg);
  --l1-shell-bg-subtle: var(--l1-rail-bg);
  --l1-shell-bg-muted: var(--l1-rail-bg-raised);
  --l1-shell-hover: var(--l1-rail-hover);
  --l1-shell-ink: var(--l1-rail-ink);
  --l1-shell-ink-muted: var(--l1-rail-ink-muted);
  --l1-line: var(--l1-rail-line);
  --l1-line-translucent: var(--l1-rail-line);
  --l1-border: var(--l1-rail-line);
  --l1-border-strong: var(--l1-rail-line-strong);
  --l1-surface-1: var(--l1-rail-bg-raised);
  --l1-surface-2: var(--l1-rail-hover);
  --l1-surface-3: var(--l1-rail-active-bg);
  --l1-ink: #ffffff;
  --l1-ink-soft: var(--l1-rail-ink);
  --l1-ink-muted: var(--l1-rail-ink-muted);
  --l1-brand: var(--l1-rail-accent);
  --l1-brand-strong: var(--l1-rail-accent);
  --l1-brand-soft: var(--l1-rail-active-bg);
  --l1-brand-border: var(--l1-rail-active-border);
  --l1-ok: #34d399;
  --l1-ok-soft: rgba(52, 211, 153, 0.15);
  --l1-warn: #fbbf24;
  --l1-warn-soft: rgba(251, 191, 36, 0.16);
  --l1-danger: #f87171;
  --l1-danger-soft: rgba(248, 113, 113, 0.16);
  --l1-info: #22d3ee;
  --l1-info-soft: rgba(34, 211, 238, 0.15);
  --surface: var(--l1-rail-bg);
  --surface-subtle: var(--l1-rail-hover);
  --surface-active: var(--l1-rail-active-bg);
  --line: var(--l1-rail-line);
  --line-soft: var(--l1-rail-line);
  --text: var(--l1-rail-ink);
  --text-soft: var(--l1-rail-ink-muted);
  --muted: var(--l1-rail-ink-muted);
  --accent: var(--l1-rail-accent);
  --accent-strong: var(--l1-rail-accent);
  --accent-soft: var(--l1-rail-active-bg);
  --accent-border: var(--l1-rail-active-border);
  background: var(--l1-rail-bg);
  color: var(--l1-rail-ink);
  color-scheme: dark;
  scrollbar-color: var(--l1-rail-line-strong) transparent;
}

.l1-console-sidebar .sidebar-inner,
.l1-client-portal-body .sidebar-inner {
  background: var(--l1-shell-bg);
  flex: 1 1 auto;
  gap: .75rem;
  min-height: 0;
  padding: 1rem .875rem;
}

.l1-console-sidebar .sidebar-top,
.l1-client-portal-body .sidebar-top {
  border-bottom-color: var(--l1-line);
  gap: .5rem;
  padding-bottom: .5rem;
}

.l1-console-sidebar .brand,
.l1-console-sidebar .site-nav-trigger,
.l1-client-portal-body .brand {
  background: transparent;
  border-color: transparent;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-shell-ink);
  min-height: 2.5rem;
  padding: .4375rem .625rem;
}

.l1-console-sidebar .brand:hover,
.l1-console-sidebar .site-nav-trigger:hover,
.l1-console-sidebar .site-switcher[open] .site-nav-trigger,
.l1-client-portal-body .brand:hover {
  background: var(--l1-shell-hover);
  border-color: var(--l1-line);
  box-shadow: none;
  color: var(--l1-shell-ink);
}

.l1-console-sidebar .brand strong,
.l1-client-portal-body .brand strong {
  color: var(--l1-shell-ink);
  font-size: .875rem;
}

.l1-console-sidebar .brand small,
.l1-console-sidebar .site-summary-copy span,
.l1-console-sidebar .site-summary-copy small,
.l1-client-portal-body .brand small,
.l1-console-sidebar .sidebar-label,
.l1-client-portal-body .sidebar-label {
  color: var(--l1-shell-ink-muted);
}

.l1-console-sidebar .sidebar-section,
.l1-client-portal-body .nav {
  gap: .25rem;
}

/* Group headings are wayfinding, not content: they carry more space above than
   below so each label reads as attached to the items under it, and they sit
   dimmer than the links so the eye lands on a destination first. */
.l1-console-sidebar .sidebar-label,
.l1-client-portal-body .sidebar-label {
  font-size: var(--l1-text-micro);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: .07em;
  margin: 1rem 0 .1875rem;
  padding: 0 .5rem;
}

.l1-console-sidebar .sidebar-section:first-of-type .sidebar-label,
.l1-client-portal-body .sidebar-section:first-of-type .sidebar-label {
  margin-top: .25rem;
}

.l1-console-sidebar .l1-console-nav,
.l1-console-sidebar .nav,
.l1-client-portal-body .nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Operator density. Rows sit at 40px so the column scans as a control
   surface rather than a compact list, without returning to the 47px
   stacked-label pitch that pushed Infrastructure below the fold. */
.l1-console-sidebar .l1-console-nav .nav-link,
.l1-console-sidebar .nav a,
.l1-client-portal-body .nav a {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  color: var(--l1-shell-ink-muted);
  display: flex;
  font-size: .875rem;
  font-weight: 500;
  gap: .625rem;
  min-height: 2.5rem;
  padding: .4375rem .75rem;
  text-decoration: none;
}

/* Icons must not resize with the label or the column of glyphs stops aligning. */
.l1-console-sidebar .l1-console-nav .nav-link :is(svg, i[data-lucide]),
.l1-console-sidebar .nav a :is(svg, i[data-lucide]),
.l1-client-portal-body .nav a :is(svg, i[data-lucide]) {
  flex: none;
  height: 16px;
  width: 16px;
}

.l1-console-sidebar .l1-console-nav .nav-link:hover,
.l1-console-sidebar .nav a:hover,
.l1-client-portal-body .nav a:hover {
  background: var(--l1-shell-hover);
  border-color: var(--l1-line);
  color: var(--l1-shell-ink);
}

/* Active nav item: inset accent pill on the command column. History: a
   saturated brand fill shouted over status colour; a fully grey pill
   disappeared on the dark column. Bootstrap's --bs-primary-* values are
   not used here. */
.l1-console-sidebar .l1-console-nav .nav-link.is-active,
.l1-console-sidebar .l1-console-nav .nav-link[aria-current="page"],
.l1-console-shell .l1-console-sidebar .nav a.is-active,
.l1-console-shell .l1-console-sidebar .nav a[aria-current="page"],
.l1-client-portal-body .nav a.is-active,
.l1-client-portal-body .nav a[aria-current="page"] {
  background: var(--l1-rail-active-bg, rgba(139, 180, 255, .20));
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--l1-rail-accent, #60a5fa);
  color: #ffffff;
  font-weight: var(--l1-fw-semibold);
}

.l1-console-sidebar .l1-console-nav .nav-link.is-active :is(svg, i[data-lucide]),
.l1-console-sidebar .nav a.is-active :is(svg, i[data-lucide]),
.l1-client-portal-body .nav a.is-active :is(svg, i[data-lucide]) {
  color: #f3f6ff;
}

.l1-console-sidebar .l1-console-nav .nav-link svg,
.l1-console-sidebar .nav a svg,
.l1-console-sidebar .nav a i[data-lucide],
.l1-client-portal-body .nav a svg,
.l1-client-portal-body .nav a i[data-lucide] {
  color: inherit;
}

.l1-sidebar-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  margin-left: auto;
  min-width: 1.35rem;
  padding: .1rem .4rem;
}

.l1-sidebar-badge--warn {
  background: var(--l1-warn-soft, #fff7ed);
  border: 1px solid color-mix(in srgb, var(--l1-warn, #9a5b0a) 35%, transparent);
  color: var(--l1-warn, #9a5b0a);
}

.l1-sidebar-badge--danger {
  background: var(--l1-danger-soft, #fef2f2);
  border: 1px solid color-mix(in srgb, var(--l1-danger, #b42318) 35%, transparent);
  color: var(--l1-danger, #b42318);
}

.l1-console-sidebar .nav a.is-active .l1-sidebar-badge--warn,
.l1-console-sidebar .l1-console-nav .nav-link.is-active .l1-sidebar-badge--warn {
  background: #ffffff;
  border-color: rgba(255, 255, 255, .65);
  color: var(--l1-warn, #9a5b0a);
}

.l1-console-sidebar .nav a.is-active .l1-sidebar-badge--danger,
.l1-console-sidebar .l1-console-nav .nav-link.is-active .l1-sidebar-badge--danger {
  background: #ffffff;
  border-color: rgba(255, 255, 255, .65);
  color: var(--l1-danger, #b42318);
}

.l1-console-sidebar .nav-icon-frame {
  background: var(--l1-surface-3);
  color: var(--l1-ink-muted);
}

.l1-console-sidebar .site-menu {
  background: var(--l1-shell-bg-muted);
  border-color: var(--l1-line);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-lg);
}

.l1-console-sidebar .site-option {
  color: var(--l1-shell-ink-muted);
}

.l1-console-sidebar .site-option:hover,
.l1-console-sidebar .site-option[aria-current="page"] {
  background: var(--l1-brand-soft);
  color: var(--l1-brand-strong);
}

.l1-console-sidebar .mode-switch,
.l1-client-portal-body .mode-switch {
  background: var(--l1-shell-hover);
  border-color: var(--l1-line);
  border-radius: var(--l1-radius-sm);
  padding: .125rem;
}

.l1-console-sidebar .mode-switch button,
.l1-client-portal-body .mode-switch button {
  border-radius: calc(var(--l1-radius-sm) - 2px);
  color: var(--l1-shell-ink-muted);
  min-height: 2.25rem;
}

.l1-console-sidebar .mode-switch button.is-active,
.l1-client-portal-body .mode-switch button.is-active {
  background: var(--l1-surface-3);
  border: 1px solid var(--l1-brand-border);
  color: var(--l1-ink);
}

.sidebar-bottom,
.l1-console-sidebar .sidebar-bottom {
  border-top: 1px solid var(--l1-line);
  padding-top: .75rem;
}

/* Pin the Admin/Client switch to the bottom of the rail. Admin nav is tall
   enough that this already happened by filling the column; client nav is
   not, so the switch sat directly under Account / Public Status / Looking
   Glass. Keep those links with the rest of the tree (no margin-top: auto
   on .sidebar-bottom) and let the remaining height fall between them and
   this block. */
.l1-console-sidebar .sidebar-mode-section {
  border-top: 1px solid var(--l1-line);
  flex: 0 0 auto;
  margin-top: auto;
  padding-bottom: .875rem;
  padding-top: 1rem;
}

.l1-console-content,
.l1-client-portal-body .main,
.l1-client-portal-body .dashboard-shell .main {
  background: transparent;
  font-size: .9375rem;
  line-height: 1.55;
  padding: 1.5rem 1.75rem 2.5rem;
}

/* app.js focuses this region after every partial navigation (see the
   content.focus() call in the htmx afterRequest handler) so screen readers
   announce the page that just swapped in. The shared focus ring in
   components.css targets [tabindex], and this region carries tabindex="-1", so
   it collected a 3px brand-coloured ring around the entire content area on
   every page change and held it until the next click. The region is never
   reachable by Tab, so the ring only ever meant "you navigated".

   box-shadow, not just outline: that ring is drawn as a box-shadow, so
   suppressing the outline alone leaves it fully visible. The focus move itself
   is the accessible behaviour and stays. */
#l1-console-content:focus,
#l1-console-content:focus-visible {
  box-shadow: none;
  outline: none;
}

.l1-console-content > :where(.messages, .topbar, .grid, .compact-grid, .panel, .row, .card, .table-list, .l1-console-page, .l1-client-area-page, .container, .container-fluid) {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--l1-console-content-max);
  width: min(100%, var(--l1-console-content-width));
}

.l1-console-content .topbar {
  gap: .75rem;
  margin-bottom: .75rem;
  padding: 0 0 .75rem;
}

.l1-console-page > .topbar.card,
.l1-client-page-header {
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line) !important;
  border-radius: var(--l1-radius-sm);
  box-shadow: none !important;
  gap: .75rem;
  margin-bottom: .75rem;
  padding: .75rem .875rem;
}

/* Bare-h1 fallback for pages that predate the header components. It has to stay
   at or below their size: as a descendant-element selector it outranks
   .l1-page-header__title, so setting it larger silently re-inflated every
   title the component was supposed to have shrunk. Keep these in step. */
.l1-console-content h1,
.l1-client-page-header h1 {
  font-size: var(--l1-text-xl);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: .125rem 0 .25rem;
}

.l1-console-content h2,
.l1-client-area-page h2,
.l1-console-content .h5,
.l1-client-area-page .h5 {
  font-size: .9375rem;
  line-height: 1.25;
}

.l1-console-content p,
.l1-client-area-page p,
.l1-console-content .muted,
.l1-client-area-page .muted,
.l1-console-content .text-muted,
.l1-client-area-page .text-muted {
  font-size: .78125rem;
}

.l1-console-content .eyebrow,
.l1-client-area-page .eyebrow,
.l1-console-content .form-label,
.l1-client-area-page .form-label,
.l1-console-content .card-header small,
.l1-client-area-page .card-header small {
  font-size: .6875rem;
  letter-spacing: .04em;
}

.l1-console-content .section-gap,
.l1-client-area-page .section-gap {
  margin-top: 1.75rem;
}

.l1-console-content .row.g-3,
.l1-client-area-page .row.g-3 {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

.l1-console-content .grid.row,
.l1-console-content .compact-grid.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  gap: 1.25rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.l1-console-content .grid.row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.l1-console-content .compact-grid.row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.l1-console-content .grid.row > *,
.l1-console-content .compact-grid.row > * {
  max-width: none;
  min-width: 0;
  width: 100% !important;
}

.l1-console-content .panel,
.l1-client-portal-body .panel {
  background: var(--l1-shell-bg);
  border-color: var(--l1-line);
  border-radius: var(--l1-radius-md);
  box-shadow: var(--l1-shadow-sm);
  padding: 1.25rem 1.375rem;
}

.l1-console-content .panel.card,
.l1-console-content .card.shadow-sm,
.l1-console-content .l1-console-card,
.l1-client-card,
.l1-client-kpi-card,
.l1-client-portal-body .card {
  border-color: var(--l1-line) !important;
  border-radius: var(--l1-radius-md) !important;
  box-shadow: var(--l1-shadow-sm) !important;
}

.l1-console-content .card-body,
.l1-client-area-page .card-body,
.l1-console-content .card-header,
.l1-client-area-page .card-header {
  padding: 1.125rem 1.375rem;
}

.l1-console-content .panel-heading,
.l1-client-area-page .panel-heading,
.l1-console-content .card-header,
.l1-client-area-page .card-header {
  gap: .75rem;
}

.l1-console-content .panel-heading h2,
.l1-console-content .card-header h2,
.l1-console-content .l1-console-stat h2,
.l1-client-area-page .card-header h2 {
  align-items: center;
  color: var(--l1-shell-ink-muted);
  display: flex;
  font-size: .6875rem;
  font-weight: 700;
  gap: .375rem;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 .25rem;
  text-transform: uppercase;
}

.stat-panel,
.l1-console-content .stat-panel,
.l1-console-content .l1-console-stat,
.l1-client-kpi-card {
  border-left: .1875rem solid var(--accent, var(--l1-brand)) !important;
  border-top: 1px solid var(--l1-line) !important;
  min-height: auto;
  overflow: hidden;
  padding: .6875rem .8125rem;
  position: relative;
  transition: none;
}

.stat-panel:hover,
.l1-client-kpi-card:hover {
  box-shadow: none !important;
  transform: none;
}

.stat-panel::before {
  content: none;
}

.stat-panel h2 {
  align-items: center;
  color: var(--l1-shell-ink-muted);
  display: flex;
  font-size: .6875rem;
  gap: .375rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.stat-panel h2 svg,
.l1-console-stat h2 svg {
  color: var(--accent, var(--l1-brand));
  height: .875rem;
  width: .875rem;
}

.stat-accent-green { --accent: var(--l1-ok); }
.stat-accent-purple { --accent: #4243c1; }
.stat-accent-blue { --accent: var(--l1-info); }
.stat-accent-amber { --accent: var(--l1-warn); }
.stat-accent-red { --accent: var(--l1-danger); }

.l1-console-content .metric,
.l1-client-kpi-card .h4,
.l1-client-kpi-card .display-6 {
  font-size: 1.375rem !important;
  line-height: 1;
  margin: .25rem 0 .125rem;
}

.l1-console-content .stat-panel .muted,
.l1-console-content .l1-console-stat .muted,
.l1-console-content .stat-panel .text-muted,
.l1-console-content .l1-console-stat .text-muted {
  margin: .375rem 0 0;
}

.l1-console-attention h2 {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: .375rem;
  margin: 0 0 .25rem;
}

.l1-admin-overview {
  overflow: hidden;
}

.l1-admin-overview .card-header {
  border-bottom-color: var(--l1-line);
}

/* Three columns, not auto-fit. Super-admin has nine tiles and Support has six,
   both of which fill a 3-col grid. auto-fit at ~13.5rem packed five columns
   on a desktop console and left a blank cell beside Monitoring. */
.l1-admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .l1-admin-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Nine tiles on two columns leave one on the last row; span it so the
     canvas does not show through. Six tiles (Support) already fill. */
  .l1-admin-overview-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .l1-admin-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-admin-overview-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Tiles are neutral until a status says otherwise. The brand default painted an
   indigo bar and chip on every plain count (clients, services) so the eye had no
   way to tell a metric that needs attention from one that does not — the
   --warning/--danger/--success variants below are the only coloured tiles. */
.l1-overview-tile {
  --tile-accent: var(--l1-brand);
  --tile-bg: var(--l1-brand-soft);
  --tile-color: var(--l1-brand);
  align-items: center;
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-bottom: 1px solid var(--l1-border);
  border-left: 1px solid var(--l1-border);
  border-right: 1px solid var(--l1-border);
  color: inherit;
  display: grid;
  gap: .85rem;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  min-height: 5.75rem;
  min-width: 0;
  padding: .9rem 1rem;
  text-decoration: none;
}

.l1-overview-tile:hover,
.l1-overview-tile:focus {
  background: var(--l1-shell-hover);
  color: inherit;
  text-decoration: none;
}

.l1-overview-icon {
  align-items: center;
  align-self: start;
  background: var(--tile-bg);
  border-radius: 12px;
  color: var(--tile-color);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.l1-overview-icon svg,
.l1-overview-icon i[data-lucide] {
  height: 1rem;
  width: 1rem;
}

.l1-overview-copy {
  display: grid;
  gap: .125rem;
  min-width: 0;
}

.l1-overview-copy > span {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.l1-overview-copy strong {
  color: var(--l1-shell-ink);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.l1-overview-copy small {
  color: var(--l1-shell-ink-muted);
  display: block;
  font-size: .75rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Kept as an explicit neutral rather than deleted: templates still carry the
   class, and "primary" here means "first in the row", not "brand-coloured". */
.l1-overview-primary {
  --tile-accent: var(--l1-brand);
  --tile-bg: var(--l1-brand-soft);
  --tile-color: var(--l1-brand);
}

.l1-overview-info {
  --tile-accent: var(--l1-info);
  --tile-bg: var(--l1-info-soft);
  --tile-color: var(--l1-info);
}

.l1-overview-success {
  --tile-accent: var(--l1-ok);
  --tile-bg: var(--l1-ok-soft);
  --tile-color: var(--l1-ok);
}

.l1-overview-warning {
  --tile-accent: var(--l1-warn);
  --tile-bg: var(--l1-warn-soft);
  --tile-color: var(--l1-warn);
}

.l1-overview-danger {
  --tile-accent: var(--l1-danger);
  --tile-bg: var(--l1-danger-soft);
  --tile-color: var(--l1-danger);
}

.ops-queue-panel {
  padding: 0;
}

.ops-queue-panel > .panel-heading {
  padding: .875rem .875rem 0;
}

.queue-health-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  padding: 0;
}

.ops-queue-panel .queue-health-grid {
  padding: 0 .875rem .875rem;
}

.queue-health-card {
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  padding: .75rem;
}

.queue-health-card span,
.queue-health-card small,
.queue-health-card strong {
  display: block;
}

.queue-health-card span {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.queue-health-card strong {
  color: var(--l1-shell-ink);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  margin-top: .375rem;
}

.queue-health-card small {
  color: var(--l1-shell-ink-muted);
  font-size: .75rem;
  margin-top: .375rem;
}

.queue-run-summary {
  background: var(--l1-shell-bg-subtle);
  border-bottom: 1px solid var(--l1-line);
  border-top: 1px solid var(--l1-line);
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  padding: .875rem;
}

.queue-run-summary > div,
.queue-diagnostic {
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  padding: .75rem;
}

.queue-run-summary strong,
.queue-run-summary span,
.queue-diagnostic strong,
.queue-diagnostic span {
  display: block;
}

.queue-run-summary strong,
.queue-diagnostic strong {
  color: var(--l1-shell-ink);
  font-size: .8125rem;
  font-weight: 700;
}

.queue-run-summary span,
.queue-diagnostic span {
  color: var(--l1-shell-ink-muted);
  font-size: .8125rem;
  margin-top: .25rem;
}

.queue-run-list {
  border-top: 0;
  margin: 0 .875rem .875rem;
}

.queue-diagnostic-list {
  background: var(--l1-shell-bg-subtle);
  border-top: 1px solid var(--l1-line);
  display: grid;
  gap: .75rem;
  padding: .875rem;
}

.queue-diagnostic-danger {
  background: var(--l1-danger-soft);
  border-color: color-mix(in srgb, var(--l1-danger) 35%, transparent);
}

.queue-diagnostic-warning {
  background: var(--l1-warn-soft);
  border-color: color-mix(in srgb, var(--l1-warn) 35%, transparent);
}

.queue-diagnostic-success {
  background: var(--l1-ok-soft);
  border-color: color-mix(in srgb, var(--l1-ok) 35%, transparent);
}

.panel-alert {
  border-left-width: .25rem;
}

.panel-alert-amber {
  background: var(--l1-warn-soft);
  border-left-color: var(--l1-warn);
}

.l1-console-content .table-list,
.l1-client-area-page .table-list {
  border-color: var(--l1-line);
  border-radius: var(--l1-radius-sm);
  margin-top: .625rem;
}

.l1-console-content .table-row,
.l1-console-content .empty-state,
.l1-client-area-page .table-row,
.l1-client-area-page .empty-state {
  gap: .75rem;
  padding: .625rem .75rem;
}

.l1-console-content .table-row,
.l1-client-area-page .table-row {
  flex-wrap: wrap;
}

.l1-console-content .table-row > div:first-child,
.l1-client-area-page .table-row > div:first-child {
  flex: 1 1 18rem;
  min-width: min(100%, 18rem);
}

.l1-console-content .table-row strong,
.l1-console-content .empty-state strong,
.l1-client-area-page .table-row strong,
.l1-client-area-page .empty-state strong {
  font-size: .8125rem;
}

.l1-console-content .table-row > div > span,
.l1-console-content .empty-state span,
.l1-client-area-page .table-row > div > span,
.l1-client-area-page .empty-state span {
  font-size: .75rem;
  margin-top: .125rem;
}

.l1-console-content .table-row-link:hover,
.l1-console-content .table-row:hover,
.l1-client-area-page .table-row-link:hover,
.l1-client-area-page .table-row:hover {
  background: var(--l1-shell-hover);
}

.l1-console-content .table-responsive,
.l1-client-area-page .table-responsive {
  overflow: auto;
}

.l1-console-content .table,
.l1-client-area-page .table {
  --bs-table-cell-padding-x: .625rem;
  --bs-table-cell-padding-y: .5rem;
  font-size: .8125rem;
}

.l1-console-content .table thead th,
.l1-client-area-page .table thead th {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.l1-resource-table {
  table-layout: auto;
}

.l1-resource-table thead th {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.l1-resource-table th,
.l1-resource-table td {
  overflow-wrap: anywhere;
  padding: .5625rem .625rem;
  vertical-align: middle;
}

.l1-resource-table td {
  border-color: var(--l1-line-translucent);
}

.l1-resource-table td:first-child,
.l1-resource-table th:first-child {
  padding-left: .75rem;
}

.l1-resource-table td:last-child,
.l1-resource-table th:last-child {
  padding-right: .75rem;
}

.l1-resource-table code,
.l1-resource-table .badge,
.l1-service-list .badge,
.l1-service-list .status-pill,
.l1-service-list .warning-pill,
.l1-service-list .danger-pill,
.l1-service-list .neutral-pill,
.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill {
  white-space: nowrap;
}

.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill,
.l1-console-content .badge,
.l1-client-area-page .badge {
  align-items: center;
  display: inline-flex;
  font-size: .6875rem;
  gap: .25rem;
  line-height: 1;
  margin-top: 0;
  min-height: 1.5rem;
  padding: .1875rem .5rem;
  vertical-align: middle;
}

.l1-console-content .badge,
.l1-client-area-page .badge {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill {
  justify-content: center;
  max-width: 100%;
}

.status-dot {
  flex: 0 0 .375rem;
}

.l1-service-list.table-list {
  margin-top: .75rem;
}

.l1-service-list .table-row {
  align-items: center;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 4rem;
}

.l1-service-list .table-row > div:first-child {
  min-width: 0;
}

.l1-service-list .table-row > div:first-child span {
  overflow-wrap: anywhere;
}

.l1-service-list .row-actions {
  justify-content: flex-end;
}

.l1-console-content details > summary.btn {
  list-style: none;
}

.l1-console-content details > summary.btn::-webkit-details-marker {
  display: none;
}

.l1-console-content details dl {
  max-height: 18rem;
  overflow: auto;
}

.code-block {
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--l1-radius-sm);
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .8125rem;
  line-height: 1.55;
  margin: .75rem 0 0;
  max-height: 460px;
  overflow: auto;
  padding: .875rem;
  white-space: pre-wrap;
}

.audit-row {
  align-items: flex-start;
}

.field-inline {
  min-width: min(240px, 100%);
}

.site-option-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.node-load {
  background: var(--l1-shell-bg-muted);
  border-radius: 999px;
  height: .375rem;
  overflow: hidden;
  width: 7.5rem;
}

.node-load span {
  background: var(--l1-brand);
  display: block;
  height: 100%;
}

.l1-footer-bottom-meta {
  display: flex;
  justify-content: flex-end;
}

.l1-home-hero {
  position: relative;
}

.l1-tool-logo-terraform,
.l1-tool-logo-ansible {
  max-width: min(220px, 86%);
}

.l1-pulsar-orbits,
.l1-pulsar-beams,
.l1-pulsar-core,
.l1-pulsar-core-inner,
.l1-pulsar-orbit-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.l1-pulsar-orbit-dot {
  animation: l1OrbitSpin 9s linear infinite;
}

@keyframes l1OrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

.l1-console-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.l1-client-area-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.l1-console-content select,
.l1-client-area-page select,
.l1-console-content textarea,
.l1-client-area-page textarea {
  appearance: none;
  background-clip: padding-box;
  background-color: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-shell-ink);
  display: block;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  min-height: 2.125rem;
  padding: .3125rem .625rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: 100%;
}

.l1-console-content textarea,
.l1-client-area-page textarea {
  min-height: 8rem;
  resize: vertical;
}

.l1-console-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.l1-client-area-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.l1-console-content select:focus,
.l1-client-area-page select:focus,
.l1-console-content textarea:focus,
.l1-client-area-page textarea:focus {
  background-color: var(--l1-shell-bg);
  /* Was Bootstrap's #86b7fe border and rgba(13,110,253,.25) ring, hardcoded —
     so every focused field in a purple-brand product flashed Bootstrap blue,
     and it did not match --l1-focus-ring used everywhere else. */
  border-color: var(--l1-brand);
  box-shadow: var(--l1-focus-ring);
  color: var(--l1-shell-ink);
  outline: 0;
}

.l1-console-content input[type="file"],
.l1-client-area-page input[type="file"] {
  overflow: hidden;
}

.l1-email-preview-frame {
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  min-height: 460px;
  width: 100%;
}

.l1-email-body-preview {
  background: var(--l1-shell-bg-subtle);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-shell-ink);
  margin: 0;
  max-height: 560px;
  overflow: auto;
  padding: .875rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.l1-console-content .btn,
.l1-client-area-page .btn,
.l1-console-content .button,
.l1-client-area-page .button {
  font-size: .8125rem;
  min-height: 2rem;
  padding: .3125rem .625rem;
  white-space: nowrap;
}

.l1-console-content .btn svg,
.l1-client-area-page .btn svg,
.l1-console-content .button svg,
.l1-client-area-page .button svg {
  height: .875rem;
  width: .875rem;
}

.l1-console-content :where(.toolbar-form, .row-actions, .card-header form, .panel-heading form),
.l1-client-area-page :where(.toolbar-form, .row-actions, .card-header form, .panel-heading form) {
  min-width: 0;
}

@media (min-width: 1200px) {
  .l1-console-body {
    --l1-console-content-width: 78vw;
  }
}

@media (max-width: 1060px) {
  .l1-console-shell,
  .l1-client-portal-body .dashboard-shell {
    grid-template-columns: 228px minmax(0, 1fr);
  }
}

@media (max-width: 992px) {
  .l1-console-content .compact-grid.row,
  .l1-console-content .grid.row {
    grid-template-columns: 1fr;
  }

  .l1-service-list .table-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .l1-service-list .row-actions {
    justify-content: flex-start;
  }

  .l1-resource-table {
    min-width: 760px;
  }
}

@media (max-width: 760px) {
  .l1-console-shell,
  .l1-client-portal-body .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .l1-console-sidebar .sidebar-inner,
  .l1-client-portal-body .sidebar-inner {
    max-height: none;
    overflow: visible;
    position: relative;
    top: auto;
  }

  .l1-console-sidebar-scroll {
    overflow-y: visible;
  }

  .l1-console-content,
  .l1-client-portal-body .main,
  .l1-client-portal-body .dashboard-shell .main {
    padding: .75rem;
  }

  .queue-health-grid,
  .queue-run-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .l1-console-content h1,
  .l1-client-page-header h1 {
    font-size: 1.1875rem;
  }

  .l1-console-page > .topbar.card,
  .l1-client-page-header {
    padding: .75rem;
  }
}

/* Drawer close button exists in the sidebar markup on every width; only the
   off-canvas drawer below actually shows it. */
.l1-sidebar-close {
  display: none;
}

/* Console + client portal mobile: off-canvas sidebar drawer instead of stacked
   nav. .l1-console-body is present on every authenticated page (admin and
   client mode both add it; client mode additionally adds
   .l1-client-portal-body), so scoping to .l1-console-body covers both
   shells through the one shared sidebar component. */
@media (max-width: 991.98px) {
  .l1-console-body {
    --l1-client-navbar-offset: 3.35rem;
  }

  .l1-console-body .l1-console-shell,
  .l1-console-body .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .l1-console-body .l1-console-sidebar {
    border-bottom: 0;
    border-right: 1px solid var(--l1-line);
    bottom: 0;
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .18);
    left: 0;
    max-height: none;
    padding-top: var(--l1-client-navbar-offset);
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform .22s ease;
    width: min(17.5rem, 88vw);
    z-index: 1050;
  }

  .l1-console-body.l1-client-sidebar-open .l1-console-sidebar {
    transform: translateX(0);
  }

  /* The open drawer covers the topbar hamburger, so it carries its own
     close button (hidden outside this breakpoint). */
  .l1-console-body .l1-console-sidebar .l1-sidebar-close {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--l1-ink-muted, inherit);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: .35rem;
    position: absolute;
    right: .65rem;
    top: calc(var(--l1-client-navbar-offset) + .65rem);
  }

  .l1-console-body .l1-console-sidebar .l1-sidebar-close:hover {
    background: var(--l1-surface-2, rgba(15, 23, 42, .06));
  }

  .l1-console-body .l1-console-sidebar .l1-sidebar-close svg {
    height: 20px;
    width: 20px;
  }

  .l1-console-body .l1-console-sidebar .sidebar-inner {
    flex: 1 1 auto;
    height: 100%;
    max-height: calc(100vh - var(--l1-client-navbar-offset));
    min-height: 0;
    overflow-y: auto;
    position: static;
    top: auto;
  }

  .l1-console-body .l1-client-sidebar-backdrop {
    background: rgba(15, 23, 42, .42);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .22s ease;
    z-index: 1045;
  }

  .l1-console-body.l1-client-sidebar-open .l1-client-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .l1-console-body.l1-client-sidebar-open {
    overflow: hidden;
  }

  .l1-console-body .l1-resource-table {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .l1-console-body .l1-console-sidebar .sidebar-inner,
  .l1-console-body .sidebar-inner {
    flex: 1 1 auto;
    height: 100%;
    max-height: calc(100vh - var(--l1-client-navbar-offset));
    min-height: 0;
    overflow-y: auto;
    position: static;
    top: auto;
  }
}