/* ============================================
   LINUS — Agenda View
   Today timeline, Week grid, Month calendar
   ============================================ */

/* =============================================
   VIEW TOGGLE BAR
   ============================================= */
.agenda-toggle {
  display: flex;
  background: var(--bg-card-hover);
  border-radius: var(--radius-full);
  padding: 3px;
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-xs);
}

.agenda-toggle__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    color var(--transition-normal),
    background var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.agenda-toggle__btn:active {
  transform: scale(0.96);
}

.agenda-toggle__btn.active {
  background: var(--bg-card);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* =============================================
   TODAY — TIMELINE
   ============================================= */
.agenda-timeline {
  position: relative;
  padding-left: 56px;
  min-height: 200px;
}

/* Vertical timeline rail */
.agenda-timeline::before {
  content: '';
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-border-light) 0%,
    var(--color-border) 50%,
    var(--color-border-light) 100%
  );
  border-radius: var(--radius-full);
}

/* Time marker (left side) */
.agenda-time-marker {
  position: relative;
  padding: var(--space-xl) 0 var(--space-xs);
}

.agenda-time-marker__label {
  position: absolute;
  left: -56px;
  top: var(--space-xl);
  width: 40px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-align: right;
}

/* Dot on the timeline rail */
.agenda-time-marker::before {
  content: '';
  position: absolute;
  left: -15px;
  top: calc(var(--space-xl) + 3px);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border: 2px solid var(--bg-primary);
  z-index: 1;
}

/* Current time indicator */
.agenda-time-marker--now::before {
  background: var(--color-linus-1);
  box-shadow: 0 0 8px rgba(184, 169, 201, 0.5);
  width: 10px;
  height: 10px;
  left: -16px;
}

.agenda-time-marker--now .agenda-time-marker__label {
  color: var(--color-linus-1);
  font-weight: var(--weight-bold);
}

/* =============================================
   EVENT CARDS (in timeline)
   ============================================= */
.agenda-event {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  -webkit-tap-highlight-color: transparent;
  animation: eventSlideIn 350ms ease both;
}

.agenda-event:active {
  transform: scale(0.98);
}

.agenda-event:hover {
  box-shadow: var(--shadow-sm);
}

@keyframes eventSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Event time */
.agenda-event__time {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

/* Event title */
.agenda-event__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

/* Event location / note */
.agenda-event__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Role-colored borders */
.agenda-event--mae {
  border-left-color: var(--color-mae);
}
.agenda-event--mae .agenda-event__time {
  color: var(--color-mae-dark);
}

.agenda-event--business {
  border-left-color: var(--color-business);
}
.agenda-event--business .agenda-event__time {
  color: var(--color-business-dark);
}

.agenda-event--personal {
  border-left-color: var(--color-personal);
}
.agenda-event--personal .agenda-event__time {
  color: var(--color-personal-dark);
}

/* All-day event style */
.agenda-event--allday {
  background: var(--color-personal-light);
  border-left-color: var(--color-personal);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
}

/* =============================================
   WEEK VIEW
   ============================================= */
.agenda-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-2xl);
}

/* Day column */
.agenda-week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xs);
  min-height: 80px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.agenda-week__day:active {
  background: var(--bg-card-hover);
}

/* Day header */
.agenda-week__day-name {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.agenda-week__day-number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

/* Today highlight */
.agenda-week__day--today .agenda-week__day-number {
  background: linear-gradient(135deg, var(--color-linus-1), var(--color-linus-2));
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

/* Event dots */
.agenda-week__dots {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 36px;
}

.agenda-week__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.agenda-week__dot--mae { background: var(--color-mae); }
.agenda-week__dot--business { background: var(--color-business); }
.agenda-week__dot--personal { background: var(--color-personal); }

/* =============================================
   MONTH VIEW (Calendar)
   ============================================= */
.agenda-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

/* Day header row */
.agenda-month__header {
  display: contents;
}

.agenda-month__header-cell {
  padding: var(--space-sm) 0;
  text-align: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Day cells */
.agenda-month__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-xs);
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background-color var(--transition-fast);
}

.agenda-month__cell:active {
  background: var(--bg-card-hover);
}

.agenda-month__cell-number {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  margin-bottom: 2px;
}

/* Other month (dimmed) */
.agenda-month__cell--other .agenda-month__cell-number {
  color: var(--color-text-muted);
  opacity: 0.4;
}

/* Today */
.agenda-month__cell--today .agenda-month__cell-number {
  background: linear-gradient(135deg, var(--color-linus-1), var(--color-linus-2));
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

/* Selected */
.agenda-month__cell--selected {
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.agenda-month__cell--selected .agenda-month__cell-number {
  background: var(--color-text);
  color: var(--color-text-inverse);
}

/* Event indicators in month cell */
.agenda-month__indicators {
  display: flex;
  gap: 2px;
}

.agenda-month__indicator {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.agenda-month__indicator--mae { background: var(--color-mae); }
.agenda-month__indicator--business { background: var(--color-business); }
.agenda-month__indicator--personal { background: var(--color-personal); }

/* =============================================
   EMPTY STATE
   ============================================= */
.agenda-empty {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  color: var(--color-text-muted);
}

.agenda-empty__icon {
  font-size: 48px;
  margin-bottom: var(--space-lg);
  opacity: 0.4;
}

.agenda-empty__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}