/* public/widgets/plan-tabs.css
   The Service plans > HT OS plans tabs redesign Richard approved on 2026-10-23:
   the Sign-ups board (widgets/plan-signups-board.js), the plan cards and the
   Add-ons table of the Plans tab (widgets/plan-builder.js list,
   widgets/club-addons-admin.js layout 'table'). Tokens only, both themes;
   borders separate, shadows float (design-system-v2 section 4). The number
   tiles and the segmented control are list-shell.css's (.ls-tiles, .ls-seg).

   pt-toolbar     a custom body's toolbar row (the band's look)
   pt-board       the board: one column per step of the customer's path
   pt-col         a column (pt-col-attention: the Needs attention column with cards)
   pt-card        a sign-up card (on .ds-board-card)
   plb-cards      the plan cards grid; plb-card one plan; plb-new the New plan card
   plb-fold       the retired Housecall Pro plans, folded under one line
   ca-table       the Add-ons table */

.pt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0 0 var(--s-3); border-bottom: 0; }
.pt-toolbar .list-search { flex: 1 1 220px; min-width: 180px; }
.pt-toolbar .list-search input { width: 100%; height: 40px; padding: 0 var(--s-3); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); font: inherit; font-size: var(--text-sm); color: var(--ink); }

/* ── The Sign-ups board ───────────────────────────────────────────────── */
.pt-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.pt-board-closed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-col { min-width: 0; padding: var(--s-2); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.pt-col-attention { background: var(--warn-soft); border-color: var(--warn); }
.pt-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin: var(--s-1) var(--s-1) var(--s-2); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2);
}
.pt-col-head b { color: var(--ink); }
.pt-col-empty { margin: 0; padding: var(--s-3) var(--s-2); text-align: center; color: var(--ink-3); font-size: var(--text-sm); }
.pt-col-skel { height: 180px; border-radius: var(--r-md); }
.pt-card { cursor: pointer; margin-bottom: var(--s-2); }
.pt-card:last-child { margin-bottom: 0; }
.pt-card:hover { border-color: var(--brand-royal); }
.pt-card-name { font-weight: 700; color: var(--ink); }
.pt-card-plan { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); }
.pt-card-why { margin-top: var(--s-2); color: var(--warn-ink); font-size: var(--text-sm); line-height: 1.4; }
.pt-card-meta { margin-top: var(--s-1); color: var(--ink-3); font-size: var(--text-xs); line-height: 1.45; }
.pt-card-meta:first-of-type { margin-top: var(--s-2); }
.pt-dot { margin: 0 var(--s-1); }
.pt-card-acts { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.pt-act-primary { border-color: var(--accent); color: var(--accent-ink); }
.pt-more { margin: 0 0 var(--s-2); }

/* ── The plan cards ───────────────────────────────────────────────────── */
.plb-tabs-row { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.plb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); align-items: stretch; }
.plb-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.plb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.plb-card-name { margin: 0; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.plb-card-who { margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
.plb-card-price { margin-top: var(--s-3); font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.plb-card-price span { font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.plb-card-rows { margin: var(--s-3) 0 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.plb-card-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--ink-2); }
.plb-card-row:last-child { border-bottom: 0; }
.plb-card-row dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.plb-card-row dt { margin: 0; }
.plb-card-why { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--text-sm); }
.plb-card-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }
.plb-card-acts .plb-open { border-color: var(--accent); color: var(--accent-ink); }
.plb-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 200px; padding: var(--s-4); text-align: center; text-decoration: none;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--ink-2);
}
.plb-new:hover { border-color: var(--accent); color: var(--ink); }
.plb-new:focus-visible { outline: none; box-shadow: var(--ring); }
.plb-new b { color: var(--ink-2); }
.plb-new span { color: var(--ink-3); font-size: var(--text-sm); max-width: 32ch; }
.plb-empty { grid-column: 1 / -1; margin: 0; padding: var(--s-4); color: var(--ink-3); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.plb-fold { margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.plb-fold-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-2) var(--s-4); border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink-2); text-align: left; cursor: pointer; border-radius: var(--r-md); }
.plb-fold-head:focus-visible { outline: none; box-shadow: var(--ring); }
.plb-fold-head .plb-fold-show { color: var(--accent-ink); font-weight: 700; }
.plb-fold-body { border-top: 1px solid var(--border-subtle); }
.plb-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: var(--s-6) 0 var(--s-2); }
.plb-section-head h2 { margin: 0; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); }
.plb-section-head span { color: var(--ink-3); font-size: var(--text-sm); }

/* ── The Add-ons table ────────────────────────────────────────────────── */
.ca-table-wrap { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow-x: auto; }
.ca-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ca-table th { padding: var(--s-3) var(--s-3); text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.ca-table td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--ink); }
.ca-table tr:last-child td { border-bottom: 0; }
.ca-table .ca-num { text-align: right; white-space: nowrap; }
.ca-table .ca-name b { display: block; }
.ca-table .ca-name span { display: block; margin-top: 2px; color: var(--ink-3); }
.ca-table tr[draggable="true"] .ca-grip { cursor: grab; }
.ca-table tr.is-dragging { opacity: 0.55; }
.ca-table tr.is-drop-before td { box-shadow: inset 0 3px 0 var(--brand-royal); }
.ca-table tr.is-drop-after td { box-shadow: inset 0 -3px 0 var(--brand-royal); }
.ca-grip { width: 28px; color: var(--muted); }
.ca-grip .ds-drag-handle { vertical-align: middle; }
.ca-move { display: inline-flex; gap: 2px; }
.ca-acts { white-space: nowrap; text-align: right; }
.ca-acts .ds-btn + .ds-btn { margin-left: var(--s-1); }
.ca-status { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.ca-foot { margin-top: var(--s-3); }

@media (max-width: 1100px) {
  .pt-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pt-board, .pt-board-closed { grid-template-columns: minmax(0, 1fr); }
  .plb-cards { grid-template-columns: minmax(0, 1fr); }
}