/* Allow space for right menu when expanded */
:root {
  --calendar-widget-side-offset: 280px;

  /* ---- Floating action cluster geometry -------------------------------
     The three FABs (.calendar-widget-btn, #go-back-btn, #bug-report-btn)
     are all anchored to the bottom-right corner. Every rule below states
     their vertical geometry in terms of these three custom properties, and
     nothing else in this file repeats the numbers -- so a breakpoint that
     moves the cluster only has to redefine an input here.

     --fab-cluster-clearance is the derived output: the distance from the
     viewport bottom to the TOP of the highest FAB, i.e. the band of the
     viewport this cluster reserves. Anything else that has to stay clear of
     the cluster reads that one value instead of hard-coding a matching
     offset. Current consumer: the cookie consent banner in
     templates/includes/cookie_consent_banner.html, whose legally-required
     "Privacy details" link used to land underneath #bug-report-btn between
     577px and ~1023px because it carried its own copy of the number and
     only applied it <=576px.

     The clearance is gated on the cluster actually being on the page: this
     stylesheet loads for everyone, but base.html only mounts #bug-report-root
     and loads calendar-widget.js for authenticated users, so an anonymous
     visitor reserves nothing. :has() is live, so it re-resolves when the
     island/script mounts its button. */
  --fab-size: 60px;
  --fab-bottom: 30px;
  --fab-calendar-bottom: 30px;
  --fab-cluster-clearance: 0px;
}

body:has(.calendar-widget-btn, #go-back-btn, #bug-report-btn) {
  --fab-cluster-clearance: calc(
    max(var(--fab-bottom), var(--fab-calendar-bottom)) + var(--fab-size)
  );
}

/* Calendar Widget Button */
.calendar-widget-btn {
  position: fixed;
  bottom: var(--fab-calendar-bottom);
  right: 30px;
  z-index: 2001;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* The FAB also carries the generic .btn class, so page stylesheets loaded
   after this one (e.g. messaging.css's .btn { border-radius:8px; padding }) can
   clobber its circular shape and squash the logo. Win with higher specificity. */
.btn.calendar-widget-btn {
  border-radius: 50%;
  padding: 0;
}

.calendar-widget-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.calendar-widget-btn:active {
  transform: scale(0.95);
}

.calendar-widget-btn-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 0;
  margin: 0;
}

/* Calendar Widget Container */
.calendar-widget-container {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 2000;
  width: 340px;
  max-width: 95vw;
  max-height: calc(100vh - 140px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.calendar-widget-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2201;
  background: transparent;
}

.calendar-widget-resize-handle.nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.calendar-widget-resize-handle.ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.calendar-widget-resize-handle.sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.calendar-widget-resize-handle.se {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

.calendar-widget-container.active {
  display: flex;
}

/* Expanded view - bottom 30% of screen */
.calendar-widget-container.expanded {
  position: fixed;
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  width: calc(100vw - var(--calendar-widget-side-offset) - 32px);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  height: 70vh;
  border-radius: 12px;
  z-index: 2000;
  flex-direction: column;
  display: flex;
}

.calendar-widget-container.expanded .calendar-widget-content {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
}

.calendar-widget-container.expanded .calendar-widget-day {
  margin: 0;
  border: 1px solid #dee2e6;
  border-radius: 0;
  min-width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.calendar-widget-container.expanded .calendar-widget-day:last-child {
  border-right: 1px solid #dee2e6;
}

.calendar-widget-container.expanded .calendar-widget-day-content {
  flex: 1;
  overflow-y: auto;
  max-height: calc(70vh - 80px);
}

.calendar-widget-container.daily-mode .calendar-widget-day,
.calendar-widget-container:not(.expanded).daily-mode .calendar-widget-day {
  flex: 1 0 100%;
  min-width: 100%;
  max-width: 100%;
}

/* Consistent horizontal layout for weekly view in compact */
.calendar-widget-container:not(.expanded).weekly-mode .calendar-widget-content {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px;
}

/* General day sizing */
.calendar-widget-day {
  flex: 0 0 220px;
  min-width: 220px;
}

/* Prevent oversized columns in compact weekly */
.calendar-widget-container:not(.expanded).weekly-mode .calendar-widget-day {
  flex: 0 0 240px;
  min-width: 240px;
  max-width: 260px;
}

@media (max-width: 1200px) {
  .calendar-widget-container.expanded {
    width: calc(100vw - 24px);
    left: 12px;
    max-width: calc(100vw - 24px);
    height: 70vh;
  }
}

.calendar-widget-container.expanded .calendar-widget-header {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* Hide expand button in expanded view, show minimize button */
.calendar-widget-container.expanded .calendar-widget-expand {
  display: none;
}

.calendar-widget-container.expanded .calendar-widget-minimize {
  display: flex;
}

/* Hide minimize button in compact view */
.calendar-widget-container:not(.expanded) .calendar-widget-minimize {
  display: none;
}
.calendar-widget-container:not(.expanded) .calendar-widget-view-toggle {
  display: inline-flex;
}
.calendar-widget-container.expanded .calendar-widget-view-toggle {
  display: none;
}

.calendar-widget-container.dark-mode {
  background: var(--bg-card, #2d3748);
  color: white;
}

/* Widget Header */
.calendar-widget-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: grab;
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-widget-header:active {
  cursor: grabbing;
}

/* Close button - always on left */
.calendar-widget-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.calendar-widget-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Title - left aligned in center-left */
.calendar-widget-title {
  flex: 1;
  text-align: left;
}

.calendar-widget-nav {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.calendar-widget-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Expand button - compact view only, on right */
.calendar-widget-expand {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.calendar-widget-expand:hover {
  background: rgba(255, 255, 255, 0.2);
}

.calendar-widget-expand::before {
  content: '⛶';
}

.calendar-widget-minimize {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 8px;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.calendar-widget-minimize:hover {
  background: rgba(255, 255, 255, 0.2);
}

.calendar-widget-minimize::before {
  content: '⛶';
}

.calendar-widget-view-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.calendar-widget-view-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

.calendar-widget-container.expanded .calendar-widget-view-toggle {
  display: none;
}

/* Widget Content */
.calendar-widget-content {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  font-size: 0.875rem;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
}

.calendar-widget-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.calendar-widget-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.calendar-widget-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.calendar-widget-container:not(.expanded) .calendar-widget-content {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px;
  gap: 8px;
}

.calendar-widget-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.calendar-widget-container.expanded .calendar-widget-content::-webkit-scrollbar {
  height: 8px;
}

.calendar-widget-container.expanded .calendar-widget-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

.calendar-widget-day {
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.calendar-widget-container.dark-mode .calendar-widget-day {
  border-color: var(--border-color, #475569);
}

.calendar-widget-day-header {
  background: var(--surface-light, #f8f9fa);
  padding: 8px 10px;
  font-weight: 600;
  color: var(--accent-blue, var(--accent-blue));
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--accent-blue);
  flex-shrink: 0;
}

.calendar-widget-container.dark-mode .calendar-widget-day-header {
  background: var(--surface-dark, #3d444d);
  color: var(--accent-blue, #60a5fa);
  border-bottom-color: var(--accent-blue, #60a5fa);
}

/* Day header is a link to the full day view (calendar/day/). */
a.calendar-widget-day-header {
  display: block;
  text-decoration: none;
  color: var(--accent-blue);
  cursor: pointer;
  transition: filter 0.15s ease;
}

a.calendar-widget-day-header:hover {
  filter: brightness(1.12);
  text-decoration: underline;
}

.calendar-widget-container.expanded .calendar-widget-day-header {
  padding: 10px 8px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.calendar-widget-day-content {
  padding: 8px 10px;
}

.calendar-widget-event {
  display: block;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  background: var(--craft-indigo-tint);
  border: 1px solid var(--craft-indigo);
  word-break: break-word;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.calendar-widget-event:visited {
  text-decoration: none;
  color: inherit;
}

.calendar-widget-event:hover,
.calendar-widget-event:focus-visible {
  filter: brightness(0.96);
  text-decoration: none;
  color: inherit;
}

.calendar-widget-event.personal {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.3);
  color: inherit;
}

.calendar-widget-event.recommended {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  opacity: 0.9;
}

.calendar-widget-event.recommended.favorite-creator {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(217, 119, 6, 0.4);
  opacity: 1;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.15);
}

.calendar-widget-container.dark-mode .calendar-widget-event.recommended.favorite-creator {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.4);
}

.calendar-widget-free-slot {
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.28);
  color: inherit;
  word-break: break-word;
}

.calendar-widget-free-slot-title {
  font-weight: 600;
  color: inherit;
}

.calendar-widget-free-slot-time {
  color: rgba(46, 125, 50, 0.7);
  font-size: 0.7rem;
  margin-top: 2px;
}

@media (max-width: 991.98px) and (orientation: landscape) {
  :root {
    --fab-calendar-bottom: 16px;
  }

  .calendar-widget-btn {
    right: 16px;
  }

  .calendar-widget-container {
    bottom: 70px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 110px);
  }
}


.calendar-widget-event-title {
  font-weight: 600;
  color: inherit;
}

.calendar-widget-event-time {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.7rem;
  margin-top: 2px;
}

.calendar-widget-container.dark-mode .calendar-widget-event-time {
  color: rgba(255, 255, 255, 0.5);
}

.calendar-widget-empty {
  padding: 20px 10px;
  text-align: center;
  color: var(--text-muted, #6c757d);
  font-size: 0.85rem;
}

.calendar-widget-container.dark-mode .calendar-widget-empty {
  color: var(--text-muted, #9ca3af);
}

/* Loading state */
.calendar-widget-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #6c757d);
}

.calendar-widget-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Drag constraints hint */
.calendar-widget-constraint {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 600px;
  pointer-events: none;
  z-index: 998;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --fab-calendar-bottom: 72px;
  }

  .calendar-widget-btn {
    right: 16px;
  }
}

@media (max-width: 576px) {
  :root {
    --fab-size: 44px;
    --fab-bottom: max(14px, env(safe-area-inset-bottom));
    --fab-calendar-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .calendar-widget-btn {
    right: 12px;
    font-size: 1rem;
  }

  .calendar-widget-container {
    width: 320px;
    max-height: 400px;
    bottom: 80px;
    right: 20px;
  }

  #go-back-btn {
    right: 64px;
  }

  body:has(#sidebar-root.app-sidebar-right) .calendar-widget-btn,
  body:has(#sidebar-root.app-sidebar-left) .calendar-widget-btn {
    right: 12px;
  }

  body:has(#sidebar-root.app-sidebar-right) #go-back-btn,
  body:has(#sidebar-root.app-sidebar-left) #go-back-btn {
    right: 64px;
  }

  .app-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .calendar-widget-container {
    width: 90vw;
    max-width: 300px;
  }
}

/* Go Back floating button — to the left of the calendar FAB */
#go-back-btn {
  position: fixed;
  bottom: var(--fab-bottom);
  right: 102px; /* no sidebar: 30 (cal right) + 60 (cal width) + 12 (gap) */
  z-index: 2001;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  border: 1.5px solid var(--border-light, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.15s;
}

#go-back-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  background: var(--bg-hover, #f1f5f9);
}

#go-back-btn:active {
  transform: scale(0.95);
}

/* When right sidebar present, calendar FAB shifts left — match it.
   Desktop-rail only: below 992px the sidebar is an off-canvas drawer, not a
   visible rail, so this would shift the button into the page instead of
   clearing a dock that's no longer on screen. */
@media (min-width: 992px) {
  body:has(#sidebar-root.app-sidebar-right) #go-back-btn {
    right: calc(var(--sidebar-width) + 30px + 60px + 12px);
  }
}

/* Report-a-bug floating button — to the left of the Go Back FAB */
#bug-report-btn {
  position: fixed;
  bottom: var(--fab-bottom);
  right: 174px; /* no sidebar: 102 (go-back right) + 60 (go-back width) + 12 (gap) */
  z-index: 2001;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  border: 1.5px solid var(--border-light, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.15s;
}

#bug-report-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  background: var(--bg-hover, #f1f5f9);
}

#bug-report-btn:active {
  transform: scale(0.95);
}

/* Desktop-rail only — see #go-back-btn above for why. */
@media (min-width: 992px) {
  body:has(#sidebar-root.app-sidebar-right) #bug-report-btn {
    right: calc(var(--sidebar-width) + 30px + 60px + 12px + 60px + 12px);
  }
}

/* On phones the side menu is a hidden drawer, not a visible rail. Keep the
   floating widgets anchored to the viewport edge instead of dodging an
   off-canvas sidebar and drifting into page content. */
@media (max-width: 576px) {
  body:has(.settings-page) .calendar-widget-btn,
  body:has(.settings-page) #go-back-btn,
  body:has(.settings-page) #bug-report-btn {
    display: none;
  }

  body:has(#sidebar-root.app-sidebar-right) .calendar-widget-btn,
  body:has(#sidebar-root.app-sidebar-left) .calendar-widget-btn {
    right: 12px;
  }

  body:has(#sidebar-root.app-sidebar-right) #go-back-btn,
  body:has(#sidebar-root.app-sidebar-left) #go-back-btn,
  #go-back-btn {
    right: 64px;
  }

  body:has(#sidebar-root.app-sidebar-right) #bug-report-btn,
  body:has(#sidebar-root.app-sidebar-left) #bug-report-btn,
  #bug-report-btn {
    right: 116px; /* 64 (go-back right) + 44 (go-back width) + 8 (gap) */
  }
}