/* ==========================================================================
   Portanus components — PR3 of the console redesign (component layer).

   Builds on PR1 (tokens, portanus-theme.css) and PR2 (shell,
   portanus-shell.css). Retunes the shared COMPONENTS every page composes —
   hub hero, breadcrumb, buttons, badges/tags, tables, forms, modals — from
   custom.css's hard-coded slate/white values onto the --pt-* tokens so they
   follow the dark-default/light-opt-in themes. Loaded after the other
   portanus-* sheets; equal-specificity declarations win by source order.

   NOTE the two big central wins: .hub-hero (the standard page header on
   ~800 hub pages) and .modern-breadcrumb (every page) both had baked-in
   dark gradients — they now ride the tokens and flip with the theme.
   ========================================================================== */

/* ---- Hub hero — the standard page header ---------------------------------- */

.hub-hero {
  background: var(--pt-surface);
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  color: var(--pt-ink-2);
  box-shadow: none;
}
.hub-hero h1, .hub-hero h2, .hub-hero h3 { color: var(--pt-ink); }
.hub-hero p { color: var(--pt-ink-2); }
.hub-hero h1 .fas, .hub-hero h1 .far, .hub-hero h1 .fab,
.hub-hero h1 svg { color: var(--pt-brand-ink); }
.hub-hero .hub-subtitle { color: var(--pt-ink-2); }

/* Hero buttons: drop custom.css's baked rgba colors; ride the global button
   treatment below. outline-light was white-on-dark — on the token surface it
   becomes a neutral outline button (white-on-white otherwise). */
.hub-hero .btn-outline-light {
  background: transparent;
  border: 1px solid var(--pt-line);
  color: var(--pt-ink-2);
}
.hub-hero .btn-outline-light:hover {
  background: var(--pt-surface-2);
  border-color: var(--pt-line);
  color: var(--pt-ink);
  transform: none;
  box-shadow: none;
}
.hub-hero .btn-primary {
  background: var(--pt-brand);
  border-color: var(--pt-brand);
  color: #0a0f1e;
}
.hub-hero .btn-primary:hover {
  background: var(--pt-brand-ink);
  border-color: var(--pt-brand-ink);
  transform: none;
  box-shadow: none;
}
.hub-hero .btn-success {
  background: var(--pt-good);
  border-color: var(--pt-good);
  color: #0a0f1e;
}
.hub-hero .btn-success:hover { filter: brightness(1.08); transform: none; box-shadow: none; }

/* ---- Breadcrumb (every page) ----------------------------------------------
   custom.css styles the crumb bar under TWO selector families: the shared
   partial's .modern-breadcrumb (0,1,0) AND nav[aria-label="breadcrumb"]
   (0,1,1) — the partial carries both, so the ATTRIBUTE selector wins the
   cascade regardless of source order. Override at that same specificity;
   the class-only variants ride along for markup that lacks the aria label. */

nav[aria-label="breadcrumb"],
.modern-breadcrumb {
  background: var(--pt-surface);
  border: 1px solid var(--pt-line);
  box-shadow: none;
  padding: .65rem 1rem;
}
nav[aria-label="breadcrumb"] .breadcrumb-item,
nav[aria-label="breadcrumb"] li,
.modern-breadcrumb li { color: var(--pt-ink-2); }
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before,
.modern-breadcrumb li:not(:last-child)::after {
  border-top-color: var(--pt-ink-3);
  border-right-color: var(--pt-ink-3);
}
nav[aria-label="breadcrumb"] .breadcrumb-item a,
nav[aria-label="breadcrumb"] a,
.modern-breadcrumb a { color: var(--pt-ink-2); }
nav[aria-label="breadcrumb"] .breadcrumb-item a:hover,
nav[aria-label="breadcrumb"] a:hover,
.modern-breadcrumb a:hover {
  color: var(--pt-brand-ink);
  background: var(--pt-brand-tint);
}
nav[aria-label="breadcrumb"] .breadcrumb-item.active,
nav[aria-label="breadcrumb"] .active,
.modern-breadcrumb .active {
  color: var(--pt-brand-ink);
  background: var(--pt-brand-tint);
  font-weight: 600;
}
.modern-breadcrumb .bc-ellipsis .bc-expand { color: var(--pt-ink-3); }

/* ---- Buttons — semantic variants onto tokens (primary shipped in PR1) ----- */

.btn-success {
  --pt-btn-bg: var(--pt-good);
  --pt-btn-border-color: var(--pt-good);
  --pt-btn-hover-bg: var(--pt-good);
  --pt-btn-hover-border-color: var(--pt-good);
  --pt-btn-active-bg: var(--pt-good);
  --pt-btn-color: #0a0f1e;
  --pt-btn-hover-color: #0a0f1e;
}
.btn-danger {
  --pt-btn-bg: var(--pt-bad);
  --pt-btn-border-color: var(--pt-bad);
  --pt-btn-hover-bg: var(--pt-bad);
  --pt-btn-hover-border-color: var(--pt-bad);
  --pt-btn-active-bg: var(--pt-bad);
  --pt-btn-color: #0a0f1e;
  --pt-btn-hover-color: #0a0f1e;
}
.btn-warning {
  --pt-btn-bg: var(--pt-warn);
  --pt-btn-border-color: var(--pt-warn);
  --pt-btn-hover-bg: var(--pt-warn);
  --pt-btn-hover-border-color: var(--pt-warn);
  --pt-btn-active-bg: var(--pt-warn);
  --pt-btn-color: #0a0f1e;
  --pt-btn-hover-color: #0a0f1e;
}
.btn-info {
  --pt-btn-bg: var(--pt-info);
  --pt-btn-border-color: var(--pt-info);
  --pt-btn-hover-bg: var(--pt-info);
  --pt-btn-hover-border-color: var(--pt-info);
  --pt-btn-active-bg: var(--pt-info);
  --pt-btn-color: #0a0f1e;
  --pt-btn-hover-color: #0a0f1e;
}
.btn-outline-secondary {
  --pt-btn-color: var(--pt-ink-2);
  --pt-btn-border-color: var(--pt-line);
  --pt-btn-hover-color: var(--pt-ink);
  --pt-btn-hover-bg: var(--pt-surface-2);
  --pt-btn-hover-border-color: var(--pt-line);
  --pt-btn-active-bg: var(--pt-surface-2);
}
.btn-outline-primary {
  --pt-btn-color: var(--pt-brand-ink);
  --pt-btn-border-color: var(--pt-brand-border);
  --pt-btn-hover-color: var(--pt-brand-ink);
  --pt-btn-hover-bg: var(--pt-brand-tint);
  --pt-btn-hover-border-color: var(--pt-brand-border);
  --pt-btn-active-bg: var(--pt-brand-tint);
}

/* ---- Select2: disabled/read-only state ------------------------------------ */
/* The vendor select2-bootstrap-5 theme hard-codes a LIGHT #e9ecef background
   for disabled selections (e.g. the parent-scoped Dog picker on the trainer
   quick-entry forms) — unreadable in dark mode. The vendor sheet loads
   per-page AFTER this layer, so !important is required to win the tie. */
.select2-container--disabled .select2-selection,
.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: var(--pt-surface-2) !important;
  border-color: var(--pt-line) !important;
  color: var(--pt-ink) !important;
}
.select2-container--disabled .select2-selection__rendered,
.select2-container--bootstrap-5.select2-container--disabled .select2-selection__rendered {
  color: var(--pt-ink) !important;
}

/* ---- Badges → tinted tags (mockup style) ---------------------------------- */
/* Solid semantic chips become tint + semantic ink, per theme. The color needs
   !important only to beat Bootstrap's `.text-dark`-style utilities that some
   badges carry inline (they're !important themselves). */

.badge.bg-primary, .badge.bg-info {
  background-color: var(--pt-brand-tint) !important;
  color: var(--pt-brand-ink) !important;
}
.badge.bg-success {
  background-color: var(--pt-good-tint) !important;
  color: var(--pt-good) !important;
}
.badge.bg-warning {
  background-color: var(--pt-warn-tint) !important;
  color: var(--pt-warn) !important;
}
.badge.bg-danger {
  background-color: var(--pt-bad-tint) !important;
  color: var(--pt-bad) !important;
}
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
  background-color: var(--pt-surface-2) !important;
  color: var(--pt-ink-2) !important;
}

/* ---- Tables --------------------------------------------------------------- */

.table {
  --pt-table-color: var(--pt-ink-2);
  --pt-table-bg: transparent;
  --pt-table-border-color: var(--pt-line-2);
  --pt-table-striped-bg: var(--pt-surface-2);
  --pt-table-striped-color: var(--pt-ink-2);
  --pt-table-hover-bg: var(--pt-brand-tint);
  --pt-table-hover-color: var(--pt-ink);
  font-variant-numeric: tabular-nums;
}
.table thead th {
  color: var(--pt-ink-3);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pt-line);
}
.table thead th a { color: inherit; }
.table tbody td { border-color: var(--pt-line-2); }

/* ---- Forms ---------------------------------------------------------------- */

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pt-brand-border);
  box-shadow: 0 0 0 .2rem var(--pt-brand-tint);
}
.form-check-input:checked {
  background-color: var(--pt-brand);
  border-color: var(--pt-brand);
}
.form-label { color: var(--pt-ink); font-weight: 600; }
.form-text { color: var(--pt-ink-3); }

/* ---- Modals / offcanvas ---------------------------------------------------- */

.modal-content {
  background-color: var(--pt-surface);
  border: 1px solid var(--pt-line);
  border-radius: 14px;
}
.modal-header, .modal-footer { border-color: var(--pt-line-2); }

/* ---- Pagination ------------------------------------------------------------ */

.pagination {
  --pt-pagination-bg: var(--pt-surface);
  --pt-pagination-border-color: var(--pt-line);
  --pt-pagination-color: var(--pt-ink-2);
  --pt-pagination-hover-bg: var(--pt-surface-2);
  --pt-pagination-hover-color: var(--pt-ink);
  --pt-pagination-hover-border-color: var(--pt-line);
  --pt-pagination-active-bg: var(--pt-brand);
  --pt-pagination-active-border-color: var(--pt-brand);
  --pt-pagination-active-color: #0a0f1e;
  --pt-pagination-disabled-bg: var(--pt-surface);
  --pt-pagination-disabled-color: var(--pt-ink-3);
  --pt-pagination-disabled-border-color: var(--pt-line-2);
}

/* ---- Legacy bg-dark card surfaces ------------------------------------------
   ~40 hub templates ship `card bg-dark` / `card-header bg-dark` from the
   old always-dark styling — dark islands in light mode. Neutralize them
   centrally onto the tokens (the !important matches Bootstrap's own
   utility weight). Deliberately NOT covered: .modal-content.bg-dark (the
   dog-gallery photo lightbox — a photo viewer stays dark in both themes)
   and .badge.bg-dark (already a tinted tag above). */

.card.bg-dark,
.card-footer.bg-dark {
  background-color: var(--pt-surface) !important;
  color: var(--pt-ink-2) !important;
}
.card-header.bg-dark {
  background-color: var(--pt-surface-2) !important;
  color: var(--pt-ink) !important;
}
.card.bg-dark .text-white,
.card.bg-dark.text-white,
.card-header.bg-dark .text-white,
.card.bg-dark .text-light,
.card-header.bg-dark .text-light {
  color: var(--pt-ink) !important;
}
.card.bg-dark .text-white-50,
.card-header.bg-dark .text-white-50 {
  color: var(--pt-ink-3) !important;
}

/* ---- KPI / stat numbers ---------------------------------------------------- */

.stat-card .fs-1, .stat-card .fs-2, .stat-card .fs-3, .stat-card .fs-4,
.stat-card h2, .stat-card h3 {
  color: var(--pt-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Dashboard header + KPI cards (PR8, mockup patterns) ------------------- */

/* Eyebrow — small uppercase brand-colored kicker above a page title. */
.pt-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pt-brand-ink);
  margin: 0 0 .35rem;
}

.pt-dash-head { margin: .5rem 0 1.5rem; }
.pt-dash-title {
  font-family: var(--pt-font-sans-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pt-ink);
  margin: 0 0 .25rem;
  text-wrap: balance;
}
.pt-dash-sub { color: var(--pt-ink-2); margin: 0; }

/* KPI cell: label → big tabular value → optional footnote. Used inside
   widget stat rows (see dog_hub dashboard_stats); semantic value colors
   (text-success etc.) ride Bootstrap utilities on the value element. */
.pt-kpi {
  background: var(--pt-surface);
  border: 1px solid var(--pt-line);
  border-radius: 12px;
  padding: .8rem 1rem;
  height: 100%;
}
.pt-kpi .pt-kpi-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pt-ink-3);
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-kpi .pt-kpi-value {
  font-family: var(--pt-font-sans-serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--pt-ink);
  font-variant-numeric: tabular-nums;
}

/* Widget card headers — uppercase muted, matching the mockup's card caps. */
.hub-card > .d-flex h2.h6,
.hub-card .card-header h2.h6 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pt-ink-2);
}

/* ==========================================================================
   List groups inside cards — sit ON the card surface, not the page's.
   Bootstrap defaults --pt-list-group-bg to the page body background (the
   darkest surface), so every flush list row inside a card painted an inset
   dark rectangle with square corners (sponsor hub dashboard). Rows go
   transparent so the card surface shows through, separated by hairline
   dividers; actionable rows keep a subtle brand-tint hover.
   ========================================================================== */
.card .list-group {
  --pt-list-group-bg: transparent;
  --pt-list-group-color: inherit;
  --pt-list-group-border-color: var(--pt-border-color);
  --pt-list-group-action-color: var(--pt-body-color);
  --pt-list-group-action-hover-bg: color-mix(in srgb, var(--pt-primary) 8%, transparent);
  --pt-list-group-action-hover-color: var(--pt-emphasis-color);
  --pt-list-group-disabled-bg: transparent;
}