/* Pulsar67 console and client portal shell (extracted from app.css).
   Sidebar, dashboard grid, and Bootstrap bridge for authenticated surfaces. */
.p67-console-body {
  --p67-console-bg: var(--p67-shell-bg-subtle);
  --surface: var(--p67-shell-bg);
  --surface-subtle: var(--p67-shell-hover);
  --surface-active: var(--p67-brand-soft);
  --line: var(--p67-line);
  --line-soft: var(--p67-line-translucent);
  --text: var(--p67-shell-ink);
  --text-soft: var(--p67-shell-ink-muted);
  --muted: var(--p67-shell-ink-muted);
  --accent: var(--p67-brand);
  --accent-strong: var(--p67-brand-strong);
  --accent-soft: var(--p67-brand-soft);
  --accent-border: var(--p67-brand-border);
  --radius-card: var(--p67-radius-md);
  --radius-control: var(--p67-radius-sm);
  --p67-console-content-max: 1240px;
  --p67-console-content-width: 100%;
  background: var(--p67-console-bg);
}

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

.p67-console-shell,
.p67-client-portal-body .dashboard-shell {
  background: var(--p67-shell-bg-subtle);
  grid-template-columns: 248px minmax(0, 1fr);
}

.p67-console-sidebar,
.p67-client-portal-body .sidebar {
  background: var(--p67-shell-bg);
  border-right: 1px solid var(--p67-line);
  box-shadow: none;
  color: var(--p67-shell-ink);
}

.p67-console-sidebar .sidebar-inner,
.p67-client-portal-body .sidebar-inner {
  background: var(--p67-shell-bg);
  gap: .75rem;
  padding: 1rem .875rem;
}

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

.p67-console-sidebar .brand,
.p67-console-sidebar .site-nav-trigger,
.p67-client-portal-body .brand {
  background: transparent;
  border-color: transparent;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-shell-ink);
  min-height: 2.25rem;
  padding: .375rem .5rem;
}

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

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

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

.p67-console-sidebar .sidebar-section,
.p67-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. */
.p67-console-sidebar .sidebar-label,
.p67-client-portal-body .sidebar-label {
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .07em;
  margin: 1rem 0 .1875rem;
  padding: 0 .5rem;
}

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

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

/* Operator density. Rows were 38px tall at 14px/600 with 4px gaps, which put
   ~47px between labels and pushed Infrastructure below the fold on a laptop.
   A console sidebar is scanned, not read: 32px rows at 13px/500 fit the whole
   tree on one screen, and weight 600 now means "you are here" instead of
   being the resting state of every item. */
.p67-console-sidebar .p67-console-nav .nav-link,
.p67-console-sidebar .nav a,
.p67-client-portal-body .nav a {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--p67-radius-sm);
  box-shadow: none;
  color: var(--p67-shell-ink-muted);
  display: flex;
  font-size: var(--p67-text-dense);
  font-weight: 500;
  gap: .5rem;
  min-height: 2rem;
  padding: .3125rem .5rem;
  text-decoration: none;
}

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

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

/* v3: token-driven, deliberately neutral. The brand colour appears only as the
   inset edge — a saturated fill on every active nav item made the console read
   as a marketing page. Bootstrap's --bs-primary-* values are not used here. */
.p67-console-sidebar .p67-console-nav .nav-link.is-active,
.p67-console-sidebar .p67-console-nav .nav-link[aria-current="page"],
.p67-console-shell .p67-console-sidebar .nav a.is-active,
.p67-console-shell .p67-console-sidebar .nav a[aria-current="page"],
.p67-client-portal-body .nav a.is-active,
.p67-client-portal-body .nav a[aria-current="page"] {
  background: var(--p67-surface-3);
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--p67-brand);
  color: var(--p67-ink);
  font-weight: var(--p67-fw-semibold);
}

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

.p67-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;
}

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

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

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

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

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

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

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

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

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

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

.p67-console-sidebar .mode-switch button.is-active,
.p67-client-portal-body .mode-switch button.is-active {
  background: var(--p67-shell-bg);
  color: var(--p67-brand-strong);
}

.sidebar-bottom,
.p67-console-sidebar .sidebar-bottom,
.p67-console-sidebar .sidebar-mode-section {
  border-top: 1px solid var(--p67-line);
  margin-top: auto;
  padding-top: .75rem;
}

.p67-console-body:not(.p67-client-portal-body) .p67-console-sidebar .sidebar-mode-section {
  padding-bottom: .875rem;
}

.p67-console-content,
.p67-client-portal-body .main,
.p67-client-portal-body .dashboard-shell .main {
  background: var(--p67-shell-bg-subtle);
  font-size: .9375rem;
  line-height: 1.55;
  padding: 1.5rem 1.75rem 2.75rem;
}

/* 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. */
#p67-console-content:focus,
#p67-console-content:focus-visible {
  box-shadow: none;
  outline: none;
}

.p67-console-page,
.p67-client-area-page,
.p67-client-area-page > .container,
.p67-client-area-page > .container-fluid {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--p67-console-content-max);
  width: min(100%, var(--p67-console-content-width));
}

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

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

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

.p67-console-page > .topbar.content-header.card {
  padding: 0;
}

.p67-console-page > .topbar.content-header.card .card-body {
  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
   .p67-page-header__title, so setting it larger silently re-inflated every
   title the component was supposed to have shrunk. Keep these in step. */
.p67-console-content h1,
.p67-client-page-header h1 {
  font-size: var(--p67-text-xl);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: .125rem 0 .25rem;
}

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

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

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

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

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

.p67-console-content .grid.row,
.p67-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;
}

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

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

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

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

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

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

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

.p67-console-content .panel-heading h2,
.p67-console-content .card-header h2,
.p67-console-content .p67-console-stat h2,
.p67-client-area-page .card-header h2 {
  align-items: center;
  color: var(--p67-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,
.p67-console-content .stat-panel,
.p67-console-content .p67-console-stat,
.p67-client-kpi-card {
  border-left: .1875rem solid var(--accent, var(--p67-brand)) !important;
  border-top: 1px solid var(--p67-line) !important;
  min-height: auto;
  overflow: hidden;
  padding: .6875rem .8125rem;
  position: relative;
  transition: none;
}

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

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

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

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

.stat-accent-green { --accent: var(--p67-ok); }
.stat-accent-purple { --accent: #6f42c1; }
.stat-accent-blue { --accent: var(--p67-info); }
.stat-accent-amber { --accent: var(--p67-warn); }
.stat-accent-red { --accent: var(--p67-danger); }

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

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

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

.p67-admin-overview {
  margin-top: .75rem;
  overflow: hidden;
}

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

.p67-admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.p67-overview-tile {
  --tile-accent: var(--p67-brand);
  --tile-bg: var(--p67-brand-soft);
  --tile-color: var(--p67-brand-strong);
  align-items: center;
  background: var(--p67-shell-bg);
  border-bottom: 1px solid var(--p67-line-translucent);
  border-left: .1875rem solid var(--tile-accent);
  border-right: 1px solid var(--p67-line-translucent);
  color: inherit;
  display: grid;
  gap: .75rem;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  min-height: 5.25rem;
  min-width: 0;
  padding: .75rem .8125rem;
  text-decoration: none;
}

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

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

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

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

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

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

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

.p67-overview-primary {
  --tile-accent: var(--p67-brand);
  --tile-bg: var(--p67-brand-soft);
  --tile-color: var(--p67-brand-strong);
}

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

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

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

.p67-overview-danger {
  --tile-accent: var(--p67-danger);
  --tile-bg: var(--p67-danger-soft);
  --tile-color: var(--p67-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(--p67-shell-bg);
  border: 1px solid var(--p67-line);
  border-radius: var(--p67-radius-sm);
  padding: .75rem;
}

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

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

.queue-health-card strong {
  color: var(--p67-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(--p67-shell-ink-muted);
  font-size: .75rem;
  margin-top: .375rem;
}

.queue-run-summary {
  background: var(--p67-shell-bg-subtle);
  border-bottom: 1px solid var(--p67-line);
  border-top: 1px solid var(--p67-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(--p67-shell-bg);
  border: 1px solid var(--p67-line);
  border-radius: var(--p67-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(--p67-shell-ink);
  font-size: .8125rem;
  font-weight: 700;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill,
.p67-console-content .badge,
.p67-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;
}

.p67-console-content .badge,
.p67-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;
}

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

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

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

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

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

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

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

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

.code-block {
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--p67-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(--p67-shell-bg-muted);
  border-radius: 999px;
  height: .375rem;
  overflow: hidden;
  width: 7.5rem;
}

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

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

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

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

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

.p67-pulsar-orbit-dot {
  animation: p67OrbitSpin 9s linear infinite;
}

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

.p67-client-area-page {
  color: var(--p67-shell-ink);
}

.p67-console-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.p67-client-area-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.p67-console-content select,
.p67-client-area-page select,
.p67-console-content textarea,
.p67-client-area-page textarea {
  appearance: none;
  background-clip: padding-box;
  background-color: var(--p67-shell-bg);
  border: 1px solid var(--p67-line);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-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%;
}

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

.p67-console-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.p67-client-area-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.p67-console-content select:focus,
.p67-client-area-page select:focus,
.p67-console-content textarea:focus,
.p67-client-area-page textarea:focus {
  background-color: var(--p67-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 --p67-focus-ring used everywhere else. */
  border-color: var(--p67-brand);
  box-shadow: var(--p67-focus-ring);
  color: var(--p67-shell-ink);
  outline: 0;
}

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

.p67-client-area-page .card-header h2,
.p67-client-area-page .card-header .h5,
.p67-client-area-page .card-body h2,
.p67-client-area-page .card-body .h5 {
  letter-spacing: 0;
}

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

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

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

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

.p67-jobs-page {
  display: grid;
  gap: .75rem;
}

.p67-jobs-page > .topbar,
.p67-jobs-page > .section-gap {
  margin-bottom: 0;
  margin-top: 0;
}

.p67-jobs-page > .compact-grid.row,
.p67-jobs-page > .panel {
  max-width: 100%;
  width: 100%;
}

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

.p67-client-area-page [aria-label="Daily credit usage chart"] {
  height: clamp(8.5rem, 18vw, 10.5rem) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .p67-console-body .p67-console-sidebar .sidebar-inner {
    max-height: calc(100vh - var(--p67-client-navbar-offset));
    overflow-y: auto;
    position: static;
    top: auto;
  }

  .p67-console-body .p67-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;
  }

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

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

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

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