/* TimeClock identity: teal on warm white, big touch targets (kiosk). Built on jw-kit tokens. */
:root {
  --jw-accent: #0E7C7B;
  --jw-accent-hover: #0A6160;
  --jw-accent-soft: #E1F2F1;
  --jw-bg: #F4F8F7;
  --tc-deep: #0B3C3B;
  --muted: var(--jw-muted);
}
body { margin: 0; background: var(--jw-bg); color: var(--jw-ink); font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .clock-time { font-family: 'Space Grotesk', sans-serif; }
.hidden { display: none !important; }
.muted { color: var(--jw-muted); }

/* header */
.jw-header { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; background:#fff; border-bottom:1px solid var(--jw-border); }
.jw-brand .dot { border-radius: 50%; }

/* ---- Terminal ---- */
.terminal-wrap { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem 5rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
#clock { text-align:center; background: var(--tc-deep); color:#fff; width:100%; border-radius: 18px; padding: 1.4rem 1rem; }
.clock-time { font-size: 3.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.clock-date { margin-top:.4rem; color:#9FD6D4; font-size:.95rem; }
#pin-display { font-family:'Space Grotesk',sans-serif; font-size:2rem; letter-spacing:.5rem; min-height:3rem; text-align:center; color: var(--jw-accent); }
#pin-pad { display:grid; grid-template-columns:repeat(3, 84px); gap:.7rem; justify-content:center; }
#pin-pad button { height:84px; font-size:1.6rem; font-weight:600; border-radius:50%; border:2px solid #CFE3E1; background:#fff; color: var(--tc-deep); cursor:pointer; }
#pin-pad button:hover, #pin-pad button:active { background: var(--jw-accent-soft); border-color: var(--jw-accent); }
#pin-pad button[data-clear] { font-size:1rem; color: var(--jw-muted); }
.employee-screen { width:100%; text-align:center; background:#fff; border:2px solid var(--jw-accent); border-radius:18px; padding:1.6rem; box-shadow: var(--jw-shadow); }
.employee-screen h2 { margin:.2rem 0 1rem; font-size:1.6rem; }
#employee-action { font-size:1.3rem; font-weight:700; padding:1rem 2.2rem; border-radius:12px; border:0; background: var(--jw-accent); color:#fff; cursor:pointer; margin-right:.5rem; }
#employee-action:hover { background: var(--jw-accent-hover); }
#employee-cancel { padding:1rem 1.4rem; border-radius:12px; border:1px solid var(--jw-border-strong); background:#fff; color: var(--jw-muted); cursor:pointer; font-size:1rem; }
.message { min-height:1.5rem; font-weight:600; text-align:center; }
.message.success { color: var(--jw-ok); }
.message.error { color: var(--jw-danger); }
#recent-punches { list-style:none; padding:0; margin:0; width:100%; font-size:.88rem; color: var(--jw-muted); background:#fff; border:1px solid var(--jw-border); border-radius:12px; }
#recent-punches li { padding:.5rem .9rem; border-bottom:1px solid var(--jw-border); }
#recent-punches li:last-child { border-bottom:0; }
.terminal-wrap h3 { text-align:center; color: var(--jw-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .4rem; }

/* ---- Admin ---- */
main.admin { max-width: 1040px; margin:0 auto; padding:1.5rem 1.5rem 5rem; }
main.admin section { background:#fff; border:1px solid var(--jw-border); border-radius:14px; padding:1.2rem 1.3rem; margin-bottom:1.2rem; }
main.admin section h2 { margin:0 0 .6rem; font-size:1.15rem; color: var(--tc-deep); }
table { width:100%; border-collapse:collapse; margin-top:.75rem; font-size:.9rem; }
th { text-align:left; padding:.5rem .6rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--jw-muted); border-bottom:2px solid var(--jw-border); }
td { padding:.55rem .6rem; border-bottom:1px solid var(--jw-border); }
input, select { font:inherit; font-size:.9rem; padding:.5rem .65rem; border:1px solid var(--jw-border-strong); border-radius:8px; background:#fff; color: var(--jw-ink); }
input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--jw-accent); outline-offset:1px; }
button { font:inherit; font-size:.9rem; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--jw-border-strong); background:#fff; color: var(--jw-ink); cursor:pointer; }
button:hover { background: var(--jw-accent-soft); }
button[type=submit], #punch-load, #report-run, #settings-save, #correction-save { background: var(--jw-accent); color:#fff; border-color: var(--jw-accent); }
button[type=submit]:hover, #punch-load:hover, #report-run:hover, #settings-save:hover, #correction-save:hover { background: var(--jw-accent-hover); }
form.inline { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; margin-top:.75rem; }
form.inline label { display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color: var(--jw-muted); font-weight:600; }
.modal-backdrop { position:fixed; inset:0; background:rgba(11,60,59,.55); display:flex; align-items:center; justify-content:center; z-index:60; }
.modal { background:#fff; border-radius:14px; padding:1.5rem; min-width:340px; max-width:480px; width:100%; }
.modal h3 { margin-top:0; }
.modal label { display:block; margin-top:.75rem; font-size:.82rem; color: var(--jw-muted); font-weight:600; }
.modal input, .modal select { width:100%; margin-top:.25rem; }
.modal-actions { margin-top:1.2rem; display:flex; gap:.5rem; justify-content:flex-end; }
#audit-list { list-style:none; padding:0; margin:.6rem 0 0; font-size:.8rem; color: var(--jw-muted); max-height:140px; overflow-y:auto; }
#audit-list li { padding:.25rem 0; border-bottom:1px solid var(--jw-border); }
@media (max-width: 520px) { .clock-time { font-size: 2.6rem; } #pin-pad { grid-template-columns: repeat(3, 72px); } #pin-pad button { height:72px; } }