:root{
  --navy:#0f1923; --navy2:#162030; --navy3:#1e2d3d; --steel:#2a3f55;
  --accent:#e8a045; --accent2:#f0c070; --green:#3ecf8e; --red:#f05252;
  --amber:#f59e0b; --blue:#60a5fa;
  --text:#e8edf2; --text2:#8fa3b8; --text3:#5a7088;
  --border:rgba(255,255,255,.07); --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--navy); color:var(--text); min-height:100vh;
}
a{color:var(--accent); text-decoration:none;}
nav{
  position:sticky; top:0; z-index:10;
  background:rgba(15,25,35,.95); border-bottom:1px solid var(--border);
  padding:0 1.5rem; height:58px; display:flex; align-items:center; gap:1.5rem;
}
.nav-brand{font-size:1.15rem; font-weight:700; color:var(--accent);}
.nav-brand span{color:var(--text2); font-weight:400; font-size:.85em;}
.nav-links{display:flex; gap:.3rem; margin-left:auto;}
.nav-links a{
  padding:.5rem 1rem; border-radius:8px; color:var(--text2); font-size:.9rem; font-weight:500;
}
.nav-links a.active, .nav-links a:hover{background:var(--card2); color:var(--text);}
.nav-user{color:var(--text2); font-size:.85rem; display:flex; align-items:center; gap:.8rem;}
.btn-logout{
  background:rgba(240,82,82,.15); color:var(--red); border:1px solid rgba(240,82,82,.3);
  padding:.4rem .9rem; border-radius:8px; font-size:.82rem; cursor:pointer;
}
.wrap{max-width:1200px; margin:0 auto; padding:2rem 1.5rem;}
h1{font-size:1.6rem; margin-bottom:.25rem;}
.sub{color:var(--text2); font-size:.9rem; margin-bottom:1.5rem;}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.4rem; margin-bottom:1.5rem;}
.card-title{font-weight:700; font-size:.8rem; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr;}}
label{display:block; font-size:.8rem; color:var(--text2); margin-bottom:.3rem; font-weight:500;}
input,select,textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:.55rem .8rem; font-size:.9rem; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:var(--navy2);}
.field{margin-bottom:1rem;}
.btn{
  padding:.6rem 1.3rem; border-radius:8px; border:none; font-weight:600; font-size:.88rem;
  cursor:pointer; background:var(--accent); color:var(--navy);
}
.btn:hover{background:var(--accent2);}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text2);}
.btn-ghost:hover{color:var(--text); background:var(--card2);}
.btn-danger{background:rgba(240,82,82,.15); color:var(--red); border:1px solid rgba(240,82,82,.3);}
.btn-small{padding:.35rem .75rem; font-size:.78rem;}
table{width:100%; border-collapse:collapse;}
th{
  text-align:left; padding:.6rem .8rem; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text2); border-bottom:1px solid var(--border); white-space:nowrap;
}
td{padding:.6rem .8rem; font-size:.86rem; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}
.badge{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:20px; font-size:.75rem; font-weight:600;}
.badge-pending{background:rgba(245,158,11,.15); color:var(--amber);}
.badge-approved{background:rgba(62,207,142,.15); color:var(--green);}
.badge-refused{background:rgba(240,82,82,.15); color:var(--red);}
.badge-info{background:rgba(96,165,250,.15); color:var(--blue);}
.badge-neutral{background:rgba(160,160,160,.15); color:#9aa5b4;}
.flash{padding:.8rem 1.1rem; border-radius:10px; margin-bottom:1.2rem; font-size:.88rem;}
.flash-ok{background:rgba(62,207,142,.12); color:var(--green); border:1px solid rgba(62,207,142,.3);}
.flash-error{background:rgba(240,82,82,.12); color:var(--red); border:1px solid rgba(240,82,82,.3);}
.flash-warn{background:rgba(245,158,11,.12); color:var(--amber); border:1px solid rgba(245,158,11,.3);}
.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem;}
.login-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:2.2rem;
}
.login-card h1{text-align:center; color:var(--accent); margin-bottom:.3rem;}
.login-card .sub{text-align:center; margin-bottom:1.6rem;}
.empty-state{text-align:center; padding:2.5rem 1rem; color:var(--text2);}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem;}
.stat-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem;}
.stat-label{font-size:.78rem; color:var(--text2); margin-bottom:.3rem;}
.stat-value{font-size:1.5rem; font-weight:700;}
.actions-inline{display:flex; gap:.4rem;}
.muted{color:var(--text3); font-size:.8rem;}
form.inline{display:inline;}
.toolbar{display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.2rem;}
.toolbar .field{margin-bottom:0; min-width:160px;}

/* ── SÉLECTEUR DE MAGASIN ── */
.site-select-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem;}
.site-select-card{width:100%; max-width:640px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:2.4rem; text-align:center;}
.site-select-card h1{color:var(--accent); margin-bottom:.3rem;}
.site-select-card .sub{margin-bottom:1.8rem;}
.site-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media(max-width:560px){.site-grid{grid-template-columns:1fr;}}
.site-tile{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px;
  padding:1.6rem 1rem; color:var(--text); transition:all .15s;
}
.site-tile:hover{background:var(--card2); border-color:var(--accent); transform:translateY(-2px);}
.site-tile-icon{font-size:2rem;}
.site-tile-name{font-weight:600; font-size:.95rem;}

/* ── SÉLECTEUR DE MAGASIN (superviseur, dans la nav) ── */
.site-switch-form select{width:auto; padding:.4rem .7rem; font-size:.82rem;}

/* ── ALERTES (analyse effectifs) ── */
.alert{border-radius:12px; padding:.9rem 1.2rem; margin-bottom:.7rem; border:1px solid var(--border);}
.alert-title{font-weight:700; font-size:.9rem; margin-bottom:.2rem;}
.alert-body{font-size:.85rem; color:var(--text2);}
.alert-critical{background:rgba(240,82,82,.1); border-color:rgba(240,82,82,.3);}
.alert-critical .alert-title{color:var(--red);}
.alert-warn{background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3);}
.alert-warn .alert-title{color:var(--amber);}
.alert-ok{background:rgba(62,207,142,.1); border-color:rgba(62,207,142,.3);}
.alert-ok .alert-title{color:var(--green);}

/* ── EFFECTIF BARS ── */
.effectif-row{display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem;}
.effectif-label{font-size:.82rem; color:var(--text2); width:110px; flex-shrink:0;}
.effectif-bar-wrap{flex:1; background:rgba(255,255,255,.06); border-radius:6px; height:10px; overflow:hidden;}
.effectif-bar{height:100%; border-radius:6px; transition:width .3s ease;}
.effectif-count{font-size:.82rem; font-weight:600; width:60px; text-align:right;}

/* ── COUVERTURE CAISSE ── */
.coverage-day{border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem;}
.coverage-day-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem;}
.coverage-day-name{font-weight:700; font-size:.92rem;}
.coverage-day-status{font-size:.8rem; font-weight:600; padding:.2rem .6rem; border-radius:20px;}
.status-ok{background:rgba(62,207,142,.15); color:var(--green);}
.status-gap{background:rgba(245,158,11,.15); color:var(--amber);}
.status-nocover{background:rgba(240,82,82,.15); color:var(--red);}
.coverage-timeline{display:flex; flex-direction:column; gap:.35rem;}
.timeline-row{display:flex; align-items:center; gap:.7rem;}
.tl-emp-name{width:100px; flex-shrink:0; font-size:.8rem; font-weight:600; color:var(--text2);}
.tl-bar-wrap{position:relative; flex:1; height:26px; background:rgba(255,255,255,.04); border-radius:6px; overflow:hidden;}
.tl-bar{position:absolute; top:0; bottom:0; border-radius:6px; display:flex; align-items:center; padding-left:.5rem; font-size:.7rem; font-weight:600; color:#0f1923; white-space:nowrap; overflow:hidden;}
.tl-gap{position:absolute; top:0; bottom:0; background:repeating-linear-gradient(45deg, rgba(240,82,82,.3), rgba(240,82,82,.3) 6px, rgba(240,82,82,.5) 6px, rgba(240,82,82,.5) 12px); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:var(--red);}
.tl-rest{position:absolute; inset:0; display:flex; align-items:center; padding-left:.5rem; font-size:.7rem; color:var(--text3);}
.tl-hours{display:flex; justify-content:space-between; margin-top:.4rem; margin-left:107px; font-size:.68rem; color:var(--text3);}

/* ── PLANNING : GRILLE VISUELLE (style épuré, texte souligné) ── */
.planning-legend{display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.8rem; color:var(--text2); align-items:center;}
.planning-legend-item{display:flex; align-items:center; gap:.4rem;}
.legend-dot{width:8px; height:8px; border-radius:2px;}
.legend-underline{width:16px; height:0; border-bottom:2px solid; display:inline-block;}
.planning-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:14px;}
.planning-table{width:100%; border-collapse:collapse; min-width:900px;}
.planning-table th{padding:.7rem .9rem; font-size:.7rem; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--border); text-align:center; background:rgba(255,255,255,.04);}
.planning-table th.emp-col{text-align:left; width:150px;}
.planning-table td{padding:.55rem .5rem; border-bottom:1px solid var(--border); vertical-align:middle; text-align:center;}
.planning-table tr:last-child td{border-bottom:none;}
.planning-table tbody tr:hover{background:rgba(255,255,255,.025);}
.emp-cell{display:flex; align-items:center; gap:.6rem; padding:.2rem .4rem;}
.emp-cell-name{font-weight:600; font-size:.85rem; display:flex; align-items:center; gap:.4rem;}
.absence-avatar{border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;}
.cashier-dot{width:6px; height:6px; border-radius:1px; display:inline-block;}

.schedule-cell{position:relative; min-width:108px;}
.sched-details{position:relative; display:inline-block; width:100%;}
.sched-details summary{list-style:none; cursor:pointer; display:flex; justify-content:center; padding:.15rem;}
.sched-details summary::-webkit-details-marker{display:none;}
.sched-details summary:hover{opacity:.8;}
.sched-display{
  font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap;
  border-bottom:2px solid; padding-bottom:2px;
}
.sched-repos{font-size:.8rem; color:var(--text3); font-style:italic; text-transform:uppercase; letter-spacing:.03em;}

.sched-editor{
  position:absolute; z-index:50; top:100%; left:50%; transform:translateX(-50%);
  background:var(--navy2); border:1px solid var(--accent); border-radius:12px;
  padding:.8rem; width:190px; box-shadow:var(--shadow, 0 4px 24px rgba(0,0,0,.4));
  text-align:left; margin-top:.3rem;
}
.sched-editor-title{font-size:.75rem; font-weight:700; color:var(--accent); margin-bottom:.5rem;}
.sched-rest-toggle{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text2); margin-bottom:.5rem;}
.sched-rest-toggle input{width:auto;}
.sched-editor-row{display:flex; gap:.4rem; align-items:center; margin-bottom:.5rem;}
.sched-editor-row label{font-size:.73rem; color:var(--text2); width:36px; flex-shrink:0;}
.sched-editor-row input{flex:1; padding:.3rem .5rem; font-size:.78rem;}
.sched-editor-actions{display:flex; gap:.4rem;}
.sched-editor-actions button{
  flex:1; padding:.4rem; border-radius:7px; border:none; font-size:.8rem;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.se-save{background:var(--accent); color:var(--navy);}
.se-save:hover{background:var(--accent2);}