/* ============================================================================
   F04  MATT'S CABINET COUNTS AND HELD INSTALLER ORDERS
   The counts table and hold controls in the job's Installer order section,
   the lines added to subcontractor cards, and the held list on Purchase
   Orders. Tokens only (app.css), so both themes work.
   ============================================================================ */

/* The counts sit right under the built-in installer band, as part of it. */
.f04-band{margin:0 0 6px}
.f04-counts{margin:4px 0 12px}
.f04-counts .x-note{margin:0 0 8px}
.f04-tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:12.5px;
  border-collapse:separate;border-spacing:0;background:var(--panel)}
.f04-tbl th,.f04-tbl td{padding:7px 11px}
.f04-tbl td.num,.f04-tbl th.num{width:84px}
.f04-tbl tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:700;color:var(--ink)}
/* A room whose two counts are not the same is the one Adam has to look at. */
.f04-tbl tr.f04-diff td{background:var(--warn-bg)}
.f04-tbl tr.f04-diff td.num{color:var(--warn);font-weight:700}
.f04-tbl .x-badge{margin-left:4px}

.f04-btns{margin:10px 0 8px}
.f04-band .note{margin:0 0 4px}

/* The two small forms open in place under the buttons. The console's .frm is
   display:flex, which would beat the hidden attribute, so hidden is said
   again here. */
.f04-frm{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 12px}
.f04-frm[hidden]{display:none}
.f04-frm .x-note{margin:0}
.f04-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.f04-rooms label small{display:block;margin-top:2px}
.f04-frm .btnrow{margin-bottom:0}

/* On a subcontractor card: Euroform's count beside the installer's, and the
   hold. */
.f04-subs{display:flex;flex-direction:column;gap:6px}
.f04-sub{font-size:11.5px;line-height:1.45;color:var(--ink-2);background:var(--panel-2);
  border-radius:4px;padding:6px 9px}
.f04-sub b{color:var(--ink)}
.f04-sub.differs{background:var(--warn-bg)}
.f04-sub.held{background:var(--crit-bg);color:var(--ink)}

/* Every held order in one list on Purchase Orders. */
.f04-held{display:flex;flex-direction:column;gap:8px}
.f04-hrow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:var(--r);padding:11px 14px}
.f04-ht{font-size:13px;color:var(--ink-2)}
.f04-ht b{color:var(--ink)}
.f04-hr{grid-column:1;font-size:12px;color:var(--ink-2);line-height:1.45}
.f04-hrow .btn{grid-column:2;grid-row:1 / span 2;align-self:center}

@media(max-width:700px){
  .f04-tbl td.num,.f04-tbl th.num{width:64px}
  .f04-hrow{grid-template-columns:1fr}
  .f04-hrow .btn{grid-column:1;grid-row:auto;width:100%;min-height:44px}
  .f04-rooms{grid-template-columns:1fr 1fr}
}

/* The held list's heading keeps the gap every other section heading has; as
   the first child of its own wrapper, app.css would otherwise zero it. */
.f04-heldsec > .sec-h:first-child{margin-top:26px}