/* ==========================================================================
   Green Payroll — flat, minimal, generous curves.
   One accent (a deep botanical green), warm paper background, hairline
   borders instead of shadows. Built mobile-first.
   ========================================================================== */
:root {
  --paper: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --ink: #18211C;
  --ink-soft: #5C645F;
  --ink-faint: #8B918C;
  --line: #E7E5DE;
  --line-strong: #D8D6CD;

  --green: #1C7C5A;
  --green-deep: #145C43;
  --green-wash: #E8F2ED;

  /* state tones */
  --slate: #6B7280; --slate-wash: #EEF0F2;
  --blue: #2F6FB0;  --blue-wash: #E8F0F8;
  --amber: #B7791F; --amber-wash: #FAF0DC;
  --teal: #0F8A7E;  --teal-wash: #E2F3F0;
  --tone-green: #1C7C5A; --green-tone-wash: #E8F2ED;
  --deep: #145C43;  --deep-wash: #DFEDE6;

  --danger: #B3261E; --danger-wash: #FBEAE8;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --pad: 18px;
  --maxw: 1080px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.ico { vertical-align: -3px; }

/* ---- shell --------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246,245,241,0.9);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--pad);
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: 16px; letter-spacing: -0.02em; }
.brand .dot {
  width: 22px; height: 22px; border-radius: 7px; background: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.nav { display: flex; gap: 2px; margin-left: 6px; flex: 1; overflow-x: auto; }
.nav a {
  color: var(--ink-soft); padding: 7px 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 14px; font-weight: 500;
}
.nav a:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--green); color: #fff; }
.nav a.active:hover { color: #fff; }
.user-chip { display: flex; align-items: center; gap: 8px; color: var(--ink-soft);
  font-size: 13px; }
.user-chip a { color: var(--ink-faint); display: inline-flex; }

.main { flex: 1; max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 22px var(--pad) 64px; }

/* ---- page header --------------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-soft); margin-top: 3px; font-size: 14px; }
.crumb { color: var(--ink-faint); font-size: 13px; margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px; }

/* ---- cards --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

/* stat tiles */
.stat { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; }
.stat .label { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.stat .value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  margin-top: 4px; }
.stat .value.sm { font-size: 20px; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); padding: 9px 15px; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--green); border-color: var(--green);
  color: #fff; }
.btn.primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.btn.danger:hover { background: var(--danger-wash); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---- badges / state pills ------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px;
  font-weight: 600; letter-spacing: .01em; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .9; }
.tone-slate { color: var(--slate); background: var(--slate-wash); }
.tone-blue  { color: var(--blue);  background: var(--blue-wash); }
.tone-amber { color: var(--amber); background: var(--amber-wash); }
.tone-teal  { color: var(--teal);  background: var(--teal-wash); }
.tone-green { color: var(--tone-green); background: var(--green-tone-wash); }
.tone-deep  { color: var(--deep);  background: var(--deep-wash); }

/* ---- lifecycle stepper --------------------------------------------------- */
.stepper { display: flex; align-items: stretch; gap: 0; overflow-x: auto;
  padding: 4px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); }
.step { flex: 1; min-width: 104px; text-align: center; padding: 10px 8px;
  border-radius: var(--r-sm); position: relative; }
.step .s-dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 6px;
  border: 2px solid var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); }
.step .s-label { font-size: 12px; color: var(--ink-faint); font-weight: 500;
  line-height: 1.25; }
.step.done .s-dot { border-color: var(--green); background: var(--green); color: #fff; }
.step.done .s-label { color: var(--ink-soft); }
.step.current { background: var(--green-wash); }
.step.current .s-dot { border-color: var(--green); color: var(--green);
  background: var(--surface); }
.step.current .s-label { color: var(--green-deep); font-weight: 600; }

/* ---- tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); font-weight: 600; background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-faint); }
.row-link { color: var(--ink); font-weight: 500; }

/* ---- forms --------------------------------------------------------------- */
.field, input[type=text], input[type=number], input[type=date], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font: inherit; font-size: 14px;
  background: var(--surface); color: var(--ink);
}
.field:focus, input:focus, select:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-wash); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row.full { grid-column: 1 / -1; }
label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.inline-num { width: 92px; padding: 6px 8px; text-align: right; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

/* ---- notices ------------------------------------------------------------- */
.notice { padding: 12px 15px; border-radius: var(--r-md); font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.notice.ok { background: var(--green-wash); color: var(--green-deep); }
.notice.warn { background: var(--amber-wash); color: var(--amber); }
.notice.err { background: var(--danger-wash); color: var(--danger); }
.notice.info { background: var(--blue-wash); color: var(--blue); }
.notice .ico { flex: none; margin-top: 1px; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-faint); }
.empty .big { font-size: 16px; color: var(--ink-soft); margin-bottom: 6px; }

/* search / filter bar */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 180px; }

/* audit diff */
.diff { font-size: 13px; }
.diff .old { color: var(--danger); text-decoration: line-through; opacity: .7; }
.diff .arr { color: var(--ink-faint); margin: 0 4px; }
.diff .new { color: var(--green-deep); font-weight: 500; }

/* section label */
.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); font-weight: 600; margin: 22px 0 10px; }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--paper); }
.login-card { width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.login-card .brand { justify-content: center; margin-bottom: 6px; font-size: 18px; }
.login-card .tag { text-align: center; color: var(--ink-soft); font-size: 14px;
  margin-bottom: 22px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- dark theme ---- */
html[data-theme="dark"] {
  --paper:#14171A; --surface:#1C2126; --surface-2:#21272D;
  --ink:#E9ECE8; --ink-soft:#A7AEA8; --ink-faint:#79807A;
  --line:#2C333A; --line-strong:#3A424A;
  --green:#36A87C; --green-deep:#2C8A66; --green-wash:#15302A;
  --slate:#9AA3AD; --slate-wash:#262C32;
  --blue:#6FA9E0;  --blue-wash:#18283C;
  --amber:#D7A441; --amber-wash:#2E2614;
  --teal:#3FB6A9;  --teal-wash:#103029;
  --tone-green:#36A87C; --green-tone-wash:#15302A;
  --deep:#2C8A66;  --deep-wash:#15302A;
  --danger:#E2675F; --danger-wash:#331A18;
}
/* keep printable documents on white even in dark mode */
html[data-theme="dark"] .statement {
  --paper:#F6F5F1; --surface:#FFFFFF; --surface-2:#FBFAF7;
  --ink:#18211C; --ink-soft:#5C645F; --ink-faint:#8B918C;
  --line:#E7E5DE; --line-strong:#D8D6CD;
  --green:#1C7C5A; --green-deep:#145C43; --green-wash:#E8F2ED;
  --slate:#6B7280; --slate-wash:#EEF0F2; --blue:#2F6FB0; --blue-wash:#E8F0F8;
  --amber:#B7791F; --amber-wash:#FAF0DC; --teal:#0F8A7E; --teal-wash:#E2F3F0;
  --tone-green:#1C7C5A; --green-tone-wash:#E8F2ED; --deep:#145C43; --deep-wash:#DFEDE6;
  --danger:#B3261E; --danger-wash:#FBEAE8;
  background:#FFFFFF; color:#18211C;
}

/* ---- dark theme: topbar fix + green glow accents ---- */
html[data-theme="dark"] {
  --green:#35B583; --green-deep:#2C9A6E; --tone-green:#35B583; --deep:#2C9A6E;
}
html[data-theme="dark"] .topbar { background: rgba(20,23,26,0.88); }
html[data-theme="dark"] .btn.primary {
  box-shadow: 0 0 0 1px rgba(53,181,131,0.35), 0 4px 18px -4px rgba(53,181,131,0.55);
}
html[data-theme="dark"] .btn.primary:hover {
  box-shadow: 0 0 0 1px rgba(53,181,131,0.55), 0 5px 22px -3px rgba(53,181,131,0.70);
}
html[data-theme="dark"] .nav a.active {
  box-shadow: 0 0 0 1px rgba(53,181,131,0.30), 0 2px 14px -3px rgba(53,181,131,0.50);
}
html[data-theme="dark"] .brand img {
  filter: drop-shadow(0 0 5px rgba(53,181,131,0.45));
}