/* ============================================================
   GraftrHQ — calendar.css
   Calendar grid, date chips, legend
   ============================================================ */

/* --- Calendar wrap ----------------------------------------- */
.calendar-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

/* --- Full-screen calendar layout --------------------------- */
/* Single-screen, no bottom sheet: calendar fills the viewport */
/* between the nav bar (52px) and the bottom safe area. */
.calendar-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 52px);
  min-height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px));
  padding-top: 4px;
}

.calendar-screen .calendar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 14px;
}

.calendar-screen .calendar-grid {
  flex: 1;
  grid-template-rows: auto repeat(var(--row-count, 6), 1fr);
}

.calendar-screen .calendar-day {
  aspect-ratio: auto;
  min-height: 44px;
  border-radius: 12px;
}

.calendar-screen .calendar-day-num  { font-size: 17px; }
.calendar-screen .calendar-day-count { font-size: 9px; }

/* drop page-content bottom padding to the safe-area only so the */
/* calendar truly stretches to just above the home-indicator zone. */
body.has-calendar .page-content,
body:has(.calendar-screen) .page-content {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Fixed single-screen pages (calendar only)
   Lock the calendar to the viewport — content shrinks to fit.
   Dashboard is intentionally scrollable so is excluded here.
   ============================================================ */
body.has-calendar {
  height: 100dvh;
  overflow: hidden;
}

body.has-calendar .page {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.has-calendar .page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Dashboard — normal scrolling page with bottom-nav clearance. */
.dashboard-screen {
  padding-top: 16px;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

body.has-dashboard .stats-row {
  margin-bottom: 18px;
}

body.has-dashboard .tile {
  margin-bottom: 8px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-month {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: none;
  font-size: 20px;
  color: var(--orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Calendar grid ----------------------------------------- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: 0 0 10px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.calendar-day-num  { font-size: 15px; line-height: 1; color: var(--text-primary); }
.calendar-day-count { font-size: 8px; font-weight: 700; color: var(--text-tertiary); margin-top: 1px; }

/* --- Per-day pips (visit count + job count, colour-coded) --- */
.calendar-day-pips {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  align-items: center;
  justify-content: center;
}
.calendar-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.calendar-pip.visit { background: var(--orange); }
.calendar-pip.job   { background: var(--blue); }
.calendar-screen .calendar-pip { min-width: 14px; height: 14px; font-size: 10px; }

.calendar-day.empty    { cursor: default; }
.calendar-day.past .calendar-day-num { color: var(--text-placeholder); cursor: not-allowed; }
.calendar-day.today .calendar-day-num { font-weight: 700; color: var(--orange); }

.calendar-day.has-visit { background: var(--orange-tint); }
.calendar-day.has-visit .calendar-day-num { color: var(--orange); font-weight: 600; }

.calendar-day.has-job { background: var(--blue-tint); }
.calendar-day.has-job .calendar-day-num { color: var(--blue); font-weight: 600; }

.calendar-day.has-both {
  background: linear-gradient(135deg, var(--orange-tint) 50%, var(--blue-tint) 50%);
}

.calendar-day.selected { background: var(--orange) !important; }
.calendar-day.selected .calendar-day-num { color: #fff !important; font-weight: 700; }

.calendar-day:not(.past):not(.empty):not(.selected):hover {
  background: var(--surface-2);
}

/* --- Calendar legend (sits at the bottom of the wrap) ----- */
.calendar-legend {
  display: flex;
  gap: 16px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 0.5px solid var(--separator);
  flex-wrap: wrap;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Date chips -------------------------------------------- */
.date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.date-chip {
  background: var(--orange-tint);
  color: var(--orange);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-chip-remove {
  cursor: pointer;
  font-size: 18px;
  opacity: 0.7;
}