/* ═══════════════════════════════════════════════════════
   ShiftScheduler · styles.css  — reference-exact dark UI
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Syne:wght@400;600;700;800&display=swap');

:root {
  --bg:    #0d1117;
  --s1:    #161b22;
  --s2:    #1c2230;
  --s3:    #21262d;
  --s4:    #2d333b;
  --b1:    #30363d;
  --b2:    #444c56;
  --t1:    #e6edf3;
  --t2:    #8b949e;
  --t3:    #484f58;
  --cyan:  #39d0f0;
  --green: #3fb950;
  --amber: #d29922;
  --red:   #f85149;
  /* Shift badge fills matching MODEL.xlsx exactly */
  --c-m:  #fff2cc; --c-a:  #ddebf7; --c-n:  #e2efda;
  --c-e:  #fce4d6; --c-e1: #f8d7f0; --c-g:  #fff2cc;
  /* Unavailability codes — RED family as per requirement */
  --c-pl: #ffcccc; --c-co: #ffaaaa; --c-ad: #ffe0cc;
  --c-h:  #ff4444; --c-ah: #ff4444; --c-lh: #ff7777; --c-w: #d9d9d9;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
html{font-size:13px}
body{font-family:'JetBrains Mono',monospace;background:var(--bg);color:var(--t1);min-height:100vh;display:flex;overflow:hidden}

/* ═══ SIDEBAR ═══ */
.sidebar{width:238px;min-width:238px;background:var(--s1);border-right:1px solid var(--b1);height:100vh;overflow-y:auto;position:sticky;top:0;display:flex;flex-direction:column;padding-bottom:20px}
.sb-logo{display:flex;align-items:center;gap:10px;padding:16px 16px 13px;border-bottom:1px solid var(--b1)}
.sb-logo-icon{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--cyan));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-logo-name{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--t1);display:block}
.sb-logo-sub{font-size:10px;color:var(--t3);display:block;margin-top:1px}
.sb-nav{padding:12px 10px 4px}
.sb-ref{padding:4px 10px 8px}
.sb-sec-lbl{font-size:9px;letter-spacing:2px;color:var(--t3);padding:0 6px;margin-bottom:8px}
.sb-ref-grp{font-size:8.5px;letter-spacing:1.5px;color:var(--t3);margin:6px 0 4px 2px}
.sb-ref-row{display:flex;align-items:center;gap:8px;padding:2.5px 2px;font-size:10px;color:var(--t2)}
.sb-ref-plain{font-size:10px;color:var(--t3);padding:2px 2px}

.sb-step{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;cursor:pointer;margin-bottom:3px;border:1px solid transparent;transition:background .12s}
.sb-step:hover{background:var(--s3)}
.sb-step.s-active{background:var(--s4);border-color:var(--b2)}
.sb-step.s-done .sb-num{background:var(--green)!important;border-color:var(--green)!important;color:#0d1117!important}
.sb-step.s-active .sb-num{background:var(--cyan)!important;border-color:var(--cyan)!important;color:#0d1117!important}
.sb-num{width:22px;height:22px;border-radius:50%;background:var(--s3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);flex-shrink:0;transition:background .15s,color .15s}
.sb-step-title{font-size:11px;font-weight:600;color:var(--t1)}
.sb-step-sub{font-size:9.5px;color:var(--t3);margin-top:1px}

/* Shift code badges — colours match MODEL.xlsx Legend exactly */
.sc{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:17px;border-radius:3px;font-size:8.5px;font-weight:700;padding:0 4px;flex-shrink:0;letter-spacing:.2px;color:#000}
.sc-g{background:var(--c-g);color:#7f6000}
.sc-m{background:var(--c-m);color:#7f6000}
.sc-a{background:var(--c-a);color:#1F3864}
.sc-n{background:var(--c-n);color:#375623}
.sc-e{background:var(--c-e);color:#843C0C}
.sc-e1{background:var(--c-e1);color:#762956}
.sc-pl{background:var(--c-pl);color:#7B0000;font-weight:700}
.sc-co{background:var(--c-co);color:#7B0000;font-weight:700}
.sc-ad{background:var(--c-ad);color:#833C00;font-size:7.5px;letter-spacing:-.2px}
.sc-st{background:#ffd966;color:#7f6000}
/* AH = account holiday (red-ish like H) */
.sc-ah{background:var(--c-ah,var(--c-h));color:#fff;font-size:8px;font-weight:700}
.sc-lh{background:var(--c-lh);color:#fff;font-size:8px;font-weight:700}
/* LH = local holiday (soft teal) */
.sc-w{background:var(--c-w);color:#444}

/* ═══ MAIN ═══ */
.main{flex:1;overflow-y:auto;height:100vh;background:var(--bg);display:flex;flex-direction:column}
.topbar{padding:20px 26px 14px;border-bottom:1px solid var(--b1);background:var(--bg);position:sticky;top:0;z-index:10}
.topbar h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--t1)}
.topbar h1 .cyan{color:var(--cyan)}
.topbar p{font-size:10.5px;color:var(--t3);margin-top:4px}
.content{padding:16px 26px 30px;flex:1}

.grid-2col{display:grid;grid-template-columns:1fr 368px;gap:14px;margin-bottom:14px}

/* Cards */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:10px;overflow:hidden}
.card-hd{padding:13px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px}
.card-ico{font-size:15px;flex-shrink:0}
.card-title{font-family:'Syne',sans-serif;font-size:12.5px;font-weight:700;color:var(--t1)}
.card-sub{font-size:9.5px;color:var(--t3);margin-top:1.5px}
.card-bd{padding:16px}

/* Dropzone */
.dropzone{border:2px dashed var(--b2);border-radius:9px;padding:30px 20px;text-align:center;cursor:pointer;background:var(--s2);position:relative;transition:all .18s;min-height:140px;display:flex;align-items:center;justify-content:center}
.dropzone:hover,.dropzone.drag{border-color:var(--green);background:rgba(63,185,80,.05)}
.dropzone.ready{border-style:solid;border-color:var(--green);background:rgba(63,185,80,.06)}
.dropzone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dz-icon{margin-bottom:9px}
.dz-title{font-size:12.5px;font-weight:600;color:var(--t1)}
.dz-sub{font-size:10px;color:var(--t3);margin-top:3px}
.dz-ok{font-size:13px;font-weight:700;color:var(--green)}
.dz-kb{font-size:10px;color:var(--t3);margin-top:3px}
.dz-fname{font-size:11px;color:var(--green);margin-top:3px;font-weight:600}

/* Chips */
.chips-lbl{font-size:8.5px;letter-spacing:1.5px;color:var(--t3);margin:13px 0 7px}
.chips-wrap{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:var(--s3);border:1px solid var(--b2);border-radius:20px;padding:3px 10px;font-size:9.5px;color:var(--t2);display:inline-flex;align-items:center;gap:4px}
.chip-n{background:var(--cyan);color:#0d1117;border-radius:10px;padding:0 5px;font-size:8.5px;font-weight:700}
.autofill-hint{margin-top:10px;padding:7px 11px;background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:6px;font-size:10px;color:var(--green)}

/* Date range */
.dt-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:13px}
.dt-arr{color:var(--t3);font-size:12px}
.dt-col{display:flex;flex-direction:column;gap:4px}
.f-lbl{font-size:9.5px;color:var(--t2);font-weight:500}
.f-lbl2{font-size:10px;font-weight:600;color:var(--t2);display:block;margin-bottom:5px}
.f-hint{font-size:8.5px;font-weight:400;color:var(--t3)}
.f-inp,.f-ta{background:var(--s2);border:1px solid var(--b2);color:var(--t1);border-radius:7px;padding:7px 10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;outline:none;width:100%;transition:border .13s}
.f-inp:focus,.f-ta:focus{border-color:var(--cyan)}
.f-ta{resize:vertical;min-height:52px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.55);cursor:pointer}

/* ── HOLIDAY PILLS ──
   AH pill: warm amber/red matching MODEL legend H colour
   LH pill: soft blue matching MODEL legend style
   Both show "05 Jun 2026" human-readable format     */
.hol-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;min-height:4px}

/* Account Holiday pill — amber, matches MODEL H cell colour scheme */
.hol-ah{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(210,153,34,.14);
  border:1px solid rgba(210,153,34,.45);
  border-radius:20px;padding:3px 10px;
  font-size:9.5px;font-weight:600;color:#e8c04a;
}
.hol-ah-lbl{
  font-size:8px;font-weight:700;
  background:rgba(210,153,34,.35);color:#d29922;
  border-radius:4px;padding:0 4px;
}

/* Location Holiday pill — cyan/blue, matches MODEL LH scheme */
.hol-lh{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(57,208,240,.1);
  border:1px solid rgba(57,208,240,.35);
  border-radius:20px;padding:3px 10px;
  font-size:9.5px;font-weight:600;color:var(--cyan);
}
.hol-lh-lbl{
  font-size:8px;font-weight:700;
  background:rgba(57,208,240,.2);color:var(--cyan);
  border-radius:4px;padding:0 4px;
}
.hol-loc-name{font-size:8.5px;font-weight:400;color:var(--t2)}

/* Mono editor */
.mono-ta{width:100%;background:var(--s2);border:1px solid var(--b1);border-radius:7px;color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.75;padding:11px 13px;outline:none;resize:vertical;min-height:180px}
.mono-ta:focus{border-color:var(--cyan)}
.mono-ta::placeholder{color:var(--t3)}

/* Quick-ref bar */
.qr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.qr-lbl{font-size:9px;color:var(--t3)}
.ml8{margin-left:6px}
.qc{background:var(--s3);border:1px solid var(--b2);border-radius:4px;padding:2px 7px;font-size:8.5px;color:var(--t2);cursor:pointer;font-family:'JetBrains Mono',monospace;transition:background .12s}
.qc:hover{background:var(--b2);color:var(--t1)}

.mismatch-bar{margin-top:9px;padding:8px 12px;background:rgba(210,153,34,.07);border:1px solid rgba(210,153,34,.22);border-radius:7px;font-size:9px;color:var(--amber);line-height:1.65}

/* Preview table */
.preview-sec{margin-top:15px}
.preview-lbl{font-size:8.5px;letter-spacing:1.5px;color:var(--t3);margin-bottom:7px}
.tbl-wrap{overflow-x:auto}
.ptbl{width:100%;border-collapse:collapse;font-size:10.5px}
.ptbl th{background:var(--s3);padding:7px 11px;text-align:left;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b2);white-space:nowrap}
.ptbl td{padding:8px 11px;border-bottom:1px solid var(--b1);color:var(--t2)}
.ptbl tr:hover td{background:var(--s2)}
.tc{color:var(--cyan);font-weight:600}
.tw{color:var(--green);font-weight:600}
.tok{color:var(--green)}.twn{color:var(--amber)}

/* Leave section */
.opt-tag{font-size:8.5px;font-weight:400;color:var(--t3);background:var(--s3);border:1px solid var(--b2);border-radius:12px;padding:1px 7px;margin-left:8px}
#chevron{font-size:11px;color:var(--t3);margin-left:2px}
.leave-hint{font-size:9.5px;color:var(--t3);line-height:2;margin-bottom:10px}
.leave-hint code{color:var(--amber);background:rgba(210,153,34,.07);padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:9.5px}
.leave-note{font-size:8.5px;color:var(--t3)}

/* Coverage warn */
.cov-warn{margin-top:10px;padding:9px 13px;background:rgba(248,81,73,.07);border:1px solid rgba(248,81,73,.25);border-radius:7px;font-size:9.5px;color:var(--red);display:flex;gap:8px;align-items:flex-start}

/* Buttons */
.lnk-btn{background:none;border:none;color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:9.5px;cursor:pointer;text-decoration:underline;padding:0}
.lnk-btn:hover{color:var(--green)}
.ml12{margin-left:12px}

/* Generate bar */
.gen-bar{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 65%,transparent);padding:13px 26px 18px;display:flex;justify-content:flex-end}
.btn-gen{background:linear-gradient(135deg,var(--cyan),var(--green));color:#0d1117;border:none;border-radius:9px;padding:11px 26px;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 0 22px rgba(57,208,240,.22);transition:all .18s}
.btn-gen:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(57,208,240,.38)}
.btn-gen:disabled{opacity:.32;cursor:not-allowed;transform:none}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:200}
.modal-bg.open{display:flex}
.modal{background:var(--s1);border:1px solid var(--b2);border-radius:12px;padding:28px;max-width:460px;width:92%}
.modal-icon{font-size:28px;margin-bottom:8px}
.modal-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--red);margin-bottom:10px}
.modal-msg{font-size:11px;color:var(--t2);line-height:1.7;margin-bottom:12px}
.modal-dates{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.modal-date-tag{background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.3);color:var(--red);border-radius:5px;padding:2px 9px;font-size:9.5px}
.modal-btns{display:flex;gap:10px;justify-content:flex-end}
.mbtn-sec{background:var(--s2);border:1px solid var(--b2);color:var(--t1);padding:8px 17px;border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;cursor:pointer}
.mbtn-red{background:var(--red);color:#fff;border:none;padding:8px 17px;border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;cursor:pointer}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--s4);border:1px solid var(--green);color:var(--green);padding:9px 18px;border-radius:7px;font-size:10.5px;z-index:300;pointer-events:none;transition:transform .25s;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:860px){
  .sidebar{display:none}
  .grid-2col{grid-template-columns:1fr}
  body,main{overflow:auto;height:auto}
}

/* ── UNAVAILABILITY CELL HIGHLIGHTS (red family) ── */
/* Applied in the UI preview table and Excel output */
.cell-unavail { background:rgba(255,68,68,.15); color:#ff4444; font-weight:700; }
.cell-pl  { background:#ffcccc; color:#7B0000; font-weight:700; border-radius:3px; padding:1px 4px; }
.cell-co  { background:#ffaaaa; color:#7B0000; font-weight:700; border-radius:3px; padding:1px 4px; }
.cell-ah  { background:#ff4444; color:#fff;    font-weight:700; border-radius:3px; padding:1px 4px; }
.cell-lh  { background:#ff7777; color:#fff;    font-weight:700; border-radius:3px; padding:1px 4px; }
.unavail-legend {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,68,68,.1); border:1px solid rgba(255,68,68,.3);
  border-radius:5px; padding:3px 8px; font-size:9px; color:#ff4444; margin-top:6px;
}