/*
 * year-planner.css — Year Planner view: 12-month wall-planner grid.
 *
 * @copyright  2026 Karl Dyson
 * @license    Apache-2.0
 * @version    1.6.0
 */

/* Widest useful month column: the day label plus five badges on one line.
   The view is capped to 12 such columns (+ 1px gaps, wrap border and the
   view's own padding), so very large screens don't over-stretch the grid;
   below that width the columns still flex as before. */
#view-year-planner {
  --yp-col-max: 13rem;
  max-width: calc(12 * var(--yp-col-max) + 11px + 2px + 2.5rem);
}

/* Toolbar toggles sit with the filters; pressed = on */
.yp-toggle[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.yp-toggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--color-primary-dark); }

/* Scroll sideways on narrow screens rather than squashing 12 columns */
#yp-grid-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

#yp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(90px, 1fr));
  gap: 1px;
  min-width: 1100px;
  background: var(--color-border);
}

/* ---------------------------------------------------------------------------
   Month headers — one colour per month, like a printed planner
   --------------------------------------------------------------------------- */

.yp-month-header {
  padding: 0.4rem 0.3rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.yp-month-0  { background: #3d3f6b; }
.yp-month-1  { background: #4a5a8c; }
.yp-month-2  { background: #2f6f7e; }
.yp-month-3  { background: #2e7d5b; }
.yp-month-4  { background: #4f8f3a; }
.yp-month-5  { background: #a08a2a; }
.yp-month-6  { background: #c47a1c; }
.yp-month-7  { background: #c4581c; }
.yp-month-8  { background: #b03a3a; }
.yp-month-9  { background: #9b2f5e; }
.yp-month-10 { background: #7a3a85; }
.yp-month-11 { background: #5a3570; }

/* ---------------------------------------------------------------------------
   Day cells
   --------------------------------------------------------------------------- */

.yp-cell {
  background: var(--color-surface);
  min-height: 1.6rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
}

.yp-cell-blank { background: var(--color-bg); }

.yp-day {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.yp-dow {
  color: var(--color-text-muted);
  font-size: 0.9em;
}

/* Same shades as the Calendar view's .cal-date */
.yp-date.is-weekend     { background: #f0f4ff; }
.yp-date.is-bankholiday { background: #fff8e1; }

/* Aligned mode: full-width weekend bands, including blank cells */
.yp-row-weekend,
.yp-date.is-weekend.yp-row-weekend { background: #e1e8fb; }
.yp-cell-blank.yp-row-weekend      { background: #d6def5; }
.yp-date.is-bankholiday.yp-row-weekend { background: #fff3cc; }

/* Today: thin primary outline (outline, so it doesn't clash with the
   box-shadow clash marker) and a bold blue date */
.yp-date.is-today {
  outline: 1.5px solid var(--color-primary);
  outline-offset: -1.5px;
}
.yp-date.is-today .yp-day {
  color: var(--color-primary);
  font-weight: 700;
}
.yp-date.is-today .yp-dow { color: var(--color-primary); }

/* Clash: same colours as the Calendar view's left-border treatment */
.yp-clash-amber  { box-shadow: inset 3px 0 0 var(--clash-amber); }
.yp-clash-orange { box-shadow: inset 3px 0 0 var(--clash-orange); }
.yp-clash-red    { box-shadow: inset 3px 0 0 var(--clash-red); }

/* ---------------------------------------------------------------------------
   Event badges — colours come from the shared .chip-* classes
   --------------------------------------------------------------------------- */

/* Pushed to the right edge so badges line up down each column */
.yp-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem;
  margin-left: auto;
}

.yp-badge {
  display: inline-block;
  min-width: 2.6ch;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 0.25rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
/* Events the user hasn't responded to — visible but clearly not a commitment */
.yp-badge.yp-badge-uninteracted {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-text-muted);
  opacity: 0.7;
}
.yp-badge:hover { filter: brightness(0.9); outline: 1px solid var(--color-primary); }