:root{
  --navy-900:#101826;
  --navy-800:#16202f;
  --navy-700:#1f2c3d;
  --navy-600:#2c3c52;
  --slate-400:#7c8aa0;
  --slate-300:#a4b0c2;
  --paper:#f4f2ec;
  --amber:#e0a13a;
  --amber-dark:#a86f16;
  --amber-light:#fbead0;
  --green:#4f8f5b;
  --green-light:#e5f1e6;
  --red:#c05c4d;
  --red-light:#f7e6e2;
  --gray-light:#e9e7e0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--navy-900);
}

/* ---------- Auth pages ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.auth-card{
  background:#fff;
  border:1px solid var(--gray-light);
  border-radius:12px;
  padding:32px 28px;
  max-width:380px;
  width:100%;
}
.auth-card .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dark);font-weight:700;margin:0 0 4px;}
.auth-card h1{font-size:22px;margin:0 0 20px;letter-spacing:-.01em;}
.auth-card label{display:block;font-size:12px;font-weight:600;color:var(--slate-400);margin:14px 0 5px;text-transform:uppercase;letter-spacing:.03em;}
.auth-card input{width:100%;padding:11px 12px;border:1px solid #d7d4c9;border-radius:8px;font-size:15px;background:#fdfdfb;}
.auth-card .btn{
  display:inline-block;width:100%;text-align:center;
  background:var(--navy-900);color:#fff;border:none;padding:13px;border-radius:8px;
  font-size:15px;font-weight:600;cursor:pointer;margin-top:20px;text-decoration:none;
}
.auth-card .error{background:var(--red-light);color:var(--red);padding:10px 12px;border-radius:8px;font-size:13px;margin:10px 0;}
.auth-card .ok{background:var(--green-light);color:var(--green);padding:10px 12px;border-radius:8px;font-size:13px;margin:10px 0;}

/* ---------- App shell ---------- */
.app{max-width:640px;margin:0 auto;min-height:100vh;padding-bottom:90px;}
header.topbar{background:var(--navy-900);color:#fff;padding:18px 20px;position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;}
header.topbar .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600;margin:0 0 4px;}
header.topbar h1{font-size:19px;font-weight:600;margin:0;letter-spacing:-.01em;}
header.topbar a.logout{color:var(--slate-300);font-size:12px;text-decoration:none;font-weight:600;}

nav.tabs{display:flex;background:var(--navy-800);position:sticky;top:64px;z-index:19;border-bottom:1px solid var(--navy-600);overflow-x:auto;}
nav.tabs button{flex:1;min-width:100px;background:none;border:none;color:var(--slate-300);font-size:13px;font-weight:600;padding:13px 8px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
nav.tabs button.active{color:#fff;border-bottom:2px solid var(--amber);}

main{padding:18px 18px 8px;}
.card{background:#fff;border:1px solid var(--gray-light);border-radius:10px;padding:18px;margin-bottom:14px;}
.card h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-700);margin:0 0 14px;font-weight:700;}

label{display:block;font-size:12px;font-weight:600;color:var(--slate-400);margin:0 0 5px;text-transform:uppercase;letter-spacing:.03em;}
.field{margin-bottom:14px;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid #d7d4c9;border-radius:8px;font-size:15px;font-family:inherit;background:#fdfdfb;color:var(--navy-900);
}
textarea{resize:vertical;min-height:60px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-light);}
.row2{display:flex;gap:10px;}
.row2 > div{flex:1;}

.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.status-opt{border:1.5px solid #d7d4c9;border-radius:8px;padding:10px 8px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;color:var(--navy-700);background:#fdfdfb;}
.status-opt.sel{border-color:var(--amber-dark);background:var(--amber-light);color:var(--amber-dark);}

.checkbox-row{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid #d7d4c9;border-radius:8px;cursor:pointer;background:#fdfdfb;}
.checkbox-row.sel{border-color:var(--amber-dark);background:var(--amber-light);}
.checkbox-row input{width:auto;}
.checkbox-row span{font-size:14px;font-weight:600;color:var(--navy-700);}

button.submit,button.btn{width:100%;background:var(--navy-900);color:#fff;border:none;padding:14px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px;}
button.submit:active,button.btn:active{opacity:.85;}
button.btn.secondary{background:#fff;color:var(--navy-900);border:1.5px solid var(--gray-light);}

.entry{background:#fff;border:1px solid var(--gray-light);border-left:4px solid var(--navy-600);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.entry.st-present{border-left-color:var(--green);}
.entry.st-absent{border-left-color:var(--red);}
.entry.st-retard{border-left-color:var(--amber);}
.entry.st-conge{border-left-color:var(--slate-400);}
.entry-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px;}
.entry-name{font-weight:700;font-size:15px;}
.entry-date{font-size:12px;color:var(--slate-400);font-weight:600;white-space:nowrap;}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.badge.st-present{background:var(--green-light);color:var(--green);}
.badge.st-absent{background:var(--red-light);color:var(--red);}
.badge.st-retard{background:var(--amber-light);color:var(--amber-dark);}
.badge.st-conge{background:var(--gray-light);color:var(--slate-400);}
.entry-meta{font-size:13px;color:var(--navy-700);margin-top:6px;}
.entry-panier{display:inline-block;font-size:11px;font-weight:700;color:var(--amber-dark);margin-top:6px;}
.entry-comment{font-size:13px;color:var(--slate-400);margin-top:4px;font-style:italic;}

.filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.filter-bar input,.filter-bar select{flex:1;min-width:120px;}
.empty{text-align:center;color:var(--slate-400);font-size:14px;padding:40px 20px;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;opacity:0;transition:opacity .25s, transform .25s;pointer-events:none;z-index:50;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.stats-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.stat{flex:1;min-width:80px;background:#fff;border:1px solid var(--gray-light);border-radius:8px;padding:10px;text-align:center;}
.stat .n{font-size:20px;font-weight:700;color:var(--navy-900);}
.stat .l{font-size:10px;text-transform:uppercase;color:var(--slate-400);font-weight:600;letter-spacing:.04em;}

.summary-card{background:#fff;border:1px solid var(--gray-light);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.summary-card .name{font-weight:700;font-size:15px;margin-bottom:8px;}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.summary-item{text-align:center;}
.summary-item .n{font-size:16px;font-weight:700;}
.summary-item .n.overtime{color:var(--red);}
.summary-item .l{font-size:10px;color:var(--slate-400);text-transform:uppercase;font-weight:600;letter-spacing:.03em;}

table.users-table{width:100%;border-collapse:collapse;font-size:13px;}
table.users-table th,table.users-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--gray-light);}
table.users-table th{color:var(--slate-400);text-transform:uppercase;font-size:10px;letter-spacing:.03em;}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--gray-light);color:var(--navy-700);font-weight:600;}
.pill.admin{background:var(--amber-light);color:var(--amber-dark);}
.pill.inactive{background:var(--red-light);color:var(--red);}