/* ============================================================================
   F48  A DESIGN OR COLOUR CONSULT: the badge on the job card and the Consult
   request block on the job. Tokens only, from app.css, so both themes work.
   The phone rules sit at the width app.css already folds at (700px).
   ============================================================================ */

/* ------------------------------------------------------------- the card */
.f48-card{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.f48-fee{font-size:11px;font-weight:600;color:var(--ink-2)}
.f48-good{color:var(--good)}
.f48-warn{color:var(--warn)}
.f48-info{color:var(--ink-2)}
.f48-mute{color:var(--ink-3)}

/* ------------------------------------------------------------ on the job */
.f48-sec{margin:12px 0 4px}
.f48-h{margin:0 0 8px}
.f48-kv{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel-2);font-size:13px}
.f48-kv th,.f48-kv td{padding:7px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:baseline;line-height:1.45}
.f48-kv tr:first-child th,.f48-kv tr:first-child td{border-top:0}
.f48-kv th{width:1%;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.f48-kv td{color:var(--ink);overflow-wrap:anywhere}
.f48-kv small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.f48-kv .f48-fee{font-size:12.5px;margin-left:4px}
.f48-kv a{color:inherit}
.f48-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.btn.f48-warn{border-color:var(--warn);color:var(--warn)}

/* "I've invoiced this by hand": the invoice number box it opens (review fix,
   22 Oct). The hidden attribute must win over the flex layout. */
.f48-inv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.f48-inv[hidden]{display:none}
.f48-inv-l{font-size:12px;font-weight:600;color:var(--ink-2)}
.f48-inv-l small{font-weight:400;color:var(--ink-3)}
.f48-in{min-height:34px;width:12em;max-width:100%;padding:6px 10px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px}

@media (max-width:700px){
  .f48-kv th,.f48-kv td{display:block;width:auto;padding:6px 12px}
  .f48-kv th{padding-bottom:0;border-top:1px solid var(--line)}
  .f48-kv td{border-top:0;padding-top:2px}
  .f48-kv tr:first-child th{border-top:0}
  .f48-acts .btn,.f48-inv .btn{min-height:44px}
  .f48-in{min-height:44px;font-size:16px;flex:1 1 10em}
}