/* ============================================================================
   Planner Page
   BEM block: .planner
   Replaces: .planner-page, .planner-header, .planner-header-row,
             .planner-header-title, .planner-title, .planner-subtitle,
             .planner-header-actions, .planner-create-group, .planner-btn-task,
             .planner-layout, .planner-sidebar, .planner-sidebar-section,
             .planner-sidebar-label, .planner-sidebar-toggle, .toggle-icon,
             .planner-mobile-context, .planner-sidebar-backdrop, .planner-main,
             .planner-toolbar, .planner-tabs, .planner-tab, .planner-filters,
             .planner-panels, .planner-panel, .planner-panel-calendar,
             .planner-panel-tasks, .planner-fab, .fab-icon,
             .planner-fab-menu, .planner-fab-options, .planner-fab-option,
             .planner-fab-option-icon,
             .calendar-calendars, .calendar-list-item, .calendar-color-dot,
             .calendar-freebusy, .freebusy-label, .freebusy-bar,
             .freebusy-busy, .freebusy-times,
             .calendar-views, .view-btn,
             .calendar-content, .calendar-date-header,
             .calendar-event-item, .calendar-event-time, .calendar-event-info,
             .calendar-event-title, .calendar-event-location,
             .calendar-event-desc, .calendar-event-checkbox,
             .calendar-event-delete,
             .calendar-bulk-toolbar, .bulk-count, .btn-bulk-delete,
             .calendar-modal, .calendar-edit-modal,
             .chip-list, .chip, .chip-remove, .chip-input-row,
             .tasks-lists, .task-list-item, .list-name, .list-count,
             .tasks-filters, .filter-btn,
             .task-item, .task-checkbox, .task-info, .task-title,
             .task-notes, .task-due, .task-delete,
             .tasks-modal
   ============================================================================ */

@scope (beam-planner) {
/* -- Block ---------------------------------------------------------------- */

.planner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--color-bg);
}

/* -- Header --------------------------------------------------------------- */

.planner__header {
  padding: 0.6rem var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.planner__header-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.planner__header-title {
  min-width: 0;
}

.planner__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.2;
}

.planner__subtitle {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.planner__header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.planner__create-group {
  display: flex;
  gap: 0.35rem;
}

.planner__btn-task {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

/* -- Sidebar toggle (hidden on desktop) ----------------------------------- */

.planner__sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--input-height-lg);
  height: var(--input-height-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
}

.planner__sidebar-toggle-icon {
  font-size: 1.2rem;
  color: var(--color-text);
}

/* -- Mobile context (hidden on desktop) ----------------------------------- */

.planner__mobile-context {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-muted);
  gap: 0.3rem;
  align-items: center;
}

/* -- Backdrop (hidden on desktop) ----------------------------------------- */

.planner__backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 59;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.planner__backdrop--visible {
  display: block;
  opacity: 1;
}

/* -- Layout --------------------------------------------------------------- */

.planner__layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* -- Sidebar -------------------------------------------------------------- */

.planner__sidebar {
  width: 200px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.planner__sidebar-section {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.planner__sidebar-section:last-child {
  border-bottom: none;
}

.planner__sidebar-label {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem var(--space-lg) 0.3rem;
}

/* -- Calendar list (sidebar) ---------------------------------------------- */

.planner__calendar-list {
  overflow-y: auto;
}

.planner__calendar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem var(--space-lg);
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.planner__calendar-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.planner__calendar-item.active {
  background: var(--color-bg);
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.planner__calendar-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* -- Free/busy bar -------------------------------------------------------- */

.planner__freebusy {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.planner__freebusy-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

.planner__freebusy-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.planner__freebusy-busy {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}

.planner__freebusy-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

/* -- Task lists (sidebar) ------------------------------------------------- */

.planner__task-lists {
  overflow-y: auto;
}

.planner__task-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem var(--space-lg);
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.planner__task-list-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.planner__task-list-item.active {
  background: var(--color-bg);
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
}

.planner__list-name {
  flex: 1;
}

.planner__list-count {
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}

/* -- Main content area ---------------------------------------------------- */

.planner__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* -- Toolbar -------------------------------------------------------------- */

.planner__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.planner__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.planner__tab {
  padding: 0.35rem 0.85rem;
  background: var(--color-bg);
  color: var(--color-muted);
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
  border-right: 1px solid var(--color-border);
}

.planner__tab:last-child {
  border-right: none;
}

.planner__tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

.planner__tab.active {
  background: var(--color-accent);
  color: #fff;
}

.planner__filters {
  display: flex;
  align-items: center;
}

/* -- View buttons (calendar) ---------------------------------------------- */

.planner__views {
  display: flex;
  gap: var(--space-xs);
}

.planner__view-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}

.planner__view-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.planner__view-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* -- Filter buttons (tasks) ----------------------------------------------- */

.planner__task-filters {
  display: flex;
  gap: var(--space-xs);
}

/* -- Panels --------------------------------------------------------------- */

.planner__panels {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.planner__panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-sm);
}

.planner__panel.active {
  display: flex;
}

/* -- Calendar content ----------------------------------------------------- */

.planner__calendar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.planner__date-header {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  padding: var(--space-md) var(--space-sm) var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.planner__date-header--today {
  color: var(--color-accent);
}

/* -- Event item ----------------------------------------------------------- */

.planner__event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.planner__event:hover {
  border-color: var(--color-accent);
}

.planner__event--today {
  border-left: 2px solid var(--color-accent);
}

.planner__event-time {
  font-size: 0.75rem;
  color: var(--color-muted);
  min-width: 70px;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

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

.planner__event-title {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 0.15rem;
}

.planner__event-location {
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.planner__event-desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 0.15rem;
  opacity: 0.8;
}

.planner__event-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.planner__event:hover .planner__event-delete,
.planner__event.kb-selected .planner__event-delete {
  opacity: 1;
}

/* -- Event selection ------------------------------------------------------ */

.planner__event-checkbox {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: 0.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.planner__event:hover .planner__event-checkbox,
.planner__event--selected .planner__event-checkbox,
.planner__event.kb-selected .planner__event-checkbox {
  display: flex;
}

.planner__event--selected .planner__event-checkbox {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.planner__event--selected {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border-color: var(--color-accent);
}

.planner__event.kb-selected {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* -- Bulk toolbar --------------------------------------------------------- */

.planner__bulk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.planner__bulk-count {
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.planner__bulk-delete {
  margin-left: auto;
}

/* -- Calendar modal ------------------------------------------------------- */

.planner__calendar-modal {
  width: min(500px, 90vw);
}

/* -- Edit modal ----------------------------------------------------------- */

.planner__edit-modal {
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

/* -- Chip list ------------------------------------------------------------ */

.planner__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: var(--input-height-sm);
  margin-bottom: 0.35rem;
}

.planner__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.15rem var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--color-text);
}

.planner__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.65rem;
  padding: 0;
  border-radius: 50%;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.planner__chip-remove:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.planner__chip-input-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.planner__chip-input-row .form-input {
  flex: 1;
}

/* -- Task item ------------------------------------------------------------ */

.planner__task {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.planner__task:hover {
  border-color: var(--color-accent);
}

.planner__task--completed {
  opacity: 0.5;
}

.planner__task-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.planner__task-checkbox:hover {
  border-color: var(--color-accent);
}

.planner__task--completed .planner__task-checkbox {
  background: var(--color-success);
  border-color: var(--color-success);
}

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

.planner__task-title {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 0.15rem;
}

.planner__task--completed .planner__task-title {
  text-decoration: line-through;
  color: var(--color-muted);
}

.planner__task-notes {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.planner__task-due {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 0.2rem;
}

.planner__task-due--overdue {
  color: var(--color-danger);
}

.planner__task-due--today {
  color: var(--color-warning);
}

.planner__task-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.planner__task:hover .planner__task-delete {
  opacity: 1;
}

/* -- Tasks modal ---------------------------------------------------------- */

.planner__tasks-modal {
  width: min(450px, 90vw);
}

/* -- Bookings stats bar --------------------------------------------------- */

.planner__bookings-stats {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.planner__bookings-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.planner__bookings-stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.planner__bookings-stat-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* -- Booking card --------------------------------------------------------- */

.planner__booking {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.planner__booking:hover {
  border-color: var(--color-accent);
}

.planner__booking-icon {
  color: var(--color-muted);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

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

.planner__booking-guest {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: 0.1rem;
}

.planner__booking-email {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: 0.2rem;
}

.planner__booking-type {
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 0.1rem;
}

.planner__booking-time {
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* -- Booking status badges ------------------------------------------------ */

.planner__booking-status {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}

.planner__booking-status--confirmed {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.planner__booking-status--pending {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}

.planner__booking-status--cancelled {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* -- Booking detail modal ------------------------------------------------- */

.planner__booking-detail-modal {
  width: min(500px, 90vw);
}

.planner__booking-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.planner__booking-detail-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.planner__booking-detail-row:last-child {
  border-bottom: none;
}

.planner__booking-detail-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 80px;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.planner__booking-detail-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* -- Slate config modal --------------------------------------------------- */

.planner__slate-config-modal {
  width: min(450px, 90vw);
}

/* -- Slate sidebar elements ----------------------------------------------- */

.planner__slate-status {
  padding: var(--space-xs) var(--space-lg);
}

.planner__slate-status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.planner__slate-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.planner__slate-status-dot--connected {
  background: var(--color-success);
}

.planner__slate-status-dot--disconnected {
  background: var(--color-danger);
}

.planner__slate-status-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.planner__slate-connect-btn {
  margin-top: var(--space-xs);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.planner__slate-event-types {
  padding: var(--space-xs) 0;
}

.planner__slate-event-type {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.planner__slate-event-type-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.planner__slate-event-type-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner__slate-event-type-duration {
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
}

.planner__slate-empty-types {
  font-size: var(--text-xs);
  color: var(--color-muted);
  padding: var(--space-xs) var(--space-lg);
}

/* -- Bookings setup card -------------------------------------------------- */

.planner__bookings-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  gap: var(--space-md);
  min-height: 200px;
}

.planner__bookings-setup-icon {
  color: var(--color-muted);
  opacity: 0.5;
  transform: scale(2.5);
  margin-bottom: var(--space-md);
}

.planner__bookings-setup-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.planner__bookings-setup-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 300px;
}

.planner__bookings-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* -- FAB (hidden on desktop) ---------------------------------------------- */

.planner__fab {
  display: none;
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  z-index: var(--z-base);
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.planner__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.planner__fab-icon {
  font-size: 1.75rem;
  font-weight: 300;
  color: white;
  line-height: 1;
}

/* -- FAB menu modal ------------------------------------------------------- */

.planner__fab-menu {
  width: min(300px, 85vw);
}

.planner__fab-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.planner__fab-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.85rem var(--space-lg);
  font-size: 0.9rem;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.planner__fab-option:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

.planner__fab-option-icon {
  display: flex;
  align-items: center;
  color: var(--color-accent);
}

/* -- Responsive: mobile --------------------------------------------------- */

@media (max-width: 768px) {
  /* Show mobile-only elements */
  .planner__sidebar-toggle {
    display: flex;
  }

  .planner__mobile-context {
    display: flex;
  }

  .planner__fab {
    display: flex;
  }

  .planner__create-group {
    display: none;
  }

  /* Page layout */
  .planner {
    position: relative;
    height: calc(100vh - 52px);
  }

  .planner__header {
    padding: var(--space-sm) var(--space-md);
  }

  .planner__title {
    font-size: var(--text-lg);
  }

  /* Layout - single column */
  .planner__layout {
    flex-direction: column;
    position: relative;
  }

  /* Sidebar becomes slide-out drawer */
  .planner__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    padding-top: var(--space-sm);
    background: var(--color-surface);
  }

  .planner__sidebar--open {
    transform: translateX(0);
  }

  /* Main takes full width */
  .planner__main {
    flex: 1;
    width: 100%;
  }

  .planner__toolbar {
    padding: 0.4rem var(--space-sm);
    gap: var(--space-sm);
  }

  .planner__views {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .planner__event-delete {
    opacity: 1;
  }

  .planner__task-delete {
    opacity: 1;
  }

  .planner__task {
    padding: 0.85rem;
    min-height: 56px;
  }

  .planner__task-checkbox {
    width: 1.4rem;
    height: 1.4rem;
  }
}

@media (max-width: 480px) {
  .planner__sidebar {
    width: 100vw;
    max-width: 100vw;
  }

  .planner__fab {
    bottom: 70px;
    right: 16px;
    width: 60px;
    height: 60px;
  }

  .planner__header-actions {
    gap: var(--space-xs);
  }
}

/* -- Poll card ------------------------------------------------------------ */

.planner__poll-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  transition: border-color var(--transition-fast);
}

.planner__poll-card:hover {
  border-color: var(--color-accent);
}

.planner__poll-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.planner__poll-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.planner__poll-report-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.planner__poll-card-desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.planner__poll-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.planner__poll-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* -- Poll participants ---------------------------------------------------- */

.planner__poll-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: var(--space-sm);
}

.planner__poll-participant-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--color-text);
}

.planner__poll-participant-chip--more {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}

/* -- Poll best time ------------------------------------------------------- */

.planner__poll-best {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xs);
}

.planner__poll-best-label {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.planner__poll-best-count {
  color: var(--color-success);
  font-weight: var(--weight-semibold);
  margin-left: auto;
}

/* -- Poll mini heatmap ---------------------------------------------------- */

.planner__poll-heatmap {
  overflow-x: auto;
}

.planner__poll-heatmap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.65rem;
  table-layout: fixed;
}

.planner__poll-heatmap-table th {
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem;
  text-align: center;
}

.planner__poll-heatmap-time {
  font-size: 0.6rem;
  color: var(--color-muted);
  text-align: right;
  padding-right: 0.3rem;
  white-space: nowrap;
  width: 40px;
}

.planner__poll-heat {
  text-align: center;
  padding: 0.15rem;
  border-radius: 2px;
  color: var(--color-muted);
  transition: background var(--transition-fast);
}

.planner__poll-heat--0 {
  background: var(--color-bg);
  color: transparent;
}

.planner__poll-heat--1 {
  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg));
  color: var(--color-muted);
}

.planner__poll-heat--2 {
  background: color-mix(in srgb, var(--color-accent) 35%, var(--color-bg));
  color: var(--color-text);
}

.planner__poll-heat--3 {
  background: color-mix(in srgb, var(--color-accent) 55%, var(--color-bg));
  color: white;
}

.planner__poll-heat--4 {
  background: var(--color-accent);
  color: white;
  font-weight: var(--weight-semibold);
}

/* -- Poll sidebar items --------------------------------------------------- */

.planner__poll-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.planner__poll-sidebar-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* -- Poll connection status ----------------------------------------------- */

.planner__poll-status {
  padding: var(--space-xs) var(--space-lg);
}

.planner__poll-status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.planner__poll-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.planner__poll-status-dot--connected {
  background: var(--color-success);
}

.planner__poll-status-dot--disconnected {
  background: var(--color-danger);
}

.planner__poll-status-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.planner__poll-connect-btn {
  margin-top: var(--space-xs);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

/* -- Poll config modal ---------------------------------------------------- */

.planner__poll-config-modal {
  width: min(400px, 90vw);
}

/* -- Poll responsive ------------------------------------------------------ */

@media (max-width: 480px) {
  .planner__poll-heatmap {
    display: none;
  }
}
}