<style>
:root {
  --b1:#0b0e14;--b2:#151921;--b3:#1f2530;--b4:#252d3d;--br:#2d3545;
  --t1:#f0f2f5;--t2:#8a95ad;--t3:#4a5568;
  --ac:#4f46e5;--ac2:#6366f1;--dg:#ef4444;--sc:#10b981;--warn:#f59e0b;--info:#06b6d4;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',sans-serif}
body{background:var(--b1);color:var(--t1);display:flex;flex-direction:column;height:100vh;overflow:hidden}
.h{display:none!important}

/* ── LOGIN ── */
#L{position:fixed;inset:0;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:var(--b2);padding:2.5rem;border-radius:16px;border:1px solid var(--br);text-align:center;width:360px;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.login-box h2{color:var(--ac);margin-bottom:1.5rem;font-size:1.6rem;letter-spacing:-.5px}
.login-box p{color:var(--t2);font-size:.8rem;margin-bottom:1.2rem}
.login-box input{width:100%;margin-bottom:10px;padding:11px;border-radius:8px;border:1px solid var(--br);background:var(--b3);color:var(--t1);font-size:1rem}
.login-box input:focus{outline:none;border-color:var(--ac)}
.login-error{color:var(--dg);font-size:.8rem;min-height:1.4em;margin-bottom:8px}

/* ── LAYOUT ── */
header{background:var(--b2);padding:8px 16px;border-bottom:1px solid var(--br);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
nav{background:var(--b2);display:flex;border-bottom:1px solid var(--br);padding:0 8px;flex-shrink:0;overflow-x:auto}
.t-btn{padding:10px 16px;border:none;background:none;color:var(--t2);cursor:pointer;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap;font-size:.85rem;transition:color .15s}
.t-btn.active{color:var(--ac);border-bottom-color:var(--ac);background:rgba(79,70,229,.05)}
.t-btn:hover:not(.active){color:var(--t1)}
.toolbar{background:var(--b3);padding:7px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--br);font-size:.82rem;flex-wrap:wrap;flex-shrink:0}
main{flex:1;overflow:auto;padding:12px}

/* ── BUTTONS ── */
.btn{padding:7px 14px;border-radius:6px;border:none;cursor:pointer;font-weight:700;background:var(--ac);color:#fff;transition:filter .15s;font-size:.82rem;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.9)}
.btn-sm{padding:5px 10px;font-size:.78rem}
.btn-xs{padding:3px 8px;font-size:.72rem}
.btn-ghost{background:var(--b3);color:var(--t2);border:1px solid var(--br)}
.btn-ghost:hover{color:var(--t1);border-color:var(--t2)}
.btn-danger{background:var(--dg)}
.btn-success{background:var(--sc)}
.btn-warn{background:var(--warn);color:#000}

/* ── FORMS ── */
input,select,textarea{background:var(--b3);border:1px solid var(--br);color:var(--t1);padding:6px 9px;border-radius:6px;font-size:.83rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}
textarea{resize:vertical;font-family:inherit}
label{font-size:.75rem;color:var(--t2);display:block;margin-bottom:3px}
.form-row{display:grid;gap:10px;margin-bottom:12px}
.form-row.c2{grid-template-columns:1fr 1fr}
.form-row.c3{grid-template-columns:2fr 1fr 1fr}

/* ── TABLE BASE ── */
.table-wrap{background:var(--b2);border:1px solid var(--br);border-radius:8px;overflow:auto;position:relative}
.table-wrap.plan-h{max-height:calc(100vh - 185px)}
table{border-collapse:collapse;width:100%;table-layout:fixed}
th,td{border:1px solid var(--br);text-align:center;height:42px;font-size:.72rem}
th{background:var(--b3);position:sticky;top:0;z-index:5;font-size:.7rem;padding:0 2px}
.sticky-col{position:sticky;left:0;background:var(--b3)!important;z-index:10;border-right:2px solid var(--ac);text-align:left;padding-left:8px;font-weight:700;font-size:.77rem}
.sticky-col2{position:sticky;left:0;z-index:10}
.col-today{background:rgba(79,70,229,.15)!important;border-left:2px solid var(--ac)!important;border-right:2px solid var(--ac)!important}
.weekend{background:rgba(0,0,0,.18)}
.day-sub{display:block;font-size:.58rem;color:var(--t2);font-weight:normal}

/* ── VACATION CELLS ── */
.v{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#000;cursor:pointer;transition:filter .1s;font-size:.72rem;position:relative}
.v:hover{filter:brightness(1.2)}
.v.J{background:var(--v-J,#fbbf24)}
.v.S{background:var(--v-S,#f97316)}
.v.N{background:var(--v-N,#6366f1);color:#fff}
.v.R{background:var(--v-R,#22c55e)}
.v.CA{background:var(--v-CA,#ec4899);color:#fff}
.v.note-dot::after{content:'';position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.8}
td.editable{cursor:pointer}
td.readonly{cursor:default}
.conflict-row .sticky-col{color:var(--dg)}
.conflict-cell{outline:2px solid var(--dg)!important;outline-offset:-2px}
.understaff{background:rgba(239,68,68,.12)!important}
.overstaff{background:rgba(245,158,11,.12)!important}
.manual-override{position:relative}
.manual-override::before{content:'';position:absolute;top:0;left:0;width:0;height:0;border-top:5px solid var(--ac);border-right:5px solid transparent;z-index:2}

/* ── STATS ── */
.stats-cell{font-size:.68rem;line-height:1.7;padding:2px 5px;text-align:left;min-width:120px}
.stat-j{color:#fbbf24}.stat-s{color:#f97316}.stat-n{color:#818cf8}.stat-r{color:#22c55e}.stat-ca{color:#ec4899}
.total-h{font-weight:700;color:var(--sc)}

/* ── LEGEND ── */
.legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.leg-item{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--t2);cursor:pointer;padding:2px 5px;border-radius:4px;transition:background .1s}
.leg-item:hover{background:var(--b4)}
.leg-item.active-filter{background:var(--b4);color:var(--t1);outline:1px solid var(--ac)}
.leg-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}

/* ── POPUP ── */
#cell-popup{position:fixed;z-index:2000;background:var(--b2);border:1px solid var(--ac);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 32px rgba(0,0,0,.6);min-width:170px}
#cell-popup .pop-title{font-size:.68rem;color:var(--t2);text-align:center;border-bottom:1px solid var(--br);padding-bottom:6px}
#cell-popup .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pop-btn{padding:7px 4px;border:none;border-radius:5px;cursor:pointer;font-weight:800;font-size:.8rem;color:#000;transition:filter .1s}
.pop-btn:hover{filter:brightness(1.15)}
.pop-btn.J{background:#fbbf24}.pop-btn.S{background:#f97316}
.pop-btn.N{background:#6366f1;color:#fff}.pop-btn.R{background:#22c55e}
.pop-btn.CA{background:#ec4899;color:#fff;grid-column:span 2}
.pop-btn.CLR{background:var(--b3);color:var(--t2);border:1px solid var(--br);grid-column:span 2;font-weight:600;font-size:.72rem}
.pop-note-area{font-size:.75rem;padding:5px;border-top:1px solid var(--br);margin-top:2px}
.pop-note-area textarea{width:100%;height:50px;font-size:.72rem;padding:4px}
.pop-note-area button{width:100%;margin-top:4px}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;display:flex;align-items:center;justify-content:center}
.modal{background:var(--b2);border:1px solid var(--br);border-radius:12px;padding:24px;max-width:540px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.7)}
.modal h3{color:var(--ac);margin-bottom:16px;font-size:1.1rem}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--br)}

/* ── TOAST ── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--b2);border:1px solid var(--br);color:var(--t1);padding:9px 18px;border-radius:8px;font-size:.82rem;z-index:9998;opacity:0;transition:opacity .3s;pointer-events:none;max-width:340px;text-align:center}
#toast.show{opacity:1}
#toast.ok{border-color:var(--sc);color:var(--sc)}
#toast.err{border-color:var(--dg);color:var(--dg)}
#toast.warn{border-color:var(--warn);color:var(--warn)}
#toast.info{border-color:var(--info);color:var(--info)}

/* ── BADGE ── */
.badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:.65rem;font-weight:700}
.badge-ok{background:rgba(16,185,129,.15);color:var(--sc)}
.badge-warn{background:rgba(245,158,11,.15);color:var(--warn)}
.badge-err{background:rgba(239,68,68,.15);color:var(--dg)}
.badge-info{background:rgba(6,182,212,.15);color:var(--info)}

/* ── CARDS ── */
.card{background:var(--b2);border:1px solid var(--br);border-radius:8px;padding:16px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.stat-card{background:var(--b3);border:1px solid var(--br);border-radius:8px;padding:14px;text-align:center}
.stat-card .stat-num{font-size:1.8rem;font-weight:800;color:var(--ac);line-height:1}
.stat-card .stat-label{font-size:.7rem;color:var(--t2);margin-top:4px}

/* ── AGENT CARD ── */
.agent-card{background:var(--b3);padding:11px 14px;margin-top:8px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--br);gap:10px}
.agent-info{flex:1;min-width:0}
.agent-cycle{font-size:.72rem;color:var(--t2);margin-top:3px;word-break:break-all;font-family:monospace}
.agent-actions{display:flex;gap:6px;flex-shrink:0}

/* ── SIDEBAR ALERTS ── */
.alert-item{padding:8px 12px;border-radius:6px;font-size:.78rem;margin-bottom:6px;display:flex;gap:8px;align-items:flex-start}
.alert-item.warn{background:rgba(245,158,11,.1);border-left:3px solid var(--warn)}
.alert-item.err{background:rgba(239,68,68,.1);border-left:3px solid var(--dg)}
.alert-item.info{background:rgba(6,182,212,.1);border-left:3px solid var(--info)}

/* ── HISTORY ── */
.hist-item{padding:8px 12px;border-bottom:1px solid var(--br);font-size:.75rem;display:flex;gap:10px;align-items:baseline}
.hist-time{color:var(--t3);white-space:nowrap;font-size:.68rem;flex-shrink:0}
.hist-text{color:var(--t2)}
.hist-text b{color:var(--t1)}

/* ── CHART BAR ── */
.chart-bar-wrap{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.chart-bar-label{font-size:.75rem;min-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.chart-bar-bg{flex:1;height:18px;background:var(--b3);border-radius:4px;overflow:hidden;position:relative}
.chart-bar-fill{height:100%;border-radius:4px;transition:width .4s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:.68rem;font-weight:700;color:#000}
.chart-bar-val{font-size:.72rem;color:var(--t2);min-width:50px}

/* ── ROLE-BASED NAV ── */
/* Role nav managed by JS _applyRoleNav() */

/* ── NOTIFICATION POPUP ── */
#notif-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8888;display:flex;align-items:center;justify-content:center}
#notif-box{background:var(--b2);border:1px solid var(--br);border-radius:14px;padding:24px 28px;width:420px;max-width:95vw;box-shadow:0 24px 64px rgba(0,0,0,.5)}
#notif-box h3{color:var(--ac);font-size:1rem;margin-bottom:4px}
#notif-box p{color:var(--t2);font-size:.82rem;margin-bottom:16px}
.notif-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;margin-bottom:16px}
.notif-card{background:var(--b3);border:1px solid var(--br);border-radius:8px;padding:11px 13px}
.notif-card .nc-agent{font-weight:700;font-size:.85rem;color:var(--t1);margin-bottom:3px}
.notif-card .nc-detail{font-size:.78rem;color:var(--t2);margin-bottom:8px}
.notif-card .nc-actions{display:flex;gap:6px}

/* ── AGENT PROPOSE CELL ── */
.cell-propose{cursor:pointer}
.cell-propose .v:hover{outline:2px dashed var(--warn);outline-offset:-2px}

/* ── AGENT PENDING BADGE ON CELL ── */
.v.pending-proposal{outline:2px dashed var(--warn)!important;outline-offset:-2px;opacity:.85}

/* ── JOURS FÉRIÉS ── */
.jf-header{background:rgba(251,113,133,.18)!important;border-bottom:2px solid #fb7185!important}
.v.JF{background:#fb7185;color:#fff;font-size:.65rem;font-weight:800}
.jf-cell{background:rgba(251,113,133,.08)!important}
.jf-disabled{opacity:.4;text-decoration:line-through}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--b1)}
::-webkit-scrollbar-thumb{background:var(--br);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* ══════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header compact */
  header { padding: 6px 10px; }
  header h2 { font-size: .9rem; }
  #cur-date-txt { display: none; }
  #st { display: none; }
  .btn-sm { padding: 6px 10px; font-size: .75rem; }

  /* Nav → barre fixe en bas */
  nav#ui-n {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    border-top: 1px solid var(--br);
    border-bottom: none;
    padding: 0;
    background: var(--b2);
    display: flex !important;
    justify-content: space-around;
    overflow-x: auto;
  }
  nav#ui-n .t-btn {
    padding: 8px 6px 6px;
    font-size: .6rem;
    flex: 1;
    border-bottom: none;
    border-top: 3px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
  }
  nav#ui-n .t-btn.active {
    border-top-color: var(--ac);
    border-bottom: none;
  }
  /* Icônes nav mobile */
  #tab-PLAN::before    { content: '📅'; font-size: .9rem; }
  #tab-WEEK::before    { content: '📆'; font-size: .9rem; }
  #tab-ANNUAL::before  { content: '🗓'; font-size: .9rem; }
  #tab-DASH::before    { content: '📊'; font-size: .9rem; }
  #tab-DEMANDS::before { content: '📋'; font-size: .9rem; }
  #tab-HIST::before    { content: '🕒'; font-size: .9rem; }
  #tab-AGTS::before    { content: '👥'; font-size: .9rem; }
  #tab-SETTINGS::before{ content: '⚙️'; font-size: .9rem; }

  /* Contenu décalé pour éviter la nav du bas */
  main { padding: 8px 6px 70px; }
  body { padding-bottom: 0; }

  /* Toolbar : scrollable horizontal, plus compacte */
  .toolbar {
    padding: 5px 8px;
    gap: 6px;
    font-size: .75rem;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  /* Masquer légende et tri sur mobile */
  #legend-bar { display: none; }
  #sort-sel { display: none; }
  #agent-search { width: 100px; }

  /* Section lot : passe en colonne */
  .toolbar > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid var(--br);
    padding-top: 6px;
    margin-top: 2px;
  }

  /* Table : cellules plus grandes au toucher */
  .v { font-size: .8rem; min-height: 36px; }
  th, td { height: 38px; font-size: .68rem; }
  .sticky-col { min-width: 90px; font-size: .7rem; }
  .table-wrap.plan-h { max-height: calc(100vh - 160px); }

  /* Popup cellule : plus grand pour les doigts */
  #cell-popup { min-width: 200px; }
  .pop-btn { padding: 12px 4px; font-size: .9rem; }

  /* Modal plein écran */
  .modal { width: 96%; max-height: 90vh; padding: 16px; }

  /* Login box */
  .login-box { width: 92vw; padding: 1.8rem; }

  /* Sidebar masquée sur mobile */
  #ui-sidebar { display: none !important; }

  /* Stats masquées sur mobile */
  .stats-cell { display: none; }
  th:last-child, td:last-child { display: none; }
}

/* ── PRINT ── */
@page{
  size:A4 landscape;
  margin:8mm 6mm 8mm 6mm;
}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{overflow:visible;height:auto;background:#fff;color:#000;font-size:7pt}
  header,nav,.toolbar,#cell-popup,#toast,#ui-sidebar,.no-print,
  #WEEK,#ANNUAL,#DASH,#DEMANDS,#HIST,#AGTS,#SETTINGS{display:none!important}
  #PLAN{display:block!important}
  main{padding:0;overflow:visible;display:block!important}
  #main-content{overflow:visible;padding:0}
  .table-wrap{overflow:visible;max-height:none;border:none;border-radius:0;box-shadow:none}

  /* Masquer la colonne stats */
  th:last-child,td:last-child{display:none!important}

  /* Optimisation A4 paysage : réduire au maximum */
  table{width:100%!important;table-layout:fixed;border-collapse:collapse;font-size:6.5pt}
  th,td{border:0.4pt solid #bbb;height:18pt;font-size:6.5pt;color:#000;padding:0 1pt}
  th{height:20pt;font-size:6pt;background:#f0f0f0!important}
  .sticky-col{background:#e8e8e8!important;color:#000;width:90pt!important;font-size:6.5pt;border-right:1pt solid #999}
  .day-sub{font-size:5pt;display:block}

  /* Vacation colors — pastel pour économiser l'encre */
  .v{font-weight:700;font-size:6pt;height:100%;width:100%;display:flex;align-items:center;justify-content:center}
  .v.J{background:#fde68a!important;color:#000!important}
  .v.S{background:#fed7aa!important;color:#000!important}
  .v.N{background:#c7d2fe!important;color:#000!important}
  .v.R{background:#bbf7d0!important;color:#000!important}
  .v.CA{background:#fce7f3!important;color:#000!important}
  .v.JF{background:#fecdd3!important;color:#000!important}
  .col-today{background:#e0e7ff!important;border-left:1pt solid #4f46e5!important;border-right:1pt solid #4f46e5!important}
  .weekend{background:#f5f5f5!important}
  .jf-cell{background:#fff1f2!important}
  .jf-header{background:#fecdd3!important;border-bottom:1pt solid #fb7185!important}
  .conflict-cell{outline:1pt solid #ef4444!important;outline-offset:-1pt}
  .manual-override::before{content:'';position:absolute;top:0;left:0;width:0;height:0;border-top:4pt solid #4f46e5;border-right:4pt solid transparent}

  /* En-tête d'impression */
  #print-title{display:block!important;text-align:center;font-size:10pt;font-weight:700;margin-bottom:4mm;color:#000;letter-spacing:.05em}
  #print-subtitle{display:block!important;text-align:center;font-size:7pt;color:#555;margin-bottom:3mm}

  /* Saut de page propre */
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
}
#print-title{display:none}
#print-subtitle{display:none}

/* ── TABS SECONDARY ── */
.stab-bar{display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:16px}
.stab{padding:8px 16px;border:none;background:none;color:var(--t2);cursor:pointer;font-size:.82rem;font-weight:600;border-bottom:2px solid transparent}
.stab.active{color:var(--ac);border-bottom-color:var(--ac)}

/* ── DEMAND ── */
.demand-card{background:var(--b3);border:1px solid var(--br);border-radius:8px;padding:12px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.demand-body{flex:1}
.demand-actions{display:flex;gap:6px;flex-shrink:0}

/* ── WEEKLY VIEW ── */
#WEEK .week-header{display:grid;grid-template-columns:170px repeat(7,1fr);border-bottom:2px solid var(--ac);margin-bottom:4px}
#WEEK .week-day-hdr{text-align:center;padding:6px 2px;font-size:.75rem;font-weight:700}
#WEEK .week-day-hdr.today-hdr{color:var(--ac)}
#WEEK .week-row{display:grid;grid-template-columns:170px repeat(7,1fr);margin-bottom:3px}
#WEEK .week-agent{padding:6px 10px;font-size:.78rem;font-weight:700;background:var(--b3);border-radius:6px 0 0 6px;border:1px solid var(--br);border-right:none;display:flex;align-items:center}
#WEEK .week-cell{border:1px solid var(--br);height:52px;cursor:pointer;transition:border-color .1s}
#WEEK .week-cell:hover{border-color:var(--ac)}
#WEEK .week-cell.today-col{background:rgba(79,70,229,.1);border-color:var(--ac)}
</style>