/* Crew Mobility Smart — design system. Plain hand-written CSS, no build step.
   One file, custom properties for tokens, semantic component classes only. */

/* ---------- Tokens ---------- */
:root {
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-border: #bbf7d0;
  --color-success-solid: #16a34a;
  --color-success-solid-hover: #15803d;

  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-border: #fde68a;
  --color-warning-solid: #d97706;
  --color-warning-solid-hover: #b45309;

  --color-danger-bg: #fee2e2;
  --color-danger-text: #991b1b;
  --color-danger-border: #fecaca;
  --color-danger-solid: #dc2626;
  --color-danger-solid-hover: #b91c1c;

  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;
  --color-info-border: #bfdbfe;

  --color-neutral-bg: #f1f5f9;
  --color-neutral-text: #475569;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);

  --content-max: 1100px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); color: var(--color-gray-900); background: var(--color-gray-50); }
body { margin: 0; min-height: 100vh; background: var(--color-gray-50); color: var(--color-gray-900); font-size: 14px; line-height: 1.5; }
h1, h2, h3 { color: var(--color-gray-900); margin: 0; font-weight: 600; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1rem; }
h3 { font-size: .9375rem; }
p { margin: 0; }
a { color: var(--color-primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; padding-left: 0; margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:focus-visible { outline: 3px solid var(--color-primary-200); outline-offset: 1px; border-radius: var(--radius-sm); }

/* ---------- Layout ---------- */
.app-content { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px; }

.topbar { background: #fff; border-bottom: 1px solid var(--color-gray-200); box-shadow: var(--shadow-sm); }
.topbar-inner { display: flex; align-items: center; gap: 28px; padding: 14px 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-gray-900); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-primary-600); color: #fff; font-size: .8125rem; font-weight: 700;
}
.brand-name { font-size: .9375rem; }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link {
  padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 500;
  color: var(--color-gray-600); font-size: .875rem;
}
.nav-link:hover { color: var(--color-gray-900); background: var(--color-gray-100); text-decoration: none; }
.nav-link.active { color: var(--color-primary-700); background: var(--color-primary-50); }
.user-area { display: flex; align-items: center; gap: 12px; }
.user-name { font-size: .8125rem; color: var(--color-gray-600); }

.page { display: flex; flex-direction: column; gap: 20px; }
.page-narrow { max-width: 640px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header h1 { margin: 0; }
.page-subtitle { margin-top: 4px; color: var(--color-gray-500); font-size: .875rem; }
.back-link { display: inline-block; font-size: .8125rem; color: var(--color-gray-500); }
.back-link:hover { color: var(--color-primary-700); }

.section { display: flex; flex-direction: column; gap: 12px; }
.section-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-gray-500); }

/* ---------- Messages / alerts ---------- */
.messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-radius: var(--radius-md); font-size: .875rem; border: 1px solid transparent;
}
.alert-close {
  border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
  color: inherit; opacity: .6; padding: 0 2px;
}
.alert-close:hover { opacity: 1; }
.alert-success, .alert-info.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.alert-error, .alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.alert-info, .alert-debug { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-weight: 500; font-size: .875rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: 6px 11px; font-size: .8125rem; }

.btn-primary { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-800); }

.btn-secondary { background: #fff; border-color: var(--color-gray-300); color: var(--color-gray-700); }
.btn-secondary:hover:not(:disabled) { background: var(--color-gray-50); border-color: var(--color-gray-400); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-gray-600); }
.btn-ghost:hover:not(:disabled) { background: var(--color-gray-100); color: var(--color-gray-900); }

.btn-danger { background: #fff; border-color: var(--color-danger-border); color: var(--color-danger-solid); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-bg); border-color: var(--color-danger-solid); }

.btn-link { background: transparent; border: none; padding: 0; color: var(--color-primary-700); font-weight: 500; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-label { font-size: .8125rem; font-weight: 500; color: var(--color-gray-600); }
.toolbar-search { min-width: 260px; }

/* ---------- Forms ---------- */
form { color: inherit; }
label, .field-label { display: block; font-size: .8125rem; font-weight: 500; color: var(--color-gray-700); margin-bottom: 4px; }
select, input, textarea {
  font: inherit; font-size: .875rem; width: 100%;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm);
  background: #fff; padding: 9px 11px; color: var(--color-gray-900);
}
textarea { resize: vertical; min-height: 72px; }
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
input[type="checkbox"], input[type="radio"] { width: auto; }
.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field label { margin-bottom: 0; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-help { font-size: .75rem; color: var(--color-gray-400); }
.field-error { font-size: .75rem; color: var(--color-danger-solid); }
.form-errors {
  border: 1px solid var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: .8125rem; margin-bottom: 14px;
}

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

/* ---------- Card ---------- */
.card { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-gray-200); }
.card-title { font-size: .9375rem; font-weight: 600; }
.card-body { padding: 18px 20px; }
.card-section { padding: 14px 20px; border-bottom: 1px solid var(--color-gray-100); }
.card-section:last-child { border-bottom: none; }
.card-section-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-gray-500); margin-bottom: 8px; }
.card-list { display: flex; flex-direction: column; }
.card-list > * { padding: 12px 20px; border-bottom: 1px solid var(--color-gray-100); }
.card-list > *:last-child { border-bottom: none; }
.card-grid { display: grid; gap: 20px; grid-template-columns: 2fr 1fr; align-items: start; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: .8125rem; }
.card table, .table-wrap table { border: none; }
table:not(.card table):not(.table-wrap table) { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--color-gray-100); vertical-align: top; }
th { background: var(--color-gray-50); color: var(--color-gray-500); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-gray-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.muted { color: var(--color-gray-500); }
.row-link { font-weight: 500; color: var(--color-primary-700); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-full);
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.6;
  background: var(--color-neutral-bg); color: var(--color-neutral-text);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.badge-dot-danger { background: var(--color-danger-solid); }
.badge-dot-warning { background: var(--color-warning-solid); }
.badge-dot-info { background: #3b82f6; }

/* ---------- Service state (M3-A) ----------
   The five states a leg can be decided into (apps/ops/models.py
   ServiceState). Every value below was checked against its paired text
   color for WCAG AA (>= 4.5:1) before being committed — see the M3-A
   report. Applied directly as background/color, not through a class that
   only carries a semantic name, so getComputedStyle reads real paint. */
.cell-planned      { background: #dcfce7; color: #14532d; }
.cell-no_service   { background: #e2e8f0; color: #334155; }
.cell-not_required { background: #dbeafe; color: #1e3a8a; }
.cell-on_arrival   { background: #ede9fe; color: #5b21b6; }
.cell-pending      { background: #fef3c7; color: #78350f; }

/* ---------- Empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.empty-state-title { font-weight: 500; color: var(--color-gray-700); }
.empty-state-body { color: var(--color-gray-500); font-size: .8125rem; }
.empty-state .btn { margin-top: 8px; }

/* ---------- Layer cell (planned / confirmed / actual) ---------- */
.layer-cell { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; }
.layer-row { display: flex; align-items: baseline; gap: 6px; }
.layer-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-gray-400); min-width: 64px; }
.layer-value { color: var(--color-gray-900); }
.layer-value.muted { color: var(--color-gray-400); }
.layer-confirmed { color: var(--color-primary-700); }
.layer-unconfirmed { color: var(--color-warning-solid); font-weight: 500; }
.layer-by { color: var(--color-gray-400); font-size: .75rem; }

/* ---------- Auth screens (login / select org) ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-gray-50); padding: 24px; }
.auth-card { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-card h1 { font-size: 1.125rem; margin-bottom: 20px; }
.auth-error { color: var(--color-danger-solid); font-size: .8125rem; margin-bottom: 16px; }
.org-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--color-gray-100);
  font-size: .875rem; cursor: pointer;
}
.org-option:last-of-type { border-bottom: none; }
.org-role { color: var(--color-gray-400); font-size: .8125rem; }

/* ---------- Duplicate warning ---------- */
.notice { border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; }
.notice-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }
.notice-info { background: var(--color-info-bg); border: 1px solid var(--color-info-border); color: var(--color-info-text); }
.notice-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); }
.notice-title { font-size: .875rem; font-weight: 600; color: var(--color-warning-text); }
.notice-list { margin-top: 8px; font-size: .8125rem; display: flex; flex-direction: column; gap: 4px; }
.notice-warning .notice-list { color: var(--color-warning-text); }
.notice-info .notice-list { color: inherit; }
.notice p { margin: 0; font-size: .8125rem; }
.notice-value { font-weight: 600; font-size: 1.0625rem; margin-top: 2px; }

/* ---------- Alerts (list page) ---------- */
.severity-group { display: flex; flex-direction: column; gap: 12px; }
.severity-heading { display: flex; align-items: center; gap: 8px; }
.severity-heading h2 { font-size: 1rem; }
.severity-count { color: var(--color-gray-400); font-size: .8125rem; }
.alert-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 16px;
}
.alert-card.is-resolved { opacity: .6; }
.alert-card-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.alert-card-detail { color: var(--color-gray-600); font-size: .8125rem; margin-top: 4px; }
.alert-card-action { color: var(--color-primary-700); font-size: .8125rem; margin-top: 6px; font-weight: 500; }
.alert-card-meta { color: var(--color-gray-400); font-size: .75rem; margin-top: 8px; }
.alert-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
.all-clear { text-align: center; padding: 40px 20px; background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: var(--radius-lg); }
.all-clear-title { color: var(--color-success-text); font-weight: 600; }
.all-clear-body { color: var(--color-success-text); font-size: .8125rem; margin-top: 4px; }

/* ---------- Filings ---------- */
.filing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; }
.filing-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--color-gray-400); }
.filing-subject { font-weight: 500; }
.filing-status { text-transform: none; }
.filing-status--draft, .filing-status--ready { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.filing-status--submitted { background: var(--color-info-bg); color: var(--color-info-text); }
.filing-status--accepted { background: var(--color-success-bg); color: var(--color-success-text); }
.filing-status--rejected { background: var(--color-danger-bg); color: var(--color-danger-text); }
.filing-meta { color: var(--color-gray-400); font-size: .75rem; }
.filing-actions { display: flex; align-items: center; gap: 8px; }
.filing-actions form { display: flex; align-items: center; gap: 6px; }
.filing-actions input { width: 150px; }
.filing-reference { color: var(--color-success-text); font-size: .75rem; }

/* ---------- Review queue / ingest ---------- */
.doc-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 14px 16px;
}
.doc-title { font-weight: 500; }
.doc-meta { color: var(--color-gray-500); font-size: .8125rem; margin-top: 2px; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }

.extraction-card { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 14px 16px; }
.extraction-row-label { font-weight: 600; margin-bottom: 8px; font-size: .8125rem; }
.extraction-fields { background: var(--color-gray-50); border-radius: var(--radius-sm); padding: 10px 12px; font-size: .8125rem; display: flex; flex-direction: column; gap: 4px; }
.extraction-confidence { color: var(--color-gray-400); font-size: .75rem; }

/* ---------- Grants / QR ---------- */
.grant-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.grant-success-title { color: var(--color-success-text); font-weight: 600; font-size: 1rem; }
.grant-box { background: #fff; border: 1px solid var(--color-success-border); border-radius: var(--radius-md); padding: 14px; }
.grant-box-label { color: var(--color-gray-500); font-size: .8125rem; margin-bottom: 6px; }
.grant-code { display: block; background: var(--color-gray-100); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .75rem; word-break: break-all; }
.qr-frame { display: flex; justify-content: center; padding: 16px; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); }
.qr-placeholder { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--color-gray-400); background: var(--color-gray-50); border-radius: var(--radius-sm); }

/* ---------- Modal container (hidden by default; opened via HTMX content) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-backdrop.hidden { display: none; }
.modal-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-width: 480px; width: 100%; padding: 20px; max-height: 90vh; overflow-y: auto; }

/* ---------- Utility (small, closed set) ---------- */
.hidden { display: none !important; }
.text-muted { color: var(--color-gray-500); }
.mt-1 { margin-top: 4px; }

/* ---------- External portal (/s/<token>/) — unauthenticated, mobile-first,
   standalone documents: no topbar/nav, just the brand mark up top. ---------- */
.portal-shell { min-height: 100vh; background: var(--color-gray-50); }
.portal-header { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; background: #fff; border-bottom: 1px solid var(--color-gray-200); }
.portal-main { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 18px; }
.portal-main-narrow { max-width: 420px; }
.portal-title { margin: 0; }
.portal-subtitle { color: var(--color-gray-500); font-size: .875rem; margin-top: 2px; }

.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stat-tile { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 14px 16px; text-align: center; }
.stat-tile-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-gray-500); }
.stat-tile-value { font-size: 1.375rem; font-weight: 700; color: var(--color-gray-900); margin-top: 4px; }

.mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
.mobile-card { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 12px 14px; font-size: .8125rem; }
.mobile-card-title { font-weight: 600; color: var(--color-gray-900); }
.mobile-card-meta { color: var(--color-gray-500); font-size: .75rem; margin-top: 2px; }

.result-card { text-align: center; }
.result-icon { font-size: 2.25rem; margin-bottom: 8px; }

.radio-field { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .875rem; font-weight: 400; }
.btn-block { width: 100%; }
.form-actions-fill > * { flex: 1; text-align: center; }
fieldset.field { border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); padding: 12px; margin: 0 0 14px; }
fieldset.field legend { padding: 0 4px; }

/* ---------- Recalada grid (M3-A) ---------- */
.recalada-grid { min-width: 100%; }
.recalada-grid .band-row th { background: var(--color-gray-100); text-align: center; }
.recalada-grid .role-row th { text-align: center; }
.recalada-cell { text-align: center; font-weight: 500; white-space: nowrap; }
.recalada-no-role { text-align: center; }
.recalada-no-role .muted { font-size: .6875rem; color: var(--color-gray-500); margin-top: 2px; white-space: normal; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .app-content { padding: 16px; }
  .topbar-inner { flex-wrap: wrap; padding: 12px 16px; }
  .nav { order: 3; width: 100%; }
  .page-header { flex-direction: column; align-items: stretch; }
  .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  table { font-size: .8125rem; }
  th, td { padding: 9px 10px; }
  .toolbar, .toolbar-form { flex-direction: column; align-items: stretch; }
  .toolbar-search { min-width: 0; }
}