/* ============================================================================
   board.css — « Tableau de l’atelier » on a phone (2.9, D12).

   Status pills in the work-order and people rows ran past the right edge at
   390 px because every row is a single non-wrapping flex line. Below 480 px
   the rows wrap instead: identifiers and pills on the first line, the title
   on its own line underneath. Loaded after components.css.
   ========================================================================== */

@media (max-width: 480px) {
  .wall__main { padding: 12px 14px; font-size: 14px; }
  .wall__stats { gap: .6em; }
  .wall__stat { padding: .75em .85em; border-radius: .9em; }
  .wall__stat b { font-size: 1.75em; white-space: nowrap; }
  .wall__stat span { font-size: .78em; }
  .wall__panel { padding: .9em 1em; }
  .wall__panel h2 { font-size: .74em; }

  .wall__wo, .wall__pm li { flex-wrap: wrap; gap: .35em .6em; padding: .55em .7em; }
  .wall__wo .wall__wotitle, .wall__pm li .wall__wotitle { flex: 1 1 100%; order: 9; white-space: normal; font-size: .9em; }
  .wall__wo .wall__wotitle i { display: block; margin-left: 0; }
  .wall__wo .wall__pill, .wall__pm li .wall__pill { margin-left: auto; }
  .wall__wounit { min-width: 0; }
  .wall__pill { font-size: .7em; padding: .2em .55em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .wall__person { flex-wrap: wrap; gap: .5em .8em; padding: .7em .8em; }
  .wall__who { flex: 1 1 12em; }
  .wall__job { white-space: normal; }
  .wall__timer { text-align: right; margin-left: auto; }
  .wall__timer b { font-size: 1.2em; }
  .wall__people { grid-template-columns: minmax(0, 1fr); }
  .wall__bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__foot { padding: .45em 14px; font-size: 11px; flex-wrap: wrap; gap: 4px 12px; }
}

/* ---- 2.11 — the customer on every line, and « Parts received » ----------------- */
.wall__cust { display: block; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall__job .wall__cust { display: inline; font-weight: 600; }
.wall__baycust { font-size: .78em; color: #e2e8f8 !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall__rcvs { list-style: none; }
.wall__rcvs > li { list-style: none; }
.wall__rcv { width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.wall__rcv:hover, .wall__rcv:focus-visible { background: rgba(255, 255, 255, .09); border-color: rgba(129, 140, 248, .5); outline: none; }
.wall__rcv .wall__partno { font-style: normal; font-family: var(--font-mono); color: #c7d2fe; }
.wall__rcv .wall__wotitle { white-space: normal; }

.rcv { display: grid; gap: .45rem; }
.rcv__row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.rcv__row span { color: var(--muted); }
.rcv__row b { text-align: right; }
.rcv__h { margin: .9rem 0 .2rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rcv__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rcv__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; padding: .5rem .65rem; border-radius: .6rem; background: var(--surface-2); font-size: .9rem; }
.rcv__lines li span:nth-child(2) { color: var(--muted); font-size: .85rem; text-align: right; }
.rcv__lines .rcv__state { grid-column: 1 / -1; font-size: .8rem; font-weight: 600; color: var(--warning-ink); }
.rcv__lines li[data-in="yes"] .rcv__state { color: var(--success-ink); }
.rcv__sum { margin: .6rem 0 0; padding: .55rem .7rem; border-radius: .6rem; font-weight: 600; font-size: .9rem; background: var(--warning-soft); color: var(--warning-ink); }
.rcv__sum[data-tone="ok"] { background: var(--success-soft); color: var(--success-ink); }

/* ---- 2.11 — everything on the boards opens ------------------------------------- */
.wall__click { cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.wall__click:hover { background-color: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .45); }
.wall__click:active { transform: scale(.995); }
.wall__link { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; cursor: pointer; }
.wall__link:hover { text-decoration-color: #fff; }
.wall__timer[data-stale] b { color: #fbbf24; }
.wall__timer[data-stale] span { color: #fbbf24; }
.bay__truck.wall__click { border-radius: .6em; margin: -.2em -.35em; padding: .2em .35em; }
.bay__person.wall__click { border-radius: 999px; }
.wallpop__people { display: flex; flex-wrap: wrap; gap: 8px; }
.wallpop__person { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); font-size: .9rem; }
.wallpop__person small { display: block; color: var(--muted); font-size: .78rem; }
.wallpop__current { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--accent-soft); color: var(--ink); font: inherit; cursor: pointer; }
.wallpop__current span { flex: 1; min-width: 0; }
.wallpop__current small { display: block; color: var(--muted); font-size: .82rem; }

/* ---- 2.11 — one screen on the television: the pager and the windowed lists ---- */
.wall__pager { display: flex; align-items: center; justify-content: flex-end; gap: .35em; margin-top: -.6em; padding: 0 .4em; color: #7f8cab; font-size: max(.72em, 12px); line-height: 1.2; }
.wall__pager i { width: .5em; height: .5em; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s; }
.wall__pager i.is-on { background: #c7d2fe; }
.wall__pager span { margin-left: .4em; font-variant-numeric: tabular-nums; }
.wall__more[data-fit-more] { margin-top: .35em; }
.bay__more { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; }
.bay__other { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #dbe3f7; font-size: max(.8em, 12px); }
.bay__other b { font-family: var(--font-mono); font-weight: 700; color: #fff; }
.bay__other:hover { background: rgba(255, 255, 255, .16); }

/* ---- 2.11 — nothing on the wall is smaller than it can be read from across the shop ----
   (loaded last, so these win over the sizes in components.css and floor.css) */
.wall__pill { font-size: max(.74em, 12px); } .wall__next { font-size: max(.78em, 12px); } .wall__timer span { font-size: max(.74em, 12px); }
.wall__stat span { font-size: max(.82em, 12px); } .wall__panel h2 { font-size: max(.82em, 12px); } .wall__bayname { font-size: max(.72em, 12px); }
.wall__bay span { font-size: max(.8em, 12px); } .wall__wotitle i { font-size: max(.88em, 12px); } .wall__more { font-size: max(.88em, 12px); }
.wall__task { font-size: max(.88em, 12px); } .wall__baycust { font-size: max(.78em, 12px); }
.bay__pill { font-size: max(.68em, 12px); } .bay__progress span { font-size: max(.72em, 12px); } .bay__truck em { font-size: max(.85em, 12px); }
.bay__promised, .bay__more, .bay__free { font-size: max(.8em, 12px); } .bay__person small { font-size: max(.85em, 12px); } .bays__put { font-size: max(.78em, 12px); }
.wall .avatar { font-size: max(.62em, 12px); } .wall__brand span { font-size: max(.8em, 12px); } .wall__clock span { font-size: max(.9em, 12px); }
.wall__foot { font-size: max(.65em, 12px); } .wall__btn { font-size: max(.72em, 13px); }