:root{
  --navy:#1f3864; --navy2:#2f4b8a; --ink:#1b2330; --muted:#6b7686;
  --line:#e3e7ee; --bg:#f4f6fa; --card:#fff; --green:#1f8a4c; --red:#c0392b;
  --warn-bg:#fdf2e5; --warn-line:#f0c78a; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';letter-spacing:-0.005em}
h1,h2,h3{letter-spacing:-0.02em}
a{color:var(--navy2);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--navy);color:#fff;padding:12px 20px}
.topbar .brand{color:#fff;font-weight:700;font-size:18px}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topbar nav a{color:#dbe4f5}
.topbar nav a:hover{color:#fff}
.topbar .who{color:#aebfe0;font-size:14px}
.topbar .logout{color:#ffd7d0}
.tag{background:#ffd24d;color:#3a2c00;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;text-transform:uppercase}

.wrap{max-width:960px;margin:0 auto;padding:22px 18px 60px}
h1{font-size:24px;margin:6px 0 16px}
h2{font-size:17px;margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:18px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.card.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){.grid2{grid-template-columns:1fr}}

.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.flash.success{background:#e7f6ec;color:#155f34;border:1px solid #a9dcbd}
.flash.error{background:#fdecea;color:#8f2b20;border:1px solid #f0b6ae}
.flash.info,.flash.warn{background:var(--warn-bg);color:#8a5a12;border:1px solid var(--warn-line)}

.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:9px 15px;border-radius:9px;font-size:14px;cursor:pointer;font-weight:600}
.btn:hover{background:#f2f5fb;text-decoration:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy2)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.success{background:var(--green);border-color:var(--green);color:#fff}
.btn.success:hover{background:#166b3b}
.btn.small{padding:5px 10px;font-size:13px}
.btn.big-btn{font-size:20px;padding:16px 22px;width:100%;margin-top:12px}

.stack{display:flex;flex-direction:column;gap:10px}
.stack label,.periodbar label,.reportbar label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:4px}
input,select{font-size:15px;padding:9px 10px;border:1px solid #cdd4df;border-radius:8px;background:#fff}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}

.loginbox{max-width:340px;margin:8vh auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px}
.loginbox h1{margin:0 0 4px}
.loginbox form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.loginbox .btn{margin-top:6px}

.clock-card{text-align:center}
.clock-card .big{font-size:22px;font-weight:800;margin-bottom:4px}
.clock-card.in .big{color:var(--green)}
.clock-card.out .big{color:var(--muted)}

.totals{display:flex;gap:26px;margin:12px 0}
.totals>div{display:flex;flex-direction:column}
.totals .num{font-size:26px;font-weight:800}
.totals>div span:last-child{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.big-totals .num{font-size:34px}

.pill{display:inline-block;background:#eef2fa;color:var(--navy2);border-radius:20px;
  padding:2px 10px;font-size:12px;font-weight:700}
.pill.alt{background:#efe7fa;color:#5b3ba0}
.pill.warn{background:#fbe4c9;color:#8a4b0f}
.k401{font-size:18px;font-weight:700}

table.grid{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;font-size:14px}
table.grid th{background:#f0f3f9;text-align:left;padding:9px 11px;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.grid td{padding:9px 11px;border-top:1px solid var(--line);vertical-align:top}
table.grid td.num{text-align:right}
tr.rowwarn td{background:var(--warn-bg)}
tr.totalrow td{font-weight:800;background:#f0f3f9;border-top:2px solid #cdd4df}
tr.companyrow td{font-weight:800;background:#dce6f1;color:#1f3864;font-size:14px}
tr.subrow td{font-weight:700;background:#eef2fa;font-size:13px}
tr.hdrrow th{background:#f0f3f9;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);padding:6px 7px;text-align:left;border-top:1px solid var(--line)}
.editgrid td{padding:5px 6px;vertical-align:middle}
.editgrid input[type=number]{width:54px;padding:5px 5px;font-size:13px;text-align:right}
.noteicon{cursor:help;margin-left:4px;font-size:15px}
/* Keep the Save button pinned to the right so it's always visible. */
.editgrid td.savecell, .editgrid th.savecell{position:sticky;right:0;background:#fff;
  box-shadow:-6px 0 8px -6px rgba(20,30,60,.18);text-align:center}
.editgrid tr.rowwarn td.savecell{background:var(--warn-bg)}
.editgrid td.savecell .btn{background:var(--green);border-color:var(--green);color:#fff}

.explain-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:center;
  padding:8px 0;border-top:1px dashed var(--warn-line)}
@media(max-width:680px){.explain-row{grid-template-columns:1fr}}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.reportbar,.periodbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.periodbar{margin:14px 0}
.note-emp{color:#8a4b0f;font-size:13px;margin-bottom:3px}
.fixbox{margin-top:6px}
.fixbox summary{cursor:pointer;color:var(--navy2);font-size:13px}
.fixbox .row{margin-top:8px}
.tiny{font-size:12px;color:var(--muted)}
.or{align-self:center;color:var(--muted);font-size:12px}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:6px 0}
.noteform{display:flex;gap:6px}
.noteform input[name=note]{flex:1;min-width:120px}
.grantlist{list-style:none;padding:0;margin:0 0 10px}
.grantlist li{padding:4px 0;display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line)}
code{background:#eef2fa;padding:1px 5px;border-radius:5px;font-size:13px}
textarea{font-family:inherit;padding:9px 10px;border:1px solid #cdd4df;border-radius:8px}
.switcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#eef2fa;
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 16px}
.payline.nodata{opacity:.5;background:#f7f8fa}
.payline.approved{border-left:4px solid var(--green)}
.payline.declined{border-left:4px solid var(--red)}
.clockboard{display:flex;flex-wrap:wrap;gap:10px}
.chip-in{background:#e7f6ec;border:1px solid #a9dcbd;border-radius:24px;padding:7px 14px;font-weight:600}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}
details summary{outline:none}