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

/* ---------- 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);
}
.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);
}
.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-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(180px, 1fr));
  gap: var(--p67-space-3);
  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);
  padding: var(--p67-space-4);
}
.p67-stat__label {
  font-size: var(--p67-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--p67-fw-semibold);
  color: var(--p67-ink-muted);
}
.p67-stat__value {
  margin-top: var(--p67-space-1);
  font-family: var(--p67-font-head);
  font-size: var(--p67-text-2xl);
  font-weight: var(--p67-fw-bold);
  color: var(--p67-ink);
  line-height: 1.15;
}
.p67-stat__meta {
  margin: var(--p67-space-1) 0 0;
  font-size: var(--p67-text-sm);
  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);
}

/* ---------- 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__field {
  display: flex;
  flex-direction: column;
  gap: var(--p67-space-1);
}
.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,
.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);
}

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