/* =========================================================================
   Outlaid.ai — Design Tokens
   Single source of truth. Change a value here to re-theme the whole app.
   See docs/Design-System.md for the catalog and convergence notes.

   Fully token-driven. The scales are converged: spacing is on a 4px grid,
   font sizes are even-only, and there are no near-duplicate tokens.
   ========================================================================= */
:root {
  /* ---- Color: brand & base -------------------------------------------- */
  --bg: #f6f7f9;            /* page background */
  --card: #ffffff;          /* white surface fill (cards, modals, panels) */
  --ink: #1c1e21;           /* primary body text */
  --muted: #6b7280;         /* secondary / helper text */
  --accent: #85DAEF;        /* primary brand fill */
  --accent-ink: #00404F;    /* text/icon on the accent fill */
  --brand-dark: #00404F;    /* titles, links, active states on white */
  --border: #e5e7eb;        /* hairline borders, dividers */
  --on-color: #ffffff;      /* text/icon on a colored fill (avatar, generate) */

  /* ---- Color: danger --------------------------------------------------- */
  --danger: #cc0000;
  --danger-bg: #fff5f5;     /* danger button hover */
  --danger-border: #f3c2c2; /* danger-zone outline */

  /* ---- Color: success / connected ------------------------------------- */
  --success: #16a34a;       /* matched text, generate button */
  --success-ink: #1b7a3d;   /* ok banner text, connected cell */
  --success-ink-soft: #2f6b46;
  --success-bg: #eaf7ee;
  --success-border: #b7e4c7;

  /* ---- Color: warning -------------------------------------------------- */
  --warn-ink: #8a6d1b;
  --warn-bg: #fdf6e3;
  --warn-border: #f0d98c;

  /* ---- Color: neutral surfaces & states ------------------------------- */
  --surface-thead: #fafbfc;     /* table header */
  --surface-hover: #f3f7f8;     /* hover: rows, ghost, dropdown, account */
  --surface-pill: #eef1f5;      /* step-badge, tag */
  --accent-tint: #eaf7fb;       /* selected row, bulk bar */

  /* ---- Scrims (overlay backdrops) ------------------------------------- */
  --scrim: rgba(0, 0, 0, 0.25);
  --scrim-strong: rgba(0, 0, 0, 0.3);

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.1);   /* receipt image */
  --shadow-sm: 0 6px 30px rgba(0, 0, 0, 0.06);  /* auth box */
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);   /* dropdown menu */
  --shadow-panel: -6px 0 30px rgba(0, 0, 0, 0.12); /* side panel */
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);  /* modal */

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Even-only type scale. */
  --fs-10: 10px;  /* tags */
  --fs-12: 12px;  /* small UI text: labels, status, dropdown/modal items */
  --fs-14: 14px;  /* body default */
  --fs-16: 16px;  /* emphasis, card/section headings, primary buttons */
  --fs-18: 18px;  /* sub-headings */
  --fs-22: 22px;  /* page / auth title */

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing (4px grid) ---------------------------------------------- */
  /* Sub-4px optical paddings (1/2/3px) remain inline literals at their call
     sites — they're alignment fine-tuning, not layout spacing. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-sm: 6px;     /* inputs, selects, small fields */
  --radius-md: 8px;     /* buttons, banners */
  --radius-lg: 10px;    /* cards, report table */
  --radius-xl: 12px;    /* auth box, modal, empty state */
  --radius-pill: 999px; /* tags, step badge */
  --radius-full: 50%;   /* avatar */

  /* ---- Layout constants ------------------------------------------------ */
  --control-h: 38px;    /* buttons, toolbar controls, .btn links */
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: var(--space-24);
  font-family: var(--font-sans);
  background: var(--bg); color: var(--ink);
}
header h1 { margin: 0 0 var(--space-4); color: var(--brand-dark); }
.sub { color: var(--muted); margin: 0 0 var(--space-20); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; margin-bottom: var(--space-16); }
button, .upload {
  background: var(--accent); color: var(--accent-ink); border: none;
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-md); font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer;
}
button:hover, .upload:hover { filter: brightness(1.05); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.upload { display: inline-block; }

.status { color: var(--muted); font-size: var(--fs-12); margin-left: var(--space-8); }

.meta-row {
  display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  padding: var(--space-12); border-radius: var(--radius-md); margin-bottom: var(--space-16);
}
.meta-row input { padding: var(--space-8) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.meta-row small { color: var(--muted); }

.links { margin-bottom: var(--space-16); }
.links a { margin-right: var(--space-16); color: var(--brand-dark); font-weight: var(--fw-semibold); }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius-md); overflow: hidden; }
th, td { text-align: left; padding: var(--space-12) var(--space-12); border-bottom: 1px solid var(--border); font-size: var(--fs-14); }
th { background: var(--surface-thead); font-weight: var(--fw-semibold); }
.num { text-align: right; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: var(--space-32); }
.missing { color: var(--danger); }
.matched { color: var(--success); }
.hidden { display: none !important; }

select { padding: var(--space-4) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Nav tabs */
.tabs { display: flex; gap: var(--space-8); margin-bottom: var(--space-20); border-bottom: 1px solid var(--border); }
.tabs a {
  padding: var(--space-8) var(--space-16); text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; font-size: var(--fs-14); font-weight: var(--fw-medium);
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* Filter row */
.filter-row { margin-bottom: var(--space-12); font-size: var(--fs-14); color: var(--muted); }
.filter-row select { margin-left: var(--space-4); }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-20); margin-bottom: var(--space-16);
}
.card h2 { margin: 0 0 var(--space-12); font-size: var(--fs-16); color: var(--brand-dark); }

.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-12); margin-bottom: var(--space-16);
}
.form-grid label { display: flex; flex-direction: column; font-size: var(--fs-12); color: var(--muted); gap: var(--space-4); }
.form-grid input, .form-grid select {
  padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-14); color: var(--ink);
}

/* Destructive = red outline + red bold text (not a filled red block) */
button.danger { background: var(--card); color: var(--danger); border: 1px solid var(--danger); font-weight: var(--fw-bold); }
button.danger:hover { background: var(--danger-bg); filter: none; }
button.sm { padding: var(--space-4) var(--space-12); font-size: var(--fs-12); }
button.generate { background: var(--success); color: var(--on-color); }

table.mini { margin-top: var(--space-12); }

/* Trips */
.trip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); }
.trip-head h2 { margin: 0; }
.trip-actions { display: flex; gap: var(--space-8); flex-shrink: 0; }
.report-list { list-style: none; padding: 0; margin: var(--space-12) 0 0; }
.report-list li {
  display: flex; align-items: center; gap: var(--space-16); padding: var(--space-8) 0;
  border-top: 1px solid var(--border); font-size: var(--fs-14);
}
.report-list li span { color: var(--muted); flex: 1; }
.report-list a { color: var(--brand-dark); font-weight: var(--fw-semibold); }

/* Nav user / logout */
.nav-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-12); font-size: var(--fs-14); color: var(--muted); padding: var(--space-8) var(--space-4); }
.nav-user a { color: var(--brand-dark); text-decoration: none; }
.tabs { align-items: center; }

/* Auth page */
.auth-page { display: flex; justify-content: center; align-items: flex-start; padding-top: 8vh; }
.auth-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-28); width: 360px; max-width: 90vw; box-shadow: var(--shadow-sm);
}
.auth-box h1 { margin: 0 0 var(--space-20); text-align: center; font-size: var(--fs-22); color: var(--brand-dark); }
/* Login / Sign up as underline tabs, not filled buttons */
.auth-tabs { display: flex; gap: 0; margin-bottom: var(--space-20); border-bottom: 1px solid var(--border); }
.auth-tabs button {
  flex: 1; background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: var(--space-12); font-size: var(--fs-16); font-weight: var(--fw-semibold); cursor: pointer;
}
.auth-tabs button:hover { color: var(--brand-dark); filter: none; }
.auth-tabs button.active { background: transparent; color: var(--brand-dark); border-bottom-color: var(--brand-dark); }
.form-grid.one-col { grid-template-columns: 1fr; }
.auth-box { text-align: center; }
.auth-box .sub { text-align: center; margin-top: var(--space-16); font-size: var(--fs-12); }
#loginBtn, #signupBtn, #connectBtn { width: 100%; margin-top: var(--space-8); padding: var(--space-12); font-size: var(--fs-16); }
.form-grid.one-col { grid-template-columns: 1fr; text-align: left; margin-bottom: var(--space-4); }
#connectView { text-align: center; }
#connectView h2 { font-size: var(--fs-18); margin: var(--space-8) 0; }
.step-badge {
  display: inline-block; background: var(--surface-pill); color: var(--muted);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); padding: 3px var(--space-12); border-radius: var(--radius-pill); margin-bottom: var(--space-8);
}
.consent {
  display: flex; gap: var(--space-8); align-items: flex-start; text-align: left;
  font-size: var(--fs-12); color: var(--muted); margin: var(--space-4) 0 var(--space-12);
}
.consent input { margin-top: 2px; }
.consent a { color: var(--brand-dark); }
.danger-zone { border-color: var(--danger-border); }
.danger-zone h2 { color: var(--danger); }

.banner-ok { display: inline-block; background: var(--success-bg); border: 1px solid var(--success-border);
  color: var(--success-ink); padding: var(--space-8) var(--space-16); border-radius: var(--radius-md); font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--space-12); }
.banner-ok span { font-weight: var(--fw-medium); color: var(--success-ink-soft); }
.banner-warn { display: inline-block; background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn-ink); padding: var(--space-8) var(--space-16); border-radius: var(--radius-md); font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--space-12); }
#passkeyStatus { margin: var(--space-4) 0 var(--space-16); }
.plaid-head { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-12); }
.plaid-head .banner-ok { margin-bottom: 0; }
.security-line { font-size: var(--fs-12); color: var(--muted); margin: var(--space-4) 0 var(--space-16); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
/* No hover effect on disabled buttons (cursor still shows "not-allowed") */
button:disabled:hover { filter: none; background: var(--accent); }
button.ghost:disabled:hover { background: var(--card); }

/* ---- Report detail page ------------------------------------------------- */
.back-link { color: var(--brand-dark); text-decoration: none; font-size: var(--fs-14); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; height: var(--control-h); box-sizing: border-box;
  background: var(--accent); color: var(--accent-ink);
  padding: 0 var(--space-16); border-radius: var(--radius-md); font-size: var(--fs-14); font-weight: var(--fw-semibold); text-decoration: none; }
button.ghost, .btn.ghost {
  background: var(--card); color: var(--brand-dark); border: 1px solid var(--border);
}
button.ghost:hover { filter: none; background: var(--surface-hover); }
.filter-inline { font-size: var(--fs-14); color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-8); }
.push-right { margin-left: auto; }

/* ---- Icons (Feather) ---------------------------------------------------- */
/* Icons size to the text (1em) and inherit its color via stroke=currentColor,
   so an icon in a button always matches the button's label. */
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
/* Buttons/links/banners that pair an icon with a text label. */
.with-ic { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }

/* Equal-height toolbar controls with leading icons */
.toolbar { align-items: center; }
.toolbar > button, .toolbar .acct-dd > button {
  height: var(--control-h); display: inline-flex; align-items: center; gap: var(--space-8); box-sizing: border-box;
}

/* Account multiselect dropdown */
.acct-menu { min-width: 210px; padding: var(--space-8); }
.acct-options { max-height: 260px; overflow: auto; }
.acct-opt { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-8);
  font-size: var(--fs-12); cursor: pointer; border-radius: var(--radius-sm); color: var(--ink); }
.acct-opt:hover { background: var(--surface-hover); }
.acct-foot { border-top: 1px solid var(--border); margin-top: var(--space-4); padding: var(--space-8) var(--space-8) 2px;
  display: flex; justify-content: flex-end; }
.acct-menu .acct-foot button { width: auto; display: inline-block; padding: var(--space-8) var(--space-16); }
.report-card .btn { background: var(--accent); color: var(--accent-ink); }

.empty-state { text-align: center; padding: var(--space-48) var(--space-20); background: var(--card);
  border: 1px dashed var(--border); border-radius: var(--radius-xl); }
.empty-state .empty-icon { font-size: 40px; }
.empty-state p { color: var(--muted); }
.big-cta { font-size: var(--fs-16); padding: var(--space-12) var(--space-24); margin: var(--space-12) 0; }

.bulk-bar { display: flex; align-items: center; gap: var(--space-12); background: var(--accent-tint);
  border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-8) var(--space-16); margin-bottom: var(--space-12); }
.bulk-bar #bulkCount { font-weight: var(--fw-semibold); color: var(--brand-dark); }

table.report-table { width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius-lg); overflow: hidden; }
.report-table th, .report-table td { text-align: left; padding: var(--space-12) var(--space-12);
  border-bottom: 1px solid var(--border); font-size: var(--fs-14); vertical-align: middle; }
.report-table th { background: var(--surface-thead); font-weight: var(--fw-semibold); color: var(--brand-dark); }
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table th.chk, .report-table td.chk { width: 36px; text-align: center; }
.report-table .actions-col { width: 40px; text-align: center; }
.report-table tbody tr { cursor: pointer; }
.report-table tbody tr:hover { background: var(--surface-hover); }
.report-table tbody tr.row-selected { background: var(--accent-tint); }
.report-table tfoot td { font-weight: var(--fw-bold); color: var(--brand-dark); border-top: 2px solid var(--border); }
.subcell { font-size: var(--fs-12); color: var(--muted); }
.tag { font-size: var(--fs-10); background: var(--surface-pill); color: var(--muted); padding: 1px var(--space-8); border-radius: var(--radius-pill); vertical-align: middle; }

.link-btn { background: none; border: none; color: var(--brand-dark); font-weight: var(--fw-semibold);
  cursor: pointer; padding: 0; font-size: var(--fs-14); }
.icon-btn { background: none; border: none; cursor: pointer; font-size: var(--fs-18); color: var(--muted); padding: 2px var(--space-8); }
.icon-btn:hover { color: var(--ink); filter: none; }

/* dropdown menus */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: var(--space-4);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 130px;
  box-shadow: var(--shadow-md); overflow: hidden; }
.dropdown-menu.right { left: auto; right: 0; }
.dropdown-menu button { display: block; width: 100%; text-align: left; background: var(--card);
  color: var(--ink); border: none; border-radius: 0; padding: var(--space-8) var(--space-16); font-size: var(--fs-12); cursor: pointer; }
.dropdown-menu button:hover { background: var(--surface-hover); filter: none; }
.dropdown-menu button.danger-text { color: var(--danger); }

.foot-summary { text-align: left; font-variant-numeric: tabular-nums; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  color: var(--muted); font-size: var(--fs-14); padding: var(--space-12) var(--space-16) var(--space-16); }
.load-more .sub { margin: 0; }

/* side panel */
.backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.side-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-panel);
  z-index: 50; display: flex; flex-direction: column; }
.side-head { display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-16); border-bottom: 1px solid var(--border); }
.side-meta { padding: var(--space-16) var(--space-16); border-bottom: 1px solid var(--border); }
.side-body { flex: 1; overflow: auto; padding: var(--space-16); background: var(--bg); }
.receipt-img { max-width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.receipt-frame { width: 100%; height: 100%; min-height: 60vh; border: none; }
.side-actions { display: flex; gap: var(--space-8); padding: var(--space-16) var(--space-16); border-top: 1px solid var(--border); }

/* modals */
.modal-wrap { position: fixed; inset: 0; background: var(--scrim-strong); z-index: 60;
  display: flex; align-items: center; justify-content: center; }
.modal { background: var(--card); border-radius: var(--radius-xl); padding: var(--space-24); width: 380px; max-width: 92vw;
  box-shadow: var(--shadow-lg); }
.modal h3 { margin: 0 0 var(--space-4); color: var(--brand-dark); }
.modal-field { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-12);
  color: var(--muted); margin: var(--space-12) 0; }
.modal-field input, .modal select { padding: var(--space-8); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-14); color: var(--ink); }
.modal select { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-16); }

/* ---- Top bar (replaces tab nav) ---------------------------------------- */
.topbar { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-24); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: var(--space-8); text-decoration: none; color: var(--brand-dark); }
.brand-logo { height: 28px; width: auto; }
.brand-name { font-size: var(--fs-16); font-weight: var(--fw-bold); }
/* Brand lockup used on the auth + legal page <h1> (logo mark + wordmark). */
.brand-title { display: inline-flex; align-items: center; gap: 0.4em; justify-content: center; }
.brand-mark { height: 1.05em; width: auto; vertical-align: -0.12em; }
.avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--brand-dark);
  color: var(--on-color); display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-16); text-decoration: none; }
.avatar:hover { filter: brightness(1.1); }
.topbar-right { display: flex; align-items: center; gap: var(--space-16); }
.logout-link { background: none; border: none; color: var(--brand-dark);
  font-weight: var(--fw-semibold); font-size: var(--fs-14); cursor: pointer; padding: var(--space-4); }
.logout-link:hover { filter: none; text-decoration: underline; }
.connected-cell { color: var(--success-ink); font-weight: var(--fw-semibold); }

/* ---- Report list cards -------------------------------------------------- */
.report-card { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); }
.report-card-main h3 { margin: 0 0 var(--space-4); color: var(--brand-dark); font-size: var(--fs-16); }
.report-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-8); flex-shrink: 0; }
.muted-xs { font-size: var(--fs-12); opacity: 0.85; }

/* ---- Google sign-in button --------------------------------------------- */
.google-btn { margin-top: var(--space-8); }

/* ---- Device-link code -------------------------------------------------- */
.device-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-22); font-weight: var(--fw-bold); letter-spacing: 3px;
  color: var(--brand-dark); margin: var(--space-12) 0 var(--space-4); }