.cal-page {
  padding: 32px 28px;
  overflow-y: auto;
}

/* ── Header ── */

.cal-header-row {
  margin-bottom: 24px;
}

.cal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.cal-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  font-size: 15px;
}

/* ── Layout: grid + upcoming side-by-side ── */

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cal-appt-w, 320px);
  gap: 28px;
  align-items: start;
  position: relative;
}

/* Let the calendar grid shrink as the appointments pane grows. */
.cal-grid-section { min-width: 0; }

/* Drag handle for horizontally resizing the appointments pane. Sits centered
   in the gap between the calendar and the appointments section; dragging it
   widens/narrows the appointments pane while the calendar (1fr) reflows to
   fill the rest. Anchored from the right so it tracks the pane's left edge as
   --cal-appt-w changes. Placed on .cal-layout (not inside the section, which
   clips via overflow:hidden). */
.cal-appt-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--cal-appt-w, 320px) + 6px);
  width: 16px;
  cursor: col-resize;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.cal-appt-resizer::before {
  content: '';
  width: 3px;
  height: 44px;
  border-radius: 2px;
  background: var(--border-light);
  transition: background 0.15s, height 0.15s;
}

.cal-appt-resizer:hover::before,
.cal-appt-resizer.is-dragging::before {
  background: var(--gold);
  height: 72px;
}

/* While dragging, keep the col-resize cursor everywhere and suppress the
   text selection the drag would otherwise sweep up. */
body.cal-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 860px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-appt-resizer { display: none; }
}

/* ── Month navigation ── */

.cal-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Let the toolbar reflow instead of clipping: as the calendar column (1fr)
     narrows on window resize or when the appointments pane is dragged wide, the
     integrate/export/add buttons wrap onto a second row instead of overflowing
     off the right edge. row-gap keeps the wrapped row from crowding the grid. */
  flex-wrap: wrap;
  row-gap: 10px;
  margin-bottom: 14px;
}

.cal-nav-btn {
  padding: 4px 12px;
  font-size: 16px;
  font-weight: 600;
}

.cal-month-label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  min-width: 160px;
  text-align: center;
}

/* Pushes the + button to the right edge of the grid section, so it lands
   above the Saturday column. */
.cal-nav-spacer { flex: 1; }

.cal-export-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* "Integrate w/ Slack" — sits to the left of the .ics button and deep-links to
   Settings > Notifications. Highlights green once connected so it's obvious the
   integration is already set up (amber if connected but reminders are paused). */
/* Icon-only integration buttons — no text label. Connection state tints the
   whole button: green = connected, gold = paused, red = needs reconnect. */
.cal-slack-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  white-space: nowrap;
}

.cal-slack-glyph,
.cal-google-glyph,
.cal-calendly-glyph {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}

.cal-slack-btn.is-connected {
  border-color: #2f7a44;
  background: rgba(47,122,68,0.12);
  color: #2f7a44;
}

.cal-slack-btn.is-paused {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}

.cal-slack-btn.is-reconnect {
  border-color: #c5372c;
  background: rgba(197,55,44,0.12);
  color: #c5372c;
}

.cal-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb),0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cal-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb),0.18);
}

.cal-add-btn:active { transform: translateY(0); }

/* ── Calendar grid ── */

.cal-grid-wrap {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

.cal-weekday {
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface);
}

.cal-cell {
  min-height: 72px;
  padding: 6px 8px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-cell:nth-child(7n) { border-right: none; }

.cal-cell.cal-empty {
  background: var(--bg);
  opacity: 0.5;
}

.cal-day-num {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
}

.cal-cell.cal-today .cal-day-num {
  background: var(--gold);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cal-cell.cal-has-event {
  background: var(--gold-soft);
  cursor: pointer;
}

/* A day with appointments takes the list to that day. */
.cal-cell.cal-has-event:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.cal-cell.cal-has-event:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* ── Event dots inside grid cells ── */

.cal-event-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.cal-event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  cursor: pointer;
}

/* ── Upcoming callbacks list ── */

.cal-upcoming-section {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cal-upcoming-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-warm);
}

.cal-appt-list {
  overflow-y: auto;
  /* Height tracks the viewport instead of a fixed 540px: on tall screens the
     list uses the space (no big empty gap below it), and on short screens it
     caps out and scrolls internally rather than pushing the page. */
  max-height: clamp(320px, 62vh, 640px);
  padding: 4px 0;
}

.cal-no-appts {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

.cal-appt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.cal-appt-item:last-child { border-bottom: none; }

/* Arrived here from the dial tracker's "View in calendar". Fades itself out --
   it answers "which one" and then stops asking for attention. */
.cal-appt-item.is-focused {
  background: var(--gold-soft);
  box-shadow: inset 3px 0 0 var(--gold);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* The name becomes a control only when there is a lead behind it. Styled as
   text until hover so the list still reads as a list. */
.cal-appt-name-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.cal-appt-name-btn:hover { color: var(--gold); text-decoration: underline; }

/* No hover state: the row body is inert, so highlighting it would promise a
   click target that isn't there. Every action is an explicit button. */

.cal-appt-item.flagged {
  background: rgba(196, 32, 32, 0.05);
  box-shadow: inset 3px 0 0 var(--red);
}

.cal-appt-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.cal-appt-action {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cal-appt-complete-btn:hover {
  background: rgba(22, 163, 74, 0.12);
  border-color: var(--green);
  color: var(--green);
}

.cal-appt-flag-btn:hover {
  background: rgba(196, 32, 32, 0.10);
  border-color: var(--red);
  color: var(--red);
}

.cal-appt-flag-btn.flagged {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.cal-appt-time-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
  flex-shrink: 0;
}

.cal-appt-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-appt-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

.cal-appt-info {
  flex: 1;
  min-width: 0;
}

.cal-appt-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-product-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.cal-appt-carrier {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Read-only imported events (Google, Calendly): dimmer row, no action buttons,
   and a small source badge so it's clear they're managed in the external
   calendar. The badge/hover tint matches the row's grid-dot color per source —
   Google red, Calendly blue (the appointment types already own the mid blue). */
.cal-appt-external:hover { background: rgba(234, 67, 53, 0.06); }
.cal-appt-external[data-source="calendly"]:hover { background: rgba(0, 107, 255, 0.06); }

.cal-appt-external-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ea4335;
  background: rgba(234, 67, 53, 0.12);
  vertical-align: middle;
}

.cal-appt-external[data-source="calendly"] .cal-appt-external-badge {
  color: #006bff;
  background: rgba(0, 107, 255, 0.12);
}

/* Who the booking is with. Calendly's scheduled_events carries only the event
   TYPE, so without the invitee name an agent sees "30 Minute Meeting" and has
   to open Calendly to find out whose it is. Sits next to the title, quieter
   than it but louder than the location line under it. */
.cal-appt-invitee {
  margin-left: 6px;
  font-weight: 600;
  color: var(--text-muted);
}

.cal-appt-invitee::before {
  content: "· ";
  font-weight: 400;
}

/* Calendly's reschedule URL — the only web link Calendly exposes per booking
   (ev.uri is an API URI and opens JSON). Managing the booking still happens in
   Calendly, so this is deliberately a plain link out, not an action. */
.cal-appt-external-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--link, #5b4ce0);
  text-decoration: none;
}

.cal-appt-external-link:hover,
.cal-appt-external-link:focus-visible {
  text-decoration: underline;
}

.cal-appt-edit,
.cal-appt-goto {
  padding: 4px 8px;
  font-size: 13px;
  flex-shrink: 0;
}

/* Type-color stripe down the left edge of the upcoming row. */
.cal-appt-type-dot {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Color legend (bottom of the grid section) ── */

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  padding: 10px 4px 0;
  font-size: 11px;
  color: var(--text-muted);
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

/* Per-source show/hide chips for imported events (Google / Calendly). Sits just
   under the legend; only rendered when external events exist. */
.cal-source-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 4px 0;
}
.cal-source-filters:empty { display: none; }

.cal-source-filters-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface, transparent);
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s;
}
.cal-source-chip:hover { background: var(--gold-soft, rgba(0,0,0,0.04)); }

.cal-source-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

/* Toggled off = source hidden from the calendar. */
.cal-source-chip.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}

/* ── Side panel (new / edit appointment) ── */

.cal-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(var(--shadow-rgb),0.10);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.cal-side-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.cal-side-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cal-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.cal-side-panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.cal-side-panel-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
}

.cal-side-panel-close:hover { color: var(--text); }

.cal-side-panel-body {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cal-side-panel-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-warm);
}

.apt-error {
  margin: 0 20px 12px;
  padding: 8px 12px;
  background: rgba(196, 32, 32, 0.08);
  border: 1px solid rgba(196, 32, 32, 0.3);
  border-radius: 6px;
  color: var(--red, #c0392b);
  font-size: 12px;
}

.apt-error.hidden { display: none; }

.apt-danger {
  color: var(--red, #c0392b);
}

/* Read-only view mode of the appointment panel (row click). Label above value,
   matching the form's field rhythm so Edit swaps in place without a jump. */
.apt-view-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apt-view-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.apt-view-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

/* Notes keep the agent's own line breaks. */
.apt-view-field-block .apt-view-value {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Type chips */

.apt-type-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.apt-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}

.apt-type-chip input { display: none; }

.apt-type-chip:hover { border-color: var(--gold); }

.apt-type-chip.is-selected {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--text);
  font-weight: 600;
}

.apt-type-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

/* Client combobox */

.apt-client-combobox { position: relative; }

.apt-client-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb),0.10);
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
}

.apt-client-dropdown.hidden { display: none; }

.apt-client-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
}

.apt-client-option:last-child { border-bottom: none; }
.apt-client-option:hover { background: var(--gold-soft); }

.apt-client-option-name { font-weight: 600; }

/* Where the person lives, so two people with one name can be told apart. */
.apt-client-option-where {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.apt-client-option-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.apt-client-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Hidden form-field */
.form-field.hidden { display: none; }