:root{
  --bg:#0b0d10; --panel:#12161b; --muted:#5d6b78; --text:#e8edf2;
  --accent:#57a6ff; --warn:#ff6961; --ok:#5bd18a; --grid:#1b2128;
  --chip:#1f2730; --dup:#3a1111; --dupBorder:#ff9b95; --shadow:0 8px 24px rgba(0,0,0,.35);
  --round:16px;

  /* Availability colors */
  --avail-green:#a7d9b5;     /* light desaturated green */
  --unavail-red:#e6a6a6;     /* light desaturated red */
  --leave-dark:#6c1d1d;      /* dark red */
  --unselected:#ffffff;      /* white */
  --text-dark:#0e141b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0a0c0f,#0f1419 60%,#0b0d10);
}
header{
  padding:16px 20px; position:sticky; top:0; z-index:5; background:rgba(11,13,16,.85); backdrop-filter: blur(6px);
  border-bottom:1px solid #17202a; display:flex; gap:12px; align-items:center
}
header h1{margin:0; font-size:18px; font-weight:700; letter-spacing:.2px}
header .sub{color:var(--muted); font-size:12px; margin-left:6px}
main{padding:18px; max-width:1300px; margin:0 auto; display:grid; gap:18px}
.card{background:var(--panel); border:1px solid #1b2430; border-radius:var(--round); box-shadow:var(--shadow)}
.card h2{margin:0 0 10px; font-size:15px}
.pad{padding:16px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.col{flex:1 1 320px; min-width:280px}
textarea, input, select, button{
  background:#0e1318; color:var(--text); border:1px solid #202a36; border-radius:12px; padding:8px 10px;
  outline:none; transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea:focus, input:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(87,166,255,.15)}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab-btn{
  padding:10px 14px; background:#0e1318; border:1px solid #202a36; border-radius:12px; cursor:pointer;
}
.tab-btn.active{background:#102031; border-color:#1e3a56; box-shadow:0 0 0 4px rgba(87,166,255,.15); color:#cfe6ff}
.week-toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 2px}
.btn{
  background:#0f1a24; border:1px solid #1f3246; padding:8px 12px; border-radius:12px; cursor:pointer;
}
.btn.primary{background:#12304c; border-color:#2e5c86}
.btn.warn{background:#2a1212; border-color:#512222; color:#ffb5ae}
.btn.ghost{background:transparent; border-color:#2a3746}
.btn:disabled{opacity:.55; cursor:not-allowed}
.grid{
  overflow:auto; background:var(--grid); border:1px solid #212a36; border-radius:14px;
}
table{border-collapse:separate; border-spacing:0; width:100%; min-width:840px}
th, td{border-right:1px solid #1f2730; border-bottom:1px solid #1f2730; padding:8px}
th:first-child, td:first-child{border-left:0} th:last-child, td:last-child{border-right:0}
thead th{position:sticky; top:0; background:#111821; z-index:1}
tbody th{background:#111821; text-align:left; width:160px}
td{background:#0e141b}
td.dup{background:var(--dup); outline:2px solid var(--dupBorder)}
.day-label{font-weight:600; color:#b5c7da}
.calc{display:grid; gap:10px}
.calc h3{margin:0 0 6px; font-size:14px}
.flex{display:flex; gap:12px; flex-wrap:wrap}
.table{
  width:100%; border:1px solid #233042; border-radius:12px; overflow:hidden;
}
.table table{min-width:560px}
.note{color:var(--muted); font-size:12px}
.footer{color:var(--muted); font-size:12px; text-align:center; padding:12px}
.grow{flex:1}
.small{font-size:12px}

/* Modals */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:50;
}
.modal{width:min(1100px,95vw); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid #273142; border-radius:18px; box-shadow:var(--shadow); padding:16px}
.modal h2{margin:0 0 8px}
.modal .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.section{border:1px solid #202a36; border-radius:12px; padding:12px}
.roleRow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.eligBox{border:1px solid #233042; border-radius:12px; padding:10px; max-height:220px; overflow:auto; background:#0f141b}
.eligHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.toggleRow{display:flex; gap:6px; flex-wrap:wrap}
.durInputs{display:flex; gap:6px; align-items:center}
.pill{padding:4px 8px; border:1px solid #2a3746; border-radius:999px; cursor:pointer}
.pill:hover{border-color:#3b516a}

/* Availability modal */
.availTabs{display:flex; gap:8px; margin:6px 0 10px}
.avail-btn{padding:8px 12px; border:1px solid #223041; background:#0e1318; border-radius:10px; cursor:pointer}
.avail-btn.active{background:#14263a; border-color:#30537b}
.availGrid{overflow:auto; border:1px solid #233042; border-radius:12px}
.availTable{border-collapse:separate; border-spacing:0; width:100%; min-width:720px}
.availTable th, .availTable td{border-right:1px solid #253246; border-bottom:1px solid #253246; padding:6px}
.availTable thead th{background:#121a22}
.cell{
  width:84px; height:30px; border-radius:6px; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; color:var(--text-dark);
  background:var(--unselected);
}
.cell.avail{background:var(--avail-green)}
.cell.unavail{background:var(--unavail-red)}
.cell.leave{background:var(--leave-dark); color:#fbeaea}
.cell.sel{outline:2px solid #85b7ff; box-shadow:0 0 0 2px rgba(133,183,255,0.25) inset}
.availActions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;margin-right:6px;border:1px solid #1e2a36}