/*
 * sr-card.css - styles for the shared SR draft card (Stage 50, A6; renderer: sr-card.js).
 *
 * Three sections:
 *   1. Tokens: the CSS variables the card rules use, with the chat page's values as
 *      defaults. A host page that defines the same variables later in the cascade wins
 *      (the chat page links this file BEFORE its own <style>, so its theme stays
 *      authoritative and pixel-identical).
 *   2. Base card primitives COPIED from apps/it-assistant-web/public/index.html (which
 *      keeps them - other cards there use them too). Keep the two copies in sync.
 *   3. The SR-card-only rules MOVED here verbatim from that page (single home now).
 */

/* ---------- 1. tokens (chat-page values; host pages may override) ---------- */
:root {
  --blue: #1e5f8a; --blue-dark: #174a6c; --ink: #1f2937; --muted: #6b7280;
  --line: #dde3ea;
  --amber-bg: #fff7e6; --amber-ink: #92400e;
  --violet-bg: #f3efff; --violet-ink: #4c1d95; --violet-line: #ddd2f7;
}

/* ---------- 2. base card primitives (COPY - also live in the chat page) ---------- */
.card { border: 1px solid var(--line); border-radius: 12px; align-self: stretch; overflow: hidden;
  background: #fff; max-width: 100%; }
.card .chead { background: #f8fafc; border-bottom: 1px solid var(--line); padding: 10px 13px;
  font-weight: 600; font-size: 14.5px; }
.card .cbody { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.btns { display: flex; gap: 8px; padding: 12px 13px; border-top: 1px solid var(--line); }
.btn { flex: 1; text-align: center; padding: 10px; border-radius: 8px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--blue-dark); }
.btn.ghost { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn.ghost:hover:not(:disabled) { background: #f8fafc; }
/* Tagged card header: pills + title on one wrapping line (opt-in so old cards keep their look) */
.card .chead.tagged { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 3. SR-card rules (MOVED here from the chat page - single home) ---------- */
/* Stage 35: service-request draft card (mocks 03/04) */
.pill.sr  { background: var(--violet-bg); color: var(--violet-ink); }
.pill.cat { background: #f3f4f6; color: #4b5563; font-weight: 600; }
.frow { display: flex; flex-direction: column; gap: 4px; }
.frow label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.frow label .req { color: #b91c1c; }
.frow input[type=text], .frow input[type=date], .frow select, .frow textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 44px;
  font-family: inherit; font-size: 16px; color: var(--ink); background: #fff; width: 100%; }
.frow textarea { min-height: 56px; resize: vertical; line-height: 1.4; }
.frow select[multiple] { min-height: 84px; }
.frow label.fcheck { display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--ink); font-weight: 500; min-height: 44px; cursor: pointer; }
.frow label.fcheck input { width: 18px; height: 18px; flex-shrink: 0; }
.cond-note { font-size: 11.5px; color: var(--violet-ink); }
.fhint { font-size: 12px; color: var(--muted); }
/* Stage 37: lookup fields - resolved chip / directory search / pick-list. */
.lookup { display: flex; flex-direction: column; gap: 6px; }
.lookup-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; background: #f6fbf7; min-height: 44px; }
.lookup-chip .lk-check { color: #15803d; font-weight: 700; flex-shrink: 0; }
.lookup-chip .lk-name { font-weight: 600; overflow-wrap: anywhere; }
.lookup-chip .lk-change { margin-left: auto; flex-shrink: 0; border: 1px solid var(--line);
  background: #fff; border-radius: 8px; padding: 4px 10px; font-family: inherit; font-size: 12.5px;
  color: var(--blue-dark); font-weight: 600; cursor: pointer; }
.lookup-chip .lk-change:hover { background: #f3f4f6; }
/* 2026-09-09 - a closed-list source opens WHOLE (up to 500 rows), so the panel scrolls inside
   itself. Without the cap a 370-row object pushes the card's own buttons off the screen and the
   caller cannot see what picking a row would do. ~5 rows visible, the rest one scroll away. */
.lookup-results { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.lookup-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fff;
  font-family: inherit; text-align: left; cursor: pointer; width: 100%; }
.lookup-opt:hover { background: var(--violet-bg); border-color: var(--violet-line); }
.lookup-opt .lk-oname { font-size: 14px; color: var(--ink); font-weight: 600; }
.lookup-opt .lk-sub { font-size: 12px; color: var(--muted); }
.lookup-empty { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
/* Stage 46+: multi_lookup - a wrap of removable chips (records already added) + the add-search box. */
.lookup-multi .ml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lookup-multi .ml-chips:empty { display: none; }
.lookup-chip.ml-chip { min-height: 0; padding: 5px 6px 5px 10px; gap: 6px; background: var(--violet-bg);
  border-color: var(--violet-line); }
.ml-remove { flex-shrink: 0; border: none; background: none; cursor: pointer; font-size: 16px;
  line-height: 1; color: var(--muted); padding: 0 3px; font-family: inherit; }
.ml-remove:hover { color: #b3261e; }
.lookup-multi .ml-search { display: flex; flex-direction: column; gap: 6px; }
.portal-escape { margin: 0 13px 10px; }
.portal-link { font-size: 12.5px; color: var(--blue-dark); font-weight: 600; text-decoration: underline; }
/* A text link rendered as a <button> (used for the SR validation "Report a problem" link). */
button.portal-link { background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; }
/* Stage 35 card-first: required fields still blank are highlighted; submit stays disabled. */
.missing-banner { display: none; margin: 0 13px 4px; background: var(--amber-bg);
  border: 1px solid #f3d9a4; color: var(--amber-ink); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; font-weight: 600; }
.missing-banner.show { display: block; }
.frow.missing label { color: var(--amber-ink); }
.frow.missing input[type=text], .frow.missing input[type=date], .frow.missing select,
.frow.missing textarea { border-color: #e2a93b; background: #fffdf5; }
.frow.missing label.fcheck { color: var(--amber-ink); }
.person { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 14px; background: #fff; min-height: 44px; }
.person .av { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.person .pn { font-weight: 600; overflow-wrap: anywhere; }
.person .pe { color: var(--muted); font-size: 12.5px; margin-left: auto; overflow-wrap: anywhere; }
.card-errors { display: none; margin: 0 13px 12px; background: var(--amber-bg);
  border: 1px solid #f3d9a4; color: var(--amber-ink); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; line-height: 1.45; }
.card-errors.show { display: block; }
.card-errors .ce-title { font-weight: 700; margin-bottom: 2px; }
.card-errors ul { padding-left: 18px; margin: 2px 0 0 0; }