/* ============================================================
   BSC Ticket Management — design system
   Steel-industrial: white base, steel-blue from the logo arc,
   near-black ink, a "weld seam" gradient accent, technical type.
   ============================================================ */
:root{
  --ink:#112532; --ink-soft:#42566b; --ink-mute:#6b7c8c;
  --steel:#0E6AA6; --steel-bright:#1B7BC0; --steel-deep:#0A4566;
  --mist:#F5F8FB; --line:#E6EDF3;
}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ color:var(--ink); background:#fff; }
.font-display{ font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; letter-spacing:-.01em; }
.mono,.font-mono{ font-family:'Space Mono',ui-monospace,monospace; }

/* weld-seam accent line (the signature stripe under headers/heroes) */
.seam{ height:3px; background:linear-gradient(90deg,var(--steel-deep),var(--steel-bright) 40%,var(--steel) 68%,rgba(14,106,166,0)); }

/* cards */
.card{ background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(17,37,50,.04),0 10px 28px -20px rgba(17,37,50,.22); }
.lift{ transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s; cursor:pointer; }
.lift:hover{ transform:translateY(-3px); border-color:#cfe0ee;
  box-shadow:0 1px 2px rgba(17,37,50,.05),0 20px 42px -24px rgba(14,106,166,.5); }

/* primary button — brushed steel gradient */
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,var(--steel-bright),var(--steel-deep));
  color:#fff;font-weight:600;border-radius:12px;padding:.72rem 1.3rem;border:none;cursor:pointer;
  box-shadow:0 6px 16px -9px rgba(10,69,102,.75); transition:filter .18s,box-shadow .2s,transform .1s; }
.btn:hover{ filter:brightness(1.07); box-shadow:0 11px 24px -11px rgba(10,69,102,.85); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; }

.btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:600;border-radius:12px;padding:.62rem 1.1rem;cursor:pointer;transition:.15s; }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); background:var(--mist); }

/* inputs / selects / textarea */
.field{ width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.62rem .8rem;
  font-size:.9rem;color:var(--ink);transition:border-color .15s,box-shadow .15s; }
.field:focus{ outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(27,123,192,.16); }
.field:disabled{ background:var(--mist); color:var(--ink-mute); }

/* eyebrow + labels */
.eyebrow{ font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--steel); }
.fieldlabel{ display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:.3rem; }

/* status / priority pills */
.pill{ display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;letter-spacing:.01em; }
.dot{ width:6px;height:6px;border-radius:999px;background:currentColor; }

/* tabs with animated seam underline */
.tab{ position:relative;padding:.75rem .25rem;font-weight:600;font-size:.92rem;color:var(--ink-mute);background:none;border:none;cursor:pointer;transition:color .15s; }
.tab:hover{ color:var(--ink); }
.tab[data-active="true"]{ color:var(--steel); }
.tab[data-active="true"]::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--steel-bright),var(--steel-deep));animation:grow .25s ease; }
@keyframes grow{ from{transform:scaleX(.25);opacity:0} to{transform:scaleX(1);opacity:1} }

/* big KPI / score number */
.kpi{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.1rem;line-height:1;letter-spacing:-.02em;color:var(--ink); }

/* entrance + modal motion */
@keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.in{ animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
.in-2{ animation-delay:.06s } .in-3{ animation-delay:.12s } .in-4{ animation-delay:.18s }
@keyframes scaleIn{ from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:none} }
.modal-in{ animation:scaleIn .22s cubic-bezier(.2,.7,.3,1) both; }

/* photo thumb */
.thumb{ position:relative;width:4rem;height:4rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);flex:0 0 auto; }
.thumb img{ width:100%;height:100%;object-fit:cover; }
.thumb button{ position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;border-radius:999px;
  background:rgba(17,37,50,.72);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center; }
.thumb button:hover{ background:var(--ink); }

:focus-visible{ outline:2px solid var(--steel-bright); outline-offset:2px; }
*::-webkit-scrollbar{ height:9px;width:9px } *::-webkit-scrollbar-thumb{ background:#cdd9e4;border-radius:6px } *::-webkit-scrollbar-thumb:hover{ background:#b3c4d3 }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

/* ---- clean form components (expense reskin; BSC-branded) ---- */
.sechead{ display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line); }
.sechead::before{ content:'';width:4px;height:1.05rem;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--steel-bright),var(--steel-deep)); }
.sechead .t{ font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--ink); }
.sechead .x{ margin-left:auto; }

.infobar{ display:flex;align-items:center;gap:.8rem;border-radius:14px;padding:.8rem 1rem;
  background:linear-gradient(90deg,rgba(27,123,192,.08),rgba(27,123,192,.015));border:1px solid #d7e6f3; }
.infobar .ic{ width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--steel);color:#fff;font-weight:800;font-size:.95rem; }

.claimbar{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-radius:16px;padding:1.05rem 1.3rem;color:#fff;
  background:linear-gradient(135deg,var(--ink),#0a1a26);box-shadow:0 16px 40px -18px rgba(10,69,102,.7); }
.claimbar .amt{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2rem;line-height:1;letter-spacing:-.02em;color:#fff; }
.claimbar .cap{ font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.55); }

.addrow{ width:100%;border:1.5px dashed var(--line);border-radius:12px;padding:.7rem;font-size:.8rem;font-weight:600;
  color:var(--ink-mute);background:none;cursor:pointer;transition:all .15s; }
.addrow:hover{ border-color:var(--steel);color:var(--steel);background:var(--mist); }

/* fieldlabel is display:block for form labels — but as a table header it must stay a cell */
th.fieldlabel{ display:table-cell; margin:0; }