*{box-sizing:border-box}
:root{--bg:#0b0f14;--text:#e7ecf3;--muted:#9aa8b8;--card:#0f141b;--border:#1f2733;--accent:#2a62ff;--tab:#121a24;--tab-border:#243043;--thead:#9fc1ff;--tab-active:#1b2736;--tab-active-border:#39506f}
:root[data-theme=light]{--bg:#f7f9fc;--text:#0a1420;--muted:#4f5b6a;--card:#fff;--border:#d8e0ea;--accent:#275efe;--tab:#eef2f8;--tab-border:#cfd8e6;--thead:#23406a;--tab-active:#dfe7f5;--tab-active-border:#b9c7e2}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:var(--text);background:var(--bg);line-height:1.5}
header{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border);padding:16px 20px}
h1{margin:0;font-size:20px}
h2{margin:0 0 12px 0;font-size:18px}
h3{margin:0 0 8px 0;font-size:16px}
.tabs{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.tab-button{background:var(--tab);border:1px solid var(--tab-border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.tab-button.active{background:var(--tab-active);border-color:var(--tab-active-border)}
.tab-content{display:none;padding:18px 20px}
.tab-content.active{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin:12px 0}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(160px,1fr))}
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input,select,textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;font-size:14px}
input[type=date],input[type=time]{padding:7px 10px}
textarea{resize:vertical}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
button{background:var(--accent);border:0;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
button.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
button:hover{filter:brightness(1.1)}
table{width:100%;border-collapse:collapse;min-width:780px}
.table-wrap{overflow:auto}
th,td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;font-size:14px}
th{color:var(--thead)}
footer{padding:20px;color:var(--muted);text-align:center}
.hint{color:var(--muted)}
.badge{display:inline-block;background:#eef3ff;border:1px solid #c8d8ff;color:#1b2950;padding:2px 8px;border-radius:20px;font-size:12px}
:root:not([data-theme=light]) .badge{background:#13223a;border-color:#25406a;color:#a9c8ff}
/*88 STRAT
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;border:1px solid rgba(0,0,0,.15);vertical-align:middle}
*/

.dot{border-radius:20px;margin-right:8px;border:1px solid rgba(0,0,0,.15);vertical-align:middle; padding: 5px 8px 5px 8px; }

.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between}
.theme-switch{display:flex;align-items:center;gap:8px;color:var(--muted)}
.switch{position:relative;width:42px;height:24px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#76849a;border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
input:checked + .slider{background:#2a62ff}
input:checked + .slider:before{transform:translateX(18px)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;min-width:220px;max-width:90%;background:#1f2e44;color:#fff;border:1px solid #b9c7e2;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:99}
:root:not([data-theme=light]) .toast{background:#1b2736;border-color:#39506f}
.toast.show{opacity:1;pointer-events:auto}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:120}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;max-width:420px;width:92%}
.modal h3{margin:0 0 6px 0}
.modal .actions{justify-content:flex-end}
/* Login */
.login-wrap{max-width:420px;margin:10vh auto;padding:0 16px}
.card{box-shadow:0 3px 12px rgba(0,0,0,.06)}
@media (max-width: 640px){ table{min-width:680px} }

/* === Badges par statut (light & dark) === */

/* Light */
:root[data-theme=light] .badge-work     { background:#e0f7fa; border-color:#4dd0e1; color:#006064; }  /* Travail */
:root[data-theme=light] .badge-leave    { background:#e8f5e9; border-color:#81c784; color:#1b5e20; }  /* Congés */
:root[data-theme=light] .badge-sick     { background:#fff3e0; border-color:#ffb74d; color:#e65100; }  /* Maladie */
:root[data-theme=light] .badge-holiday  { background:#ede7f6; border-color:#9575cd; color:#4527a0; }  /* Férié */
:root[data-theme=light] .badge-accident { background:#ffebee; border-color:#e57373; color:#b71c1c; }  /* Accident */
:root[data-theme=light] .badge-recovery { background:#ffffff; border-color:#e3e3e3; color:#000000; }  /* Récup */

/* Dark */
:root:not([data-theme=light]) .badge-work     { background:#0f2a30; border-color:#2a9db0; color:#a8e3ea; }
:root:not([data-theme=light]) .badge-leave    { background:#103019; border-color:#4aa35e; color:#bfe8c7; }
:root:not([data-theme=light]) .badge-sick     { background:#2f1f05; border-color:#d48d32; color:#ffd7a3; }
:root:not([data-theme=light]) .badge-holiday  { background:#1c1730; border-color:#7e68c1; color:#cebff2; }
:root:not([data-theme=light]) .badge-accident { background:#311316; border-color:#c0676d; color:#ffc0c3; }
:root:not([data-theme=light]) .badge-recovery { background:#d7d7d7; border-color:#ffffff; color:#444444; }

.hidden{
    display: none;
}