/* ============================================================
   FOCPL — BOARD PORTAL + WP-ADMIN STYLES
   ------------------------------------------------------------
   Everything the public site never needs: the /boardroom/ page
   (its chrome, tables, badges, notices, form controls and the
   round-2 utilities) plus the polish-layer refinements that only
   apply there. Loaded AFTER style.css on the Board Portal page
   template and on every wp-admin screen; assets/css/tokens.css
   supplies the variables in both contexts. Split out of
   style.css in the 2026-08 design audit (D5) so public pages
   stop paying for portal rules and portal work stops touching
   the public stylesheet.
   ============================================================ */

/* ============================================================
   BOARD PORTAL
   ============================================================ */
.bp-wrap {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  min-height: 70vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ── Sidebar ── */
.bp-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 100px;
  align-self: start;
}
.bp-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-mid);
  transition: background .15s, color .15s;
}
.bp-nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.bp-nav__item:hover { background: var(--ocpl-blue-pale); color: var(--ocpl-blue); text-decoration: none; }
.bp-nav__item--active { background: var(--ocpl-blue-pale); color: var(--ocpl-blue); }
.bp-nav__item--logout { color: var(--text-light); margin-top: 4px; }
.bp-nav__item--logout:hover { background: var(--danger-soft); color: var(--danger); }
.bp-nav__divider { height: 1px; background: var(--border); margin: 8px 0; }

/* ── Content area ── */
.bp-content { padding-left: 32px; }
.bp-content h2 { font-size: 1.3rem; color: var(--ocpl-blue); margin-bottom: 20px; }
.bp-content h3 { font-size: 1rem; color: var(--heading); margin-bottom: 12px; }

/* ── Stats row ── */
.bp-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.bp-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  min-width: 140px;
  flex: 1;
}
.bp-stat__val {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.bp-stat__label { font-size: var(--fs-sm); color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }

/* ── Cards ── */
.bp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.bp-card--full { grid-column: 1 / -1; }
.bp-card--flush { padding: 0; overflow: hidden; }
.bp-card--flush h3 { padding: 16px 20px 0; }

/* ── Member detail drawer ── */
.bp-drawer-section { border-top: 1px solid var(--light-gray); padding: 16px 0; }
.bp-drawer-section:first-child { border-top: none; padding-top: 0; }
.bp-detail-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.bp-detail-label { color: var(--text-light); font-size: var(--fs-xs); padding-top: 1px; }

/* ── Tables ── */
.bp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.bp-table th { text-align: left; padding: 8px 12px; background: var(--off-white); border-bottom: 2px solid var(--border); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); /* --text-light is 4.29:1 on --off-white; --text-mid keeps AA on tinted surfaces */ }
.bp-sortable thead th { cursor: pointer; white-space: nowrap; }
.bp-sortable thead th:hover { background: var(--ocpl-blue-pale); color: var(--ocpl-blue); }
.bp-sortable thead th[data-sort=asc],
.bp-sortable thead th[data-sort=desc] { color: var(--ocpl-blue); background: var(--ocpl-blue-pale); }
.bp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bp-table tr:last-child td { border-bottom: none; }
.bp-table--full { width: 100%; }
.bp-table a { color: var(--ocpl-blue); }
/* Record + wrapping note pair: the note row belongs to the row above it */
.bp-tr-main td { border-bottom: none; padding-bottom: 2px; }
.bp-tr-sub td { padding-top: 0; color: var(--text-light); font-size: var(--fs-xs); overflow-wrap: anywhere; }
/* Drawer content always wraps — long notes, ids, and emails stay readable */
#bp-member-drawer .bp-table td,
.bp-detail-grid > span { overflow-wrap: anywhere; }

/* ── Badges ── */
.bp-badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); font-family: var(--font-heading); }
.bp-badge--green  { background: var(--success-soft); color: var(--success); }
.bp-badge--red    { background: var(--danger-soft);  color: var(--danger); }
.bp-badge--orange { background: var(--warning-soft); color: var(--warning); }  /* was #e65100 on #fff3e0, 3.5:1 */
.bp-badge--gray   { background: var(--light-gray);   color: var(--text-mid); }
.bp-badge--blue   { background: var(--info-soft);    color: var(--info); }

/* ── Filter bar ── */
.bp-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bp-tabs { display: flex; gap: 4px; }
.bp-tab { padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--text-mid); transition: background .15s, color .15s; }
.bp-tab:hover { background: var(--ocpl-blue-pale); color: var(--ocpl-blue); text-decoration: none; }
.bp-tab--active { background: var(--ocpl-blue); color: var(--white); }
.bp-search { display: flex; gap: 8px; }
/* .bp-search input is styled by the .bp-input rule below (one form-control anatomy) */

/* ── Bar chart ── */
.bp-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 0 4px 0;
}
.bp-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.bp-bar { width: 100%; background: var(--ocpl-blue); border-radius: 3px 3px 0 0; min-height: 4px; transition: height .3s; }
.bp-bar--green { background: var(--ocpl-green-dark); }
.bp-bar-val { font-size: var(--fs-xs); font-weight: 700; color: var(--ocpl-blue); }
.bp-bar-label { font-size: var(--fs-xs); color: var(--text-light); white-space: nowrap; }

/* ── Minutes ── */
.bp-minutes-year {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ocpl-blue);
  padding: 10px 20px;
  background: var(--ocpl-blue-pale);
  border-bottom: 1px solid var(--ocpl-blue-light);
}

/* ── Form ── */
.bp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bp-content label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 12px; }
/* ── Form controls — one anatomy ─────────────────────────────────
   Replaces three variants that used to coexist: the old element rule
   here, .bp-search input, and ~33 inline "border:1px solid #ccc;
   padding:7px 10px; border-radius:6px" bundles. The class names are the
   canonical hook; the :not() element selectors keep the portal's 150-odd
   unclassed text controls on the same style without touching markup. */
.bp-input,
.bp-select,
.bp-textarea,
.bp-search input,
.bp-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]),
.bp-content select,
.bp-content textarea {
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-height: 38px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bp-textarea, .bp-content textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.bp-select, .bp-content select { padding-right: var(--space-6); }
.bp-input:focus, .bp-select:focus, .bp-textarea:focus,
.bp-search input:focus, .bp-content input:focus, .bp-content select:focus, .bp-content textarea:focus {
  outline: none;
  border-color: var(--ocpl-blue);
  box-shadow: var(--focus-ring);
}
.bp-input::placeholder, .bp-content input::placeholder, .bp-content textarea::placeholder { color: var(--text-light); }
.bp-input:disabled, .bp-select:disabled, .bp-content input:disabled, .bp-content select:disabled {
  background: var(--light-gray); color: var(--text-light); cursor: not-allowed;
}
.bp-input--sm   { min-height: 32px; font-size: var(--fs-sm); padding: 5px var(--space-2); }
.bp-input--full { width: 100%; }

/* Field wrapper — the label pattern the portal repeats by hand */
.bp-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-3); }
.bp-field__hint { font-weight: 400; color: var(--text-light); font-size: var(--fs-xs); }
.btn--sm { padding: 5px 14px !important; font-size: var(--fs-sm) !important; min-height: auto !important; }

/* ── Notices / empty ── */
.bp-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: var(--fs-md); border: 1px solid; }
.bp-notice--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-dark); }
.bp-notice--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-dark); }
.bp-notice--error   { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger-dark); }
.bp-notice--info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info-dark); }
.bp-empty { padding: 40px; text-align: center; color: var(--text-light); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ── Responsive ── */
@media (max-width: 820px) {
  .bp-wrap { grid-template-columns: 1fr; padding-top: 16px; }
  .bp-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px; margin-bottom: 20px; position: static; }
  .bp-content { padding-left: 0; }
  .bp-two-col { grid-template-columns: 1fr; }
  .bp-stats-row { gap: 10px; }
  .bp-stat { min-width: 120px; }
}

/* ── Portal utilities (round-2 audit, D4) ─────────────────────────
   Named replacements for the declaration bundles the portal templates
   repeated inline: muted small text (~100×), flex rows (~60×), numeric
   table cells, and hand-set vertical rhythm. */
.bp-muted     { color: var(--text-mid); font-size: var(--fs-sm); line-height: 1.5; }
.bp-muted--xs { font-size: var(--fs-xs); }

.bp-row          { display: flex; align-items: center; gap: var(--space-3); }
.bp-row--between { justify-content: space-between; }
.bp-row--wrap    { flex-wrap: wrap; }
.bp-row--end     { align-items: flex-end; }
.bp-row--tight   { gap: var(--space-2); }

.bp-cell--num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-table th.bp-cell--num { text-align: right; }

.bp-stack > * + *        { margin-top: var(--space-4); }
.bp-stack--tight > * + * { margin-top: var(--space-2); }
.bp-stack--loose > * + * { margin-top: var(--space-6); }

/* ── Polish-layer refinements (moved from style.css v1.3 layer) ── */
/* ── Tables (WP default + board portal) ─────────────────────── */
.bp-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--ocpl-blue-pale) 60%, transparent); }
.bp-table tbody tr:hover td { background: var(--ocpl-blue-pale); }

/* ── Board portal: active nav indicator refinement ──────────── */
.bp-nav__item--active {
  box-shadow: inset 3px 0 0 var(--ocpl-orange);
  padding-left: 17px;
}

/* ── Portal phone pass (2026-08-27) ──────────────────────────────
   The portal was built for a desk or checkout tablet; on phones its
   forty-odd tables overflowed their cards, and the stat rows kept
   their inline four-to-six-column grids (inline styles outrank the
   sheet, hence the forced collapses). Tables scroll inside
   themselves so neither the card nor the page ever widens. Lives at
   the end of the file: several selectors tie base rules on
   specificity and win on order. */
@media (max-width: 700px) {
  /* Grid children default to min-width:auto, so the content column was
     stretching to its widest table's minimum (measured: 558px track on a
     375px phone) before any inner scroller could engage. Allowing the
     column to shrink is what lets everything below actually work. */
  .bp-wrap > * { min-width: 0; }
  .bp-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The stats rows are FLEX containers, so a grid-template alone was a
     no-op and removing the chips' min-width let flex squeeze all six
     onto one line as slivers. Become an actual two-column grid on
     phones; the !important also outranks the sections' inline
     grid-template-columns:repeat(4..6) styles. */
  .bp-stats-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
  .bp-stat { min-width: 0; }
  /* Twelve month bars pan inside their card. */
  .bp-bar-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bp-two-col { grid-template-columns: 1fr !important; }
  .bp-detail-grid { grid-template-columns: auto 1fr; }
  #bp-member-drawer { padding: 20px 16px 32px !important; }
  /* Button rows wrap instead of poking out: the portal writes many of its
     action rows as inline display:flex divs the sheet cannot otherwise
     reach, and single wide buttons may break their text onto two lines. */
  .bp-row { flex-wrap: wrap; }
  .bp-search { flex-wrap: wrap; }
  .bp-content div[style*="display:flex"] { flex-wrap: wrap; }
  .bp-content .btn { white-space: normal; }
  /* Tables that predate the bp-table convention scroll the same way. */
  .bp-content table { display: block; max-width: 100%; overflow-x: auto; }
  /* Backstop: anything still wider than a phone gets contained by its
     section instead of dragging the whole page sideways. */
  .bp-content { overflow-x: clip; }
}