/* CORGIS Rapid theme — ported from corgis-ui tokens (indigo-800 / slate, 4px radius). */
:root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --card-border: 214 32% 91%;
  --primary: 233 47% 24%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --sidebar: 0 0% 100%;
  --radius: 0.25rem;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
a { color: hsl(var(--primary)); text-decoration: none; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

/* ---------------- layout utilities ---------------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}
.full { width: 100%; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 720px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ---------------- text ---------------- */
.text-xs{font-size:12px}.text-sm{font-size:13px}.text-base{font-size:14px}.text-lg{font-size:16px}.text-xl{font-size:20px}.text-2xl{font-size:24px}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-medium{font-weight:500}
.muted{color:hsl(var(--muted-foreground))}
.mono{font-family:var(--font-mono)}
.danger{color:hsl(var(--destructive))}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uppercase{text-transform:uppercase;letter-spacing:.04em}

/* ---------------- app shell ---------------- */
.app { display: flex; flex-direction: column; height: 100%; }
.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 16px; flex: 0 0 auto;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: hsl(var(--primary)); }
.logo { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius); background: hsl(var(--primary)); color: #fff; font-weight: 800; font-size: 13px; }
.main { flex: 1 1 auto; overflow: auto; }
.page { max-width: 100%; margin: 0; padding: 20px 28px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.crumbs { font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 4px; }
.crumbs a { color: hsl(var(--muted-foreground)); }
.crumbs a:hover { color: hsl(var(--foreground)); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; font-family: inherit;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); white-space: nowrap;
  transition: background .12s, opacity .12s, border-color .12s;
}
.btn:hover { background: hsl(233 47% 30%); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }
.btn.outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); box-shadow: var(--shadow-1); }
.btn.outline:hover { background: hsl(var(--muted)); }
.btn.secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); }
.btn.secondary:hover { background: hsl(210 40% 92%); }
.btn.ghost { background: transparent; color: hsl(var(--foreground)); }
.btn.ghost:hover { background: hsl(var(--muted)); }
.btn.danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn.danger:hover { background: hsl(0 84% 54%); }
.btn.icon { width: 36px; padding: 0; }

/* ---------------- form fields ---------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.label { font-size: 12px; font-weight: 500; color: hsl(var(--foreground)); }
.label .req { color: hsl(var(--destructive)); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 10px; font-size: 13px; font-family: inherit;
  color: hsl(var(--foreground)); background: #fff;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius); outline: none;
}
.textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }
.input:disabled, .select:disabled, .textarea:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); cursor: not-allowed; }
.input.invalid, .select.invalid { border-color: hsl(var(--destructive)); }
.hint { font-size: 11px; color: hsl(var(--muted-foreground)); }
.err { font-size: 11px; color: hsl(var(--destructive)); }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: hsl(214 20% 80%); transition: background .15s; flex: 0 0 auto; }
.switch .thumb { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s; }
.switch input:checked + .track { background: hsl(var(--primary)); }
.switch input:checked + .track + .thumb { transform: translateX(16px); }
.switch.disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- card ---------------- */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: var(--radius); }
.card.pad { padding: 16px; }
.card-head { padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); }
.card-body { padding: 16px; }
.card-title { font-size: 14px; font-weight: 600; }
.card-sub { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.list-card { background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: var(--radius); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid hsl(var(--border)); cursor: pointer; }
.list-row:first-child { border-top: none; }
.list-row:hover { background: hsl(var(--muted) / .5); }

/* ---------------- badge ---------------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; font-size: 11px; font-weight: 500; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); }
.badge.outline { background: transparent; }
.badge.primary { background: hsl(var(--primary)); color: #fff; border-color: transparent; }
.badge.success { background: hsl(152 55% 94%); color: hsl(152 60% 26%); border-color: hsl(152 40% 80%); }
.badge.warn { background: hsl(38 92% 92%); color: hsl(30 80% 35%); border-color: hsl(38 80% 78%); }
.badge.danger { background: hsl(0 86% 95%); color: hsl(0 70% 42%); border-color: hsl(0 70% 85%); }

/* ---------------- lock banner ---------------- */
.lock-banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: hsl(0 86% 96%); border: 1px solid hsl(0 70% 85%); color: hsl(0 70% 38%); border-radius: var(--radius); font-size: 13px; font-weight: 500; }
.lock-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--destructive)); }
.readonly-note { font-size: 12px; }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
.tab:hover { color: hsl(var(--foreground)); }
.tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }

/* ---------------- table / editable grid ---------------- */
.tbl-wrap { overflow: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: #fff; }
table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 11px; }
table.tbl th, table.tbl td { padding: 3px 6px; border-bottom: 1px solid hsl(var(--border)); border-right: 1px solid hsl(var(--border)); text-align: left; white-space: nowrap; }
table.tbl th { background: hsl(var(--muted)); font-weight: 600; position: sticky; top: 0; z-index: 2; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl th:last-child, table.tbl td:last-child { border-right: none; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr:hover td { background: hsl(var(--muted) / .4); }
table.tbl .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
table.tbl th.sticky-col { z-index: 3; background: hsl(var(--muted)); }
table.tbl input.cell { width: 100%; min-width: 60px; border: none; background: transparent; font: inherit; padding: 2px 0; outline: none; }
table.tbl input.cell:focus { box-shadow: inset 0 0 0 1px hsl(var(--ring)); border-radius: 2px; }
table.tbl td.editing { background: hsl(210 60% 96%); }

/* ---------------- dialog ---------------- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.dialog { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-2); width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.dialog.lg { max-width: 860px; }
.dialog.xl { max-width: 1100px; }
.dialog-head { padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; }
.dialog-body { padding: 20px; }
.dialog-foot { padding: 14px 20px; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------- toast ---------------- */
.toast-host { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: hsl(222 47% 14%); color: #fff; padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow-2); font-size: 13px; max-width: 360px; }
.toast.error { background: hsl(0 70% 40%); }
.toast.success { background: hsl(152 55% 28%); }

/* ---------------- misc ---------------- */
.center-screen { display: grid; place-items: center; height: 100%; padding: 24px; }
.namecard { width: 100%; max-width: 420px; }
.spin { width: 18px; height: 18px; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: sp 0.7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.divider { height: 1px; background: hsl(var(--border)); margin: 16px 0; }
.empty { text-align: center; padding: 48px 16px; color: hsl(var(--muted-foreground)); }
.save-chip { font-size: 12px; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 6px; }
.collapse-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.collapse-head:hover { background: hsl(var(--muted) / .5); }
.chev { transition: transform .15s; }
.chev.open { transform: rotate(90deg); }

/* ---------------- print (F&F settlement letter) ---------------- */
/* Isolates a single .print-area (e.g. the F&F Settlement Letter) when window.print() is called —
   everything else on the page is hidden instead of printed. */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; color: #000; background: #fff; }
}