/* public/widgets/plan-visits-board.css
   Service plans > Visits, the board on the web (public/widgets/plan-visits-board.js,
   Richard's approved mockup of 2026-10-23). Tokens only, borders not shadows
   (design-system-v2 sections 2 and 4), 44px controls, no emoji. Every class is pvb-*;
   the tiles, tabs, chips, avatar, inputs and buttons are the shared ds-* components. */

.pvb { padding: var(--s-1) 0 var(--s-6); }

/* The five tiles (2026-10-30: Can be forfeited is the fifth). */
.pvb-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.pvb-tile { padding: var(--s-3) var(--s-4); }
.pvb-tile .ds-kpi-label { margin-bottom: var(--s-1); }
.pvb-tile-sub { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--ink-3); }
.pvb-tile.is-warn .ds-kpi-value { color: var(--warn-ink); }

/* The tabs, the search and the two filters on one row (wrapping on a narrow screen). */
.pvb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.pvb-tabs { flex: 0 1 auto; }
.pvb-search { flex: 1 1 220px; min-width: 200px; min-height: 44px; }
.pvb-select { flex: 0 0 auto; width: auto; min-width: 150px; min-height: 44px; }

/* A month: its header, then its rows in one bordered list. */
.pvb-month { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); }
.pvb-month h3 {
  margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.pvb-month span { font-size: var(--text-sm); color: var(--ink-3); }
.pvb-list { border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }

/* A trip: date, member, visits, crew, job or Book visit. The member's name is the
   row's link (stretched over the row); the job numbers and Book visit sit above it. */
.pvb-row {
  position: relative; display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: minmax(150px, 0.85fr) minmax(180px, 1.25fr) minmax(220px, 1.4fr) minmax(150px, 1fr) minmax(150px, 0.9fr);
  min-height: 44px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease);
}
.pvb-row:last-child { border-bottom: 0; }
.pvb-row:hover, .pvb-row:focus-within { background: var(--surface-2); }
/* Today's trip: an accent edge (a bar, not a shadow). */
.pvb-row.is-today::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.pvb-date, .pvb-who { display: flex; flex-direction: column; min-width: 0; }
.pvb-date b, .pvb-who .pvb-name { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.pvb-date span { font-size: var(--text-sm); color: var(--ink-3); }
/* The shared address block (H.addressBlock) under the name, at the row's small size. */
.pvb-who .ds-addr { margin-top: 2px; font-size: var(--text-sm); }
.pvb-date.is-due b { color: var(--ink-2); }
.pvb-date.is-warn span { color: var(--warn-ink); }
.pvb-name { text-decoration: none; }
.pvb-name::after { content: ''; position: absolute; inset: 0; }
.pvb-name:focus-visible { outline: none; }
.pvb-row:has(.pvb-name:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pvb-what { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pvb-line { font-size: var(--text-sm); color: var(--ink); }
.pvb-type { margin-left: var(--s-1); }
.pvb-note { color: var(--ink-3); }
.pvb-tech { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--text-sm); color: var(--ink); }
.pvb-tech.is-empty { color: var(--ink-3); }
.pvb-act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); text-align: right; font-size: var(--text-sm); }
.pvb-jobs { color: var(--ink-2); font-weight: 600; }
.pvb-job, .pvb-book, .pvb-act-btn { position: relative; z-index: 1; }
.pvb-job { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.pvb-job:hover { text-decoration: underline; }
.pvb-hcp { font-size: var(--text-xs); color: var(--ink-3); }
.pvb-hcp.is-warn, .pvb-hcp.is-danger { color: var(--danger-ink); }
.pvb-book { min-height: 44px; }
.pvb-act-btn { min-height: 44px; }
/* 2026-10-30: a visit's booking attempts, under its lines. */
.pvb-attempts { margin-top: var(--s-1); }
.pvb-empty { margin-top: var(--s-4); }
.pvb-more { margin-top: var(--s-3); }

/* Narrow screens: the tiles two by two, each row stacks its columns. */
@media (max-width: 1100px) {
  .pvb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvb-row { grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr) minmax(200px, 1.4fr); }
  .pvb-tech { grid-column: 2; }
  .pvb-act { grid-column: 3; }
}
@media (max-width: 640px) {
  .pvb-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .pvb-tech, .pvb-act { grid-column: auto; }
  .pvb-act { align-items: flex-start; text-align: left; }
}