/* seating — 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="seating"] so it cannot leak to another page.

   Note: the rail's own nav button also carries data-view="seating", so a rule
   whose subject is the root element must be written `div[data-view="seating"]`
   — the nav item is a <button> and never matches. Descendant rules are safe as
   written: the nav button has no children.

   The screen is a room. It has to read at a glance on a laptop (how full is
   the room, which tables are still empty, which are reserved) and survive
   being scrolled with a thumb in a venue. Desktop: a grid of cards that are
   the height of their contents. Phone: one column of collapsed cards. */

/* ── stats ───────────────────────────────────────────────────────────────
   Six tiles, not seven — "Capacity" was tables × seats, which the first tile
   now states directly ("15 / TABLES OF 8"). */
[data-view="seating"] .stat b{line-height:1.05}
[data-view="seating"] .stat span{text-wrap:balance}

/* ── the panel above the room ────────────────────────────────────────────
   Three different things live here and must read as three: the heading and
   its one sentence (description), the room actions, and the exports plus the
   link out to Settings. The gap separates the last two groups. */
[data-view="seating"] .panel__head{align-items:flex-start;gap:var(--s4) var(--s5)}
[data-view="seating"] .tools{flex:1 1 26rem;justify-content:flex-end}
[data-view="seating"] .tools__gap{flex:0 0 var(--s4)}

/* ── the room ────────────────────────────────────────────────────────────
   align-items:start is the whole fix for the old grid: cards used to stretch
   to the tallest in their row, so an empty table drew a 150px box of nothing
   next to a full one. */
[data-view="seating"] .tablegrid{
  grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));
  align-items:start;gap:var(--s4)}

[data-view="seating"] .tbl{display:block;padding:0;gap:0;overflow:hidden}
[data-view="seating"] .tbl[data-reserved=true]{border-color:var(--terracotta);
  box-shadow:inset 3px 0 0 var(--terracotta),var(--shadow)}

/* the always-visible face: name + count on one line, fill bar under it */
[data-view="seating"] .tbl__face{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.3rem var(--s3);align-items:baseline;align-content:center;
  padding:var(--s3) var(--s4);min-height:var(--h-ctl-lg)}
[data-view="seating"] summary.tbl__face{cursor:pointer;list-style:none;
  grid-template-columns:minmax(0,1fr) auto 1rem}
[data-view="seating"] summary.tbl__face::-webkit-details-marker{display:none}
/* a ::after is a grid item too, and auto-flow would drop it on its own row */
[data-view="seating"] summary.tbl__face::after{content:"";grid-row:1;grid-column:3;
  justify-self:end;align-self:center;
  width:.5rem;height:.5rem;border:solid var(--muted);border-width:0 1.5px 1.5px 0;
  rotate:45deg;translate:0 -2px;transition:rotate .15s}
[data-view="seating"] details.tbl[open] > summary.tbl__face::after{rotate:-135deg;translate:0 1px}
[data-view="seating"] summary.tbl__face:hover{background:var(--row-hover)}
[data-view="seating"] summary.tbl__face:focus-visible{outline:2px solid var(--terracotta);
  outline-offset:-2px}

[data-view="seating"] .tbl__name{font-family:var(--display);font-size:var(--ft-name);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-view="seating"] .tbl__count{font-size:var(--ft-meta);color:var(--ink);
  font-weight:700;white-space:nowrap}
[data-view="seating"] .tbl__count i{font-style:normal;font-weight:400;color:var(--muted)}
[data-view="seating"] .tbl__count[data-full=true]{color:var(--good)}
[data-view="seating"] .tbl .bar{grid-column:1/-1}
[data-view="seating"] .tbl__res{grid-column:1/-1;display:flex;flex-wrap:wrap;
  align-items:center;gap:.25rem}
[data-view="seating"] .tbl__res > b{font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rust);font-weight:700;margin-right:.15rem}

/* an empty table is a fact, not a card full of nothing */
[data-view="seating"] .tbl[data-empty=true]{background:var(--surface-2);border-style:dashed;
  box-shadow:none}
[data-view="seating"] .tbl[data-empty=true] .tbl__name{color:var(--muted)}

/* ── seats ───────────────────────────────────────────────────────────────
   One row per party. The name gets the room; the move control is a fixed
   column so names stop being cut at 20 characters. */
[data-view="seating"] .seatlist{padding:0 var(--s4) var(--s3);gap:0;
  border-top:1px solid var(--line)}
[data-view="seating"] .seatlist li{gap:var(--s2);padding:.3rem 0;
  border-bottom:1px solid var(--line)}
[data-view="seating"] .seatlist li:last-child{border-bottom:0}
/* wrap rather than ellipsise: a guest's name is the one thing on this screen
   that must never be cut, and most rows still fit on one line */
[data-view="seating"] .seatlist .who{flex:1 1 auto;font-size:var(--ft-meta);color:var(--ink);
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}
[data-view="seating"] .seatlist .who small{color:var(--muted);white-space:nowrap}
[data-view="seating"] .seatlist .pinned{color:var(--ink);font-weight:700}

/* quiet until touched — 15 tables of 8 would otherwise draw 120 boxed selects.
   background-color only: `background` would drop the shared arrow glyph. */
[data-view="seating"] .seatlist select{flex:0 0 5.25rem;width:5.25rem;height:var(--h-ctl);
  font-size:var(--ft-label);border-color:transparent;background-color:transparent;
  color:var(--muted)}
[data-view="seating"] .seatlist select:hover{border-color:var(--line-strong);
  background-color:#fff;color:var(--ink)}
[data-view="seating"] .seatlist select:focus{border-color:var(--terracotta);
  background-color:#fff;color:var(--ink)}
[data-view="seating"] .seatlist select:focus-visible{outline-offset:-2px}

/* ── empty state (no tables configured at all) ───────────────────────────*/
[data-view="seating"] .empty{display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);background:var(--surface);border:1px dashed var(--taupe);border-radius:3px;
  padding:var(--s7) var(--s5)}
[data-view="seating"] .empty h3{font-size:var(--ft-h2);color:var(--ink)}
[data-view="seating"] .empty p{max-width:44ch;color:var(--muted);font-size:var(--ft-meta)}

/* ── tablet ──────────────────────────────────────────────────────────────*/
@media (max-width:1023px){
  [data-view="seating"] .tools{flex-basis:100%;justify-content:flex-start}
}

/* ── phone ───────────────────────────────────────────────────────────────
   Cards arrive collapsed (seating.js), so the room is a scannable list of
   15 headers instead of 15 screens of seat lists. */
@media (max-width:639px){
  /* three compact tiles across beats two tall ones plus an empty cell */
  [data-view="seating"] .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-view="seating"] .stat{padding:var(--s2) var(--s3);min-height:4.5rem}
  [data-view="seating"] .stat b{font-size:1.25rem}
  [data-view="seating"] .stat span{letter-spacing:.06em}

  /* every action is a 44px target and shares the width evenly */
  [data-view="seating"] .tools{gap:var(--s2);width:100%}
  [data-view="seating"] .tools .btn{flex:1 1 8rem;height:var(--h-ctl-lg);font-size:.6875rem}
  [data-view="seating"] .tools__gap{display:none}
  [data-view="seating"] #print{display:none}   /* nobody prints from a phone */

  [data-view="seating"] .tablegrid{gap:var(--s2)}
  [data-view="seating"] .tbl__face{min-height:3.25rem}
  [data-view="seating"] .seatlist li{padding:.35rem 0}
  /* a borderless select has no affordance under a thumb */
  [data-view="seating"] .seatlist select{flex-basis:6rem;width:6rem;
    border-color:var(--line-strong);background-color:#fff;color:var(--ink)}
}

/* ── print ───────────────────────────────────────────────────────────────
   The Print button opens every card first; this just tidies the page. */
@media print{
  [data-view="seating"] .tbl{break-inside:avoid;box-shadow:none}
  [data-view="seating"] summary.tbl__face::after{display:none}
  [data-view="seating"] .stats{break-inside:avoid}
}