/* DA Insured — Expenses · app chrome.
 *
 * Every colour, font, radius, shadow and spacing value comes from
 * brand/colors_and_type.css (the canonical design-system tokens, copied in
 * unmodified). Nothing is redeclared here — if the brand changes, replacing
 * that one file updates this app.
 *
 * Deliberate deviation from the internal-app kit: the kit's AppShell puts a
 * dark-blue sidebar around a dense operational console. This tool has three
 * sections and four users, so it keeps a centred page with a tab bar; the
 * chrome, type, spacing and components are otherwise the kit's.
 */

/* Accessibility overrides on top of the kit.
 * --muted-foreground (#6b7280) clears 4.5:1 on white but only reaches 4.12:1
 * on the --muted page background, and several kit values are borderline at
 * badge sizes. These darker variants stay inside the brand's own palette
 * (they are the kit's neutral/badge foregrounds) and are used only where the
 * measured ratio would otherwise fail AA. */
:root {
  --muted-on-page: #4A5468;   /* kit .da-badge--neutral foreground — 7.0:1 on --muted */
  --pending-fg: #8A5A08;      /* darkened from #A86E0B (3.91:1) → 5.4:1 */
  --requested-fg: #0A6660;    /* darkened from #0D8078 (4.37:1) → 6.2:1 */
  /* Bright Blue reaches only 4.14:1 against white, so it cannot carry
     body-size text. Interactive text uses the kit's darker blues instead;
     Bright Blue is kept for borders, the active tab underline and the column
     separators, where it is decoration rather than text. */
  --link-fg: var(--medium-blue);            /* #183087 — 10.4:1 on white */
  --btn-primary-rest: var(--btn-primary-hover); /* #1f5ee0 — 5.6:1 with white */
  --btn-primary-active: var(--medium-blue);
  --danger-fg: #B23342;       /* kit .da-badge--expired foreground — 6.1:1 on white
                                 (--danger #e05263 is only 3.78:1 as text) */
}

/* ── Layout ───────────────────────────────────────────────────────────── */
body { background: var(--muted); }
#app { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-lg) var(--container-padding-mobile) var(--spacing-3xl); }
@media (min-width: 768px) { #app { padding-left: var(--container-padding); padding-right: var(--container-padding); } }

.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-md); flex-wrap: wrap; }
.brandmark { display: flex; align-items: center; gap: var(--spacing-md); }
.brandmark img { height: 32px; width: auto; display: block; }
/* Column separator, not a box — the brand's heading treatment. */
.page-head { border-left: var(--border-width-thick) solid var(--bright-blue); padding-left: var(--spacing-md); }
.eyebrow { font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--medium-blue); }
h1.title { font: 800 32px/1.2 var(--font-display); color: var(--dark-blue); margin: var(--spacing-xs) 0 0; letter-spacing: -0.01em; }
.who { font: 400 13px/1.5 var(--font-body); color: var(--muted-on-page); text-align: right; }
/* Below the two-column breakpoint the identity block drops under the wordmark
   rather than squeezing against it. */
@media (max-width: 719px) {
  .topbar { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); }
  .who { text-align: left; }
  .who strong { display: inline; }
}
.who strong { display: block; font-weight: 600; color: var(--dark-blue); }
.who a { color: var(--link-fg); text-decoration: none; }
.who a:hover { text-decoration: underline; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--spacing-xs); margin: var(--spacing-lg) 0; border-bottom: var(--border-width) solid var(--panel-border); overflow-x: auto; }
.tab-btn { font: 600 14px/1.4 var(--font-body); color: var(--muted-on-page); background: none; border: none;
  padding: var(--spacing-md); cursor: pointer; border-bottom: var(--border-width-thick) solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab-btn:hover { color: var(--dark-blue); }
/* Label takes the darker blue for contrast; the underline stays Bright Blue,
   where it is decoration rather than text. */
.tab-btn[aria-current="page"] { color: var(--link-fg); border-bottom-color: var(--bright-blue); }

/* ── Cards & sections ─────────────────────────────────────────────────── */
.card { background: var(--panel-bg); border: var(--border-width) solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.section-title { font: 600 18px/1.35 var(--font-display); color: var(--dark-blue); margin: 0;
  border-left: var(--border-width-thick) solid var(--bright-blue); padding-left: var(--spacing-md); }
.section-title--turquoise { border-left-color: var(--turquoise); }

/* ── Forms ────────────────────────────────────────────────────────────── */
/* Single column by default; two only when there is genuinely room, so inputs
   are never clipped on a phone. */
.grid2 { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: var(--spacing-md); min-width: 0; }
/* The grid owns the rhythm between its own children; a nested grid is itself a
   grid child, so it must not add a second margin. */
.grid2 > .field, .grid2 .grid2 { margin-bottom: 0; }
label { display: block; font: 600 12px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--dark-blue); margin-bottom: 6px; }
label .req { color: var(--danger-fg); margin-left: var(--spacing-xs); }
input, select, textarea { width: 100%; font: 400 14px/1.6 var(--font-body); color: var(--foreground); background: var(--panel-bg);
  border: var(--border-width) solid var(--input-border); border-radius: var(--radius); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--turquoise); box-shadow: var(--input-focus-shadow); }
textarea { resize: vertical; min-height: 72px; }
input[type="file"] { padding: 8px 12px; }
.field-hint { font: 400 12px/1.5 var(--font-body); color: var(--muted-foreground); margin-top: var(--spacing-xs); }
/* Inline, per-field error text — sits next to the input it belongs to. */
.field-error { font: 500 12px/1.5 var(--font-body); color: var(--danger-fg); margin-top: var(--spacing-xs); }
[aria-invalid="true"] { border-color: var(--danger); }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(224,82,99,.28); }

/* Checkbox: WCAG 2.2 target size, and big enough to hit on a phone. */
input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; margin: 0; accent-color: var(--bright-blue); cursor: pointer; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
  font: 600 14px/1.5 var(--font-body); color: var(--white); background: var(--btn-primary-rest);
  border: var(--border-width) solid var(--btn-primary-rest); border-radius: var(--radius); padding: 10px 20px;
  min-height: 40px; cursor: pointer; text-decoration: none;
  transition: background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease); }
.btn:hover { background: var(--btn-primary-active); border-color: var(--btn-primary-active); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--sm { padding: 6px 12px; font-size: 12px; min-height: 32px; }
.btn--secondary { background: transparent; color: var(--medium-blue); border-color: var(--medium-blue); }
.btn--secondary:hover { background: var(--medium-blue); color: var(--white); }
/* Border keeps brand --danger; the label and the hover fill use the darker
   red so the text clears 4.5:1 in both states. */
.btn--danger { background: var(--panel-bg); color: var(--danger-fg); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-fg); color: var(--white); border-color: var(--danger-fg); }
.btn__spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

/* One brand focus ring on every interactive element, keyboard only. */
.btn:focus-visible, .tab-btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [type="checkbox"]:focus-visible, summary:focus-visible {
  outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: 2px; }

/* ── Tables ───────────────────────────────────────────────────────────── */
/* Wrapper scrolls the table instead of the page — no horizontal page scroll. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: var(--panel-bg); }
/* Give the table a floor so columns are never crushed to unreadable widths —
   the wrapper scrolls instead, which keeps the page itself scroll-free. */
.table-wrap > table { min-width: 620px; }
.table-wrap > table.table--wide { min-width: 880px; }
th { text-align: left; font: 600 11px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .05em;
  color: var(--dark-blue); background: var(--table-header-bg); padding: 12px var(--spacing-md);
  border-bottom: var(--border-width) solid var(--panel-border); white-space: nowrap; }
td { font: 400 14px/1.6 var(--font-body); padding: 12px var(--spacing-md);
  border-bottom: var(--border-width) solid var(--panel-border); vertical-align: top; }
td .btn-row { flex-wrap: nowrap; }

/* On the review queue the decision buttons are the whole point of the screen,
   so pin that column: the rest of the row can scroll under it, but Approve and
   Reject stay reachable without scrolling first. */
.table--wide th:last-child, .table--wide td:last-child {
  position: sticky; right: 0; background: var(--panel-bg);
  box-shadow: -8px 0 12px -8px rgba(15,23,42,.18); }
.table--wide thead th:last-child { background: var(--table-header-bg); }
/* A sticky cell cannot use the translucent row-hover tint (the scrolling row
   would show through), so it takes the opaque brand surface instead. */
.table--wide tbody tr:hover td:last-child { background: var(--table-header-bg); }
tbody tr:hover td { background: var(--table-row-hover); }
td.num, th.num { text-align: right; }
/* Every identifier, amount and date in IBM Plex Mono — brand rule. */
.mono { font-family: var(--font-mono); font-weight: 400; color: var(--medium-blue); white-space: nowrap; }
/* Identifiers must never be broken across lines — a wrapped claim reference
   is unreadable and un-copyable. */
.claim-id { font: 400 12px/1.5 var(--font-mono); color: var(--medium-blue); white-space: nowrap; }
.cell-note { font: 400 12px/1.5 var(--font-body); color: var(--muted-foreground); margin-top: var(--spacing-xs); }

/* ── Badges ───────────────────────────────────────────────────────────── */
/* Statuses reuse the kit's .da-badge classes so the colours live in one place.
   Only "requested" needs a local rule — the kit has no turquoise variant. */
.da-badge { white-space: nowrap; }
.badge--requested { background: rgba(33,216,202,.14); color: var(--requested-fg); }
.da-badge--pending { color: var(--pending-fg); }

/* ── Notices, empties, totals ─────────────────────────────────────────── */
.empty { text-align: center; padding: var(--spacing-xl) var(--spacing-md); color: var(--muted-foreground); font-size: 14px; }
.notice { border-left: var(--border-width-thick) solid var(--info); background: rgba(75,163,255,.08);
  border-radius: var(--radius); padding: var(--spacing-md); font: 400 13px/1.6 var(--font-body);
  color: var(--medium-blue); margin-bottom: var(--spacing-md); }
/* Text colours match the kit's pending / expired badge foregrounds so warnings
   and errors read the same everywhere in the brand. */
.notice--warn { border-left-color: var(--warning); background: rgba(255,181,69,.10); color: var(--pending-fg); }
.notice--error { border-left-color: var(--danger); background: rgba(224,82,99,.08); color: #B23342; }
.notice__title { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); }
.notice__dismiss { background: none; border: none; color: inherit; font: 600 12px var(--font-body);
  text-decoration: underline; cursor: pointer; padding: 0; margin-top: var(--spacing-sm); }

.select-row { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.totals-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md);
  flex-wrap: wrap; margin-top: var(--spacing-md); padding-top: var(--spacing-md);
  border-top: var(--border-width) solid var(--panel-border); }
.totals-bar .stat { font: 500 24px/1.2 var(--font-mono); color: var(--dark-blue); letter-spacing: -0.01em; }
.totals-bar .stat-label { font: 400 13px/1.5 var(--font-body); color: var(--muted-foreground); }

/* ── Toasts ───────────────────────────────────────────────────────────── */
.toast-region { position: fixed; bottom: var(--spacing-lg); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: center;
  z-index: 999; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
.toast { background: var(--dark-blue); color: var(--white); padding: 12px var(--spacing-md);
  border-radius: var(--radius); font: 500 13px/1.5 var(--font-body); box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(4px); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.toast--error { background: var(--danger-fg); }
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .btn__spinner { animation-duration: 2s; }
  .btn { transition: none; }
}

.da-link { color: var(--link-fg); }

.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; }

/* ── Modal (native <dialog>, brand-styled) ────────────────────────────── */
.modal { border: var(--border-width) solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card); padding: 0; background: var(--panel-bg); color: var(--foreground);
  width: min(520px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(38,34,97,.42); }
.modal__form { padding: var(--spacing-lg); margin: 0; }
.modal__title { font: 700 22px/1.3 var(--font-display); color: var(--dark-blue); margin: 0 0 var(--spacing-md);
  border-left: var(--border-width-thick) solid var(--bright-blue); padding-left: var(--spacing-md); }
.modal__body { font: 400 14px/1.7 var(--font-body); color: var(--foreground); }
.modal__body p { margin: 0 0 var(--spacing-sm); }
.modal__body p:last-child { margin-bottom: 0; }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm);
  margin-top: var(--spacing-lg); flex-wrap: wrap; }

/* ── Sign-in splash (public, pre-authentication) ──────────────────────────
 * Same composition as reports.dainsured.tech: dark-blue hero carrying the
 * brand's 10° pattern on the left, sign-in card on the right. The pattern is
 * used here and nowhere else in the app — it is a hero/cover motif, not
 * chrome. */
.login { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.hero { position: relative; background: var(--dark-blue); color: var(--white);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 56px 40px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: url('/brand/assets/pattern-brand-dark.png') center/cover no-repeat; opacity: .5; }
.hero > * { position: relative; z-index: 1; }
.hero-logo { height: 40px; width: auto; }
.hero h1 { font: 800 44px/1.15 var(--font-display); letter-spacing: -0.01em;
  margin: 0 0 18px; color: var(--white); max-width: 16ch; }
.hero .lead { font: 400 18px/1.6 var(--font-body); color: rgba(255,255,255,.82);
  max-width: 46ch; margin: 0 0 32px; }
.cues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cues li { display: flex; gap: 12px; align-items: flex-start;
  font: 500 15px/1.45 var(--font-body); color: rgba(255,255,255,.92); }
.cues li svg { flex: none; margin-top: 1px; }
.hero-foot { font: 400 12px/1.4 var(--font-mono); color: rgba(255,255,255,.62); letter-spacing: .04em; }
.panel { display: flex; align-items: center; justify-content: center;
  background: var(--background); padding: var(--spacing-xl); }
.login .card { width: 380px; max-width: 90%; text-align: center; }
.login .card img { height: 38px; margin-bottom: var(--spacing-lg); }
.login .card .da-card { padding: var(--spacing-2xl); }
.login .card .btn { width: 100%; }
@media (max-width: 880px) {
  .login { grid-template-columns: 1fr; }
  .hero { display: none; }
  .panel { background: var(--muted); }
}
.spinner--inline { display: inline-block; vertical-align: -2px; margin-right: var(--spacing-sm); }
.cell-note--ok { color: var(--requested-fg); }