/* MacLaren admin look (MacLaren-admin / Field Tracker ui/admin-theme.css): Inter 400/500/600, grey canvas,
   white hairline cards, 14 px radius, blue primary. Values copied from the Field Tracker's computed styles. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Fallback";src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}

:root {
  --background: #f2f2f0; --foreground: #1a1c1f; --card: #ffffff; --muted: #f1f1ef; --muted-foreground: #7d8085;
  --secondary-foreground: #54575c; --accent: #ececea; --border: #e8e8e5; --line-soft: #efefed; --header: #fbfbfa;
  --primary: #2e63e7; --primary-foreground: #ffffff; --destructive: #e5484d; --positive: #189150; --ring: #2e63e7;
  --radius: 14px; --radius-md: 11.2px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; font-size: 14px; line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
[hidden] { display: none !important; }

/* ── Buttons (components/ui/button: default 34 px, radius 10 px, 13 px / 500) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn:hover { background: #2a59d0; text-decoration: none; }
.btn:focus-visible, .input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(46 99 231 / .35); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.block { display: flex; width: 100%; }
.btn.outline { background: var(--card); color: var(--foreground); border-color: var(--border); }
.btn.outline:hover { background: var(--muted); }
.btn.ghost { background: transparent; color: var(--secondary-foreground); }
.btn.ghost:hover { background: var(--accent); color: var(--foreground); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ── Centred card pages: sign-in, approval (renderCardPage) ── */
.card-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 40px 16px; }
.card { width: 100%; max-width: 448px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 0; display: flex; flex-direction: column; gap: 16px; }
.card-head { padding: 0 16px; text-align: center; }
.card-head img { display: block; height: 64px; width: auto; margin: 0 auto; }
.card-sub { margin-top: 8px; font-size: 14px; color: var(--muted-foreground); }
.card-body { padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.card-body .stack { display: flex; flex-direction: column; gap: 16px; }
.heading { text-align: center; }
.heading h1 { font-size: 15px; }
.heading p { margin: 6px 0 0; font-size: 14px; color: var(--muted-foreground); }
.fine { margin: 0; text-align: center; font-size: 12px; color: var(--muted-foreground); }
.small-print { border-top: 1px solid var(--border); padding-top: 16px; }

/* ── Message lines (app/login/page.js) ── */
.msg { margin: 0; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; text-align: center; white-space: pre-line; }
.msg.err { background: rgb(229 72 77 / .1); color: var(--destructive); }
.msg.ok { background: rgb(24 145 80 / .1); color: var(--positive); }
.msg.info { background: var(--muted); color: var(--foreground); }

/* ── Signed-in shell: sticky 64 px header band, page content up to 1440 px ── */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); background: rgb(251 251 250 / .95); backdrop-filter: blur(8px); flex-wrap: wrap; }
.topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; }
.topbar .brand img { height: 32px; width: auto; display: block; }
.topbar .brand span { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; padding-left: 10px; border-left: 1px solid var(--border); }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 12.5px; color: var(--muted-foreground); }
.topbar form { margin: 0; display: inline-flex; }
.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .page { padding: 20px 24px 40px; } }
@media (min-width: 1100px) { .topbar { padding: 0 24px; } }
.page-head h1 { font-size: 20px; font-weight: 600; }
.page-head p { margin: 4px 0 0; color: var(--muted-foreground); }

/* Hairline panel cards inside the shell */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 15px; }
.panel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
.panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

/* Deck list rows */
ul.decks { list-style: none; margin: 0; padding: 0; }
ul.decks li + li { border-top: 1px solid var(--line-soft); }
ul.decks li { display: flex; align-items: center; gap: 8px; padding-right: 16px; }
ul.decks li a { flex: 1; min-width: 0; }
ul.decks a span { overflow: hidden; text-overflow: ellipsis; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: 6px; }
ul.decks a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: var(--foreground); font-weight: 500; }
ul.decks a:hover { background: var(--muted); text-decoration: none; }
ul.decks small { color: var(--muted-foreground); font-weight: 400; font-size: 12.5px; white-space: nowrap; }
ul.decks .chev { color: var(--muted-foreground); margin-left: 8px; }

/* Forms */
label { display: block; font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.field { display: flex; flex-direction: column; }
.input, select.input { width: 100%; min-height: 34px; padding: 6px 10px; font: inherit; font-size: 13.5px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input, var(--border)); border-radius: 10px; }
input[type=file].input { padding: 5px 8px; }
.hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
pre.log { margin: 0; background: var(--muted); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 12.5px; max-height: 260px; overflow: auto; white-space: pre-wrap; }

/* Tables (components/ui/table) */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 10px 16px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td .sub { display: block; color: var(--muted-foreground); font-size: 12px; }
.empty { padding: 24px 16px; text-align: center; color: var(--muted-foreground); }