@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fff;
  color: #15110F;
}

/* Loading Screen */
.loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #15110F;
  color: white;
}

.loading-content {
  text-align: center;
}

.loading-content h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.loading-content p {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 24px;
}

.spinner {
  border: 4px solid rgba(231,33,112,0.3);
  border-top: 4px solid #E72170;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

/* Header */
.header {
  background: #15110F;
  color: white;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
}

.header-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.header-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-user {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  padding-right: 4px;
}

.header-buttons > div:first-child {
  display: flex;
  gap: 12px;
}

.header-btn {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border: none;
}

.header-btn.primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-btn.primary:hover {
  background: rgba(255, 255, 255, 0.3);
}

.header-btn.secondary {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.35);
}

.header-btn.secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: white;
}

/* Keep old class for backwards compatibility */
.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Tabs */
.tabs {
  display: flex;
  background: #FAF7F9;
  border-bottom: 1px solid #ECE7E4;
  padding: 0 24px;
}

.tab {
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  color: #4A4441;
  transition: all 0.2s;
}

.tab:hover {
  color: #15110F;
}

.tab.active {
  color: #E72170;
  border-bottom-color: #E72170;
  background: #FFF3F8;
}

/* "Find my date" arrow next to the My Dates tab — a small round icon-button
   with its own permanent circle background, so it reads as a distinct
   clickable control rather than part of the tab row. Darkens on hover. */
#myDatesArrowBtn:hover {
  background: #D9D2CD;
  color: #15110F;
}

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #ECE7E4;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.filter-group.search-group {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-group label {
  font-size: 14px;
  font-weight: 500;
  color: #4A4441;
  white-space: nowrap;
}

.filter-group select {
  padding: 6px 12px;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  min-width: 150px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-checkboxes {
  position: absolute;
  background: white;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px;
  margin-top: 4px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  min-width: 200px;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.filter-checkbox-item:hover {
  background: #FAF7F9;
}

.filter-checkbox-item input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
  accent-color: #6c757d;
}

/* Make all checkboxes grey instead of blue */
input[type="checkbox"] {
  accent-color: #6c757d;
}

.filter-checkbox-item label {
  cursor: pointer;
  margin: 0;
  flex: 1;
}

.filter-group {
  position: relative;
}

.filter-group select:focus {
  outline: none;
  border-color: #E72170;
}

.filter-group select:hover {
  border-color: #E72170;
}

/* Remove blue highlight from dropdown options */
.filter-group select option {
  background: white !important;
  color: #15110F !important;
}

.filter-group select option:hover,
.filter-group select option:focus,
.filter-group select option:checked {
  background: #FAF7F9 !important;
  color: #15110F !important;
}

/* Additional attempts to remove blue highlight */
select option:checked {
  background: #FAF7F9 !important;
  color: #15110F !important;
}

#searchInput {
  flex: 1;
  padding: 6px 12px;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  font-size: 14px;
  /* Browsers give <input> elements their own built-in default minimum width
     (based on the standard size attribute), which flexbox respects even with
     no author min-width rule at all. min-width:0 explicitly overrides that
     default so this can shrink to fit within the outer .filter-group.search-group's
     200-300px cap, instead of overflowing into the next filter (Category). */
  min-width: 0;
}

#searchInput:focus {
  outline: none;
  border-color: #E72170;
}

#searchInput::placeholder {
  color: #999;
}

/* Calendar Controls */
.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: white;
}

.nav-btn {
  background: white;
  border: 1.5px solid #D9D2CD;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #15110F;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: #ECE7E4;
  border-color: #E72170;
  color: #E72170;
}

.current-month {
  font-size: 20px;
  font-weight: 600;
  color: #15110F;
  margin-bottom: 8px;
}

.month-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.date-picker {
  padding: 6px 12px;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.date-picker:focus {
  outline: none;
  border-color: #E72170;
}

/* Keep old class for backwards compatibility */
.month-picker {
  padding: 6px 12px;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.month-picker:focus {
  outline: none;
  border-color: #E72170;
}

/* Month picker with icon */
.month-picker-wrapper {
  position: relative;
  display: inline-block;
}

.month-picker-icon {
  width: 32px;
  height: 32px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s;
}

.month-picker-icon:hover {
  transform: scale(1.1);
}

.month-picker-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
}

/* Calendar Grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: white;
  margin: 12px;
  border: 1px solid #ECE7E4;
  max-width: calc(100% - 24px);
}

.day-header {
  background: #ECE7E4;
  padding: 12px 4px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  color: #4A4441;
  text-transform: uppercase;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.day-cell {
  background: white;
  min-height: 80px;
  padding: 4px;
  position: relative;
  border: 1px solid #ECE7E4;
}

.day-cell.other-month {
  background: #FAF8F7;
  color: #999;
}

.day-number {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.day-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-item {
  background: #f2d4e0;
  color: #15110F;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.3;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.event-item:hover {
  background: #e8bdd0;
  transform: translateY(-1px);
}

.event-item.multi-day {
  background: #fdeef5;
  color: #15110F;
}

.event-item.multi-day:hover {
  background: #f5dcea;
  transform: translateY(-1px);
}

.event-item.favourite {
  background: #E72170;
  color: white;
  padding-left: 18px;
  position: relative;
}

.event-item.favourite:hover {
  background: #B5165A;
  transform: translateY(-1px);
}

.event-item.favourite::before {
  content: '\2605';
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 12px;
  color: white;
}

.event-item.owned {
  background: #15110F;
  color: white;
}

.event-item.owned:hover {
  background: #4A4441;
  transform: translateY(-1px);
}

.event-time {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 2px;
}

.event-title {
  font-size: 12px;
  line-height: 1.2;
}

.more-events {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  font-weight: 700;
  color: #999;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: #15110F;
}

#modalTitle {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-right: 30px;
}

#modalDetails {
  font-size: 14px;
  line-height: 1.6;
  color: #4A4441;
  margin-bottom: 20px;
  white-space: pre-line; /* Preserve line breaks from text */
}

#modalDetails p {
  margin-bottom: 8px;
}

#modalDetails strong {
  color: #15110F;
}

#modalDetails a {
  color: #E72170;
  text-decoration: underline;
  overflow-wrap: break-word;
}

.modal-notes {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid #ECE7E4;
}

.modal-notes label {
  display: block;
  margin-bottom: 8px;
  color: #15110F;
}

.notes-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1.5px solid #D9D2CD;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}

.notes-textarea:focus {
  outline: none;
  border-color: #E72170;
}

.btn-save-notes {
  padding: 6px 12px;
  background: #15110F;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save-notes:hover {
  background: #4A4441;
}

.modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-actions button {
  flex: 1;
  min-width: 140px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-favourite {
  background: white;
  border: 2px solid #E72170 !important;
  color: #E72170;
}

.btn-favourite:hover {
  background: #E72170;
  color: white;
}

.btn-favourite.active {
  background: white;
  color: #E72170;
  border: 2px solid #E72170 !important;
}

.btn-calendar {
  background: #4A4441;
  color: white;
}

.btn-calendar:hover {
  background: #15110F;
}

.btn-view {
  background: #E72170;
  color: white;
}

.btn-view:hover {
  background: #B5165A;
}

/* Install Banner */
.install-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #15110F;
  color: white;
  z-index: 2000;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.install-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.install-banner-text {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}

.install-banner-text strong {
  color: white;
  font-weight: 600;
}

.install-banner-btn {
  background: #E72170;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}

.install-banner-btn:hover {
  background: #B5165A;
}

.install-banner-close {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}

.install-banner-close:hover {
  color: white;
}

.install-banner.hidden {
  display: none;
}

/* Login Screen Styles */
/* Login screen — primary styles live in login.html <style> block with embedded fonts */
.login-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-content {
  background: white;
  border-radius: 12px;
  padding: 32px;
  border: 1.5px solid #ECE7E4;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.error-message {
  background: #FFF5F5;
  border: 1px solid #FEB2B2;
  color: #C53030;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  font-family: 'Raleway', sans-serif;
  text-align: left;
}

.btn-primary {
  width: 100%;
  padding: 16px;
  background: #E72170;
  color: white;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #B5165A;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Favourites tab star styling */
.fav-star {
  color: white;
  -webkit-text-stroke: 1.5px #E72170;
  text-stroke: 1.5px #E72170;
}

/* Filter Pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #E72170;
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.filter-pill-remove {
  cursor: pointer;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 50%;
  transition: background 0.2s;
}

.filter-pill-remove:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Error toast notification */
.error-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #B5165A;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  animation: toastFadeIn 0.3s ease;
}

@keyframes toastFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Install instructions inline message (replaces alert)
   Fixed-positioned so it sits above the login screen overlay (z-index 1000)
   and below/beside the install banner (z-index 2000). Previously inserted
   inline after the banner, which caused it to render behind the login screen
   and appear invisible. */
.install-instructions {
  position: fixed;
  top: 64px;
  left: 16px;
  right: 16px;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 40px 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  z-index: 2001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: toastFadeIn 0.3s ease;
}

.install-instructions-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

/* =========================================================================
   MOBILE AGENDA VIEW + RESPONSIVE LAYOUT
   Everything below only affects small screens. The agenda list is hidden on
   desktop by default, and all layout overrides live inside the media query,
   so the desktop experience is unchanged.
   ========================================================================= */

/* Agenda list is hidden on desktop */
.agenda-view {
  display: none;
}

@media (max-width: 640px) {
  /* Swap the month grid for the agenda list on phones */
  .calendar-grid { display: none !important; }
  .agenda-view { display: block; }

  /* Day heading (e.g. "15  THU") */
  .agenda-day {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 16px 6px;
    background: #FAF8F7;
    border-top: 1px solid #ECE7E4;
    border-bottom: 1px solid #ECE7E4;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .agenda-day-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #15110F;
  }
  .agenda-day-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4A4441;
  }
  .agenda-day.agenda-today .agenda-day-num,
  .agenda-day.agenda-today .agenda-day-name {
    color: #E72170;
  }

  /* Event rows — full width, comfortable tap size; colours reused from .event-item */
  .agenda-view .event-item.agenda-item {
    margin: 8px 16px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
  }
  .agenda-view .event-item.agenda-item .event-title {
    font-size: 14px;
    line-height: 1.35;
  }
  .agenda-view .event-item.agenda-item .event-time {
    font-size: 12px;
    margin-bottom: 3px;
  }
  .agenda-location {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 3px;
  }
  .agenda-view .event-item.favourite.agenda-item {
    padding-left: 26px;
  }

  /* Header stacks and wraps so buttons don't overflow */
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .header h1 { font-size: 20px; }
  .header-buttons { align-items: stretch; }
  .header-btn-row { flex-wrap: wrap; justify-content: flex-start; }
  .header-btn { font-size: 13px; padding: 8px 12px; }
  #lastSyncIndicator { text-align: left !important; }

  /* Tabs span the full width */
  .tabs { padding: 0; }
  .tab { flex: 1; text-align: center; padding: 12px 8px; font-size: 13px; }

  /* Filters stack vertically, full width */
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .filter-group { width: 100%; }
  .filter-group.search-group { max-width: none; min-width: 0; }
  .filter-group select,
  .filter-group input[type="text"] { width: 100%; min-width: 0; }

  /* Month navigation controls */
  .calendar-controls { padding: 14px 16px; gap: 8px; }
  .nav-btn { padding: 8px 12px; font-size: 13px; }
  .current-month { font-size: 18px; }

  /* Legend wraps neatly */
  .calendar-legend { flex-wrap: wrap; gap: 10px 16px !important; padding: 12px 16px !important; }

  /* Pop-up modal fills the small screen */
  .modal-content {
    width: 94%;
    max-width: none;
    max-height: 85vh;
    padding: 20px;
  }
}