/* calendar.css — Phase 1: command-bar shell cleanup (layout/CSS only).
   Loaded after fcc-app-modules-v1.css. Restyles existing markup; adds no behavior.
   Scoped under #calendar so nothing leaks into other pages. */

/* --- Command title row --------------------------------------------------- */
#calendar .calendar-command-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 12px;
}
#calendar .calendar-command-titlebar .calendar-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
#calendar .calendar-command-titlebar .calendar-page-title {
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
#calendar .calendar-command-titlebar .calendar-page-subtitle {
  margin: 0;
  font-size: 0.9rem;
}

/* Synced status pill (presentational in Phase 1) */
#calendar .calendar-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.08);
  color: #4c3fb5;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#calendar .calendar-sync-pill:hover {
  background: rgba(124, 92, 255, 0.14);
  border-color: rgba(124, 92, 255, 0.45);
}
#calendar .calendar-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* --- Control strip → right side of the command bar ----------------------- */
#calendar .fcc-calendar-control-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  box-shadow: 0 1px 2px rgba(31, 27, 64, 0.04);
}
#calendar .fcc-calendar-view-switcher {
  margin-left: auto; /* push view + actions toward the right per mockup */
}

/* Segmented view control */
#calendar .fcc-calendar-view-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.07);
}
#calendar .calendar-view-btn {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5a5470;
  cursor: pointer;
}
#calendar .calendar-view-btn.active {
  background: #ffffff;
  color: #4c3fb5;
  box-shadow: 0 1px 2px rgba(31, 27, 64, 0.12);
}

/* Date nav pill + actions tighten up */
#calendar .fcc-calendar-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.07);
  padding: 3px;
}
#calendar .fcc-calendar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile: stack title above controls, keep everything reachable */
@media (max-width: 720px) {
  #calendar .calendar-command-titlebar { flex-wrap: wrap; }
  #calendar .fcc-calendar-view-switcher { margin-left: 0; }
  #calendar .fcc-calendar-control-strip { padding: 10px; }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign Phase 1B
   Top-page declutter so the grid moves closer to the top.
   CSS-only. No data/sync/import/reminder logic.
------------------------------------------------------------------------- */

#calendar .calendar-shell {
  max-width: 1180px;
  margin: 0 auto;
}

#calendar .calendar-command-titlebar {
  min-height: 74px;
  padding: 20px 22px;
  border: 1px solid rgba(124, 92, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 18%, rgba(236, 72, 153, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 241, 255, 0.94));
  box-shadow: 0 18px 50px rgba(31, 27, 64, 0.08);
}

#calendar .calendar-command-titlebar .calendar-hero-copy {
  flex: 1;
}

/* Subtitle month/year prefix mirrored read-only from #calendarMonthYear */
#calendar .calendar-subtitle-month {
  font-weight: 600;
  color: #4c3fb5;
}

#calendar .calendar-sync-pill {
  flex: 0 0 auto;
}

/* Make the existing control strip read like one polished command bar. */
#calendar .fcc-calendar-control-strip {
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(124, 92, 255, 0.14);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 45px rgba(31, 27, 64, 0.07);
  backdrop-filter: blur(14px);
}

/* Compact the insight cards so they stop pushing the calendar grid down. */
#calendar #calendarToolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

#calendar #calendarToolbar:empty {
  display: none;
}

#calendar #calendarToolbar > * {
  min-height: 92px;
  margin: 0;
}

/* The Family Command AI area is useful, but it is too dominant above the grid.
   Keep it present, but compress it until Phase 3 moves it into the right rail. */
#calendar #fccFamilyCommandAiHost,
#calendar .fcc-family-command-ai,
#calendar .family-command-ai,
#calendar [data-fcc-family-command-ai] {
  margin-top: 12px;
  margin-bottom: 16px;
}

#calendar #fccFamilyCommandAiHost .fcc-family-command,
#calendar #fccFamilyCommandAiHost .fcc-family-ai-panel,
#calendar #fccFamilyCommandAiHost .family-command-ai-panel,
#calendar .fcc-family-command-ai .fcc-family-ai-panel,
#calendar .family-command-ai .family-command-ai-panel {
  max-height: 180px;
  overflow: hidden;
  border-radius: 22px;
}

/* Bring the actual calendar workspace up visually. */
#calendar .calendar-workspace {
  margin-top: 14px;
}

#calendar .calendar-main-panel {
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(31, 27, 64, 0.08);
}

/* Mockup-aligned reorder (Phase 1C: grid is the hero). Float the control strip
   directly under the title, put the calendar grid/workspace next, and demote the
   insight / Family Command AI blocks below the grid. .calendar-shell is already
   display:flex/column, so this is CSS-only with no DOM/JS changes. */
#calendar .calendar-shell > .calendar-command-titlebar { order: 1; }
#calendar .calendar-shell > .fcc-calendar-control-strip { order: 2; }
#calendar .calendar-shell > .calendar-workspace { order: 3; }
#calendar .calendar-shell > #calendarToolbar { order: 4; }
#calendar .calendar-shell > #fccCalendarCommandStripHost { order: 5; }
#calendar .calendar-shell > #fccFamilyCommandAiHost { order: 6; }

/* Desktop: keep the top page clean and prevent over-wide header spacing. */
@media (min-width: 960px) {
  #calendar .calendar-command-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #calendar .fcc-calendar-control-strip {
    align-items: center;
  }
}

/* Mobile: do not trap important tools off screen. */
@media (max-width: 720px) {
  #calendar .calendar-shell {
    max-width: 100%;
  }

  #calendar .calendar-command-titlebar {
    padding: 16px;
    border-radius: 20px;
  }

  #calendar #calendarToolbar {
    grid-template-columns: 1fr;
  }

  #calendar #fccFamilyCommandAiHost .fcc-family-command,
  #calendar #fccFamilyCommandAiHost .fcc-family-ai-panel,
  #calendar #fccFamilyCommandAiHost .family-command-ai-panel,
  #calendar .fcc-family-command-ai .fcc-family-ai-panel,
  #calendar .family-command-ai .family-command-ai-panel {
    max-height: none;
  }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign Phase 1C
   Make the calendar grid the hero. The flex `order` reorder is handled in the
   block above (grid -> order 3; insights / Family AI -> below). This section is
   additive visual polish only - no order rules, no DOM/JS, no data logic.
------------------------------------------------------------------------- */

/* Let the grid/workspace read as the primary card directly under the controls.
   Restrained shadow because it wraps the existing .calendar-main-panel card. */
#calendar .calendar-workspace {
  margin-top: 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 56px rgba(31, 27, 64, 0.07);
}

/* Now that insights sit below the grid, give them a clear separator and keep
   them compact so they read as secondary content, not the hero. */
#calendar #calendarToolbar {
  margin-top: 18px;
}

#calendar #calendarToolbar > * {
  min-height: 78px;
}

/* Family Command AI also lives below the grid now - add breathing room above it.
   (max-height compaction is already defined in the Phase 1B block above.) */
#calendar #fccFamilyCommandAiHost {
  margin-top: 18px;
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign — Phase 2: Month grid + event pill polish
   CSS-ONLY. No data/sync/import/reminder logic. No DOM/JS edits.
   All selectors scoped under #calendar and rely on load order (calendar.css
   loads last) to win over styles.css without !important.
   Live grid is rendered by main.js renderMonthView() — class hooks only.
   Breakpoint mirrors main.js month-mobile logic at 760px.
------------------------------------------------------------------------- */

/* (1) Softer outer grid card ------------------------------------------------ */
#calendar .calendar-surface-card {
  border: 1px solid rgba(124, 92, 255, 0.12);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(31, 27, 64, 0.06);
  padding: 14px;
}
#calendar .calendar-weekdays {
  color: #8b86a3;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(124, 92, 255, 0.08);
  margin-bottom: 6px;
}

/* (2-3) Cleaner cells: lighter borders, less-heavy inner outlines ----------- */
#calendar #calendarGrid {
  gap: 8px;
}
#calendar .calendar-day {
  border: 1px solid rgba(124, 92, 255, 0.10);
  border-radius: 12px;          /* down from the heavier rounded cell look */
  background: #ffffff;
  padding: 8px 8px 6px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
#calendar .calendar-day-other {
  background: rgba(247, 245, 252, 0.6);
  border-color: rgba(124, 92, 255, 0.06);
}
#calendar .calendar-day-other .calendar-day-num { color: #b7b2c6; }
#calendar .calendar-day:hover {
  border-color: rgba(124, 92, 255, 0.28);
  box-shadow: 0 6px 18px rgba(31, 27, 64, 0.06);
}
#calendar .calendar-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a4560;
}

/* (8) Premium today / current-date highlight -------------------------------- */
#calendar .calendar-day.calendar-day-today {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.10), rgba(124, 92, 255, 0.04));
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.25);
}
#calendar .calendar-day.calendar-day-today .calendar-day-num,
#calendar .calendar-day.calendar-day-today .fcc-calendar-month-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #7c5cff;
  color: #ffffff;
  font-weight: 700;
}
/* Keep selected distinct from today (mobile + desktop) */
#calendar .calendar-day.calendar-day-selected:not(.calendar-day-today) {
  border-color: rgba(124, 92, 255, 0.4);
  background: rgba(124, 92, 255, 0.06);
}

/* (4) Event pill spacing + readability (geometry only; colors preserved) ---- */
#calendar .calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
#calendar .calendar-day-event-pill.fcc-density-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  min-height: 22px;
  line-height: 1.2;
  font-size: 0.74rem;
  cursor: pointer;        /* stays an interactive <button> */
}
#calendar .calendar-day-event-pill .fcc-density-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
#calendar .calendar-day-event-pill .fcc-density-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
#calendar .calendar-day-event-pill .fcc-event-conflict-month-hint {
  flex: 0 0 auto;         /* keep the conflict "!" visible */
}
/* (5) NOTE: do NOT add background/color rules for .fcc-density-pill--school
   /--activity /--family /--personal /--other — category colors stay as-is. */

/* (6) De-emphasize repeated school-meal events (kept visible + clickable) --- */
#calendar .calendar-day-event-pill.fcc-calendar-event-school-meal {
  opacity: 0.72;
  font-size: 0.7rem;
  min-height: 20px;
  background: rgba(124, 92, 255, 0.05);
  box-shadow: none;
}
#calendar .calendar-day-event-pill.fcc-calendar-event-school-meal .fcc-density-title {
  font-weight: 500;
}

/* (7) +more / show-less as a quiet link chip (STYLE ONLY — no behavior) ----- */
#calendar .calendar-day-more,
#calendar .calendar-day-more.fcc-density-more,
#calendar .calendar-day-more.fcc-density-less {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 1px 4px;
  border: 0;
  background: transparent;
  color: #6d4fe0;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
#calendar .calendar-day-more:hover { text-decoration: underline; }

/* (9) Mobile month — align to main.js 760px breakpoint; keep taps usable ---- */
@media (max-width: 760px) {
  #calendar .calendar-surface-card { padding: 8px; border-radius: 18px; }
  #calendar #calendarGrid { gap: 5px; }
  #calendar .fcc-calendar-month-grid--mobile .calendar-day {
    border-radius: 10px;
    padding: 6px 5px;
  }
  /* Mobile pills are dot-only; preserve their size/tap target */
  #calendar .calendar-day-event-pill.fcc-calendar-mobile-dot {
    min-height: 0;
    padding: 0;
  }
  #calendar .calendar-day-more.fcc-calendar-mobile-more { font-size: 0.68rem; }
  /* Mobile agenda list under the grid stays readable */
  #calendar .fcc-calendar-mobile-agenda-item.calendar-day-event-pill {
    padding: 8px 10px;
    min-height: 40px;
  }
}

/* Desktop-only pill text rules must not leak into mobile dot pills */
@media (min-width: 761px) {
  #calendar .calendar-day-event-pill.fcc-density-pill:not(.fcc-calendar-mobile-dot) .fcc-density-title {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign — Phase 3: right rail (Today / Upcoming / Insights / Add Quickly)
   CSS-ONLY layout for an additively-injected #calendarRightRail. No data logic.
------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  #calendar .calendar-scheduler-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 1rem;
    align-items: start;
  }
  #calendar .calendar-scheduler-row > #fccKidCalendarAiHost { grid-column: 1 / -1; }
  #calendar .calendar-scheduler-row > #calendarSurfaceCard { grid-column: 1; }
  #calendar .calendar-scheduler-row > #calendarRightRail {
    grid-column: 2;
    position: sticky;
    top: 16px;
  }
}

#calendar #calendarRightRail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
#calendar .calendar-rail-card {
  border: 1px solid rgba(124, 92, 255, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 27, 64, 0.05);
  padding: 14px;
}
#calendar .calendar-rail-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
#calendar .calendar-rail-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2c2740;
}
#calendar .calendar-rail-card > .calendar-rail-heading { margin: 0 0 10px; }
#calendar .calendar-rail-today-date { font-size: 0.78rem; color: #8b86a3; font-weight: 600; }
#calendar .calendar-rail-viewall {
  font-size: 0.78rem; font-weight: 600; color: #6d4fe0;
  cursor: pointer; text-decoration: none;
}
#calendar .calendar-rail-viewall:hover { text-decoration: underline; }
#calendar .calendar-rail-empty { color: #8b86a3; font-size: 0.85rem; }

/* Today featured card */
#calendar .calendar-rail-today-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124,92,255,0.10), rgba(124,92,255,0.04));
}
#calendar .calendar-rail-today-icon { font-size: 1.4rem; line-height: 1; }
#calendar .calendar-rail-today-body { min-width: 0; }
#calendar .calendar-rail-today-title { font-weight: 700; color: #2c2740; }
#calendar .calendar-rail-today-time { font-size: 0.85rem; color: #4c3fb5; }
#calendar .calendar-rail-today-loc { font-size: 0.8rem; color: #6b6680; margin-top: 2px; }

/* Upcoming rows */
#calendar .calendar-rail-upcoming-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid rgba(124,92,255,0.08);
}
#calendar .calendar-rail-upcoming-row:first-child { border-top: 0; }
#calendar .calendar-rail-upcoming-date { width: 44px; font-size: 0.74rem; color: #8b86a3; font-weight: 600; }
#calendar .calendar-rail-upcoming-icon { font-size: 1rem; }
#calendar .calendar-rail-upcoming-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#calendar .calendar-rail-upcoming-title { font-size: 0.85rem; font-weight: 600; color: #2c2740; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#calendar .calendar-rail-upcoming-time { font-size: 0.76rem; color: #6b6680; }
#calendar .calendar-rail-upcoming-chevron { color: #b7b2c6; }

/* Insights relocated into the rail — force single column (override Phase 1B 2-col grid) */
#calendar #calendarRightRail #calendarToolbar { grid-template-columns: 1fr !important; margin: 0; }
#calendar #calendarRightRail #calendarToolbar > * { min-height: 0; }

/* Add quickly */
#calendar .calendar-rail-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#calendar .calendar-rail-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: 1px solid rgba(124,92,255,0.14); border-radius: 12px;
  background: #faf9ff; font-size: 0.72rem; font-weight: 600; color: #4c3fb5; cursor: pointer;
}
#calendar .calendar-rail-quick-btn:hover { background: rgba(124,92,255,0.10); }

/* Mobile / below 1080px: rail stacks under the grid (it is the last child, natural order). */
@media (max-width: 1079px) {
  #calendar #calendarRightRail { margin-top: 16px; position: static; }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign — Phase 3B: right rail proportion + workspace polish
   CSS-only. Keeps Phase 3 behavior and all calendar logic intact. Grid is the
   hero; rail is a narrower supporting panel. Removes the empty left-rail grid
   column so the workspace uses more of the available width.
------------------------------------------------------------------------- */

/* (1) Let the calendar workspace use more of the available page width. */
#calendar .calendar-shell {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* (2) The left filter rail is permanently hidden (calendar-ui.js sets display:none),
   but its grid track still reserved 240-280px on the left. Collapse the layout
   shell to a single column so that blank space is recovered for the grid. */
#calendar .calendar-workspace.calendar-layout-shell {
  grid-template-columns: minmax(0, 1fr);
}

/* (3) Desktop scheduler grid: month grid stays the hero, rail is narrower.
   Uses minmax(0, 1fr) for the hero column to avoid horizontal overflow. */
@media (min-width: 1080px) {
  #calendar .calendar-scheduler-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 300px);
    gap: 18px;
    align-items: start;
  }
  #calendar .calendar-scheduler-row > #fccKidCalendarAiHost { grid-column: 1 / -1; }
  #calendar .calendar-scheduler-row > #calendarSurfaceCard { grid-column: 1; min-width: 0; }
  #calendar .calendar-scheduler-row > #calendarRightRail {
    grid-column: 2;
    min-width: 0;
    position: sticky;
    top: 16px;
  }
}

/* Large desktop: a little more shell width and rail breathing room. */
@media (min-width: 1280px) {
  #calendar .calendar-shell {
    max-width: 1380px;
  }
  #calendar .calendar-scheduler-row {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
  }
}

/* (4) Tighten rail cards so they support the grid instead of overpowering it. */
#calendar #calendarRightRail .calendar-rail-card {
  border-radius: 18px;
  padding: 14px;
}
#calendar #calendarRightRail .calendar-rail-heading {
  font-size: 0.95rem;
  line-height: 1.2;
}
#calendar #calendarRightRail .calendar-rail-quick-grid {
  gap: 8px;
}
#calendar #calendarRightRail .calendar-rail-quick-btn {
  min-height: 52px;
  border-radius: 14px;
}

/* (5) Below 1080px: keep the rail stacked below the grid (handled above), and
   ensure it spans full width with no sticky offset. */
@media (max-width: 1079px) {
  #calendar #calendarRightRail {
    max-width: none;
    position: static;
  }
}

/* ── Phase 4A: Day Detail Overlay ───────────────────────────────────── */

/* Hide the inline panel by default; it only appears as an overlay */
#calendarDayDetail {
  display: none;
  position: relative;
}

/* Backdrop */
.fcc-cal-day-detail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(18, 22, 33, 0.48);
}
body.fcc-day-detail-open .fcc-cal-day-detail-backdrop {
  display: block;
}

/* Desktop: centered overlay */
body.fcc-day-detail-open #calendarDayDetail {
  display: block;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(580px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  height: fit-content;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1051;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  background: var(--card, #fff);
}

/* Close button */
.fcc-cal-day-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-muted, #64748b);
}
.fcc-cal-day-detail-close:hover {
  background: rgba(100, 116, 139, 0.12);
}

/* Mobile: bottom-sheet */
@media (max-width: 720px) {
  body.fcc-day-detail-open #calendarDayDetail {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    width: 100%;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 32px;
  }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign — Phase 4B: rail overflow + duplicate content cleanup
   CSS-ONLY. Real selectors confirmed via rg. No data/sync/import/reminder
   logic and no DOM/JS edits. Keeps all Phase 1C/2/3/4A behavior intact.
------------------------------------------------------------------------- */

/* (1) Prevent right rail cards from creating horizontal scrollbars. */
#calendar #calendarRightRail,
#calendar #calendarRightRail *,
#calendar #calendarRightRailInsights,
#calendar #calendarRightRail #calendarToolbar {
  box-sizing: border-box;
  max-width: 100%;
}
#calendar #calendarRightRail { overflow-x: hidden; }
#calendar #calendarRightRailInsights,
#calendar #calendarRightRail #calendarToolbar { overflow-x: hidden; }

/* (2) The relocated insight carousel is the actual scroll source inside the
   narrow rail. Stack it vertically and let cards fill the column width. */
#calendar #calendarRightRail .fcc-calendar-insights {
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}
#calendar #calendarRightRail .fcc-calendar-insight-card {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* (3) Word-wrap real rail text classes so long titles never force overflow. */
#calendar #calendarRightRail .calendar-rail-today-title,
#calendar #calendarRightRail .calendar-rail-today-loc,
#calendar #calendarRightRail .calendar-rail-upcoming-title,
#calendar #calendarRightRail .calendar-rail-upcoming-time,
#calendar #calendarRightRail .calendar-rail-heading,
#calendar #calendarRightRail .fcc-calendar-insight-title,
#calendar #calendarRightRail .fcc-calendar-insight-detail {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* (4) The below-grid Today/Next command strip duplicates the rail's
   Today/Upcoming sections on desktop, where the rail owns that job. Hide it
   on desktop only; keep it below 1080px where the rail stacks under the grid.
   Pure display:none — the JS render target still exists, so nothing breaks. */
@media (min-width: 1080px) {
  #calendar #fccCalendarCommandStripHost,
  #calendar .fcc-calendar-command-strip {
    display: none;
  }
}

/* (5) Family Command AI stays useful but should not dominate the page. */
#calendar #fccFamilyCommandAiHost { margin-top: 18px; }
@media (min-width: 1080px) {
  #calendar #fccFamilyCommandAiHost .fcc-family-command,
  #calendar #fccFamilyCommandAiHost .fcc-family-ai-panel,
  #calendar #fccFamilyCommandAiHost .family-command-ai-panel {
    max-height: 190px;
    overflow: hidden;
    border-radius: 24px;
  }
}
@media (max-width: 1079px) {
  #calendar #fccFamilyCommandAiHost .fcc-family-command,
  #calendar #fccFamilyCommandAiHost .fcc-family-ai-panel,
  #calendar #fccFamilyCommandAiHost .family-command-ai-panel {
    max-height: none;
  }
}

/* -------------------------------------------------------------------------
   FCC Calendar Redesign — Phase 4C: restore Family Command AI usability
   CSS-only. Fixes clipped/click-blocked AI cards caused by prior compression
   (Phase 1B lines 194-202, Phase 4B lines 774-782). Selectors include
   #fccFamilyCommandAiHost to match (0,2,1) specificity and win by load order.
------------------------------------------------------------------------- */
#calendar #fccFamilyCommandAiHost,
#calendar #fccFamilyCommandAiHost .fcc-family-command {
  max-height: none;
  overflow: visible;
  pointer-events: auto;
}

#calendar #fccFamilyCommandAiHost .fcc-family-command > * {
  pointer-events: auto;
}

/* Desktop: contain height via internal scroll instead of clipping. */
@media (min-width: 1080px) {
  #calendar #fccFamilyCommandAiHost .fcc-family-command {
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile/tablet: never clip the Family Command AI block. */
@media (max-width: 1079px) {
  #calendar #fccFamilyCommandAiHost .fcc-family-command {
    max-height: none;
    overflow: visible;
  }
}

/* =========================================================================
   FCC Calendar Redesign — Phase 5: Premium Visual Polish
   CSS-ONLY. Appended after Phase 4C. No data/sync/import/logic changes.
   All selectors scoped to #calendar. No overflow:hidden on #fccFamilyCommandAiHost.
========================================================================= */

/* ── §5.1  Header cohesion ─────────────────────────────────────────────── */

/* Bring the titlebar and control strip closer so they read as one header unit */
#calendar .calendar-command-titlebar {
  margin-bottom: 6px;
}

#calendar .fcc-calendar-control-strip {
  margin-top: 4px;
  margin-bottom: 14px;
  border-color: rgba(124, 92, 255, 0.18);
  background: rgba(255, 255, 255, 0.93);
  box-shadow:
    0 18px 45px rgba(31, 27, 64, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Synced pill: subtle gloss border */
#calendar .calendar-sync-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* Sync dot: slow pulse animation confirming live connection */
@keyframes fcc-sync-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  65%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.00); }
}
#calendar .calendar-sync-dot {
  animation: fcc-sync-pulse 2.6s ease-out infinite;
}


/* ── §5.2  View switcher → purple brand ────────────────────────────────── */

/* Container: match purple palette (styles.css uses blue !important — win by load order) */
#calendar .fcc-calendar-view-switcher {
  border-color: rgba(124, 92, 255, 0.20) !important;
  background: rgba(124, 92, 255, 0.06) !important;
}

/* Active tab: purple gradient overrides styles.css blue gradient (!important war) */
#calendar .fcc-calendar-view-switcher .calendar-view-btn.active,
#calendar .fcc-calendar-view-switcher .calendar-view-btn[aria-selected="true"],
#calendar .fcc-calendar-view-switcher .calendar-view-btn.is-active {
  background: linear-gradient(135deg, #7c5cff, #4c3fb5) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(124, 92, 255, 0.30) !important;
}

/* Inactive tab: muted purple text */
#calendar .fcc-calendar-view-switcher .calendar-view-btn:not(.active):not([aria-selected="true"]):not(.is-active) {
  color: #6b6680 !important;
}


/* ── §5.3  Calendar grid minor polish ──────────────────────────────────── */

/* Surface card: dual-layer shadow (depth + brand glow) */
#calendar .calendar-scheduler-row .calendar-surface-card {
  box-shadow:
    0 16px 44px rgba(31, 27, 64, 0.08),
    0 2px 8px rgba(124, 92, 255, 0.06);
}

/* Today badge: slightly wider for visual balance */
#calendar .calendar-day.calendar-day-today .calendar-day-num,
#calendar .calendar-day.calendar-day-today .fcc-calendar-month-day-number {
  min-width: 26px;
  height: 26px;
}


/* ── §5.4  Right rail — Today card ─────────────────────────────────────── */

#calendar .calendar-rail-today-card {
  position: relative;
  overflow: hidden;               /* clips ::before to card border-radius */
  cursor: pointer;
  border: 1px solid rgba(124, 92, 255, 0.16);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.13), rgba(124, 92, 255, 0.05));
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

/* Purple left-edge accent bar */
#calendar .calendar-rail-today-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #7c5cff, #4c3fb5);
  border-radius: 3px 0 0 3px;
}

#calendar .calendar-rail-today-card:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.20), rgba(124, 92, 255, 0.09));
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.14);
}

#calendar .calendar-rail-today-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

#calendar .calendar-rail-today-title {
  font-size: 0.93rem;
  font-weight: 700;
  color: #1e1b38;
  line-height: 1.28;
}

#calendar .calendar-rail-today-time {
  font-size: 0.83rem;
  font-weight: 650;
  color: #6d4fe0;
  margin-top: 3px;
}

#calendar .calendar-rail-today-loc {
  font-size: 0.78rem;
  color: #6b6680;
  margin-top: 3px;
}


/* ── §5.5  Right rail — Upcoming rows ──────────────────────────────────── */

#calendar .calendar-rail-upcoming-row {
  cursor: pointer;
  border-radius: 10px;
  padding: 8px 6px;
  border-top: 1px solid rgba(124, 92, 255, 0.06);
  gap: 10px;
  transition: background 0.14s ease;
}

#calendar .calendar-rail-upcoming-row:first-child { border-top: 0; }

#calendar .calendar-rail-upcoming-row:hover {
  background: rgba(124, 92, 255, 0.05);
}

/* Date: mini chip badge */
#calendar .calendar-rail-upcoming-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-height: 36px;
  padding: 3px 2px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(124, 92, 255, 0.09);
  font-size: 0.72rem;
  font-weight: 750;
  color: #4c3fb5;
  text-align: center;
  line-height: 1.25;
}

#calendar .calendar-rail-upcoming-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

#calendar .calendar-rail-upcoming-title {
  font-size: 0.86rem;
  font-weight: 650;
  color: #1e1b38;
}

#calendar .calendar-rail-upcoming-time {
  font-size: 0.74rem;
  font-weight: 500;
  color: #7c5cff;
}

#calendar .calendar-rail-upcoming-chevron {
  font-size: 1.05rem;
  color: #c8c3d8;
  flex-shrink: 0;
}


/* ── §5.6  Right rail — Family Insights cards ──────────────────────────── */

#calendar #calendarRightRail .fcc-calendar-insight-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(124, 92, 255, 0.04);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.14s ease;
  box-sizing: border-box;
}

#calendar #calendarRightRail .fcc-calendar-insight-card:hover {
  background: rgba(124, 92, 255, 0.09);
}

#calendar #calendarRightRail .fcc-calendar-insight-card:last-child {
  margin-bottom: 0;
}

#calendar #calendarRightRail .fcc-calendar-insight-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

#calendar #calendarRightRail .fcc-calendar-insight-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#calendar #calendarRightRail .fcc-calendar-insight-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2c2740;
  display: block;
  line-height: 1.3;
}

#calendar #calendarRightRail .fcc-calendar-insight-detail {
  font-size: 0.76rem;
  color: #6b6680;
  display: block;
  line-height: 1.42;
}

#calendar #calendarRightRail .fcc-calendar-insight-cta {
  font-size: 0.74rem;
  font-weight: 700;
  color: #7c5cff;
  margin-top: 4px;
  display: block;
}


/* ── §5.7  Right rail — Add Quickly buttons ────────────────────────────── */

#calendar .calendar-rail-quick-grid {
  gap: 8px;
}

#calendar .calendar-rail-quick-btn {
  padding: 12px 4px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.20);
  background: linear-gradient(180deg, #faf9ff, #f1eeff);
  color: #4c3fb5;
  font-size: 1.05rem;        /* emoji scales with font-size */
  font-weight: 700;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(124, 92, 255, 0.07);
  transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

#calendar .calendar-rail-quick-btn span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4c3fb5;
}

#calendar .calendar-rail-quick-btn:hover {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.14), rgba(124, 92, 255, 0.09));
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.16);
  transform: translateY(-1px);
}


/* ── §5.8  Day-detail overlay — enter animations ───────────────────────── */

/* Desktop: scale + translate fade-in */
@keyframes fcc-day-detail-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile (bottom-sheet): slide up from below */
@keyframes fcc-day-detail-enter-mobile {
  from {
    opacity: 0;
    transform: translateY(72px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Backdrop: fade in */
@keyframes fcc-day-detail-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.fcc-day-detail-open #calendarDayDetail {
  animation: fcc-day-detail-enter 0.24s cubic-bezier(0.22, 0.68, 0, 1.15) both;
}

body.fcc-day-detail-open .fcc-cal-day-detail-backdrop {
  animation: fcc-day-detail-backdrop-in 0.18s ease both;
}

@media (max-width: 720px) {
  body.fcc-day-detail-open #calendarDayDetail {
    animation: fcc-day-detail-enter-mobile 0.28s cubic-bezier(0.22, 0.68, 0, 1.0) both;
  }
}


/* ── §5.9  Day-detail overlay — content polish ─────────────────────────── */

/* Header: bolder title, pad right for close button */
#calendarDayDetail .day-detail-title {
  font-size: 1.08rem;
  font-weight: 750;
  color: #1e1b38;
  margin: 0 0 8px;
  padding-right: 36px;   /* keeps text from overlapping the close button */
  line-height: 1.3;
}

/* Close button: tighter hover ring */
.fcc-cal-day-detail-close:hover {
  background: rgba(124, 92, 255, 0.10);
  color: #4c3fb5;
}

/* Event articles inside the overlay */
#calendarDayDetail .calendar-detail-event {
  border: 1px solid rgba(124, 92, 255, 0.10);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(124, 92, 255, 0.03);
}

#calendarDayDetail .calendar-detail-event:last-child {
  margin-bottom: 0;
}

#calendarDayDetail .calendar-detail-event__eyebrow {
  font-size: 0.73rem;
  font-weight: 650;
  color: #7c5cff;
  margin-bottom: 2px;
}

#calendarDayDetail .calendar-detail-event__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e1b38;
  margin-bottom: 4px;
}

/* Day detail actions row (Add Event button) */
#calendarDayDetail .calendar-day-detail-actions {
  margin-bottom: 12px;
}

/* Empty state */
#calendarDayDetail .calendar-day-empty-state {
  padding: 16px 0 8px;
  text-align: center;
}


/* ── §5.10  Mobile stacking improvements ───────────────────────────────── */

/* Right rail stacked below grid: add a visual top-separator */
@media (max-width: 1079px) {
  #calendar #calendarRightRail {
    border-top: 1px solid rgba(124, 92, 255, 0.09);
    padding-top: 18px;
    margin-top: 18px;
  }
}

/* Very narrow phones: Add Quickly goes 2×2 instead of 4×1 */
@media (max-width: 500px) {
  #calendar .calendar-rail-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Control strip: wrap gracefully on tablet */
@media (max-width: 840px) and (min-width: 721px) {
  #calendar .fcc-calendar-control-strip {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* -------------------------------------------------------------------------
   FCC Add Event sheet — mobile viewport-fixed positioning (defensive)
   The Add/Edit Event dialog lives at the bottom of the #calendar DOM. On
   mobile it must open as a viewport-fixed bottom sheet above the bottom nav
   instead of rendering down near the bottom of the month page. The outer
   wrapper owns positioning; the .calendar-event-modal-inner shell owns the
   visible card surface, scroll, and rounded top corners. Desktop (>=769px)
   keeps the existing centered modal behavior.
------------------------------------------------------------------------- */

/* Lock background scroll while the event modal is open (all viewports). */
body.calendar-modal-open {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 768px) {
  /* (A) Outer wrapper — viewport-fixed anchor only. Card chrome is reset so
     the inner shell owns the visible surface. */
  #calendarEventModal,
  .calendar-event-modal,
  .calendar-add-event-modal,
  .calendar-event-sheet,
  #calendarAddEventModal {
    --fcc-bottom-nav-height: var(--fcc-bottom-nav-h, 84px);
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(var(--fcc-bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 9999 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* (B) Inner shell — the actual scrolling card. */
  #calendarEventModal .calendar-event-modal-inner,
  .calendar-event-modal .calendar-event-modal-inner,
  .calendar-event-modal-inner {
    max-height: calc(100dvh - 130px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0 !important;
    background: var(--fcc-color-surface, var(--card, #fff)) !important;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22) !important;
  }

  /* (C) Backdrop — full-viewport dim/blur behind the sheet. */
  #calendarEventModalBackdrop,
  .calendar-event-modal-backdrop,
  .calendar-add-event-backdrop,
  #calendarEventBackdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
  }
}

/* -------------------------------------------------------------------------
   FCC Calendar — Add Event Modal Viewport Anchor Fix
   Desktop/agenda protection. Keeps mobile bottom-sheet behavior intact.
   CSS-only. No calendar data/sync/event-save logic changes.
------------------------------------------------------------------------- */

/* Desktop/tablet: keep Add/Edit Event modal centered in the current viewport.
   This fixes Agenda mode rendering the modal down near the bottom of the page. */
@media (min-width: 769px) {
  body.calendar-modal-open #calendarEventModal,
  body.calendar-modal-open .calendar-event-modal,
  body.calendar-modal-open .calendar-add-event-modal,
  body.calendar-modal-open .calendar-event-sheet,
  body.calendar-modal-open #calendarAddEventModal,
  #calendarEventModal[aria-hidden="false"],
  #calendarEventModal.is-open,
  #calendarEventModal.open,
  #calendarEventModal.active {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: min(760px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 !important;
    z-index: 10050 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.calendar-modal-open #calendarEventModal .calendar-event-modal-inner,
  body.calendar-modal-open .calendar-event-modal .calendar-event-modal-inner,
  body.calendar-modal-open .calendar-event-modal-inner,
  #calendarEventModal[aria-hidden="false"] .calendar-event-modal-inner,
  #calendarEventModal.is-open .calendar-event-modal-inner,
  #calendarEventModal.open .calendar-event-modal-inner,
  #calendarEventModal.active .calendar-event-modal-inner {
    width: 100% !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px !important;
    background: var(--fcc-color-surface, var(--card, #fff)) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
  }

  body.calendar-modal-open #calendarEventModalBackdrop,
  body.calendar-modal-open .calendar-event-modal-backdrop,
  body.calendar-modal-open .calendar-add-event-backdrop,
  body.calendar-modal-open #calendarEventBackdrop,
  #calendarEventModalBackdrop[aria-hidden="false"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
  }
}

/* While any calendar event modal is open, prevent the page behind it from scrolling. */
body.calendar-modal-open {
  overflow: hidden;
}

/* Do not let transformed calendar containers trap fixed-position modal behavior. */
body.calendar-modal-open #calendar,
body.calendar-modal-open .page#calendar,
body.calendar-modal-open #calendar .calendar-shell,
body.calendar-modal-open #calendar .calendar-shell-card,
body.calendar-modal-open #calendar .calendar-workspace,
body.calendar-modal-open #calendar .calendar-scheduler-row {
  transform: none !important;
  animation: none !important;
}