@charset "UTF-8";
/* ==========================================================================
   Komanduri - Connector Loan & Commission Dashboard
   Design system

   One stylesheet, no build step, no framework. Everything below is written to
   be legible six months from now: tokens first, then layout, then components.

   Brand
   -----
   Ink navy carries the interface; gold is used sparingly, and only where the
   brand should be felt (the mark, the active rail, a focus ring). Money is set
   in tabular figures everywhere so columns of rupees line up on any screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --ink-900: #08192c;
  --ink-800: #0d243f;
  --ink-700: #123253;
  --ink-600: #17436d;
  --ink-500: #1e5a90;
  --ink-400: #3d7cb4;
  --ink-100: #e7eef6;
  --ink-50:  #f3f7fb;

  --gold-600: #a37c14;
  --gold-500: #c9a227;
  --gold-400: #e2bf55;
  --gold-100: #fbf3dc;

  /* neutrals */
  --bg:          #f4f6fa;
  --surface:     #ffffff;
  --surface-2:   #fafbfd;
  --border:      #e2e8f1;
  --border-soft: #eef2f7;
  --text:        #10243e;
  --text-2:      #46586e;
  --muted:       #74869c;
  --muted-2:     #9aa9bb;

  /* semantic */
  --success:   #0f8a5f;
  --success-bg:#e7f6ef;
  --warn:      #b0770f;
  --warn-bg:   #fdf4e3;
  --danger:    #c33c2e;
  --danger-bg: #fdeceb;
  --info:      #1e5a90;
  --info-bg:   #e8f1f9;
  --violet:    #6b46c1;
  --violet-bg: #f1ebfb;

  /* shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* elevation - deliberately soft; this is a document, not a game */
  --sh-1: 0 1px 2px rgba(16, 36, 62, .05);
  --sh-2: 0 1px 3px rgba(16, 36, 62, .07), 0 6px 16px -8px rgba(16, 36, 62, .12);
  --sh-3: 0 12px 32px -12px rgba(16, 36, 62, .22), 0 2px 6px rgba(16, 36, 62, .06);
  --sh-pop: 0 18px 48px -16px rgba(8, 25, 44, .35);

  /* layout */
  --sidebar-w: 252px;
  --topbar-h: 60px;
  --gap: 18px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .93rem; }
p  { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink-500); text-decoration: none; }
a:hover { color: var(--ink-600); text-decoration: underline; text-underline-offset: 2px; }

img, svg { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold-100); color: var(--ink-800); }

/* scrollbars, where the browser lets us */
* { scrollbar-width: thin; scrollbar-color: #c9d3e0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c9d3e0; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #aebbcd; background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--ink-800);
  background-image: linear-gradient(100deg, var(--ink-900) 0%, var(--ink-700) 62%, var(--ink-600) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--sh-2);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}

.topbar__menu { display: none; }

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.topbar__brand:hover { text-decoration: none; color: #fff; }

.topbar__logo {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.topbar__title {
  font-weight: 640;
  font-size: 1rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__sub {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .58);
  display: block;
  margin-top: -3px;
  font-weight: 500;
}

.topbar__spacer { flex: 1 1 auto; }

.topbar__btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background .15s var(--ease);
  position: relative;
}
.topbar__btn:hover { background: rgba(255, 255, 255, .17); }

.topbar__user {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  border: 0; cursor: pointer;
  font: inherit; font-size: .84rem;
}
.topbar__user:hover { background: rgba(255, 255, 255, .17); text-decoration: none; color: #fff; }
.topbar__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--ink-900);
  font-weight: 700; font-size: .72rem;
}
.topbar__username { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sidebar ---------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  bottom: 0; left: 0;
  width: var(--sidebar-w);
  z-index: 50;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 28px;
  transition: transform .22s var(--ease);
}

.sidebar__group { margin-bottom: 18px; }
.sidebar__label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 700;
  color: var(--muted-2);
  padding: 0 10px 7px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  color: var(--text-2);
  font-size: .89rem;
  font-weight: 520;
  position: relative;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.sidebar__link:hover { background: var(--ink-50); color: var(--ink-700); text-decoration: none; }
.sidebar__link svg { color: var(--muted); flex: 0 0 auto; transition: color .13s var(--ease); }
.sidebar__link:hover svg { color: var(--ink-500); }

.sidebar__link.active {
  background: linear-gradient(90deg, var(--ink-50), transparent 92%);
  color: var(--ink-700);
  font-weight: 620;
}
.sidebar__link.active svg { color: var(--ink-600); }
.sidebar__link.active::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.sidebar__count {
  margin-left: auto;
  font-size: .69rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--ink-600);
}
.sidebar__count--alert { background: var(--warn-bg); color: var(--warn); }

.sidebar__footer {
  margin-top: 22px;
  padding: 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-size: .76rem;
  color: var(--muted);
}
.sidebar__footer strong { display: block; color: var(--text-2); font-size: .8rem; margin-bottom: 2px; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(8, 25, 44, .45);
  backdrop-filter: blur(2px);
  z-index: 45;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* main ------------------------------------------------------------------- */
.main {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 20px) 24px 60px;
  max-width: 1560px;
}

/* --------------------------------------------------------------------------
   4. Page furniture
   -------------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--gap);
}
.page-head__text { flex: 1 1 320px; min-width: 0; }
.page-head__sub { color: var(--muted); font-size: .87rem; margin-top: 3px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--muted);
  margin-bottom: 5px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink-500); }
.breadcrumb span { color: var(--muted-2); }

/* --------------------------------------------------------------------------
   5. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  margin-bottom: var(--gap);
  overflow: hidden;
}
.card--flush { margin-bottom: 0; }
.card--raised { box-shadow: var(--sh-2); }

.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.card__head h2, .card__head h3 { flex: 1 1 auto; min-width: 0; }
.card__head-sub { display: block; font-size: .78rem; color: var(--muted); font-weight: 450; margin-top: 1px; }
.card__body { padding: 18px; }
.card__body--tight { padding: 12px 14px; }
.card__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   6. Stat cards
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-bottom: var(--gap);
}

.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 17px;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
a.stat:hover { box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; }

.stat::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink-400);
  opacity: .85;
}
.stat--gold::after    { background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
.stat--success::after { background: var(--success); }
.stat--warn::after    { background: var(--warn); }
.stat--danger::after  { background: var(--danger); }
.stat--violet::after  { background: var(--violet); }

.stat__label {
  display: flex; align-items: center; gap: 7px;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-weight: 660;
  color: var(--muted);
}
.stat__label svg { color: var(--muted-2); }

.stat__value {
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -.021em;
  color: var(--ink-800);
  margin-top: 7px;
  line-height: 1.15;
  word-break: break-word;
}
.stat__meta { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.stat__meta strong { color: var(--text-2); font-weight: 620; }

/* the dashboard's headline band */
.hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: 22px 24px;
  margin-bottom: var(--gap);
  color: #fff;
  background: linear-gradient(115deg, var(--ink-900) 0%, var(--ink-700) 55%, var(--ink-600) 100%);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -70px; top: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 191, 85, .22), transparent 66%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}
.hero__label {
  font-size: .71rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .62); font-weight: 620;
}
.hero__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.022em; margin-top: 4px; }
.hero__meta  { font-size: .79rem; color: rgba(255, 255, 255, .68); margin-top: 2px; }
.hero__divider { border-left: 1px solid rgba(255, 255, 255, .13); padding-left: 20px; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--ink-600);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 580;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s var(--ease), box-shadow .14s var(--ease), transform .08s var(--ease);
  box-shadow: var(--sh-1);
}
.btn:hover  { background: var(--ink-700); color: #fff; text-decoration: none; box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn svg { flex: 0 0 auto; }

.btn--ghost {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--ink-50); color: var(--ink-700); border-color: #d3ddea; }

.btn--gold {
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  font-weight: 660;
}
.btn--gold:hover { background: linear-gradient(160deg, var(--gold-500), var(--gold-600)); color: var(--ink-900); }

.btn--success { background: var(--success); }
.btn--success:hover { background: #0c7550; }
.btn--danger  { background: var(--danger); }
.btn--danger:hover  { background: #a93325; }
.btn--warn    { background: var(--warn); }
.btn--warn:hover    { background: #96650c; }

.btn--sm  { padding: 5px 11px; min-height: 32px; font-size: .8rem; border-radius: var(--r-sm); }
.btn--lg  { padding: 11px 22px; min-height: 46px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 34px; min-height: 34px; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
}
.field { min-width: 0; }
.field--full { grid-column: 1 / -1; }

.label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.label .req { color: var(--danger); margin-left: 2px; }
.label .opt { color: var(--muted-2); font-weight: 450; font-size: .75rem; margin-left: 4px; }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .89rem;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
  appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: #cfd9e6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink-400);
  box-shadow: 0 0 0 3px rgba(30, 90, 144, .13);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input[readonly], .input[disabled], .select[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.textarea { min-height: 84px; resize: vertical; line-height: 1.55; }

.select {
  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='%2374869c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(195, 60, 46, .1);
}
.field-error { display: block; color: var(--danger); font-size: .78rem; margin-top: 4px; font-weight: 500; }
.field-hint  { display: block; color: var(--muted); font-size: .77rem; margin-top: 4px; line-height: 1.45; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r) 0 0 var(--r); }
.input-group .btn   { border-radius: 0 var(--r) var(--r) 0; }
.input-prefix {
  display: grid; place-items: center;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}
.input-group .input-prefix + .input { border-radius: 0 var(--r) var(--r) 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: background .13s var(--ease), border-color .13s var(--ease);
  font-size: .86rem;
}
.check:hover { background: var(--ink-50); border-color: #d3ddea; }
.check input { margin: 2px 0 0; accent-color: var(--ink-600); width: 16px; height: 16px; flex: 0 0 auto; }
.check__text { min-width: 0; }
.check__text strong { display: block; font-weight: 600; font-size: .86rem; }
.check__text small  { display: block; color: var(--muted); font-size: .77rem; line-height: 1.42; }
.check.is-on { border-color: var(--ink-400); background: var(--ink-50); }

/* segmented control - used for commission mode and payout status pickers */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: var(--r);
  flex-wrap: wrap;
}
.segmented label {
  position: relative;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font-size: .83rem;
  font-weight: 570;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label:hover { color: var(--ink-700); }
.segmented input:checked + span,
.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--ink-700);
  box-shadow: var(--sh-1);
  font-weight: 640;
}

/* filter bar ------------------------------------------------------------- */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: var(--gap);
  box-shadow: var(--sh-1);
}
.filters__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 11px;
  align-items: end;
}
.filters__actions { display: flex; gap: 8px; align-items: end; }
.filters__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 660; color: var(--muted); margin-bottom: 4px; display: block;
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  color: var(--ink-700);
  font-size: .77rem;
  font-weight: 550;
}
.chip a { color: var(--muted); display: grid; place-items: center; }
.chip a:hover { color: var(--danger); }
.chip--clear { background: transparent; border-style: dashed; border-color: var(--border); color: var(--muted); }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .865rem;
  min-width: 640px;
}
.table th {
  text-align: left;
  padding: 10px 14px;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table th a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.table th a:hover { color: var(--ink-600); text-decoration: none; }
.table th.is-sorted a { color: var(--ink-600); }

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.table tbody tr { transition: background .1s var(--ease); }
.table tbody tr:hover { background: var(--ink-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--gold-100); }

.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.table .tight { width: 1%; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }

.table--compact td { padding: 8px 12px; }
.table--compact th { padding: 8px 12px; }

.cell-primary { font-weight: 620; color: var(--ink-700); display: block; }
.cell-sub { font-size: .78rem; color: var(--muted); display: block; margin-top: 1px; }

.code {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: -.01em;
  color: var(--ink-600);
  font-weight: 600;
}

.row-check { width: 16px; height: 16px; accent-color: var(--ink-600); cursor: pointer; }

/* selection toolbar that slides in when rows are ticked */
.bulkbar {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 11px 15px;
  border-radius: var(--r-lg);
  background: var(--ink-800);
  color: #fff;
  box-shadow: var(--sh-pop);
}
.bulkbar.is-open { display: flex; }
/* A bar that is the point of the screen rather than a reaction to it - the
   submissions download. Shown whether or not anything is ticked. */
.bulkbar--always { display: flex; }
.bulkbar__count { font-weight: 660; font-size: .87rem; }
.bulkbar__count span { color: var(--gold-400); }
.bulkbar .select, .bulkbar .input {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  min-height: 34px;
  padding: 5px 10px;
  width: auto;
}
.bulkbar .select option { color: var(--text); }
/* A tick-box inside the dark bar. Same treatment as the select beside it, so
   "everything matching these filters" reads as part of the toolbar rather
   than as a white card dropped into it. */
.bulkbar .check {
  padding: 6px 11px;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.bulkbar .check:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); }
.bulkbar .check.is-on { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.bulkbar .check input { accent-color: var(--gold-400); }
.bulkbar .check__text small { color: rgba(255, 255, 255, .68); }

/* --------------------------------------------------------------------------
   10. Badges & pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 640;
  line-height: 1.55;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge--plain::before { display: none; }

.badge--pending  { background: var(--warn-bg);    color: var(--warn);    border-color: #f4e2bd; }
.badge--approved { background: var(--info-bg);    color: var(--info);    border-color: #cfe0ef; }
.badge--paid     { background: var(--success-bg); color: var(--success); border-color: #c7e8d8; }
.badge--on_hold  { background: var(--violet-bg);  color: var(--violet);  border-color: #ded0f5; }
.badge--neutral  { background: var(--ink-50);     color: var(--text-2);  border-color: var(--border); }
.badge--danger   { background: var(--danger-bg);  color: var(--danger);  border-color: #f7ccc7; }
.badge--success  { background: var(--success-bg); color: var(--success); border-color: #c7e8d8; }
.badge--warn     { background: var(--warn-bg);    color: var(--warn);    border-color: #f4e2bd; }
.badge--info     { background: var(--info-bg);    color: var(--info);    border-color: #cfe0ef; }
.badge--gold     { background: var(--gold-100);   color: var(--gold-600); border-color: #efdda9; }

.badge--unique    { background: var(--ink-50);    color: var(--muted);   border-color: var(--border); }
.badge--possible  { background: var(--warn-bg);   color: var(--warn);    border-color: #f4e2bd; }
.badge--confirmed { background: var(--danger-bg); color: var(--danger);  border-color: #f7ccc7; }

.badge--manual {
  background: var(--gold-100);
  color: var(--gold-600);
  border-color: #efdda9;
}

/* --------------------------------------------------------------------------
   11. Alerts & flashes
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--r);
  border: 1px solid;
  margin-bottom: 14px;
  font-size: .87rem;
  line-height: 1.5;
}
.alert svg { flex: 0 0 auto; margin-top: 2px; }
.alert strong { font-weight: 660; }
.alert p { margin: 0; }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.alert__close:hover { opacity: 1; }

.alert--success { background: var(--success-bg); border-color: #bfe4d3; color: #0a6244; }
.alert--error   { background: var(--danger-bg);  border-color: #f3c4be; color: #94271b; }
.alert--warning { background: var(--warn-bg);    border-color: #f0dcb4; color: #855609; }
.alert--info    { background: var(--info-bg);    border-color: #c9dcee; color: #144a78; }

.flash-stack {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 14px);
  right: 20px;
  z-index: 80;
  width: min(400px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.flash-stack .alert {
  pointer-events: auto;
  box-shadow: var(--sh-3);
  margin: 0;
  animation: flash-in .28s var(--ease);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12. Empty states
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 46px 22px;
  color: var(--muted);
}
.empty__icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-50);
  color: var(--ink-400);
}
.empty h3 { color: var(--text-2); margin-bottom: 5px; }
.empty p { max-width: 430px; margin: 0 auto 14px; font-size: .87rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   13. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.pagination__info { color: var(--muted); font-size: .82rem; flex: 1 1 auto; }
.pagination__pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pagination__pages a, .pagination__pages span {
  min-width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: .83rem;
  font-weight: 560;
}
.pagination__pages a:hover { background: var(--ink-50); border-color: #d3ddea; text-decoration: none; color: var(--ink-700); }
.pagination__pages .is-current { background: var(--ink-600); border-color: var(--ink-600); color: #fff; }
.pagination__pages .is-gap { border-color: transparent; background: transparent; color: var(--muted-2); }

/* --------------------------------------------------------------------------
   14. Detail layouts
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: var(--gap);
  align-items: start;
}
.split--wide { grid-template-columns: minmax(0, 1fr) 400px; }
/* Two records being weighed against each other get equal room - a narrower
   column would read as the lesser of the two before anyone had decided. */
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.defs { display: grid; gap: 0; }
.def {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: .87rem;
}
.def:last-child { border-bottom: 0; }
.def__label { color: var(--muted); font-weight: 550; }
.def__value { color: var(--text); word-break: break-word; }
.def__value--empty { color: var(--muted-2); font-style: italic; }

.mini-list { display: flex; flex-direction: column; }
.mini-list__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.mini-list__item:last-child { border-bottom: 0; }
.mini-list__main { flex: 1 1 auto; min-width: 0; }
.mini-list__title { font-weight: 600; font-size: .87rem; display: block; }
.mini-list__sub { font-size: .77rem; color: var(--muted); }
.mini-list__value { font-weight: 660; font-size: .89rem; white-space: nowrap; }

.rank {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--ink-50);
  color: var(--ink-600);
  font-size: .74rem; font-weight: 700;
  flex: 0 0 auto;
}
.rank--1 { background: linear-gradient(150deg, var(--gold-400), var(--gold-600)); color: var(--ink-900); }

/* timeline for the audit trail */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding: 0 0 16px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-400);
}
.timeline__time { font-size: .74rem; color: var(--muted-2); }
.timeline__text { font-size: .85rem; color: var(--text-2); }
.timeline__text strong { color: var(--text); font-weight: 620; }

/* --------------------------------------------------------------------------
   15. Charts (pure CSS/SVG - no library)
   -------------------------------------------------------------------------- */
.chart { width: 100%; height: 220px; display: block; overflow: visible; }
.chart__area { fill: url(#chartFill); }
.chart__line { fill: none; stroke: var(--ink-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__grid { stroke: var(--border-soft); stroke-width: 1; }
.chart__dot  { fill: var(--surface); stroke: var(--ink-500); stroke-width: 2; }
.chart__label { font-size: 10px; fill: var(--muted-2); }

.bars { display: flex; flex-direction: column; gap: 11px; }
.bar__head { display: flex; justify-content: space-between; gap: 12px; font-size: .83rem; margin-bottom: 4px; }
.bar__name { font-weight: 570; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__value { font-weight: 660; white-space: nowrap; }
.bar__track { height: 7px; border-radius: var(--r-pill); background: var(--ink-50); overflow: hidden; }
.bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ink-500), var(--ink-400));
  transition: width .5s var(--ease);
}
.bar__fill--gold    { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.bar__fill--success { background: linear-gradient(90deg, #0c7550, #21a97a); }

.progress-split { display: flex; height: 9px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-50); }
.progress-split span { display: block; height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* --------------------------------------------------------------------------
   16. Modals
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 25, 44, .5);
  backdrop-filter: blur(3px);
}
.modal.is-open { display: flex; animation: fade-in .16s var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  animation: modal-in .2s var(--ease);
}
.modal__box--wide { width: min(860px, 100%); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.modal__head h3 { flex: 1 1 auto; }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot {
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   17. Auth & install layouts
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 26px 18px;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(30, 90, 144, .14), transparent 62%),
    radial-gradient(760px 420px at 92% 108%, rgba(201, 162, 39, .12), transparent 60%),
    var(--bg);
}
.auth__card {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 30px 28px;
}
.auth__brand { text-align: center; margin-bottom: 22px; }
.auth__logo {
  width: 56px; height: 56px;
  margin: 0 auto 13px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  color: var(--gold-400);
  font-weight: 800; font-size: 1.25rem;
  letter-spacing: .01em;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.auth__name { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; }
.auth__tag { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.auth__foot { text-align: center; margin-top: 18px; font-size: .82rem; color: var(--muted); }

/* The public form link ---------------------------------------------------
   Somebody who is not signed in, often on a phone, often on a borrowed one.
   No sidebar, no navigation, and a single column that stays readable at any
   width - there is nothing on this page to go anywhere else with. */
.public-body { background: var(--bg); }
.public-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  color: #fff;
}
.public-bar__logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: var(--gold-400);
  font-weight: 800;
}
.public-bar__title { display: block; font-weight: 700; letter-spacing: -.01em; }
.public-bar__sub { display: block; font-size: .76rem; opacity: .78; }

.public {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 16px 60px;
}
.public__head { margin-bottom: var(--gap); }
.public__head h1 { font-size: 1.4rem; letter-spacing: -.02em; }
.public__intro { color: var(--muted); font-size: .88rem; margin-top: 5px; line-height: 1.55; }
.public__foot {
  text-align: center;
  color: var(--muted);
  font-size: .76rem;
  margin-top: 22px;
}

.install {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 18px 70px;
}
.steps { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.step {
  flex: 1 1 120px;
  padding: 9px 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8rem;
  color: var(--muted);
  font-weight: 560;
}
.step.is-done    { border-color: #bfe4d3; background: var(--success-bg); color: var(--success); }
.step.is-current { border-color: var(--ink-400); background: var(--ink-50); color: var(--ink-700); font-weight: 660; }
.step__n { font-weight: 700; margin-right: 6px; }

.check-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: .86rem;
}
.check-row:last-child { border-bottom: 0; }
.check-row__label { flex: 1 1 auto; font-weight: 550; }
.check-row__value { color: var(--muted); font-size: .8rem; font-family: var(--mono); }
.check-row__dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.check-row__dot--ok   { background: var(--success-bg); color: var(--success); }
.check-row__dot--fail { background: var(--danger-bg);  color: var(--danger); }
.check-row__dot--warn { background: var(--warn-bg);    color: var(--warn); }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.muted     { color: var(--muted); }
.small     { font-size: .8rem; }
.tiny      { font-size: .74rem; }
.strong    { font-weight: 650; }
.money-pos { color: var(--success); font-weight: 640; }
.money-neg { color: var(--danger);  font-weight: 640; }
.nowrap    { white-space: nowrap; }
.center    { text-align: center; }
.right     { text-align: right; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row  { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/*
 * `hidden` has to beat a class that sets `display`.
 *
 * The browser's own [hidden] rule is a user-agent rule, so any author rule
 * with a display in it - .stack, .btn-group, .row - silently outranks it, and
 * an element the JavaScript "hid" stays on screen. This is the one place in
 * the stylesheet where !important is the correct answer: hidden means hidden,
 * whatever else the element happens to be.
 */
[hidden] { display: none !important; }

/*
 * An address and its Copy button, side by side inside a table cell.
 * The address is allowed to shrink (min-width:0 - without it a flex item
 * refuses to go below its content width and pushes the button out of the
 * cell); the button never is.
 */
.link-row { display: flex; align-items: center; gap: 6px; }
.link-row .code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-row .btn { flex: 0 0 auto; }

.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

.divider-y { border-left: 1px solid var(--border); padding-left: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.spinner--dark { border-color: var(--ink-100); border-top-color: var(--ink-600); }
@keyframes spin { to { transform: rotate(360deg); } }

.pulse { animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.offline-bar {
  display: none;
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 55;
  padding: 7px 16px;
  background: var(--warn);
  color: #fff;
  font-size: .81rem;
  text-align: center;
  font-weight: 550;
}
body.is-offline .offline-bar { display: block; }

/* the sync banner on the dashboard */
.notice-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-1);
  margin-bottom: var(--gap);
  font-size: .86rem;
}
.notice-strip__icon {
  width: 34px; height: 34px; border-radius: var(--r);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--ink-50); color: var(--ink-600);
}
.notice-strip__body { flex: 1 1 240px; min-width: 0; }
.notice-strip--warn { border-color: #f0dcb4; background: var(--warn-bg); }
.notice-strip--warn .notice-strip__icon { background: #f8e8c9; color: var(--warn); }

/* --------------------------------------------------------------------------
   18b. The connector portal and the form builder

   Two screens the rest of the system does not have: one where an
   administrator arranges questions, and one where a connector answers them.
   Both reuse the card, field and table components above; what is here is only
   what those two screens genuinely add.
   -------------------------------------------------------------------------- */

/* ---- The builder: one question ---- */
.qfields { display: flex; flex-direction: column; gap: 14px; }

.qfield {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.qfield:focus-within { border-color: var(--ink-400); }

.qfield__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.qfield__grip  { display: inline-flex; color: var(--muted-2); flex: none; }
.qfield__n {
  flex: none;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qfield__title {
  font-weight: 620;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qfield__spacer { flex: 1 1 auto; }
.qfield__body   { padding: 14px 12px; }

.qfields__empty {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
}

/* A heading question, as the connector sees it. */
.qheading {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink-700);
}

/* ---- The portal: a form waiting to be filled in ---- */
.formcard {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.formcard__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 220px;
  min-width: 0;
}

/*
 * The shareable address on a form card. The Copy button is the one button
 * in here that must NOT grow to the full width on a narrow screen - that
 * rule below is meant for the big "Fill Form" action beside the card, and
 * a full-width Copy under the address reads as a second primary action.
 */
.formcard .link-row .btn { width: auto; }

/* ---- Files on a submission ---- */
.filelist { display: flex; flex-wrap: wrap; gap: 8px; }

.filechip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: .82rem;
  text-decoration: none;
}
.filechip:hover { border-color: var(--ink-400); color: var(--ink-600); }
.filechip__name { min-width: 0; font-weight: 560; }
.filechip__size { color: var(--muted-2); font-size: .74rem; flex: none; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.gallery__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--text-2);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.gallery__item:hover img { border-color: var(--ink-400); }
.gallery__caption { font-size: .76rem; color: var(--muted); }

.def--heading .def__label { color: var(--ink-700); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .split, .split--wide, .split--even { grid-template-columns: minmax(0, 1fr); }
  .def { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 991px) {
  :root { --gap: 14px; }

  .topbar__menu { display: inline-grid; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--sh-pop); }
  .sidebar.is-open { transform: none; }
  .main { margin-left: 0; padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 16px) 15px 76px; }

  .hero__divider { border-left: 0; padding-left: 0; }

  /* touch ergonomics: nothing tappable below 40px, no iOS zoom on focus */
  .btn { min-height: 42px; }
  .btn--sm { min-height: 38px; }
  .btn--icon { width: 40px; min-height: 40px; }
  .input, .select, .textarea { font-size: 16px; min-height: 44px; }
  .segmented label { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 15px; }
  .sidebar__link { padding: 11px; }
  .table td, .table th { padding: 12px; }
  .row-check { width: 20px; height: 20px; }

  .flash-stack { left: 12px; right: 12px; width: auto; }
}

@media (max-width: 640px) {
  /* ------------------------------------------------------------------
     Wide tables become cards.

     A connector reads this on a phone, and a seven-column table there is
     a table nobody scrolls sideways through - they simply stop looking.
     Each row becomes one card, each cell keeps its column heading as a
     label, and the sideways scroll disappears rather than being demanded.

     Applied per table with .table--stack, because the office's own
     screens are used on a desk and a real table is better there. Cells
     with no data-label print their value alone, which is how the
     reference and the actions keep their emphasis.
     ------------------------------------------------------------------ */
  .table--stack { min-width: 0; display: block; font-size: .9rem; }
  .table--stack thead { display: none; }
  .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    padding: 11px 13px;
    margin-bottom: 10px;
  }
  .table--stack tr:last-child { margin-bottom: 0; }
  .table--stack td {
    border: 0;
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    white-space: normal;
  }
  .table--stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--muted);
  }
  .table--stack td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .table--stack td:not([data-label])::before { content: none; }
  .table--stack td.actions { justify-content: stretch; padding-top: 9px; }
  .table--stack td.actions .btn { width: 100%; }

  .qfield__bar { flex-wrap: wrap; }
  .qfield__title { flex: 1 1 100%; order: 3; white-space: normal; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .formcard { align-items: stretch; }
  .formcard .btn { width: 100%; }

  body { font-size: 14.5px; }
  h1 { font-size: 1.28rem; }

  /* The strapline is the first thing to go - the mark and name carry the brand. */
  .topbar__sub { display: none; }
  .topbar__title { font-size: .95rem; }
  .topbar { gap: 6px; padding: 0 10px; }

  .main { padding-left: 12px; padding-right: 12px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat__value { font-size: 1.32rem; }

  /* Two across rather than four stacked, so the headline band stays a band. */
  .hero { padding: 15px 14px; border-radius: var(--r-lg); }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .hero__value { font-size: 1.24rem; }
  .hero__label { font-size: .64rem; letter-spacing: .08em; }
  .hero__meta { font-size: .71rem; }
  .card__head, .card__body, .card__foot { padding-left: 14px; padding-right: 14px; }
  .filters { padding: 12px 13px; }
  .filters__row { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
  .def { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
  .def__label { font-size: .77rem; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .pagination { padding: 11px 13px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__box { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; width: 100%; }
  .bulkbar { bottom: 8px; padding: 10px 13px; }
  .auth__card { padding: 24px 20px; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar__username { display: none; }
  .topbar__user { padding: 5px; }
  .btn-group { width: 100%; }
}

@media (max-width: 359px) {
  .topbar__title { display: none; }
  .stats { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; gap: 12px; }
}

/* --------------------------------------------------------------------------
   20. Print - so a report can go straight into a meeting
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .sidebar, .scrim, .filters, .bulkbar, .pagination,
  .page-head__actions, .btn, .flash-stack, .offline-bar { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  .main { margin: 0; padding: 0; max-width: none; }
  .card, .stat { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .table { min-width: 0; font-size: 9.5pt; }
  .table th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hero { background: #fff !important; color: #000; border: 1px solid #ccc; }
  .hero__label, .hero__meta { color: #555; }
  a[href]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}