/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; color: #1a1a2e; background: #f5f7fa; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---- Layout ---- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 52px;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  position: sticky; top: 0; z-index: 100;
}
.logo { font-weight: 700; font-size: 18px; color: #2563eb; letter-spacing: -0.5px; }

/* ---- Landing page ---- */
.landing-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .landing-main { grid-template-columns: 1fr; margin: 24px auto; }
}

.marketing h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: #111827; }
.tagline { font-size: 1.05rem; color: #6b7280; margin-bottom: 28px; line-height: 1.6; }
.value-props { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.value-props li { display: flex; gap: 12px; align-items: flex-start; }
.value-props .icon { font-size: 18px; color: #16a34a; font-weight: 700; line-height: 1.4; flex-shrink: 0; }
.value-props strong { display: block; margin-bottom: 2px; }
.value-props span { color: #6b7280; font-size: 0.9rem; line-height: 1.5; }
.auto-delete-note { font-size: 0.85rem; color: #9ca3af; font-style: italic; }

/* ---- Form card ---- */
.form-card {
  background: #fff; border-radius: 12px;
  padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}
.form-card h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 6px; color: #374151; }
.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field select {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db;
  border-radius: 6px; font: inherit; font-size: 0.9rem;
  background: #fff; color: #111827;
  transition: border-color .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.field small { display: block; margin-top: 4px; font-size: 0.8rem; color: #9ca3af; }

.date-range, .time-range { display: flex; align-items: center; gap: 8px; }
.date-range input, .time-range input { flex: 1; }
.date-range span, .time-range span { color: #9ca3af; flex-shrink: 0; }

/* ---- Toggle group ---- */
.toggle-group { display: flex; gap: 8px; }
.toggle-opt { display: flex; align-items: center; }
.toggle-opt input[type="radio"] { display: none; }
.toggle-opt span {
  padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 6px;
  cursor: pointer; font-size: 0.875rem; color: #374151;
  transition: all .15s;
}
.toggle-opt input[type="radio"]:checked + span {
  background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 500;
}

/* ---- Timezone picker ---- */
.tz-picker { position: relative; }
.tz-picker input[type="text"] {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db;
  border-radius: 6px; font: inherit; font-size: 0.9rem;
}
.tz-picker input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.tz-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 24px; }
.tz-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  border-radius: 4px; padding: 3px 8px; font-size: 0.8rem;
}
.tz-tag button { color: #93c5fd; font-size: 14px; line-height: 1; padding: 0 1px; }
.tz-tag button:hover { color: #1d4ed8; }
.tz-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  max-height: 200px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  margin-top: 2px;
}
.tz-item { padding: 8px 12px; cursor: pointer; font-size: 0.875rem; }
.tz-item:hover { background: #eff6ff; color: #1d4ed8; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; transition: all .15s; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-outline { border: 1px solid #d1d5db; color: #374151; background: #fff; }
.btn-outline:hover { border-color: #9ca3af; background: #f9fafb; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 6px; font-size: 16px; border: 1px solid #e5e7eb; color: #6b7280; }
.btn-icon:hover { background: #f3f4f6; color: #111827; }
.btn-full { width: 100%; justify-content: center; margin-top: 8px; padding: 10px; font-size: 1rem; }

/* ---- Meeting page ---- */
.meeting-header {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 20px 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.meeting-header h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.meeting-details { font-size: 0.875rem; color: #6b7280; }
.share-prompt { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.share-prompt span { font-size: 0.875rem; color: #6b7280; max-width: 260px; }

.grid-area { padding: 20px 24px; }
.grid-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.add-attendee-form { display: flex; align-items: center; gap: 8px; }
.add-attendee-form input {
  padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 0.875rem;
}
.add-attendee-form input:focus { outline: none; border-color: #2563eb; }

/* ---- Grid scroll container ---- */
.grid-scroll-container {
  overflow: auto;
  /* Fill remaining height inside page-main after header + toolbar */
  height: calc(100vh - 52px - 80px - 58px);
  border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff;
  position: relative;
}
.grid-loading { padding: 40px; text-align: center; color: #9ca3af; }
.no-slots { padding: 40px; text-align: center; color: #9ca3af; }

/* ---- Vertical calendar grid ---- */

.cal-wrap {
  display: flex;
  flex-direction: column;
  min-width: max-content;
}

/* Header row (sticky top) */
.cal-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 2px solid #e5e7eb;
}

/* Corner: sticky left within the sticky header */
.cal-corner {
  display: flex;
  position: sticky;
  left: 0;
  z-index: 22;
  background: #f9fafb;
  border-right: 2px solid #e5e7eb;
  flex-shrink: 0;
}

.cal-corner-tz {
  width: 80px;
  padding: 8px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cal-corner-agg {
  width: 36px;
  padding: 8px 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Attendee column headers */
.cal-att-headers {
  display: flex;
}

.cal-att-header {
  width: 140px;
  min-width: 140px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background .1s;
}
.cal-att-header:hover { background: #f0f4ff; }
.att-header-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
}
.att-header-tz {
  font-size: 0.7rem;
  color: #9ca3af;
}

/* Body row */
.cal-body {
  display: flex;
  flex: 1;
}

/* Left sticky columns (tz labels + aggregate) */
.cal-left-cols {
  display: flex;
  position: sticky;
  left: 0;
  z-index: 10;
  background: #f9fafb;
  border-right: 2px solid #e5e7eb;
  flex-shrink: 0;
}

/* Per-timezone time label column */
.cal-tz-col {
  width: 80px;
  position: relative;
  border-right: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

/* Off-work shading strip in timezone column */
.cal-tz-offwork {
  position: absolute;
  left: 0; right: 0;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 0;
}

/* Day label: left portion of the column, no solid background */
.cal-day-label {
  position: absolute;
  left: 0;
  width: 36px;
  padding: 1px 2px 0;
  font-size: 0.6rem;
  font-weight: 600;
  color: #374151;
  border-top: 2px solid #c7d2fe;
  z-index: 2;
  line-height: 1.3;
  background: transparent;
}
.cal-day-label-date {
  font-size: 0.6rem;
  font-weight: 400;
  color: #9ca3af;
  line-height: 1.2;
}

/* Time label: right portion of the column, just below the hour line */
.cal-time-label {
  z-index: 1;
  position: absolute;
  right: 0;
  width: 44px;
  padding: 2px 4px 0;
  font-size: 0.65rem;
  color: #9ca3af;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* Aggregate column */
.cal-agg-col {
  width: 36px;
  position: relative;
  background: #fafafa;
  flex-shrink: 0;
}

.cal-agg-cell {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 2px;
}

.agg-good    { background: #86efac; }
.agg-bad     { background: #fca5a5; }
.agg-partial { background: #d1d5db; }
.agg-none    { background: #f3f4f6; }

/* Attendee columns area */
.cal-att-area {
  display: flex;
}

/* Single attendee column */
.cal-att-col {
  width: 140px;
  min-width: 140px;
  position: relative;
  border-right: 1px solid #e5e7eb;
  cursor: crosshair;
  background: #fff;
  flex-shrink: 0;
}

/* Grid lines layer */
.cal-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Day separator — thick line at top of each day */
.cal-day-sep {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #c7d2fe;
  z-index: 1;
}

/* Row lines for grid structure */
.cal-row-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid #f0f0f0;
}
.cal-row-line-hour {
  border-top-color: #e5e7eb;
}

/* Blocks layer */
.cal-blocks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Availability block */
.cal-block {
  position: absolute;
  left: 4px; right: 4px;
  border-radius: 4px;
  overflow: visible;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  user-select: none;
  min-height: 15px;
  z-index: 3;
}

.cal-block.status-available   { background: #bbf7d0; border: 1px solid #86efac; }
.cal-block.status-tentative   { background: #fef08a; border: 1px solid #fde047; }
.cal-block.status-unavailable { background: #fecaca; border: 1px solid #fca5a5; }
.cal-block.cal-block-preview  { background: rgba(37,99,235,.15); border: 2px dashed #2563eb; pointer-events: none; }

.block-body {
  flex: 1;
  padding: 2px 4px;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(0,0,0,.5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}

.block-comment-icon {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Resize handles — circular, at top and bottom of block */
.block-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
  cursor: ns-resize;
  z-index: 4;
  opacity: 0;
  transition: opacity .15s;
}
.cal-block:hover .block-handle { opacity: 1; }
.block-handle-top    { top: -6px; }
.block-handle-bottom { bottom: -6px; }

/* ---- Page layout: main content + settings sidebar ---- */
.page-layout {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.page-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* ---- Settings panel (sidebar, no overlay) ---- */
.settings-panel {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-left: none;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: width .25s ease, border-color .25s ease;
}
.settings-panel.open {
  width: 360px;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
}

/* Inner content pinned to 360px so it doesn't reflow during animation */
.settings-header,
.settings-body { min-width: 360px; }

.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.settings-header h3 { font-size: 1rem; font-weight: 600; }

.settings-body {
  flex: 1; padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.settings-body .field { margin-bottom: 14px; }
.settings-body .field label { font-size: 0.8rem; }
.settings-body input[type="text"],
.settings-body input[type="date"],
.settings-body input[type="time"],
.settings-body select {
  width: 100%; padding: 7px 10px; border: 1px solid #d1d5db;
  border-radius: 6px; font: inherit; font-size: 0.875rem;
}
.settings-body input:focus, .settings-body select:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.settings-divider { margin: 16px 0; border: none; border-top: 1px solid #e5e7eb; }

/* ---- Popover ---- */
.slot-popover {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 12px; min-width: 220px;
  z-index: 500;
}
.popover-title { font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 8px; }
.popover-statuses { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.popover-btn {
  padding: 6px 10px; border-radius: 5px; font-size: 0.8rem; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; transition: all .1s;
}
.btn-available  { background: #dcfce7; color: #15803d; border-color: #86efac; }
.btn-tentative  { background: #fefce8; color: #a16207; border-color: #fde047; }
.btn-unavailable { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.popover-actions { display: flex; gap: 6px; margin-top: 8px; }
.popover-actions .popover-btn { flex: 1; text-align: center; }
.btn-save-comment { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.btn-save-comment:hover { background: #dbeafe; }
.btn-delete     { background: #f3f4f6; color: #6b7280; }
.btn-delete:hover { background: #fee2e2; color: #b91c1c; }
.popover-btn.active { outline: 2px solid currentColor; outline-offset: 1px; }
.popover-comment { margin-top: 8px; }
.popover-comment input {
  width: 100%; padding: 6px 8px; border: 1px solid #d1d5db;
  border-radius: 5px; font: inherit; font-size: 0.8rem;
}
.popover-comment input:focus { outline: none; border-color: #2563eb; }

/* Attendee popover fields */
.popover-field { margin-bottom: 10px; }
.popover-field label { display: block; font-size: 0.75rem; color: #6b7280; margin-bottom: 4px; }
.popover-field input, .popover-field select {
  width: 100%; padding: 6px 8px; border: 1px solid #d1d5db;
  border-radius: 5px; font: inherit; font-size: 0.85rem;
}
.popover-field input:focus, .popover-field select:focus {
  outline: none; border-color: #2563eb;
}