/* 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);
}
.p67-button:hover { filter: brightness(1.05); }
.p67-button:focus-visible {
  outline: 2px solid var(--p67-brand);
  outline-offset: 2px;
}
.p67-button:disabled,
.p67-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.p67-button--secondary {
  --_bg: transparent;
  --_fg: var(--p67-ink);
  --_bd: var(--p67-border-strong);
}
.p67-button--ghost {
  --_bg: transparent;
  --_fg: var(--p67-ink-soft);
  --_bd: transparent;
}
.p67-button--danger {
  --_bg: var(--p67-danger);
  --_fg: #ffffff;
  --_bd: var(--p67-danger);
}
.p67-button--sm {
  padding: var(--p67-space-1) var(--p67-space-3);
  font-size: var(--p67-text-xs);
}
.p67-button--block {
  width: 100%;
}

/* ---------- Card ---------- */
.p67-card {
  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);
}
.p67-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p67-space-3);
  padding: var(--p67-space-4) var(--p67-space-5);
  border-bottom: 1px solid var(--p67-border);
}
.p67-card__title {
  margin: 0;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-card__subtitle {
  margin: 2px 0 0;
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}
.p67-card__body { padding: var(--p67-space-5); }

/* ---------- Badge / status pill ---------- */
.p67-badge {
  --_c: var(--p67-ink-muted);
  --_b: var(--p67-surface-3);
  display: inline-flex;
  align-items: center;
  gap: var(--p67-space-1);
  padding: 2px 10px;
  border-radius: var(--p67-radius-pill);
  background: var(--_b);
  color: var(--_c);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.p67-badge--ok      { --_c: var(--p67-ok);     --_b: var(--p67-ok-soft); }
.p67-badge--warn    { --_c: var(--p67-warn);   --_b: var(--p67-warn-soft); }
.p67-badge--danger  { --_c: var(--p67-danger); --_b: var(--p67-danger-soft); }
.p67-badge--info    { --_c: var(--p67-info);   --_b: var(--p67-info-soft); }
.p67-badge--brand   { --_c: var(--p67-brand);  --_b: var(--p67-brand-soft); }

/* ---------- Page header ---------- */
.p67-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--p67-space-4);
  margin-bottom: var(--p67-space-5);
  border-bottom: 1px solid var(--p67-brand-border);
  padding-bottom: var(--p67-space-4);
}
.p67-page-header__eyebrow {
  display: block;
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p67-ink-muted);
  border-left: 3px solid var(--p67-brand);
  padding-left: var(--p67-space-3);
}
.p67-page-header__title {
  margin: var(--p67-space-1) 0 0;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-bold);
  color: var(--p67-ink);
}
.p67-page-header__desc {
  margin: var(--p67-space-1) 0 0;
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-sm);
}
.p67-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p67-space-2);
}

/* ---------- Data list (row-based list) ---------- */
.p67-data-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: hidden;
  background: var(--p67-surface-1);
}
.p67-data-list--flush {
  border: 0;
  border-radius: 0;
}
.p67-data-row {
  display: flex;
  align-items: center;
  gap: var(--p67-space-4);
  padding: var(--p67-space-3) var(--p67-space-4);
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink);
  text-decoration: none;
  transition: background var(--p67-transition);
}
.p67-data-row:last-child { border-bottom: 0; }
a.p67-data-row:hover { background: var(--p67-surface-2); }
.p67-data-row__main { flex: 1 1 auto; min-width: 0; }
.p67-data-row__main strong {
  display: block;
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-data-row__main > span {
  display: block;
  font-size: var(--p67-text-sm);
  color: var(--p67-ink-muted);
}

/* ---------- Stat grid ---------- */
.p67-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--p67-space-2);
  margin-bottom: var(--p67-space-4);
}
.p67-stat {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  box-shadow: var(--p67-shadow-sm);
  /* v3: matches .p67-stat-strip__item density so cards and strips read as one
     system on pages that still use the grid (mostly record detail views). */
  padding: var(--p67-space-3) var(--p67-space-4);
}
.p67-stat__label {
  align-items: center;
  display: flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink-muted);
}
.p67-stat__value {
  margin-top: 2px;
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
  line-height: 1.15;
}
.p67-stat__meta {
  margin: 2px 0 0;
  font-size: var(--p67-text-xs);
  color: var(--p67-ink-muted);
}
a.p67-stat {
  display: block;
  text-decoration: none;
  transition: border-color var(--p67-transition), box-shadow var(--p67-transition), transform var(--p67-transition);
}
a.p67-stat:hover {
  border-color: var(--p67-brand-border);
  box-shadow: var(--p67-shadow-md);
}
.p67-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p67-space-3);
}

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

.p67-stat__value--lg {
  font-size: var(--p67-text-lg);
}

.p67-stat__value--compact {
  font-size: var(--p67-text-xl);
}

.p67-stat__value--code {
  font-size: var(--p67-text-sm);
  overflow-wrap: anywhere;
}

/* ---------- Empty state ---------- */
.p67-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p67-space-2);
  padding: var(--p67-space-7) var(--p67-space-5);
  text-align: center;
  color: var(--p67-ink-muted);
}
.p67-empty__icon {
  color: var(--p67-ink-muted);
  opacity: 0.8;
}
.p67-empty__title {
  font-size: var(--p67-text-lg);
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink);
}
.p67-empty__desc {
  font-size: var(--p67-text-sm);
  max-width: 42ch;
}

/* ---------- 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 purple in light and
   dark mode — without touching individual templates. Loaded last, so it wins
   over the CDN defaults. */
:root {
  --bs-primary: var(--p67-brand);
  --bs-primary-rgb: 90, 82, 184;
  --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: 90, 82, 184;
  --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: 139, 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-strong);
  --bs-link-color-rgb: 167, 139, 250;
  --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-data-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p67-space-2);
  }
  .p67-page-header { align-items: flex-start; }

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

.p67-service-meta {
  display: grid;
  gap: .2rem;
}

.p67-service-meta__line {
  display: block;
  line-height: 1.35;
  word-break: break-word;
}

/* Client sidebar menu button only belongs in the portal shell. */
.p67-client-sidebar-toggle {
  display: none;
}

@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(--bs-body-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;
}

.p67-console-body .p67-page-header {
  margin-bottom: 0;
  padding-bottom: var(--p67-space-5);
  border-bottom: 1px solid var(--p67-border);
}

.p67-console-body .p67-page-header__title {
  font-size: var(--p67-text-3xl);
  letter-spacing: -0.02em;
}

.p67-console-body .p67-page-header__desc {
  font-size: var(--p67-text-base);
  max-width: 52ch;
}

.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);
  font-size: clamp(1.5rem, 2vw, 2rem);
  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);
}

.p67-business-metric--brand strong { color: var(--p67-brand); }
.p67-business-metric--success strong { color: var(--p67-ok); }
.p67-business-metric--warning strong { color: var(--p67-warn); }

/* ---------- Flatter nested surfaces ---------- */
:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-card)
  > :is(.form-card.card, .table-list, .p67-data-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, .p67-card)
  > .form-card.card {
  border: 0 !important;
  padding: 0;
}

:is(.p67-console-body, .p67-client-portal-body)
  :is(.panel, .card, .p67-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, .p67-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, .p67-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;
  }

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

/* ---------- Ambient canvas (portal, console, 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. */
.p67-canvas,
.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 (replaces Bootstrap alerts in portal) ---------- */
.p67-callout {
  align-items: center;
  background: var(--p67-info-soft);
  border: 1px solid color-mix(in srgb, var(--p67-info) 25%, transparent);
  border-left: 4px solid var(--p67-info);
  border-radius: var(--p67-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-4) var(--p67-space-5);
}

.p67-callout--warning {
  background: var(--p67-warn-soft);
  border-color: color-mix(in srgb, var(--p67-warn) 25%, transparent);
  border-left-color: var(--p67-warn);
}

.p67-callout__copy strong {
  display: block;
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-base);
}

.p67-callout__copy span {
  color: var(--p67-ink-muted);
  display: block;
  font-size: var(--p67-text-sm);
}

/* ---------- Stat accent modifiers (admin dashboards) ---------- */
.p67-stat--accent-brand {
  border-color: var(--p67-brand-border);
}

.p67-stat--accent-ok {
  border-color: color-mix(in srgb, var(--p67-ok) 35%, transparent);
}

.p67-stat--accent-warn {
  border-color: color-mix(in srgb, var(--p67-warn) 35%, transparent);
}

.p67-stat--accent-danger {
  border-color: color-mix(in srgb, var(--p67-danger) 35%, transparent);
}

.p67-stat:hover {
  box-shadow: var(--p67-shadow-md);
  transition: box-shadow var(--p67-transition), transform var(--p67-transition);
}

@media (prefers-reduced-motion: reduce) {
  .p67-stat:hover {
    transform: none;
  }
}

/* ---------- Client billing overview ---------- */
.p67-billing-credit-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p67-space-4);
  padding: var(--p67-space-5);
}

.p67-billing-credit-card__label {
  color: var(--p67-text-muted);
  font-size: var(--p67-text-sm);
  margin: 0 0 var(--p67-space-1);
}

.p67-billing-credit-card__value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--p67-fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.p67-billing-credit-card__meta {
  color: var(--p67-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-3);
  font-size: var(--p67-text-sm);
  margin-top: var(--p67-space-3);
}

.p67-billing-credit-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
}

.p67-billing-overview {
  display: grid;
  gap: var(--p67-console-section-gap);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.p67-billing-panel .p67-empty--compact {
  padding: var(--p67-space-4) var(--p67-space-5) var(--p67-space-5);
}

.p67-billing-method-list .p67-data-row,
.p67-billing-receipt-list .p67-data-row {
  padding-inline: var(--p67-space-5);
}

.p67-billing-month-picker {
  min-width: 10rem;
}

.p67-billing-usage-summary {
  align-items: end;
  display: grid;
  gap: var(--p67-space-4);
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  margin-bottom: var(--p67-space-4);
}

.p67-billing-usage-summary__total {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-1);
}

.p67-billing-usage-summary__total strong {
  font-size: var(--p67-text-2xl);
}

.p67-billing-usage-chart {
  align-items: end;
  display: flex;
  gap: 2px;
  height: 5.5rem;
}

.p67-billing-usage-chart__bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 100%;
  justify-content: end;
}

.p67-billing-usage-chart__bar span {
  background: var(--bs-primary-bg-subtle, #dbeafe);
  border: 1px solid var(--bs-primary-border-subtle, #bfdbfe);
  border-radius: 3px 3px 0 0;
  display: block;
  min-height: 0;
  width: 100%;
}

.p67-billing-resource-list {
  border-top: 1px solid var(--p67-border);
}

.p67-billing-resource-row {
  align-items: center;
  color: inherit;
  display: flex;
  gap: var(--p67-space-3);
  justify-content: space-between;
  padding: var(--p67-space-4) var(--p67-space-5);
  text-decoration: none;
  transition: background-color var(--p67-transition);
}

.p67-billing-resource-row + .p67-billing-resource-row {
  border-top: 1px solid var(--p67-border);
}

.p67-billing-resource-row:hover {
  background: var(--p67-surface-muted, #f8fafc);
}

.p67-billing-resource-row__main {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.p67-billing-resource-row__main span {
  color: var(--p67-text-muted);
  font-size: var(--p67-text-sm);
}

.p67-billing-resource-row__amount {
  align-items: end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--p67-space-1);
}

.p67-billing-resource-row__cta {
  color: var(--bs-primary);
  font-size: var(--p67-text-sm);
  font-weight: var(--p67-fw-semibold);
}

@media (max-width: 991.98px) {
  .p67-billing-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-billing-usage-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .p67-billing-credit-card__actions {
    width: 100%;
  }

  .p67-billing-credit-card__actions .p67-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .p67-billing-resource-row {
    align-items: start;
    flex-direction: column;
  }

  .p67-billing-resource-row__amount {
    align-items: start;
    flex-direction: row;
    gap: var(--p67-space-2);
  }
}

/* ---------- 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%;
}

/* ---------- Stat strip (replaces oversized stat cards) ---------- */
.p67-stat-strip {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  overflow: hidden;
}

.p67-stat-strip__item {
  border-inline-start: 1px solid var(--p67-border);
  display: grid;
  gap: 2px;
  padding: var(--p67-space-3) var(--p67-space-4);
}

.p67-stat-strip__item:first-child {
  border-inline-start: 0;
}

.p67-stat-strip__label {
  align-items: center;
  color: var(--p67-ink-muted);
  display: flex;
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  gap: var(--p67-space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.p67-stat-strip__value {
  color: var(--p67-ink);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-semibold);
  line-height: 1.15;
}

.p67-stat-strip__value[data-tone="ok"] { color: var(--p67-ok); }
.p67-stat-strip__value[data-tone="warn"] { color: var(--p67-warn); }
.p67-stat-strip__value[data-tone="danger"] { color: var(--p67-danger); }

.p67-stat-strip__hint {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-xs);
}

/* ---------- Data table ---------- */
.p67-table-wrap {
  background: var(--p67-surface-1);
  border: 1px solid var(--p67-border);
  border-radius: var(--p67-radius-md);
  overflow: auto;
}

.p67-table-scroll {
  overflow-x: auto;
}

.p67-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--p67-text-dense);
  width: 100%;
}

.p67-table thead th {
  background: var(--p67-surface-2);
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  font-weight: var(--p67-fw-semibold);
  height: var(--p67-table-head-h);
  letter-spacing: 0.04em;
  padding: 0 var(--p67-cell-pad-x);
  position: sticky;
  text-align: start;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

.p67-table tbody td {
  border-bottom: 1px solid var(--p67-border);
  color: var(--p67-ink-soft);
  height: var(--p67-row-h);
  line-height: 1.35;
  padding: var(--p67-cell-pad-y) var(--p67-cell-pad-x);
  vertical-align: middle;
}

.p67-table tbody tr:last-child td {
  border-bottom: 0;
}

.p67-table tbody tr:hover td {
  background: var(--p67-surface-2);
}

.p67-table__primary {
  color: var(--p67-ink);
  font-weight: var(--p67-fw-medium);
}

.p67-table__primary a {
  color: inherit;
  text-decoration: none;
}

.p67-table__primary a:hover {
  color: var(--p67-brand-strong);
  text-decoration: underline;
}

/* Identifiers, counts and money align on the digit, not the glyph. */
.p67-table__data {
  font-family: var(--p67-font-data);
  font-feature-settings: var(--p67-font-feature-tabular);
  font-size: var(--p67-text-xs);
}

.p67-table__num {
  font-feature-settings: var(--p67-font-feature-tabular);
  text-align: end;
}

.p67-table__muted {
  color: var(--p67-ink-muted);
}

.p67-table__nowrap {
  white-space: nowrap;
}

.p67-table__actions {
  text-align: end;
  white-space: nowrap;
}

.p67-table__select {
  padding-inline-end: 0;
  width: 40px;
}

/* ---------- Status dot ---------- */
.p67-status {
  align-items: center;
  display: inline-flex;
  gap: var(--p67-space-2);
  font-size: var(--p67-text-xs);
  font-weight: var(--p67-fw-medium);
  white-space: nowrap;
}

.p67-status::before {
  background: var(--p67-ink-muted);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

.p67-status[data-tone="ok"]::before { background: var(--p67-ok); }
.p67-status[data-tone="warn"]::before { background: var(--p67-warn); }
.p67-status[data-tone="danger"]::before { background: var(--p67-danger); }
.p67-status[data-tone="info"]::before { background: var(--p67-info); }
.p67-status[data-tone="busy"]::before {
  background: var(--p67-info);
  animation: p67-pulse 1.6s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .p67-status[data-tone="busy"]::before { animation: none; }
}

/* ---------- 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);
}

/* ---------- Row actions ---------- */
.p67-row-actions {
  display: inline-flex;
  gap: var(--p67-space-1);
  justify-content: flex-end;
}

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

/* ---------- Toolbar above a table ---------- */
.p67-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--p67-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--p67-space-2);
  padding: var(--p67-space-3) var(--p67-space-4);
}

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

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

/* Bulk bar only asserts itself once a row is selected. */
.p67-toolbar[data-selection="none"] .p67-toolbar__bulk {
  display: none;
}

/* ---------- 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;
  }

  .p67-stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .p67-stat-strip__item:nth-child(n) {
    border-inline-start: 0;
    border-top: 1px solid var(--p67-border);
  }

  .p67-stat-strip__item:first-child {
    border-top: 0;
  }
}

/* Long free-text cells truncate rather than forcing the table wider than the
   viewport — horizontal scrolling to reach row actions is a usability trap. */
.p67-table__truncate {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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);
}

/* Secondary detail lines inside the primary cell. */
.p67-table__sub {
  color: var(--p67-ink-muted);
  font-size: var(--p67-text-micro);
  margin-top: 1px;
}

/* 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) {
  .p67-table [data-col="optional"] {
    display: none;
  }
}

/* The primary column absorbs leftover width so titles get room to breathe
   instead of wrapping to three lines in a narrow column. */
.p67-table__col-grow {
  width: 100%;
}

.p67-table__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline metadata row: discrete chips instead of a hyphen-separated run. */
.p67-meta-row {
  align-items: center;
  color: var(--p67-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--p67-text-xs);
  gap: var(--p67-space-2);
}

/* ---------- 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;
}

/* Inline error text inside a table cell. */
.p67-table__error {
  color: var(--p67-danger);
}

/* ---------- 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);
}