/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cell-w: 80px;
  --row-h: 80px;
  --sidebar-w: 240px;
  --header-h: 60px;
  --date-h: 56px;
  --airbnb: #FF5A5F;
  --vrbo: #3B5998;
  --booking: #003580;
  --direct: #2ECC71;
  --other: #95A5A6;
  --bg: #fafafa;
  --surface: #fff;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --today-bg: #eef6ff;
  --today-border: #3b82f6;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top Bar ── */
.top-bar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 20;
}

.top-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.top-left h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.listing-count {
  font-size: 13px;
  color: var(--text-muted);
}

.top-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-label {
  font-size: 15px;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
}

.nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.nav-btn:hover { background: #f3f4f6; }

.today-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  margin-left: 4px;
}

.today-btn:hover { background: #f3f4f6; }

.top-right {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.icon-btn:hover { background: #f3f4f6; color: var(--text); }

/* ── Calendar Layout ── */
.calendar-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── Sidebar (sticky listing names) ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  height: var(--date-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

/* ── Sort Dropdown ── */
.sort-dropdown {
  position: relative;
  flex-shrink: 0;
}

.sort-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.sort-btn:hover {
  background: #f3f4f6;
  color: var(--text);
}

.sort-menu {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 30;
  padding: 4px 0;
}

.sort-menu.open {
  display: block;
}

.sort-option {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.sort-option:hover {
  background: #f3f4f6;
}

.sort-option.active {
  font-weight: 600;
  color: var(--today-border);
}

.sidebar-header {
  gap: 6px;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
  outline: none;
  color: var(--text);
}

.search-input:focus { border-color: var(--today-border); }

.unit-label {
  height: var(--row-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  gap: 2px;
}

.unit-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-num {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Scrollable Grid ── */
.grid-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}

/* ── Date Header Row ── */
.date-row {
  display: flex;
  height: var(--date-h);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
}

.date-cell {
  width: var(--cell-w);
  min-width: var(--cell-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0f0f0;
  user-select: none;
}

.date-cell .dow {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-cell .dom {
  font-size: 16px;
  font-weight: 600;
}

.date-cell.today {
  background: var(--today-bg);
}

.date-cell.today .dom {
  color: var(--today-border);
}

.date-cell.month-start {
  border-left: 2px solid var(--border);
}

.date-cell.month-marker {
  display: none;
}

/* ── Unit Rows ── */
.unit-row {
  position: relative;
  height: var(--row-h);
  border-bottom: 1px solid var(--border);
}

.grid-cells {
  display: flex;
  height: 100%;
}

.cell {
  width: var(--cell-w);
  min-width: var(--cell-w);
  border-right: 1px solid #f0f0f0;
  height: 100%;
}

.cell.today-col {
  background: var(--today-bg);
}

.cell.month-border {
  border-left: 2px solid var(--border);
}

/* ── Reservation Bars ── */
.bar {
  position: absolute;
  top: 18px;
  height: calc(var(--row-h) - 36px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 2;
  transition: filter 0.15s, transform 0.15s;
}

.bar:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 3;
}

.bar-guest {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-platform {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}

/* Platform colors */
.bar.airbnb  { background: var(--airbnb); }
.bar.vrbo    { background: var(--vrbo); }
.bar.booking { background: var(--booking); }
.bar.direct  { background: var(--direct); }
.bar.other   { background: var(--other); }

/* ── Legend ── */
.legend {
  height: 36px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-shrink: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-dot.airbnb-bg  { background: var(--airbnb); }
.legend-dot.vrbo-bg    { background: var(--vrbo); }
.legend-dot.booking-bg { background: var(--booking); }
.legend-dot.direct-bg  { background: var(--direct); }

/* ── Reservation Detail Popover ── */
.bar.active {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10;
}

.popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 20;
  overflow: hidden;
}

.popover-arrow {
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--airbnb);
  transform: rotate(45deg);
  border-radius: 2px;
}

.popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #fff;
}

.popover-header.airbnb-bg { background: var(--airbnb); }
.popover-header.vrbo-bg   { background: var(--vrbo); }
.popover-header.booking-bg { background: var(--booking); }
.popover-header.direct-bg  { background: var(--direct); }

.popover-platform-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.popover-platform-name {
  font-size: 12px;
  font-weight: 600;
}

.popover-body {
  padding: 12px 14px;
}

.popover-guest {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.popover-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.popover-date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popover-label {
  font-size: 12px;
  color: var(--text-muted);
}

.popover-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.popover-unit {
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Today vertical line ── */
.date-cell.today::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 4px;
  background: var(--today-border);
}