:root{
  --ink:#16233A; --ink-2:#2C3E54; --bg:#EEF1F5; --card:#FFFFFF;
  --line:#DDE3EB; --muted:#66748A; --amber:#F4A814; --green:#159A5B;
  --green-d:#0F7C48; --red:#C0392B; --teal:#0E7C86; --blue:#2E5AAC;
  --shadow:0 1px 2px rgba(16,35,58,.06),0 6px 20px rgba(16,35,58,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.45; -webkit-text-size-adjust:100%;
}
a{color:var(--teal)}
.topbar{
  background:var(--ink); color:#fff; padding:.7rem 1rem; display:flex;
  align-items:center; gap:.75rem; border-bottom:3px solid var(--amber);
}
.topbar .brand{font-weight:700; letter-spacing:.2px}
.topbar .brand small{display:block; font-weight:400; font-size:.72rem; color:#AEBBcc; letter-spacing:.02em}
.topbar .spacer{flex:1}
.topbar a{color:#DCE4EF; text-decoration:none; font-size:.9rem}
.wrap{max-width:1080px; margin:0 auto; padding:1rem}
.wrap.narrow{max-width:460px}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:1.1rem 1.15rem; margin-bottom:1rem}
.card h2{margin:.1rem 0 .8rem; font-size:1.05rem}
h1{font-size:1.3rem; margin:.2rem 0 1rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.right{text-align:right}

/* buttons */
.btn{display:inline-block; border:none; border-radius:10px; padding:.6rem 1rem; font-size:.95rem;
  font-weight:600; cursor:pointer; text-decoration:none; color:#fff; background:var(--ink-2)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.teal{background:var(--teal)} .btn.blue{background:var(--blue)}
.btn.red{background:var(--red)} .btn.sm{padding:.4rem .7rem; font-size:.82rem}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* forms */
label{display:block; font-size:.83rem; font-weight:600; color:var(--ink-2); margin:.7rem 0 .25rem}
input,select,textarea{width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:9px;
  font-size:1rem; font-family:inherit; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal)}
.row{display:flex; gap:.8rem; flex-wrap:wrap}
.row>.col{flex:1; min-width:150px}
.checks{display:flex; flex-wrap:wrap; gap:.4rem}
.checks label{display:flex; align-items:center; gap:.35rem; margin:0; padding:.4rem .55rem; border:1px solid var(--line);
  border-radius:8px; font-weight:500; cursor:pointer; background:#fff}
.checks input{width:auto}
.err{background:#FDECEA; border:1px solid #F3C0BA; color:#93261a; padding:.6rem .8rem; border-radius:9px; margin-bottom:.8rem; font-size:.9rem}
.ok{background:#E7F6EE; border:1px solid #B7E2C9; color:#0F7C48; padding:.6rem .8rem; border-radius:9px; margin-bottom:.8rem; font-size:.9rem}

/* tables */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
tr:hover td{background:#F7F9FC}
.tblwrap{overflow-x:auto}
tfoot td{font-weight:700; border-top:2px solid var(--ink)}

/* status pills */
.pill{display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700}
.pill.present{background:#E7F6EE; color:#0F7C48}
.pill.rest_day_worked{background:#FEF1D6; color:#8a5a00}
.pill.rest_day{background:#EEF1F5; color:#66748A}
.pill.paid_leave{background:#E7EEFB; color:#2E5AAC}
.pill.absent{background:#FDECEA; color:#C0392B}
.pill.future{background:#F3F5F8; color:#9AA6B6}
.pill.probation{background:#FEF1D6; color:#8a5a00}
.pill.active{background:#E7F6EE; color:#0F7C48}
.pill.resigned{background:#EEF1F5; color:#66748A}

/* driver clock card */
.clock{ text-align:center; padding:1.4rem 1rem }
.clock .time{font-size:2.6rem; font-weight:800; letter-spacing:-1px}
.clock .date{color:var(--muted); margin-bottom:.4rem}
.bigbtn{width:100%; padding:1.15rem; font-size:1.25rem; font-weight:800; border:none; border-radius:16px;
  color:#fff; cursor:pointer; letter-spacing:.02em}
.bigbtn.in{background:var(--green)} .bigbtn.in:hover{background:var(--green-d)}
.bigbtn.out{background:var(--ink-2)} .bigbtn.out:hover{filter:brightness(1.1)}
.stamp{display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-top:1px solid var(--line)}
.stamp img{width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--line)}
.hint{font-size:.82rem; color:var(--muted); margin-top:.5rem}
.tabbar{display:flex; gap:.5rem; margin-bottom:1rem}
.tabbar a{flex:1; text-align:center; padding:.55rem; border-radius:10px; background:#fff; border:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-weight:600; font-size:.9rem}
.tabbar a.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* admin nav */
.anav{display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1rem}
.anav a{padding:.5rem .85rem; border-radius:9px; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.9rem}
.anav a.on,.anav a:hover{background:var(--ink); color:#fff}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; box-shadow:var(--shadow)}
.stat .n{font-size:1.7rem; font-weight:800}
.stat .l{font-size:.8rem; color:var(--muted)}
.monthnav{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap}
.monthnav .title{font-weight:700; font-size:1.05rem}
.toolbar{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.dayedit{background:#F7F9FC; border:1px dashed var(--line); border-radius:10px; padding:.6rem; margin-top:.5rem}