/* ===== ROA / Mainstay design tokens ===== */
:root {
  --radius: 10px;
  --bg-app: #F7F8FA;
  --bg-app-2: #F2F4F8;
  --card: #FFFFFF;
  --foreground: #181D27;
  --navy: #10295A;
  --navy-2: #23508F;
  --emerald: #1A9175;
  --emerald-deep: #137a62;
  --pink: #DB1263;
  --blue: #1570EF;
  --mild-blue: #E0EBFF;
  --muted: #717680;
  --desc: #535862;
  --label-2: #414651;
  --border: #E9EAEB;
  --field-border: #D5D7DA;
  --chip-fill: #F5F5F5;
  --card-shadow: 0px 4px 25px 0px #0000000D;
  --card-shadow-2: 0px 6px 15px 0px #404F680D;
  --card-shadow-hover: 0px 8px 30px 0px #10295A14;
  --accent: var(--navy);          /* swapped by tweak */
  --accent-soft: #EBF0FA;

  /* status scales */
  --st-high-fg: #1A9175;  --st-high-bg: #E6F4F1;
  --st-mid-fg:  #10295A;  --st-mid-bg:  #EBF0FA;
  --st-low-fg:  #DB1263;  --st-low-bg:  #FDE8F1;
  --st-blue-fg: #1570EF;  --st-blue-bg: #E0EBFF;
  --st-neutral-fg: #535862; --st-neutral-bg: #F1F2F4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  background: var(--bg-app);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Global UI scale: shrink every component (type, spacing, fixed px) by 20%.
     --ui-scale is also used to compensate full-viewport heights below. */
  --ui-scale: 0.8;
  zoom: var(--ui-scale);
}
/* Full-height anchors must grow to fill the viewport after zoom-out.
   100vh of real viewport ÷ scale = a box that still covers the screen. */
#root { min-height: calc(100vh / var(--ui-scale)); }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

::selection { background: #10295A22; }

/* scrollbars */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: #10295A55; border-radius: 99px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: #10295A88; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ===== primitives ===== */
.card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  padding: 0 18px; height: 40px; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .06s ease;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-navy { background: var(--accent); color: #fff; box-shadow: 0 1px 2px #10295A22; }
.btn-navy:hover:not(:disabled) { background: #0c1f47; }
.btn-emerald { background: var(--emerald); color: #fff; box-shadow: 0 1px 2px #1A917522; }
.btn-emerald:hover:not(:disabled) { background: var(--emerald-deep); }
.btn-outline { background: #fff; color: var(--accent); border-color: var(--field-border); }
.btn-outline:hover:not(:disabled) { border-color: var(--accent); background: #fafbfd; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: #00000008; color: var(--foreground); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 999px; }

/* segmented control */
.seg { display: inline-flex; background: #F1F2F4; border-radius: 999px; padding: 4px; gap: 2px; }
.seg-opt {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 7px 16px; border-radius: 999px; transition: all .15s ease; white-space: nowrap;
}
.seg-opt:hover { color: var(--foreground); }
.seg-opt.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px #10295A1f; }
.seg-opt.on-emerald { color: var(--emerald); }

/* inputs */
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: 7px; }
.field-label .req { color: var(--pink); margin-left: 2px; }
.field-label .opt { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 12px; }
.input, .textarea, .select {
  width: 100%; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--foreground);
  background: #fff; border: 1px solid var(--field-border); border-radius: 10px;
  padding: 0 13px; height: 44px; transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}
.textarea { height: auto; padding: 12px 13px; resize: vertical; min-height: 88px; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #98A0AB; font-weight: 500; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #10295A1f; }
.input.err, .textarea.err, .select.err { border-color: var(--pink); box-shadow: 0 0 0 3px #DB126318; }
.select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
.err-msg { color: var(--pink); font-size: 12px; font-weight: 500; margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* checkbox */
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox .box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--field-border);
  display: grid; place-items: center; transition: all .15s ease; flex-shrink: 0; background: #fff;
}
.checkbox input:checked + .box { background: var(--emerald); border-color: var(--emerald); }
.checkbox .box svg { opacity: 0; transition: opacity .12s ease; }
.checkbox input:checked + .box svg { opacity: 1; }

/* status badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 4px 11px 4px 9px; border-radius: 999px; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 99px; }

/* type chip */
.tchip {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--label-2);
}

/* table */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; padding: 0 16px 12px; white-space: nowrap;
}
.tbl tbody tr { cursor: pointer; transition: background .12s ease; }
.tbl tbody tr:hover { background: #F8FAFD; }
.tbl tbody td { padding: var(--row-pad, 16px); border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover td { border-color: #E3E9F2; }

/* anim */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes highlightRow { 0% { background: #E6F4F1; } 70% { background: #E6F4F1; } 100% { background: transparent; } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeUp .4s cubic-bezier(.2,.7,.3,1) both; }

/* skeleton */
.sk {
  background: linear-gradient(90deg, #EEF0F3 0px, #F6F7F9 200px, #EEF0F3 400px);
  background-size: 800px 100%; animation: shimmer 1.3s linear infinite; border-radius: 7px;
}

/* misc */
.divider { height: 1px; background: var(--border); }
.kbd { font-family: 'Geist Mono', monospace; font-size: 11px; background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--muted); }