/* ============================================================
   TIMELINE.CSS v5 — Infinite canvas 2025-2040
   Block 1: CSS gradient grid · virtual date cols · no DOM cells
   Block 2: Sidebar wrapper clip fix
   Block 3: Ghost date tags
   ============================================================ */

.legend {
  display: flex; gap: 10px; padding: 6px 10px;
  flex-wrap: wrap; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--paper);
}
.leg-item { display: flex; align-items: center; gap: 4px; }
.leg-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.leg-label { font-size: 10px; font-weight: 500; color: var(--sage); }

/* ─────────────── TL Body ─────────────── */
#tl-body {
  flex: 1; display: flex; overflow: hidden;
}

/* ─────────────── BLOCK 2: Sidebar clip fix ─────────────── */
#tl-sidebar {
  flex-shrink: 0;
  width: var(--tl-left);
  display: flex; flex-direction: column;
  overflow: hidden;                       /* clips translateY rows */
  border-right: 1.5px solid var(--border);
  background: var(--white);
  z-index: 10; position: relative;
}

.tl-corner {
  height: var(--dates-h); flex-shrink: 0;
  display: flex; align-items: center;
  padding: 0 8px;
  border-bottom: 1.5px solid var(--border);
  background: var(--paper);
  position: relative; z-index: 2;
}
.tl-corner span {
  font-size: 9px; font-weight: 700; color: var(--sage);
  letter-spacing: .1em; text-transform: uppercase;
}

/* wrapper makes overflow:hidden work correctly with translateY */
#tl-sidebar-rows-wrapper {
  position: absolute;
  top: var(--dates-h); left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
#tl-sidebar-rows {
  position: absolute;
  top: 0; left: 0; right: 0;
  will-change: transform;
}

.prop-row {
  height: var(--row-h);
  display: flex; align-items: center;
  padding: 0 6px 0 8px;
  border-bottom: 1px solid rgba(200,221,217,.5);
  cursor: pointer; transition: background .12s; gap: 5px;
}
.prop-row:active { background: var(--mist); }
.prop-dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--mid); flex-shrink: 0; }
.prop-texts { min-width: 0; }
.prop-code {
  font-family: "Fraunces", serif;
  font-size: 10.5px; font-weight: 500; color: var(--deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.prop-name {
  font-size: 8.5px; color: var(--sage);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}

/* ─────────────── Scroll area ─────────────── */
#tl-scroll-area {
  flex: 1; overflow-x: auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch; position: relative;
  will-change: scroll-position; transform: translateZ(0);
}
#tl-scroll-area::-webkit-scrollbar { display: none; }

#tl-canvas {
  position: relative; display: flex; flex-direction: column;
}

/* ─────────────── Sticky date header ─────────────── */
#tl-dates-row {
  height: var(--dates-h); flex-shrink: 0;
  background: var(--paper);
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  /* virtual: children are position:absolute */
  position: -webkit-sticky; position: sticky;
}

/* BLOCK 1: date cols are absolute positioned (virtual) */
.date-col {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.date-col.today { background: rgba(2,63,58,.05); }
.date-col.today .d-num { color: var(--deep); font-weight: 700; }
.date-col.today::after {
  content:''; position:absolute; bottom:-1px;
  left:50%; transform:translateX(-50%);
  width:14px; height:2px; background:var(--deep); border-radius:1px;
}
.d-name { font-size: 8.5px; font-weight:700; color:var(--sage); letter-spacing:.06em; text-transform:uppercase; }
.d-num  { font-family:"Fraunces",serif; font-size:13.5px; font-weight:500; color:var(--ink); line-height:1; margin-top:1px; }
.date-col.sat .d-name, .date-col.sun .d-name,
.date-col.sat .d-num,  .date-col.sun .d-num { color:var(--partial-brd); }

/* Compact label for 6M / Year zoom */
.d-compact { font-size:8px; font-weight:700; color:var(--sage); letter-spacing:.04em; }

/* ─────────────── BLOCK 1: CSS gradient grid ─────────────── */
#tl-rows-body {
  position: relative;
  touch-action: pan-y;
}

/* Row stripe — minimal separator */
.tl-row {
  position: relative;
  border-bottom: 1px solid rgba(200,221,217,.15);
}

/* Weekend highlight via row pseudo — applied per row via JS class */
.tl-row.alt-bg { background: rgba(244,235,215,.07); }

/* ============================================================
   BOOKING BARS (Block 1.6 status colors)
   ============================================================ */
.bk-bar {
  position: absolute; top: 7px; height: 38px;
  display: flex; align-items: center;
  border-radius: 6px; overflow: hidden;
  cursor: pointer; transition: filter .15s, transform .1s;
  will-change: transform; z-index: 3;
  border-left: 3.5px solid transparent;
}
.bk-bar:active { transform: scaleY(.93); filter: brightness(.9); }

/* paymentStatus colors */
.bk-bar.unpaid     { background: var(--unpaid-bg);  border-left-color: var(--unpaid); }
.bk-bar.unpaid   .bar-dot  { background: var(--unpaid); }
.bk-bar.unpaid   .bar-text { color: #7F1D1D; }
.bk-bar.unpaid   .bar-amt  { color: var(--unpaid); }

.bk-bar.paid       { background: var(--paid-bg);    border-left-color: var(--paid); }
.bk-bar.paid     .bar-dot  { background: var(--paid); }
.bk-bar.paid     .bar-text { color: #14532D; }
.bk-bar.paid     .bar-amt  { color: var(--paid-brd); }

.bk-bar.partial    { background: var(--partial-bg); border-left-color: var(--partial); }
.bk-bar.partial  .bar-dot  { background: var(--partial); }
.bk-bar.partial  .bar-text { color: #78350F; }
.bk-bar.partial  .bar-amt  { color: var(--partial-brd); }

.bk-bar.pending    { background: var(--pending-bg); border-left-color: var(--pending); }
.bk-bar.pending  .bar-dot  { background: var(--pending); }
.bk-bar.pending  .bar-text { color: #1E3A8A; }
.bk-bar.pending  .bar-amt  { color: var(--pending-brd); }

/* bookingStatus overrides */
.bk-bar.checkedout { background: var(--grey-bg);    border-left-color: var(--grey); opacity: .75; }
.bk-bar.checkedout .bar-dot  { background: var(--grey); }
.bk-bar.checkedout .bar-text { color: #475569; }
.bk-bar.checkedout .bar-amt  { color: var(--grey); }

.bk-bar.cancelled  { background: #F1F5F9; border-left-color: #94A3B8; opacity: .45; }
.bk-bar.cancelled  .bar-text { color: #64748B; }

.bk-bar.draft {
  background: rgba(37,99,235,.07);
  border: 1.5px dashed rgba(37,99,235,.35);
  border-left: none; opacity: .6;
}
.bk-bar.draft .bar-text { color: #1E3A8A; }

/* Legend draft dot */
.leg-dot-draft {
  background: transparent;
  border: 1.5px dashed rgba(37,99,235,.55);
}

.bar-inner  { display:flex; align-items:center; gap:4px; padding:0 7px 0 5px; width:100%; overflow:hidden; }
.bar-dot    { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.bar-text   { font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-nights { font-size:9.5px; opacity:.55; flex-shrink:0; }
.bar-amt    { font-family:"Fraunces",serif; font-size:10.5px; font-weight:600; margin-left:auto; flex-shrink:0; }

/* ─────────────── Today line ─────────────── */
#today-line {
  position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: var(--deep); opacity: .5; pointer-events: none; z-index: 4;
}
#today-line::before {
  content: ''; position: absolute; top: -1px; left: -4px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--deep); opacity: .85;
}

/* ─────────────── BLOCK 3: Drag ghost + date tags ─────────────── */
#drag-ghost {
  position: absolute; background: rgba(22,105,97,.1);
  border: 1.5px dashed var(--mid); border-radius: 6px;
  pointer-events: none; z-index: 6; display: none;
}

.ghost-tag {
  position: absolute; top: -22px;
  background: var(--deep); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 5px;
  white-space: nowrap; pointer-events: none;
}
.ghost-tag-s { left: 0; }
.ghost-tag-e { right: 0; }