/* Windmill Clock — PharmGo run-of-the-day chrome (see docs/DESIGN.md) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
:root {
  --brand:#4CAF50; --brand-600:#469340; --brand-700:#3e9142; --brand-50:#f0fff4; --brand-tint:#f8faf8; --brand-line:#e5efe5;
  --ink:#1a202c; --gray-700:#374151; --gray-600:#4a5568; --gray-500:#6b7280; --gray-400:#94a3b8;
  --line:#f1f5f9; --line2:#e2e8f0; --page:#eef1f4; --card:#fff;
  --info:#2563EB; --info-bg:#EFF6FF; --warn:#B54709; --warn-bg:#FFFBEB; --err:#DC2626; --err-bg:#FEF2F2;
}
body { font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; background:var(--page); color:var(--ink); line-height:1.45; min-height:100vh; }
.mono { font-variant-numeric:tabular-nums; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

.app { max-width:1000px; margin:0 auto; padding:24px 22px 70px; }

/* card chrome */
.card { background:var(--card); border-radius:16px; box-shadow:0 1px 6px rgba(0,0,0,.04); border:1px solid var(--line); overflow:hidden; }
.sec-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px 9px; }
.sec-title { font-size:13px; font-weight:800; }
.sec-link { font-size:11px; font-weight:700; color:var(--brand); background:none; border:none; }

/* tiny uppercase status chips */
.st { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:6px; display:inline-block; white-space:nowrap; }
.st-in { background:var(--brand-50); color:#15803d; }
.st-off { background:#F1F5F9; color:#64748B; }
.st-open { background:var(--err-bg); color:var(--err); }
.st-edit { background:var(--warn-bg); color:var(--warn); }
.st-info { background:var(--info-bg); color:var(--info); }

.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex-shrink:0; }

/* hero (DriverDayHeroCard pattern) */
.hero { padding:18px 20px; }
.hero-top { display:flex; align-items:center; gap:14px; }
.icontile { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; flex-shrink:0; }
.tile-brand { background:var(--brand-50); color:#15803d; }
.hero h2 { font-size:19px; font-weight:800; letter-spacing:-.2px; }
.hero .live { font-size:12.5px; color:var(--gray-500); font-weight:500; margin-top:2px; }
.hero .arc { margin-left:auto; text-align:right; flex-shrink:0; }
.hero .arc .lbl { font-size:11px; font-weight:600; color:var(--gray-500); }
.hero .arc .val { font-size:17px; font-weight:800; color:var(--brand-700); font-variant-numeric:tabular-nums; }
.strip { display:flex; height:6px; border-radius:999px; overflow:hidden; gap:2px; margin-top:14px; }
.strip i { display:block; border-radius:2px; }
.strip-key { display:flex; gap:14px; margin-top:8px; font-size:10.5px; font-weight:700; color:var(--gray-500); flex-wrap:wrap; }
.strip-key i { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }

/* ghost rows */
.g-row { display:flex; align-items:center; gap:11px; padding:11px 16px; border-top:1px solid var(--line); }
.g-row.warnbg { background:#FFFBEB; }
.g-pip { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.g-line { flex:1; min-width:0; }
.g-name { font-size:13px; font-weight:700; }
.g-name .meta { font-size:10.5px; color:var(--gray-400); font-weight:600; }
.g-sub { font-size:11px; color:var(--gray-500); margin-top:1px; }
.g-num { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.g-cta { font-size:11px; font-weight:700; color:#fff; background:var(--brand); border:none; border-radius:8px; padding:6px 11px; display:inline-block; }
.g-btn { font-size:11px; font-weight:700; border-radius:8px; padding:6px 11px; border:1px solid var(--line2); background:#fff; color:var(--gray-700); }
.g-btn.danger { color:var(--err); }
.empty { padding:28px 16px; text-align:center; font-size:12.5px; color:var(--gray-400); font-weight:600; border-top:1px solid var(--line); }

/* buttons + forms */
.btn { display:inline-block; text-align:center; font-weight:800; font-size:15px; padding:14px 22px; border-radius:12px; border:none; }
.btn-brand { background:var(--brand); color:#fff; }
.btn-brand:hover { background:var(--brand-600); }
.btn-red { background:var(--err); color:#fff; }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.inp { background:#f8f9fa; border:1px solid var(--line2); border-radius:10px; padding:10px 13px; font-size:13px; color:var(--ink); width:100%; outline:none; font-family:inherit; }
.inp:focus { border-color:var(--brand); }
.label { display:block; font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--gray-400); margin-bottom:6px; }
.error { font-size:11.5px; color:var(--err); font-weight:600; margin-top:4px; }

/* header / logo */
.k-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; margin-bottom:14px; gap:14px; }
.k-logo { font-weight:800; font-size:17px; letter-spacing:-.2px; }
.k-logo span { color:var(--brand-700); }
.k-logo small { display:block; font-size:10px; font-weight:700; color:var(--gray-400); letter-spacing:.5px; text-transform:uppercase; }
.k-clock { font-size:34px; font-weight:800; letter-spacing:.5px; text-align:center; font-variant-numeric:tabular-nums; }
.k-date { font-size:11.5px; color:var(--gray-500); font-weight:600; text-align:center; margin-top:1px; }

/* kiosk steps */
.bigprompt { text-align:center; font-size:19px; font-weight:800; margin:18px 0 4px; }
.bigprompt small { display:block; font-size:12.5px; font-weight:500; color:var(--gray-500); margin-top:3px; }
.names { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px; }
@media (max-width:720px){ .names{grid-template-columns:repeat(2,1fr);} }
.nm { background:#fff; border:1.5px solid var(--line2); border-radius:14px; padding:18px 14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; transition:all .12s; }
.nm:hover { border-color:var(--brand); transform:translateY(-1px); }
.nm .avatar { width:52px; height:52px; font-size:16px; }
.nm b { font-size:15px; font-weight:800; }
.nm.in { background:var(--brand-tint); border-color:var(--brand-line); }

.pinwrap { max-width:400px; margin:14px auto 0; }
.backbtn { background:none; border:none; color:var(--gray-500); font-size:13px; font-weight:700; padding:6px 2px; margin-bottom:6px; }
.whoami { display:flex; align-items:center; gap:12px; background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.whoami .avatar { width:44px; height:44px; font-size:14px; }
.whoami .who { min-width:0; }
.whoami b { display:block; font-size:14px; font-weight:800; }
.whoami .dirlabel { font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; margin-bottom:2px; display:block; }
.dirlabel.in { color:var(--brand); } .dirlabel.out { color:var(--err); }
.whoami .sub { font-size:11.5px; color:var(--gray-500); }
.pin-dots { display:flex; gap:13px; justify-content:center; margin:4px 0 16px; }
.pin-dots i { width:13px; height:13px; border-radius:50%; border:2px solid #cbd5e0; }
.pin-dots i.on { background:var(--brand); border-color:var(--brand); }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pad button { height:58px; background:#fff; border:1px solid var(--line2); border-radius:12px; font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.pad button:active { background:var(--brand-50); }
#goBtn { width:100%; margin-top:16px; font-size:16px; padding:16px; }
.k-msg { min-height:22px; text-align:center; font-size:13px; font-weight:700; margin-top:12px; color:var(--err); }
.shake { animation:shake .3s; } @keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.donewrap { max-width:440px; margin:26px auto 0; text-align:center; padding:42px 30px; }
.done-ic { width:84px; height:84px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#fff; }
.done-ic.in { background:var(--brand); } .done-ic.out { background:#374151; }
.donewrap h2 { font-size:24px; font-weight:800; margin-bottom:4px; }
.donewrap .sub2 { font-size:14px; color:var(--gray-500); font-weight:500; }
.donewrap .shift { margin-top:12px; font-size:13px; font-weight:800; color:#15803d; }
.countdown { margin-top:20px; font-size:11px; color:var(--gray-400); font-weight:600; }

/* manager shell */
.m-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:12px; }
.tabs { display:flex; gap:6px; background:#e2e8f0; border-radius:999px; padding:4px; }
.tabs a, .tabs button { background:transparent; border:none; border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--gray-500); display:inline-block; }
.tabs .on { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.10); }
.stack { display:flex; flex-direction:column; gap:12px; }
.note { font-size:12px; color:var(--gray-500); font-weight:500; padding:11px 16px; border-top:1px solid var(--line); }
.note b { color:var(--ink); font-weight:700; }
.lockbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.addrow { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); }
.rangechips { display:flex; gap:6px; }
.rangechips a { font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; border:1px solid var(--line2); color:var(--gray-500); }
.rangechips a.on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* modal (native dialog) */
dialog { border:none; border-radius:16px; padding:24px; width:420px; max-width:92vw; box-shadow:0 20px 50px rgba(17,24,39,.3); }
dialog::backdrop { background:rgba(17,24,39,.5); }
dialog h3 { font-size:15px; font-weight:800; margin-bottom:16px; }
dialog .row { display:flex; gap:12px; margin-bottom:12px; }
dialog .row > div { flex:1; }

/* toast */
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#111827; color:#fff;
  font-size:13px; font-weight:700; padding:12px 22px; border-radius:999px; z-index:99; animation:toastin .25s, toastout .4s 4s forwards; }
@keyframes toastin { from { transform:translateX(-50%) translateY(80px); } }
@keyframes toastout { to { opacity:0; transform:translateX(-50%) translateY(20px); } }

.login-card { max-width:380px; margin:60px auto; padding:26px; }
.hidden { display:none !important; }