/* vendors — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="vendors"] so it cannot leak to another page.

   The screen is a contact book with a pipeline status attached, so it is a card
   per vendor in a fluid grid, not an eight-column editable table. Cards flow to
   the width of the window (3 up at 1680, 2 at 1280, 1 below ~768) and the fields
   inside stay on one line each: label, control, and — when there's a value to
   act on — a Call / Email / Open link that is a real 44px target on a phone. */

[data-view="vendors"] .v-hide{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── toolbar ───────────────────────────────────────────────────────────── */
[data-view="vendors"] .v-bar{gap:var(--s2) var(--s3)}
[data-view="vendors"] .v-search{flex:1 1 18rem;max-width:26rem;min-width:0;display:block}
[data-view="vendors"] .v-search input{width:100%;height:var(--h-ctl);font-size:var(--ft-meta)}
[data-view="vendors"] .v-filter select{width:auto;height:var(--h-ctl);font-size:var(--ft-meta)}
[data-view="vendors"] .v-bar .count{white-space:nowrap}

/* ── the grid of cards ─────────────────────────────────────────────────── */
/* Column count is set explicitly rather than by auto-fill: the card's useful
   width is ~340–460px, and auto-fill at 1680 lands on four 328px columns that
   clip every email. Two from 720px, three from 1440px. */
[data-view="vendors"] .v-grid{
  display:grid;align-items:start;gap:var(--s4);padding:var(--s5);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
  [data-view="vendors"] .v-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  [data-view="vendors"] .v-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* align-items:stretch undoes .rec's flex-end, which in a column flex container
   pushes every child to the right edge of the card. */
[data-view="vendors"] .rec.v-card{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);min-width:0;
  padding:var(--s3) var(--s4) var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:3px}
[data-view="vendors"] .rec.v-card:hover{background:var(--surface);border-color:var(--taupe)}
[data-view="vendors"] .rec.v-card:focus-within{border-color:var(--taupe);box-shadow:var(--shadow)}
[data-view="vendors"] .rec.v-card[hidden]{display:none}

/* ── name + status + delete ────────────────────────────────────────────── */
[data-view="vendors"] .v-top{
  display:flex;align-items:center;gap:var(--s2);min-width:0;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
[data-view="vendors"] .v-name{flex:1 1 8rem;min-width:0}
[data-view="vendors"] .v-name input{
  font-family:var(--display);font-size:var(--ft-name);line-height:1.2;padding-inline:.3rem}
[data-view="vendors"] .v-status{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
[data-view="vendors"] .v-status select{width:auto;min-width:6.5rem;font-size:var(--ft-meta)}
/* the dot is a second, redundant cue — the status word is always visible next
   to it, so nothing here is carried by colour alone */
[data-view="vendors"] .v-dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--taupe)}
[data-view="vendors"] .v-card[data-status=booked] .v-dot,
[data-view="vendors"] .v-card[data-status=paid] .v-dot{background:var(--good)}
[data-view="vendors"] .v-card[data-status=declined] .v-dot{background:var(--bad)}
[data-view="vendors"] .v-card[data-status=enquired] .v-dot{background:var(--gold)}

[data-view="vendors"] .v-del{
  flex:none;width:var(--h-ctl);height:var(--h-ctl);display:grid;place-items:center;
  background:none;border:1px solid transparent;border-radius:2px;color:var(--muted);
  font-size:1.05rem;line-height:1;cursor:pointer}
[data-view="vendors"] .v-del:hover{color:var(--bad);border-color:var(--bad-line);background:#fff}

/* ── the fields ────────────────────────────────────────────────────────── */
[data-view="vendors"] .v-body{display:flex;flex-direction:column;gap:.15rem}
[data-view="vendors"] .v-line{display:flex;align-items:center;gap:var(--s2);min-width:0}
[data-view="vendors"] .v-field{
  flex:1 1 auto;min-width:0;display:grid;align-items:center;gap:var(--s2);
  grid-template-columns:4.75rem minmax(0,1fr)}
[data-view="vendors"] .v-line--wide{display:block}
[data-view="vendors"] .v-field--wide{grid-template-columns:minmax(0,1fr);gap:.1rem;align-items:start}
[data-view="vendors"] .v-key{
  font-size:var(--ft-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Quiet until touched: at rest a card reads as a contact card, not as a form.
   Focus and hover put the box back. `background-color`, not `background` — the
   shorthand would drop the caret that planner.css paints on every select. */
[data-view="vendors"] .v-card input,
[data-view="vendors"] .v-card select,
[data-view="vendors"] .v-card textarea{
  width:100%;height:var(--h-ctl);padding:0 .4rem;font-size:var(--ft-body);
  background-color:transparent;border:1px solid transparent;border-radius:2px;
  text-overflow:ellipsis}
[data-view="vendors"] .v-card select{padding-right:1.4rem}
[data-view="vendors"] .v-card textarea{
  height:auto;min-height:calc(var(--h-ctl) + .4rem);padding:.3rem .4rem;
  line-height:var(--lh-ui);resize:vertical}
[data-view="vendors"] .v-card input:hover,
[data-view="vendors"] .v-card select:hover,
[data-view="vendors"] .v-card textarea:hover{border-color:var(--line-strong);background-color:#fff}
[data-view="vendors"] .v-card input:focus,
[data-view="vendors"] .v-card select:focus,
[data-view="vendors"] .v-card textarea:focus{
  border-color:var(--terracotta);background-color:#fff;outline:none;
  box-shadow:0 0 0 3px rgba(194,112,61,.15)}
[data-view="vendors"] .v-card input:focus-visible,
[data-view="vendors"] .v-card select:focus-visible,
[data-view="vendors"] .v-card textarea:focus-visible{outline:2px solid var(--terracotta);outline-offset:1px}
[data-view="vendors"] .v-card ::placeholder{color:var(--muted);opacity:1}

/* ── call / email / open ───────────────────────────────────────────────── */
[data-view="vendors"] .v-act{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:var(--h-ctl);min-width:var(--h-ctl);padding:0 .55rem;
  font-size:var(--ft-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rust);background:#fff;border:1px solid var(--line-strong);border-radius:2px;
  text-decoration:none;white-space:nowrap}
[data-view="vendors"] .v-act:hover{background:var(--rust);border-color:var(--rust);color:#fff}

/* ── empty / no-match ──────────────────────────────────────────────────── */
[data-view="vendors"] .v-empty{
  padding:var(--s7) var(--s5);text-align:center;display:grid;justify-items:center;gap:var(--s3)}
[data-view="vendors"] .v-empty h3{font-size:var(--ft-h2)}
[data-view="vendors"] .v-empty p{color:var(--muted);font-size:var(--ft-meta);max-width:44ch}
[data-view="vendors"] .v-none{
  padding:var(--s6) var(--s5);text-align:center;color:var(--muted);font-size:var(--ft-body)}

/* ── phone ─────────────────────────────────────────────────────────────── */
/* --h-ctl is already redefined to 44px under this breakpoint by planner.css,
   so every control and action link above becomes a touch target for free. */
@media (max-width:639px){
  [data-view="vendors"] .v-grid{padding:var(--s3);gap:var(--s3)}
  [data-view="vendors"] .rec.v-card{padding:var(--s2) var(--s3) var(--s3)}
  [data-view="vendors"] .v-field{grid-template-columns:4rem minmax(0,1fr);gap:.35rem}
  [data-view="vendors"] .v-line{gap:.35rem}
  [data-view="vendors"] .v-act{padding:0 .4rem}
  [data-view="vendors"] .v-status select{min-width:5.5rem}
  [data-view="vendors"] .v-search{flex-basis:100%;max-width:none}
}

@media print{
  [data-view="vendors"] .v-act,[data-view="vendors"] .v-del,[data-view="vendors"] .v-bar{display:none}
  [data-view="vendors"] .v-grid{grid-template-columns:repeat(2,1fr)}
}