/* =========================================
   Veterans Data UI — Drop-in Stylesheet (Refactored)
   - Uses .table-wrap for scrolling & chrome
   - No empty strip on right of last <td>
   - Accessible, responsive, print-friendly
   ========================================= */

/* ---------- Theming ---------- */
:root {
  --bg: #f8fafc;
  --fg: #0b1b2b;
  --muted: #5a6b7d;
  --primary: #154c79;
  --primary-contrast: #ffffff;
  --accent: #ab2430;

  --surface: #ffffff;
  --surface-2: #eef2f6;

  --line: #d6dde6;

  --focus: #2f6fad;
  --info: #0b6cbd;
  --success: #206a5d;
  --warn: #8a6d1e;
  --danger: #9b1c1c;

  --font-stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono-stack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --radius: 12px;

  --row-hover: #f2f6fb;
  --row-stripe: #f7f9fc;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1220;
    --fg: #e7edf4;
    --muted: #9fb0c2;
    --primary: #72a7e6;
    --primary-contrast: #0b1422;

    --surface: #121a2a;
    --surface-2: #0f1726;

    --line: #263247;

    --row-hover: #182236;
    --row-stripe: #151f34;

    --shadow-1: none;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 5;
  font-family: var(--font-stack);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

body > :where(header, main, footer, section, article) {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1rem;
}

/* ---------- Headings ---------- */
h1, h2 {
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--fg);
}
h1 {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--line);
}
h2 {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  color: var(--primary);
  margin-top: 1.25rem;
}
h2 + p { margin-top: 0.25rem; color: var(--muted); }

/* ---------- Horizontal Rule ---------- */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 1.25rem 0;
}

/* ---------- Tables (Refactor: wrapper-based) ---------- */

/* The wrapper shrinks to content, up to 100% of its container */
.table-wrap {
  display: block;
  width: fit-content;             /* shrink-to-fit content width */
  max-width: 100%;                /* never exceed container width */
  overflow-x: auto;               /* scroll only when needed */
  -webkit-overflow-scrolling: touch;

  margin: 0.75rem 0 1rem;      /* center the table block; change to 0 for left-align */
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Optional: if you want a visual caption bar above the table inside the wrapper */
.table-wrap .table-caption {
  font-weight: 600;
  padding: 0.75rem 1rem;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* Natural table width (no forced 100%) */
.table-wrap table {
  width: auto;                    /* don’t stretch */
  min-width: max-content;         /* ensure columns don’t squish */
  border-collapse: collapse;
  background: transparent;
}

/* If you use <caption>, style it cleanly (it remains part of the table flow) */
caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 1rem;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* Header */
thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
thead th {
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
  padding: 0.75rem 1rem;
  white-space: nowrap;
  position: sticky;  /* works within .table-wrap overflow container */
  top: 0;
  z-index: 1;
}

/* Body cells */
tbody td, tbody th {
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg);
}
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th {
  background: var(--row-stripe);
}
tbody tr:hover td,
tbody tr:hover th {
  background: var(--row-hover);
}

/* Row header emphasis */
tbody th[scope="row"] { font-weight: 600; color: var(--primary); }

/* Numeric alignment helpers */
td[data-type="number"],
th[data-type="number"],
td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status row helpers */
tr.is-success > * { background: color-mix(in oklab, var(--success) 12%, transparent); }
tr.is-warning > * { background: color-mix(in oklab, var(--warn) 16%, transparent); }
tr.is-danger  > * { background: color-mix(in oklab, var(--danger) 14%, transparent); }
tr.is-info    > * { background: color-mix(in oklab, var(--info) 12%, transparent); }

/* Narrow screens: optional stacked labels via data-label */
@media (max-width: 520px) {
  .table-wrap table { font-size: 0.95rem; }
  tbody td[data-label]::before {
    content: attr(data-label) "  ";
    font-weight: 600;
    color: var(--muted);
    display: inline-block;
    min-width: 7.5rem;
  }
}

/* ---------- Utility Classes ---------- */
.table--compact tbody td,
.table--compact tbody th { padding: 0.45rem 0.75rem; }

.table--bordered td,
.table--bordered th { border: 1px solid var(--line); }

.table--center td, .table--center th { text-align: center; }

.mono { font-family: var(--mono-stack); font-variant-numeric: tabular-nums; }

/* ---------- Print Styles ---------- */
@media print {
  :root {
    --bg: #ffffff;
    --fg: #000000;
    --line: #00000022;
    --surface: #ffffff;
    --surface-2: #f5f5f5;
  }
  body { background: #fff; }
  a { text-decoration: underline; }

  /* Flatten wrapper chrome for print */
  .table-wrap {
    overflow: visible !important;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--line);
    background: #fff;
  }

  /* Keep table full width in print */
  .table-wrap table {
    min-width: 100% !important;
    width: 100% !important;
  }

  thead th { position: static; }
  hr { background: #000; }
}