/* Role tokens follow the shared design system's dark-mode doctrine
   (templates/shared/cerulean.css): light defaults are byte-identical to the old
   literals; dark retunes ROLES, with the page (--mist) as the darkest layer and
   raised surfaces (--surface) above it. Contrast pairs annotated below. */
:root {
  --cerulean: #007BA7;
  --cerulean-d: #005e80;
  --ink: #0f2733;
  --slate: #4a5b66;
  --line: #e2e8ec;
  --line-input: var(--line);
  --mist: #f4f8fa;
  --surface: #ffffff;
  --chip: var(--mist);
  --brand: var(--cerulean-d);
  --accent: var(--cerulean);
  --link-hover: var(--cerulean-d);
  --amber: #b45309;
  --danger: #b02a37;
  --danger-line: #f2c2c7;
  --notice-bg: #fff8ec;
  --notice-line: #f2d9a8;
  --ok-bg: #e7f6ee;
  --ok-fg: #146c43;
  --err-bg: #fbeaea;
  --st-neutral-bg: #eef2f4;
  --st-warn-bg: #fff4e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Same verified palette as the website/careers dark mode.
       ink 12.9:1 · slate 7.5:1 · brand 14.6:1 · accent 7.7:1 on the surface. */
    --ink: #dbe4ee;
    --slate: #9fb1c5;
    --line: #253750;
    --line-input: #52708f; /* 3.2:1 vs surface — WCAG 1.4.11 field boundary */
    --mist: #0b1220;
    --surface: #131f33;
    --chip: #1d2c44;
    --brand: #e9f2fa;
    --accent: #38bdf8;
    --link-hover: #7dd3fc;
    --amber: #fcd34d;
    --danger: #fca5a5;
    --danger-line: rgba(239, 68, 68, 0.35);
    --notice-bg: rgba(245, 158, 11, 0.12);
    --notice-line: rgba(245, 158, 11, 0.3);
    --ok-bg: rgba(34, 197, 94, 0.16);
    --ok-fg: #86efac;
    --err-bg: rgba(239, 68, 68, 0.14);
    --st-neutral-bg: rgba(159, 177, 197, 0.14);
    --st-warn-bg: rgba(245, 158, 11, 0.16);
    color-scheme: dark;
  }
  ::placeholder { color: var(--slate); opacity: 1; }
  /* Login/MFA fields autofill — stop WebKit painting light UA colors in dark. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
  }
  /* Field text: UA FieldText is #000 in light (kept); pin our ink in dark. */
  .card.auth input, .ts-entryform input, .ts-reject textarea { color: var(--ink); }
  /* The leave-type <select> has no light styling (UA default) — align it with
     its sibling fields in dark only, preserving light-mode identity. */
  .ts-entryform select {
    background: var(--surface); color: var(--ink); border-color: var(--line-input);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--mist);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--brand); text-decoration: none; letter-spacing: .04em;
}
/* The mark is a square 120x120 viewBox. BRAND.md sets 16px as the hard minimum
   — below that the aperture optically closes and it stops reading as the mark. */
.brand svg { width: 26px; height: 26px; flex: none; }
/* Sign-in and MFA screens: brand only, no nav. Not a link — there is nowhere to
   go before authenticating. */
.topbar-anon { justify-content: flex-start; }
.topbar-anon .brand { cursor: default; }
.topbar nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topbar nav a { color: var(--slate); text-decoration: none; }
.topbar nav a:hover { color: var(--link-hover); }
.who { color: var(--ink); font-weight: 600; }
.inline { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; color: var(--slate); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { color: var(--link-hover); }

.wrap { max-width: 960px; margin: 32px auto; padding: 0 20px; }
h1 { font-size: 24px; margin: 0 0 4px; }
.sub { color: var(--slate); margin: 0 0 20px; }
.hint { color: var(--slate); font-size: 13px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px;
}
.card.auth { max-width: 380px; margin: 60px auto; }
.card.auth label { display: block; margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.card.auth input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-input);
  border-radius: 8px; font: inherit; background: var(--surface);
}
.btn {
  margin-top: 18px; width: 100%; padding: 11px; border: 0; border-radius: 8px;
  background: var(--cerulean); color: #fff; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--cerulean-d); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.widget .wlabel { color: var(--slate); font-size: 13px; }
.widget .wvalue { font-size: 30px; font-weight: 700; line-height: 1.2; }
.widget .whint { color: var(--slate); font-size: 12px; margin-top: 6px; }

.notice {
  background: var(--notice-bg); border: 1px solid var(--notice-line); color: var(--amber);
  padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px;
}
.notice a { color: var(--amber); font-weight: 600; }

.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
.msg.success { background: var(--ok-bg); color: var(--ok-fg); }
.msg.error { background: var(--err-bg); color: var(--danger); }
.formerr { background: var(--err-bg); color: var(--danger); padding: 10px 14px; border-radius: 8px; font-size: 14px; }

.otp-uri { background: var(--chip); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; word-break: break-all; font-size: 12px; }

/* ── Timesheets (M3.3) ─────────────────────────────────────────────────── */
.ts-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ts-head h1 { margin: 0; }
.ts-nav { display: flex; align-items: center; gap: 10px; }
.ts-week { font-weight: 600; }
.btn-sm { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--slate); text-decoration: none; font: inherit; font-size: 13px; cursor: pointer; }
.btn-sm:hover { border-color: var(--accent); color: var(--link-hover); }
.btn-sm.ok { background: var(--cerulean); color: #fff; border-color: var(--cerulean); }
.btn-sm.ok:hover { background: var(--cerulean-d); }
.btn-sm.danger { color: var(--danger); border-color: var(--danger-line); }
.linkbtn.danger { color: var(--danger); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--slate); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tbl .num { text-align: right; }
.tbl .strong { font-weight: 700; }
.dim { color: var(--slate); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-draft { background: var(--st-neutral-bg); color: var(--slate); }
.status-submitted { background: var(--st-warn-bg); color: var(--amber); }
.status-approved { background: var(--ok-bg); color: var(--ok-fg); }
.status-rejected { background: var(--err-bg); color: var(--danger); }
.ts-entryform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ts-entryform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ts-entryform input { padding: 8px 10px; border: 1px solid var(--line-input); border-radius: 7px; font: inherit; background: var(--surface); }
.ts-entryform .btn { width: auto; margin-top: 0; padding: 9px 20px; }
.ts-approve-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ts-approve-actions { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.ts-reject { display: flex; gap: 8px; align-items: flex-start; }
.ts-reject textarea { padding: 8px 10px; border: 1px solid var(--line-input); border-radius: 7px; font: inherit; min-width: 220px; background: var(--surface); }

/* ── Leave (M4.1) ──────────────────────────────────────────────────────── */
.status-pending { background: var(--st-warn-bg); color: var(--amber); }
.status-cancelled { background: var(--st-neutral-bg); color: var(--slate); }