/* Pulsar67 shared component layer (Phase 1 of the frontend overhaul).
   Token-driven, theme-aware primitives shared by the marketing site, client
   area, and admin console. New class names (p67-button, p67-card, p67-badge,
   p67-page-header, p67-data-list, p67-empty, p67-pager, p67-filter-bar) sit
   alongside the legacy CSS so pages can migrate incrementally. Legacy
   .p67-btn (marketing) is intentionally left untouched. */

/* ---------- Buttons ---------- */
.p67-button {
  --_bg: var(--p67-brand);
  --_fg: var(--p67-on-brand);
  --_bd: var(--p67-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p67-space-2);
  padding: var(--p67-space-2) var(--p67-space-4);
  border: 1px solid var(--_bd);
  border-radius: var(--p67-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--p67-font-body);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--p67-transition), background var(--p67-transition), border-color var(--p67-transition);
}

/* Page header: .p67-page-header is gone — .ui-page__head in assets/tailwind.css
   owns the console page header now. */

/* ---------- Pager ---------- */
.p67-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p67-space-3);
  margin-top: var(--p67-space-4);
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}
.p67-pager a {
  color: var(--p67-brand);
  text-decoration: none;
  font-weight: var(--p67-fw-semibold);
}
.p67-pager a:hover { text-decoration: underline; }

/* ---------- Filter bar ---------- */
.p67-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--p67-space-3);
  padding: var(--p67-space-3) var(--p67-space-4);
  background: var(--p67-surface-2);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  margin-bottom: var(--p67-space-4);
}
.p67-filter-bar--compact {
  margin: 0;
  padding: var(--p67-space-1) var(--p67-space-2);
}
.p67-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-1);
}
.p67-filter-bar__field--grow {
  flex: 1 1 280px;
}
.p67-filter-bar__field > span {
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--p67-ink-muted);
}
.p67-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.p67-filter-bar select {
  padding: var(--p67-space-2) var(--p67-space-3);
  border: 1px solid var(--p67-border-strong);
  border-radius: var(--p67-radius-sm);
  background: var(--p67-surface-1);
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
}

/* ---------- Bootstrap brand bridge ----------
   The client area and marketing site render on stock Bootstrap (loaded from the
   CDN with its default blue primary). This bridge points Bootstrap's brand
   variables at the Pulsar67 tokens so every .btn-primary, badge, link, and
   subtle surface across those surfaces adopts the unified brand indigo in light
   and dark mode — without touching individual templates. Loaded last, so it wins
   over the CDN defaults.

   The -rgb triples must be kept numerically equal to --p67-brand: Bootstrap
   builds its own alpha colours with rgba(var(--bs-primary-rgb), …), so a var()
   cannot be used here. They had drifted to the pre-v3 purple (#5a52b8) while the
   token said #5b5cf6, and hand-written rgba(90, 82, 184, …) tints copied from
   Bootstrap spread that stale purple across the marketing CSS. */
:root {
  --bs-primary: var(--p67-brand);
  --bs-primary-rgb: 91, 92, 246;
  --bs-primary-bg-subtle: var(--p67-brand-soft);
  --bs-primary-border-subtle: var(--p67-brand-border);
  --bs-primary-text-emphasis: var(--p67-brand-strong);
  --bs-link-color: var(--p67-brand);
  --bs-link-color-rgb: 91, 92, 246;
  --bs-link-hover-color: var(--p67-brand-strong);
  --bs-border-radius: var(--p67-radius-md);
  --bs-border-radius-sm: var(--p67-radius-sm);
}
[data-p67-theme="dark"] {
  --bs-primary: var(--p67-brand);
  --bs-primary-rgb: 129, 140, 248;
  --bs-primary-bg-subtle: var(--p67-brand-soft);
  --bs-primary-border-subtle: var(--p67-brand-border);
  --bs-primary-text-emphasis: var(--p67-brand-strong);
  --bs-link-color: var(--p67-brand-strong);
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: var(--p67-brand-contrast);
}
/* Bootstrap solid/outline primary buttons hardcode their compiled colors via
   per-component --bs-btn-* vars, so map those to the brand too. */
.btn-primary {
  --bs-btn-bg: var(--p67-brand);
  --bs-btn-border-color: var(--p67-brand);
  --bs-btn-hover-bg: var(--p67-brand-strong);
  --bs-btn-hover-border-color: var(--p67-brand-strong);
  --bs-btn-active-bg: var(--p67-brand-strong);
  --bs-btn-active-border-color: var(--p67-brand-strong);
  --bs-btn-disabled-bg: var(--p67-brand);
  --bs-btn-disabled-border-color: var(--p67-brand);
  --bs-btn-color: var(--p67-on-brand);
  --bs-btn-hover-color: var(--p67-on-brand);
  --bs-btn-active-color: var(--p67-on-brand);
  --bs-btn-disabled-color: var(--p67-on-brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--p67-brand);
  --bs-btn-border-color: var(--p67-brand);
  --bs-btn-hover-bg: var(--p67-brand);
  --bs-btn-hover-border-color: var(--p67-brand);
  --bs-btn-hover-color: var(--p67-on-brand);
  --bs-btn-active-bg: var(--p67-brand);
  --bs-btn-active-border-color: var(--p67-brand);
  --bs-btn-active-color: var(--p67-on-brand);
}

/* ---------- Form choice controls (portal + console) ----------
   Bootstrap .form-check-input strips native appearance; without explicit
   borders it blends into white cards in light mode and dark surfaces in dark
   mode. Native checkboxes in settings toggles and legacy .checkbox-row forms
   get accent-color and a stable hit target. */
:is(.p67-console-body, .p67-client-portal-body) .form-check-input {
  background-color: var(--p67-surface-1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid var(--p67-border-strong);
  box-shadow: none;
  flex-shrink: 0;
  height: 1rem;
  margin-top: 0;
  width: 1rem;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="checkbox"]:checked {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input[type="radio"]:checked {
  background-color: var(--p67-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  border-color: var(--p67-brand);
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input:focus {
  border-color: var(--p67-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p67-brand) 14%, transparent);
  outline: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:is(.p67-console-body, .p67-client-portal-body) :is(
  input[type="checkbox"]:not(.form-check-input),
  input[type="radio"]:not(.form-check-input)
) {
  accent-color: var(--p67-brand);
  flex-shrink: 0;
  height: 1rem;
  margin: 0;
  min-height: 1rem;
  min-width: 1rem;
  width: 1rem;
}

:is(.p67-console-body, .p67-client-portal-body) .checkbox-row input[type="checkbox"],
:is(.p67-console-body, .p67-client-portal-body) .checkbox-row input[type="radio"] {
  accent-color: var(--p67-brand);
  margin-top: 0.15rem;
}

:is(.p67-console-body, .p67-client-portal-body) .form-check-label {
  color: var(--p67-ink-soft);
}

:is(.p67-console-body, .p67-client-portal-body) :is(.form-control, .form-select) {
  background-color: var(--p67-surface-1);
  border-color: var(--p67-border-strong);
  color: var(--p67-ink);
}

html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input:checked,
html[data-p67-theme="dark"] :is(.p67-console-body, .p67-client-portal-body) .form-check-input:indeterminate {
  background-color: var(--p67-brand);
  border-color: var(--p67-brand);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {

  .p67-client-portal-body .p67-page-header__actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .p67-client-portal-body .p67-page-header__actions .p67-button,
  .p67-client-portal-body .p67-page-header__actions .p67-stat--inline {
    width: 100%;
  }

  .p67-client-portal-body .p67-card__header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--p67-space-3);
  }

  .p67-client-portal-body .p67-card__header > .d-flex,
  .p67-client-portal-body .p67-card__header > form,
  .p67-client-portal-body .p67-card__header > .p67-button {
    width: 100%;
  }

  .p67-client-portal-body .p67-card__header .p67-button,
  .p67-client-portal-body .p67-card__header .form-select {
    width: 100%;
  }

  .p67-client-portal-body .p67-data-row .p67-button {
    width: 100%;
  }

  .p67-client-portal-body .p67-service-detail-actions .p67-button {
    flex: 1 1 calc(50% - var(--p67-space-2));
    min-width: 9rem;
  }
}

@media (max-width: 991.98px) {
  .p67-client-portal-body .p67-client-sidebar-toggle {
    display: inline-flex;
  }
}

/* Stack wide billing tables into labeled cards on narrow screens. */
@media (max-width: 767.98px) {
  .p67-responsive-table table {
    border: 0;
  }

  .p67-responsive-table table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .p67-responsive-table table tbody tr {
    border: 1px solid var(--p67-border);
    border-radius: var(--p67-radius-md);
    display: block;
    margin-bottom: var(--p67-space-3);
    padding: var(--p67-space-3);
  }

  .p67-responsive-table table tbody tr:last-child {
    margin-bottom: 0;
  }

  .p67-responsive-table table tbody td {
    border: 0;
    display: block;
    padding: .35rem 0;
    text-align: left !important;
    white-space: normal;
  }

  .p67-responsive-table table tbody td::before {
    color: var(--p67-ink-muted);
    content: attr(data-label);
    display: block;
    font-size: var(--p67-text-xs);
    font-weight: var(--p67-fw-semibold);
    letter-spacing: .03em;
    margin-bottom: .2rem;
    text-transform: uppercase;
  }

  .p67-responsive-table table tbody td[data-label=""]::before,
  .p67-responsive-table table tbody td:not([data-label])::before {
    content: none;
  }
}

/* ---------- Console & client area layout polish ----------
   Loaded after app.css so these spacing and surface rules win over the
   legacy compact console bridge without touching every template. */
.p67-console-body {
  --p67-console-section-gap: 1.75rem;
  --p67-console-block-gap: 1.25rem;
}

.p67-console-main-pane {
  min-width: 0;
  position: relative;
}

.p67-console-body #p67-console-content {
  outline: none;
  transition: opacity 140ms ease;
}

.p67-console-body #p67-console-content.htmx-request {
  cursor: progress;
  opacity: .58;
  pointer-events: none;
}

.p67-console-body #p67-console-content.htmx-request::before {
  animation: p67-console-loading 1s ease-in-out infinite;
  background: linear-gradient(90deg, var(--p67-brand), var(--p67-info));
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform-origin: left center;
  width: 40vw;
  z-index: 2000;
}

.p67-client-portal-body #p67-console-content.htmx-request {
  cursor: progress;
  opacity: 1;
  pointer-events: none;
}

.p67-client-portal-body #p67-console-content.htmx-request::before {
  content: none;
}

.p67-client-nav-loader {
  align-items: flex-start;
  background: color-mix(in srgb, var(--p67-shell-bg) 82%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding-top: 18vh;
  pointer-events: none;
  position: absolute;
  transition: opacity 120ms ease;
  z-index: 12;
}

.p67-client-nav-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.p67-client-nav-loader__spinner {
  animation: p67-client-nav-spin .75s linear infinite;
  border: 2px solid color-mix(in srgb, var(--p67-brand) 22%, transparent);
  border-radius: 50%;
  border-top-color: var(--p67-brand);
  height: 28px;
  width: 28px;
}

.p67-client-portal-body #p67-console-content.p67-content-enter {
  opacity: 0;
}

.p67-client-portal-body #p67-console-content.p67-content-enter.p67-content-enter-active {
  opacity: 1;
  transition: opacity 150ms ease;
}

@keyframes p67-console-loading {
  from { transform: translateX(-45vw); }
  to { transform: translateX(105vw); }
}

@keyframes p67-client-nav-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .p67-console-body #p67-console-content {
    transition: none;
  }

  .p67-console-body #p67-console-content.htmx-request::before {
    animation: none;
    width: 100vw;
  }

  .p67-client-nav-loader,
  .p67-client-portal-body #p67-console-content.p67-content-enter.p67-content-enter-active {
    transition: none;
  }

  .p67-client-nav-loader__spinner {
    animation: none;
    border-top-color: var(--p67-brand);
  }
}

.p67-console-body .p67-console-content > .messages {
  gap: var(--p67-space-3);
  margin-bottom: var(--p67-console-section-gap);
}

.p67-console-body .messages .message {
  border-radius: var(--p67-radius-md);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-console-body .p67-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap);
}

.p67-console-body .p67-client-area-page > .container-fluid {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap);
}

.p67-console-body .p67-page-stack > .section-gap {
  margin-top: 0;
}

/* This block used to scale the header UP inside the console — a 30px title, a
   16px description and 24px under the rule — which is why an operations page
   opened with a banner rather than with data. The console is the densest
   surface in the product and should not carry the product's largest page
   title. Size now comes from the base component; only the divider geometry is
   console-specific. */
.p67-console-body .p67-page-header {
  margin-bottom: 0;
  padding-bottom: var(--p67-space-3);
  border-bottom: 1px solid var(--p67-border);
}

.p67-console-body .p67-page-header__actions {
  gap: var(--p67-space-3);
}

.p67-console-body .p67-stat-grid {
  gap: var(--p67-console-block-gap);
  margin-bottom: 0;
}

.p67-console-body .p67-stat {
  padding: var(--p67-space-5);
  border-radius: var(--p67-radius-lg);
  transition: border-color var(--p67-transition), box-shadow var(--p67-transition), transform var(--p67-transition);
}

.p67-console-body .p67-stat.p67-stat--inline {
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-console-body a.p67-stat:hover {
  border-color: var(--p67-brand-border);
  box-shadow: var(--p67-shadow-md);
  transform: translateY(-1px);
}

.p67-console-body .p67-stat__value {
  margin-top: var(--p67-space-2);
}

.p67-console-body .p67-card {
  border-radius: var(--p67-radius-lg);
  box-shadow: var(--p67-shadow-sm);
  overflow: hidden;
}

.p67-console-body .p67-card__header {
  padding: var(--p67-space-5) var(--p67-space-6);
  background: linear-gradient(180deg, var(--p67-surface-2) 0%, var(--p67-surface-1) 100%);
}

.p67-console-body .p67-card__body {
  padding: var(--p67-space-5) var(--p67-space-6);
}

.p67-console-body .p67-card__title {
  font-size: var(--p67-text-xl);
}

.p67-console-body .p67-data-list {
  border-radius: var(--p67-radius-md);
}

.p67-console-body .p67-data-list--flush {
  border: 0;
  border-radius: 0;
}

.p67-console-body .p67-data-row {
  padding: var(--p67-space-4) var(--p67-space-5);
  gap: var(--p67-space-4);
}

.p67-console-body a.p67-data-row:hover {
  background: var(--p67-surface-2);
}

.p67-console-body .p67-data-row__main > span {
  margin-top: 2px;
  line-height: 1.45;
}

.p67-console-body .p67-filter-bar {
  gap: var(--p67-space-4);
  margin-bottom: var(--p67-console-block-gap);
  padding: var(--p67-space-4) var(--p67-space-5);
  border-radius: var(--p67-radius-lg);
}

.p67-console-body .p67-filter-bar--compact {
  gap: var(--p67-space-2);
  margin: 0;
  padding: var(--p67-space-1) var(--p67-space-2);
}

.p67-console-body .p67-empty {
  padding: var(--p67-space-8) var(--p67-space-6);
}

.p67-console-body .p67-pager {
  margin-top: var(--p67-space-5);
  padding-top: var(--p67-space-4);
  border-top: 1px solid var(--p67-border);
}

.p67-console-body .stat-panel,
.p67-console-body .p67-console-stat,
.p67-client-portal-body .p67-client-kpi-card {
  border-radius: var(--p67-radius-lg) !important;
  box-shadow: var(--p67-shadow-sm) !important;
  padding: 1.125rem 1.25rem !important;
}

.p67-console-body .stat-panel .metric {
  margin-top: var(--p67-space-2);
}

.p67-console-body .p67-console-content .alert {
  border-radius: var(--p67-radius-md);
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-console-body .topbar.content-header.card {
  border-radius: var(--p67-radius-lg) !important;
  box-shadow: var(--p67-shadow-sm) !important;
  margin-bottom: 0 !important;
}

.p67-console-body .topbar.content-header.card .card-body {
  padding: var(--p67-space-5) var(--p67-space-6) !important;
}

.p67-console-body .p67-overview-tile {
  gap: var(--p67-space-4);
  min-height: 5.75rem;
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-console-body .queue-health-grid {
  gap: var(--p67-console-block-gap);
}

/* ---------- Business snapshot ---------- */
.p67-business-snapshot {
  display: grid;
  gap: var(--p67-space-4);
}

.p67-business-snapshot__header {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-4);
  justify-content: space-between;
}

.p67-business-snapshot__header h2 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-xl);
  margin: var(--p67-space-1) 0 0;
}

.p67-business-snapshot__header p {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  margin: var(--p67-space-1) 0 0;
}

.p67-business-metrics {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-lg);
  box-shadow: var(--p67-shadow-sm);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.p67-business-metric {
  min-width: 0;
  padding: var(--p67-space-5);
}

.p67-business-metric + .p67-business-metric {
  border-left: 1px solid var(--p67-border);
}

.p67-business-metric span,
.p67-business-metric strong,
.p67-business-metric small {
  display: block;
}

.p67-business-metric span {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.p67-business-metric strong {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  /* 18px, matching .ui-metric__value. This was clamp(1.5rem, 2vw, 2rem) — 24-32px —
     which rendered the revenue figures LARGER than the 20px page title next to an
     18px stat grid, reintroducing exactly the "figures as loud as the heading"
     defect the design system records fixing. */
  font-size: var(--p67-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: var(--p67-space-2);
}

.p67-business-metric small {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  line-height: 1.45;
  margin-top: var(--p67-space-2);
}

/* --brand stays ink: a projected-revenue figure is not a status, and colouring it
   indigo next to a green "collected" and an amber "outstanding" implied it was
   one. Only the semantic variants below carry colour. */
.p67-business-metric--brand strong { color: var(--p67-ink); }
.p67-business-metric--success strong { color: var(--p67-ok); }
.p67-business-metric--warning strong { color: var(--p67-warn); }

/* ---------- Flatter nested surfaces ---------- */
/* Keep these selectors on one line per compound. A previous line-wise sweep that
   deleted the dead .p67-card / .p67-data-list classes chopped the middle out of
   two `:is(` lists and left them unclosed — which does not fail loudly, it makes
   the CSS parser swallow every rule after this block. .p67-topbar, .p67-table,
   .p67-status and the rest of the v3 components below silently stopped
   existing. */
:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card)
  > :is(.form-card.card, .table-list, .list-group) {
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card)
  > .form-card.card {
  border: 0 !important;
  padding: 0;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card)
  > :is(.table-list, .list-group)
  > :is(.table-row, .list-group-item) {
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--p67-border) !important;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card)
  > :is(.table-list, .list-group)
  > :is(.table-row, .list-group-item):first-child {
  border-top: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card)
  .queue-health-card {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--p67-border-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--p67-space-2) var(--p67-space-4);
}

.p67-thread-list {
  display: grid;
  gap: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--p67-border) !important;
  border-radius: 0 !important;
  padding: var(--p67-space-4) 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message:first-child {
  padding-top: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-thread-message--internal {
  background: var(--p67-warn-soft) !important;
  padding: var(--p67-space-4) !important;
}

@media (max-width: 960px) {
  .p67-business-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p67-business-metric:nth-child(odd) {
    border-left: 0;
  }

  .p67-business-metric:nth-child(n + 3) {
    border-top: 1px solid var(--p67-border);
  }
}

@media (max-width: 600px) {
  .p67-business-metrics {
    grid-template-columns: 1fr;
  }

  .p67-business-metric + .p67-business-metric {
    border-left: 0;
    border-top: 1px solid var(--p67-border);
  }
}

@media (max-width: 980px) {
  .p67-console-body .p67-console-content,
  .p67-client-portal-body .main {
    padding: 1.125rem 1rem 2rem;
  }

}

/* ---------- Ambient canvas (auth) ---------- */
/* The tinted glow belongs on marketing-flavoured canvases. Console and client
   shells stay flat — a gradient behind dense data reads as a rendering bug. */
.auth-body {
  background:
    radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--p67-brand) 8%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--p67-accent) 6%, transparent), transparent 24rem),
    var(--p67-surface-2);
}

.p67-console-body,
.p67-client-portal-body {
  background: var(--p67-surface-2);
}

/* ---------- Marketing button bridge ---------- */
.p67-btn.btn-primary,
.p67-btn-primary.btn-primary {
  background: var(--p67-brand);
  border-color: var(--p67-brand);
  border-radius: var(--p67-radius-pill);
  color: var(--p67-on-brand);
  font-weight: var(--p67-fw-semibold);
}

.p67-btn.btn-primary:hover,
.p67-btn-primary.btn-primary:hover {
  background: var(--p67-brand-strong);
  border-color: var(--p67-brand-strong);
  color: var(--p67-on-brand);
}

/* Callout card: .p67-callout is gone; the portal uses .ui-panel / .ui-notice. */

/* ---------- Checkout workspace (configuration + review panel) ---------- */
/* .p67-order-workspace existed only as a marker for a few app.css !important
   tweaks; the actual two-column layout was a Bootstrap `row g-3
   align-items-start` with `col-12 col-xl-8` / `col-12 col-xl-4` wrappers and a
   `sticky-xl-top` utility, repeated across the checkout templates. It owns the
   layout now, so the cards are direct grid children and the wrapper divs go.
   The 1200px breakpoint is Bootstrap's xl, so the stacking point is unchanged. */
.p67-order-workspace {
  align-items: start;
  display: grid;
  gap: var(--p67-space-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.p67-order-workspace > * {
  min-width: 0;
}

.p67-order-workspace__panel {
  position: sticky;
  top: calc(var(--p67-topbar-h) + var(--p67-space-3));
}

.p67-order-workspace__full {
  grid-column: 1 / -1;
}

/* Two equal panels that collapse to one column. Replaces `row g-3` + a pair of
   `col-lg-6` wrappers; auto-fit means no breakpoint to keep in sync. */
.p67-panel-pair {
  display: grid;
  gap: var(--p67-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

@media (max-width: 1200px) {
  .p67-order-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-order-workspace__panel {
    position: static;
  }
}

/* ---------- Choice row (single-select list: checkout cadence, etc.) ---------- */
/* Replaces `list-group-item list-group-item-action d-flex flex-column
   flex-md-row align-items-md-center justify-content-between gap-3` per row.

   The selected state deliberately does not wash the row in brand colour with
   brand-coloured text. That was the loudest thing on the checkout pages, and it
   was self-inflicted: because the fill was a light lavender, site.js had to
   swap Bootstrap's text-white-50 on and off to keep the sub-label legible, and
   only an `!important` colour: inherit in app.css stopped it rendering as
   near-white text on near-white. Selection is now marked the way the sidebar
   marks the current page — a 2px brand edge — so the accent means one thing
   and the text needs no compensating override. */
.p67-choice-list {
  display: grid;
  gap: var(--p67-space-2);
}

.p67-choice {
  align-items: center;
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  color: var(--p67-ink);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-3) var(--p67-space-4);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--p67-transition), background var(--p67-transition);
  width: 100%;
}

.p67-choice:hover {
  border-color: var(--p67-border-strong);
}

.p67-choice.is-selected {
  border-color: var(--p67-border-strong);
  box-shadow: inset 2px 0 0 var(--p67-brand);
}

.p67-choice__label {
  display: block;
  font-weight: var(--p67-fw-semibold);
}

.p67-choice__detail {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-dense);
}

.p67-choice__aside {
  color: var(--p67-ink-muted);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-dense);
  white-space: nowrap;
}

.p67-choice.is-selected .p67-choice__aside {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 991.98px) {
}

@media (max-width: 575.98px) {
}

/* ---------- Legacy → Phase 1 visual bridges ----------
   Pages still using .panel/.button/.topbar/.empty-state/.btn should
   visually match .p67-card/.p67-button/.p67-page-header/.p67-empty so
   console and client chrome stay consistent during the migration. */

:is(.p67-console-body, .p67-client-portal-body) .topbar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-4);
  justify-content: space-between;
  margin: 0 0 var(--p67-space-5);
  padding: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .topbar .eyebrow,
:is(.p67-console-body, .p67-client-portal-body) .p67-console-page > .eyebrow {
  color: var(--p67-ink-muted);
  display: block;
  font-family: var(--p67-font-body);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.04em;
  margin: 0 0 var(--p67-space-1);
  text-transform: uppercase;
}

:is(.p67-console-body, .p67-client-portal-body) .topbar h1 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  margin: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .panel.card,
:is(.p67-console-body, .p67-client-portal-body) .panel {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-sm);
  color: var(--p67-ink);
}

:is(.p67-console-body, .p67-client-portal-body) .panel h2,
:is(.p67-console-body, .p67-client-portal-body) .panel-heading h2 {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .button,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-primary {
  background: var(--p67-brand);
  border-color: var(--p67-brand);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-on-brand);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  min-height: 38px;
}

:is(.p67-console-body, .p67-client-portal-body) .button:hover,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-primary:hover {
  background: var(--p67-brand-strong);
  border-color: var(--p67-brand-strong);
  color: var(--p67-on-brand);
  filter: brightness(1.03);
}

:is(.p67-console-body, .p67-client-portal-body) .button-secondary,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-secondary {
  background: transparent;
  border-color: var(--p67-border-strong);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .button-secondary:hover,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-secondary:hover {
  background: var(--p67-surface-2);
  border-color: var(--p67-border-strong);
  color: var(--p67-ink);
}

:is(.p67-console-body, .p67-client-portal-body) .button-danger,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-danger,
:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-danger {
  border-radius: var(--p67-radius-sm);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .btn.btn-outline-danger {
  background: transparent;
  border-color: var(--p67-danger);
  color: var(--p67-danger);
}

:is(.p67-console-body, .p67-client-portal-body) .btn.btn-sm {
  font-size: var(--p67-text-xs);
  min-height: 30px;
  padding: var(--p67-space-1) var(--p67-space-3);
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state,
:is(.p67-console-body, .p67-client-portal-body) .empty-state.alert {
  align-items: flex-start;
  background: var(--p67-surface-2);
  border: 0;
  border-radius: 0;
  color: var(--p67-ink-muted);
  display: grid;
  gap: var(--p67-space-1);
  justify-content: start;
  margin: 0;
  padding: var(--p67-space-6) var(--p67-space-5);
  text-align: left;
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state strong {
  color: var(--p67-ink);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-base);
  font-weight: var(--p67-fw-semibold);
}

:is(.p67-console-body, .p67-client-portal-body) .empty-state span {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
  margin-top: 0;
}

:is(.p67-console-body, .p67-client-portal-body) .status-pill,
:is(.p67-console-body, .p67-client-portal-body) .neutral-pill,
:is(.p67-console-body, .p67-client-portal-body) .danger-pill {
  border-radius: var(--p67-radius-pill);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.6;
  padding: 2px 10px;
}

:is(.p67-console-body, .p67-client-portal-body) .p67-console-page:not(.p67-page-stack),
:is(.p67-console-body, .p67-client-portal-body) .p67-client-area-page:not(.p67-page-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap, var(--p67-space-5));
}

:is(.p67-console-body, .p67-client-portal-body) .p67-client-area-page.p67-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--p67-console-section-gap, var(--p67-space-5));
}

:is(.p67-console-body, .p67-client-portal-body) .section-gap {
  margin-top: 0;
}

/* ==========================================================================
   v3 console layer — dense application UI
   --------------------------------------------------------------------------
   Added as part of the v3 consolidation. These components replace equivalents
   in app.css / v2-corporate.css; as each page migrates, the superseded rules
   are deleted rather than left to accumulate. Everything here is token-driven
   and scoped to the console/client shells.
   ========================================================================== */

/* ---------- Top bar ---------- */
.p67-topbar {
  align-items: center;
  background: var(--p67-surface-1);
  border-bottom: 1px solid var(--p67-border);
  display: flex;
  gap: var(--p67-space-3);
  height: var(--p67-topbar-h);
  padding-inline: var(--p67-space-4);
  position: sticky;
  top: 0;
  z-index: 40;
}

.p67-topbar__brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: var(--p67-space-2);
  text-decoration: none;
}

.p67-topbar__brand img {
  display: block;
  width: auto;
}

.p67-topbar__context {
  background: var(--p67-brand-soft);
  border-radius: var(--p67-radius-sm);
  color: var(--p67-brand-strong);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.04em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.p67-topbar__spacer {
  flex: 1 1 auto;
}

.p67-topbar__actions {
  align-items: center;
  display: flex;
  gap: var(--p67-space-1);
}

.p67-topbar__link {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-medium);
  gap: var(--p67-space-2);
  height: var(--p67-control-h-md);
  padding-inline: var(--p67-control-pad-x);
  text-decoration: none;
  transition: background var(--p67-transition), color var(--p67-transition);
}

.p67-topbar__link:hover {
  background: var(--p67-surface-3);
  color: var(--p67-ink);
}

.p67-topbar__link i {
  height: 15px;
  width: 15px;
}

.p67-topbar__icon-button,
.p67-topbar__menu-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  height: var(--p67-control-h-md);
  justify-content: center;
  transition: background var(--p67-transition), color var(--p67-transition);
  width: var(--p67-control-h-md);
}

.p67-topbar__icon-button:hover,
.p67-topbar__menu-toggle:hover {
  background: var(--p67-surface-3);
  color: var(--p67-ink);
}

.p67-topbar__icon-button i,
.p67-topbar__menu-toggle i {
  height: 16px;
  width: 16px;
}

/* The sidebar is permanent from md up; the toggle is a small-screen affordance. */
.p67-topbar__menu-toggle {
  display: none;
}

.p67-topbar__avatar-button {
  background: transparent;
  border: 0;
  border-radius: var(--p67-radius-pill);
  display: inline-flex;
  margin-inline-start: var(--p67-space-1);
  padding: 0;
}

.p67-topbar__avatar {
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-pill);
  display: block;
}

.p67-topbar__menu {
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-md);
  font-size: var(--p67-text-sm);
  min-width: 224px;
  padding: var(--p67-space-1);
}

.p67-topbar__menu-identity {
  display: grid;
  gap: 1px;
  padding: var(--p67-space-2) var(--p67-space-3);
}

.p67-topbar__menu-identity strong {
  font-size: var(--p67-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}

.p67-topbar__menu-identity small {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
}

.p67-topbar__menu .dropdown-item {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  display: flex;
  gap: var(--p67-space-2);
  padding: var(--p67-space-2) var(--p67-space-3);
}

.p67-topbar__menu .dropdown-item i {
  height: 15px;
  width: 15px;
}

.p67-topbar__menu form {
  margin: 0;
}

.p67-topbar__signout {
  color: var(--p67-danger);
  width: 100%;
}

/* .p67-stat-strip__value and .p67-table__data are gone — .ui-metric__value and
   .ui-table__data in assets/tailwind.css carry the 18px figure and the tabular
   digit alignment now. */

@keyframes p67-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- Priority marker ---------- */
.p67-priority {
  align-items: center;
  border-radius: var(--p67-radius-sm);
  display: inline-flex;
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.03em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.p67-priority[data-level="urgent"] {
  background: var(--p67-danger-soft);
  color: var(--p67-danger);
}

.p67-priority[data-level="high"] {
  background: var(--p67-warn-soft);
  color: var(--p67-warn);
}

.p67-priority[data-level="normal"] {
  background: var(--p67-surface-3);
  color: var(--p67-ink-muted);
}

.p67-priority[data-level="low"] {
  background: transparent;
  color: var(--p67-ink-muted);
}

.p67-row-action {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--p67-radius-sm);
  color: var(--p67-ink-muted);
  display: inline-flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-medium);
  height: var(--p67-control-h-sm);
  padding-inline: var(--p67-space-2);
  text-decoration: none;
  transition: background var(--p67-transition), color var(--p67-transition), border-color var(--p67-transition);
}

.p67-row-action:hover {
  background: var(--p67-surface-3);
  border-color: var(--p67-border);
  color: var(--p67-ink);
}

.p67-row-action i {
  height: 14px;
  width: 14px;
}

/* Destructive actions stay quiet until intent is shown. A red button repeated
   down every row trains people to ignore it. */
.p67-row-action[data-tone="danger"] {
  color: var(--p67-ink-muted);
}

.p67-row-action[data-tone="danger"]:hover {
  background: var(--p67-danger-soft);
  border-color: transparent;
  color: var(--p67-danger);
}

/* ---------- Focus ---------- */
:is(.p67-console-body, .p67-client-portal-body) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: var(--p67-focus-ring);
  outline: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .p67-topbar__menu-toggle {
    display: inline-flex;
  }

  .p67-topbar__link span {
    display: none;
  }
}

/* Icon-only row actions keep the action column narrow enough that it stays
   on screen at laptop widths. Each carries an aria-label + title. */
.p67-row-action--icon {
  justify-content: center;
  padding-inline: 0;
  width: var(--p67-control-h-sm);
}

/* Columns that earn their place on wide screens but are droppable when space
   is tight. The data stays reachable on the record's own page. */
@media (max-width: 1250px) {
}

/* ---------- Scrollbars ----------
   Default UA scrollbars stay light in dark mode and glare against the console
   surfaces. color-scheme handles Firefox and modern Chromium; the -webkit
   rules cover older WebKit that ignores it. */
:is(.p67-console-body, .p67-client-portal-body) {
  scrollbar-color: var(--p67-border-strong) transparent;
  scrollbar-width: thin;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-track {
  background: transparent;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-thumb {
  background: var(--p67-border-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--p67-radius-pill);
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-thumb:hover {
  background: var(--p67-ink-muted);
  background-clip: content-box;
}

:is(.p67-console-body, .p67-client-portal-body) ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- v3 chrome restraint ----------
   The console and client shells use the brand colour for actions and links,
   not for chrome. Neutral surfaces keep dense pages professional and stop the
   accent from competing with status colours. */
.p67-topbar__context {
  background: var(--p67-surface-3);
  color: var(--p67-ink-muted);
}

:is(.p67-console-body, .p67-client-portal-body) .sidebar-label {
  color: var(--p67-ink-muted);
}

/* Secondary buttons read as neutral controls, not tinted ones. */
:is(.p67-console-body, .p67-client-portal-body) .p67-button--secondary {
  --_bg: var(--p67-surface-1);
  --_fg: var(--p67-ink-soft);
  --_bd: var(--p67-border-strong);
}

:is(.p67-console-body, .p67-client-portal-body) .p67-button--secondary:hover {
  --_bg: var(--p67-surface-3);
  --_fg: var(--p67-ink);
}

/* Page eyebrow was a saturated brand line above every title. */
:is(.p67-console-body, .p67-client-portal-body) .p67-page-header__eyebrow {
  color: var(--p67-ink-muted);
}

/* ---------- Hooks the design audit found unstyled ----------
   Each of these classes was live in markup with no rule behind it. Found by
   apps/core/design_audit.py, which flags any p67-* class a page uses but none
   of its linked stylesheets define. */

/* Dropdown anchor for the top-bar account menu. */
.p67-topbar__account {
  position: relative;
}

/* The theme toggle is styled by the marketing bundle, which console pages do
   not load — so the console needs its own rule. Sizing comes from
   .p67-topbar__icon-button; this only guarantees the icon swap works. */
.p67-console-body .p67-theme-toggle [data-p67-theme-icon][hidden] {
  display: none;
}

/* Filter bar sub-elements (audit log). */
.p67-filter-bar__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
}

.p67-filter-bar__actions {
  align-items: center;
  display: flex;
  gap: var(--p67-space-2);
}

/* Two-column layout for the admin overview's orders/failures cards. */
.p67-admin-queues {
  display: grid;
  gap: var(--p67-console-section-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Failure feed on the admin overview. */
.p67-failure-feed {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-2);
}

/* Settings cards that span more of the grid. */
.p67-settings-card-wide {
  grid-column: 1 / -1;
}

.p67-settings-card-wideish {
  grid-column: span 2;
}

/* Client dashboard: .p67-dashboard-summary, .p67-balance-card and
   .p67-bandwidth-card are gone — the balance/bandwidth composition is built
   from .ui-panel plus tw: grid utilities on the template now. */

.p67-link-arrow {
  color: var(--p67-brand);
  font-weight: var(--p67-fw-semibold, 600);
  text-decoration: none;
}

.p67-link-arrow:hover {
  color: var(--p67-brand);
  text-decoration: underline;
}

.p67-bandwidth-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.1rem;
}

.p67-bandwidth-facts > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.p67-bandwidth-facts__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.p67-bandwidth-facts__over {
  color: var(--p67-danger, #dc2626);
}

/* ---------- Client dashboard: pooled bandwidth Pool/Usage chart ----------
   Two rows on one shared scale (not a progress meter): a meter clips at 100%,
   so it cannot show usage overshooting the pool, which is exactly the state a
   customer most needs to see. */
.p67-bw-chart {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.p67-bw-chart__row {
  align-items: center;
  display: grid;
  gap: .85rem;
  grid-template-columns: 4.25rem minmax(0, 1fr) 5.5rem;
}

.p67-bw-chart__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.p67-bw-chart__track {
  background: var(--p67-surface-3);
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
}

.p67-bw-chart__bar {
  border-radius: 4px;
  display: block;
  height: 100%;
  min-width: 2px;
  transition: width .3s ease;
}

.p67-bw-chart__bar--pool {
  background: color-mix(in srgb, var(--p67-brand) 28%, transparent);
}

.p67-bw-chart__bar--usage {
  background: var(--p67-brand);
}

.p67-bw-chart__bar--usage.is-over {
  background: var(--p67-danger, #dc2626);
}

.p67-bw-chart__value {
  color: var(--p67-ink);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
  text-align: right;
}

@media (max-width: 560px) {
  .p67-bw-chart__row {
    grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem;
    gap: .5rem;
  }
}

/* ---------- Vultr-style detail surfaces ----------
   Detail pages were a stack of equal-weight cards. These primitives give a
   single overview composition (hero + 3-col facts) and quieter secondary
   sections so power actions, access credentials, and specs read first.
   The .p67-detail wrapper itself is gone; .p67-overview below is still used by
   the client service and admin client detail templates. */

/* One overview panel, three equal columns — Access / Specs / Server. */
.p67-overview {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.p67-overview__col {
  min-width: 0;
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-overview__col + .p67-overview__col {
  border-left: 1px solid var(--p67-border);
}

.p67-overview__heading {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .04em;
  margin: 0 0 var(--p67-space-3);
  text-transform: uppercase;
}

.p67-detail-grid {
  display: grid;
  gap: var(--p67-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Compact fact strip under admin detail heroes. */
.p67-fact-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--p67-border);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: hidden;
}

.p67-fact-strip__item {
  background: var(--p67-surface-1);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-fact-strip__label {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.p67-fact-strip__value {
  color: var(--p67-ink);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.p67-fact-strip__meta {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
  line-height: 1.35;
}

/* Instance list closer to Vultr's Products table. */
.p67-instance-table .p67-table__title a {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-semibold);
  text-decoration: none;
}

.p67-instance-table .p67-table__title a:hover {
  color: var(--p67-brand);
  text-decoration: underline;
}

.p67-instance-table__select {
  width: 1rem;
}

@media (max-width: 960px) {
  .p67-overview {
    grid-template-columns: 1fr;
  }

  .p67-overview__col + .p67-overview__col {
    border-left: 0;
    border-top: 1px solid var(--p67-border);
  }

  .p67-detail-grid {
    grid-template-columns: 1fr;
  }

  .p67-fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .p67-fact-strip {
    grid-template-columns: 1fr;
  }
}