/* ============================================================
   SOVEL PMS — calendar_v2.css
   Tape-chart styling for Haysel's calendar_v2 grid.
   The grid items are produced by the inline JS in the template;
   this stylesheet only lays them out (rooms × days) in the
   SOVEL dark/gold aesthetic. Reservation bands are positioned
   by calendar_v2_additional.js as absolute overlays.
   ============================================================ */

/* ---- header (center slot in base.html) ---- */
.calendar-title{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:.18em;margin:0}
.calendar-range-center{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.calendar-range-center #rangeText{font-family:'Cinzel',serif;color:var(--gold);min-width:150px;text-align:center}
.calendar-range-center button,.nav-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(218,176,116,.35);
  color:var(--gold);border-radius:10px;padding:6px 14px;cursor:pointer;font-size:13px;
}
.calendar-range-center button:hover,.nav-btn:hover{background:rgba(218,176,116,.15)}
.calendar-range-center .cal{filter:saturate(.6)}

/* ---- wrap + scroll viewport ---- */
.calendar-v2-wrap{padding:0 12px 48px}
.calendar-grid-viewport{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}

/* ---- THE GRID (this is what was missing) ---- */
.grid{
  display:grid;                 /* <- without this, everything stacked vertically */
  position:relative;
  --cell-w:96px;
  gap:1px;
  background:rgba(218,176,116,.12);
  border:1px solid rgba(218,176,116,.18);
  border-radius:12px;
  overflow:hidden;
  grid-auto-rows:46px;
  min-width:max-content;
  font-size:12px;
}
.grid.condensed{grid-auto-rows:30px;--cell-w:70px}

/* ---- header cells ---- */
.col-head{
  background:#111a28;color:var(--gold-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.05em;
  padding:6px 2px;line-height:1.15;text-align:center;
  position:sticky;top:0;z-index:10;
}
.col-head.today{color:var(--gold);background:#16243a;box-shadow:inset 0 -2px 0 var(--gold)}

/* ---- room number column ---- */
.room{
  background:#141b26;color:var(--gold);font-weight:600;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}

/* ---- generic day / meta cells ---- */
.cell{
  background:#0f1622;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);position:relative;
}
.cell.category{color:var(--gold-soft);font-size:11px;letter-spacing:.03em}
.cell.has-res{background:#13202e}

.hk-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.hk-clean{background:#28a745;box-shadow:0 0 6px rgba(40,167,69,.55)}
.hk-dirty{background:#dc3545;box-shadow:0 0 6px rgba(220,53,69,.55)}

.occ-occupied{color:#3ad07a;font-weight:600;font-size:11px;letter-spacing:.08em}
.occ-vacant{color:var(--text-muted);font-size:11px;letter-spacing:.08em}

.rate{color:var(--gold-soft);font-size:12px}

/* ---- reservation bands (positioned by calendar_v2_additional.js) ---- */
.res-band{
  position:absolute;display:none;            /* shown + placed by the helper */
  height:30px;border-radius:8px;align-items:center;
  padding:0 10px;font-size:11px;font-weight:600;color:#0f1622;
  cursor:grab;z-index:6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  box-shadow:0 2px 10px rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.15);
}
.res-band:active{cursor:grabbing}
.res-band[data-res-state="hold"]{background:linear-gradient(180deg,#ffd84d,#ffcc00)}
.res-band[data-res-state="confirmed"]{background:linear-gradient(180deg,#3ad07a,#28a745);color:#06210f}
.res-band[data-res-state="blocked"]{background:linear-gradient(180deg,#ef5d6b,#dc3545);color:#2a0608}
.res-band[data-res-state="unassigned"]{background:repeating-linear-gradient(45deg,#c9a36a,#c9a36a 6px,#b8925a 6px,#b8925a 12px);color:#241a0a}

.aae-badge{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#dc3545}
.aae-badge[data-sellable="true"]{background:#ffc107}

/* ---- empty state ---- */
.calendar-empty{
  padding:48px 16px;text-align:center;color:var(--text-muted);
  font-family:'Cinzel',serif;letter-spacing:.1em;background:#0f1622;
}

/* ---- summary ---- */
.calendar-summary-row span:first-child{color:var(--gold-soft);font-family:'Cinzel',serif;letter-spacing:.06em}
.calendar-summary-row span:last-child{color:var(--gold)}

/* ---- date-range picker overlay ---- */
#rangePickerOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;align-items:center;justify-content:center}
#rangePickerOverlay.open{display:flex}
#rangePicker{background:linear-gradient(180deg,#141B26,#0f1622);border:1px solid rgba(218,176,116,.3);border-radius:18px;padding:20px;min-width:320px;color:var(--gold-soft)}
.rp-head{display:flex;justify-content:space-between;font-family:'Cinzel',serif;color:var(--gold);letter-spacing:.1em;margin-bottom:14px}
.rp-body{display:flex;gap:16px;flex-wrap:wrap}
.rp-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.rp-btn{background:transparent;border:1px solid rgba(218,176,116,.4);color:var(--gold);border-radius:10px;padding:8px 18px;cursor:pointer;font-family:'Cinzel',serif;font-size:12px}
.rp-btn.primary{background:var(--gold);color:#0f1622}
.sep{height:1px;background:rgba(218,176,116,.2);margin:10px 0}