/*
 * Observatory redesign — calendar grid column (month nav, filter row, heat-map
 * day cells, hint + legend). Loaded after app.css, so equal-specificity rules
 * here intentionally override the base grid styles. Cell BACKGROUNDS are not
 * painted here: heatStyle (calendar_helpers.go) emits them inline per cell;
 * day types outside the heat ladder keep their .day--<type> tints from app.css.
 */

/* ── Month nav: round ◀ ▶ pills around "June 2026" ───────────────────────── */
.month-nav { margin-bottom: 16px; }
.month-nav-title { gap: 13px; }
.month-heading {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
.month-year { font-style: normal; font-weight: 400; color: #8b92a3; }
.iconbtn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #8b92a3;
  font-size: 11px;
  line-height: 1;
}
.iconbtn:hover { border-color: rgba(255, 255, 255, 0.22); color: #e9edf4; }
.jump-date-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8b92a3;
}
.jump-date-input:hover { border-color: rgba(255, 255, 255, 0.22); color: #b9c2d1; }

/* ── Filter row: segmented pill + project chips + today + live badge ─────── */
.filter-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 3px;
}
.filter-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: lowercase;
  color: #8b92a3;
}
.filter-btn:hover { color: #e9edf4; border: none; }
.filter-btn.is-active {
  background: #e9edf4;
  border: none;
  color: #0b0d12;
  font-weight: 600;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: #8b92a3;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.filter-chip:hover { border-color: rgba(94, 230, 200, 0.5); color: #e9edf4; }
.filter-chip.is-active {
  border-color: rgba(94, 230, 200, 0.55);
  background: rgba(94, 230, 200, 0.1);
  color: #e9edf4;
}
.filter-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.filter-today {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
  color: #b9c2d1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.filter-today:hover { border-color: rgba(94, 230, 200, 0.5); color: #e9edf4; }
.btn-clear {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  text-transform: lowercase;
}
.filter-active {
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8b92a3;
  padding: 6px 10px;
}
.filter-active:hover, .filter-active:focus-visible { border-color: rgba(255, 255, 255, 0.12); }
.filter-active--on {
  color: #5ee6c8;
  border-color: rgba(94, 230, 200, 0.4);
  background: rgba(94, 230, 200, 0.08);
}

/* ── "Filtered: X" banner ────────────────────────────────────────────────── */
.filtered-banner {
  border: 1px solid rgba(94, 230, 200, 0.35);
  border-left-width: 3px;
  background: rgba(94, 230, 200, 0.07);
  border-radius: 10px;
  font-size: 12px;
}
.filtered-banner__name { font-weight: 600; }
.filtered-banner__clear { border-radius: 999px; padding: 3px 10px; }

/* ── Weekday header: Azeret micro-labels, sat/sun dimmer ─────────────────── */
.weekday-row {
  gap: 7px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8b92a3;
}
.weekday-cell { padding: 0 0 0 12px; }
/* Sat/Sun headers: one readable step dimmer than Mon–Fri, not near-invisible. */
.weekday-cell:nth-child(n+6) { color: #6c7689; }

/* ── Month grid + heat-map day cells ─────────────────────────────────────── */
.month-grid { gap: 7px; }

/* No background here: the heat ladder is inline per cell, and day types it
 * skips must keep their .day--<type> tints from app.css (a background on
 * .day-cell would out-cascade those equal-specificity rules). */
.day-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  aspect-ratio: auto;
  min-height: 88px;
  border-radius: 10px;
  padding: 10px 12px 11px;
  box-shadow: none;
}
.day-cell:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
/* Selected (open in the panel above) = inset teal ring; distinct from
 * .is-today, which colors + underlines the day number instead. */
.day-cell.is-selected,
.day-cell.is-selected:hover { box-shadow: inset 0 0 0 1px rgba(94, 230, 200, 0.45); }
.day-cell:focus-visible {
  outline: 2px solid #5ee6c8;
  outline-offset: 1px;
}
.day-cell--pad {
  background: transparent;
  box-shadow: none;
}

/* Day number: 20px, colored by state; today = teal + teal underline. */
.day-top { align-items: flex-start; }
.day-num {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  padding-bottom: 1px;
  border-bottom: 2px solid transparent;
  color: #8b92a3;
}
.day--weekend .day-num { color: #8b92a3; }
.day--holiday .day-num { color: #ff8d7e; }
.day--klamdag .day-num { color: #e8c46b; }
.day--vacation .day-num { color: #e8c46b; }
.day--sick .day-num { color: #ff8d7e; }
.day--parental .day-num { color: #ff9ec7; }
.day--manual .day-num { color: #6f9bff; }
.day--paid-leave .day-num { color: #5ee6c8; }
.day--unpaid .day-num { color: #8b92a3; }
.day-cell--logged .day-num { color: #e9edf4; }
.day-cell.is-today .day-num {
  color: #5ee6c8;
  border-bottom-color: #5ee6c8;
}

/* Day-type icon: kept (color-blind mandate), small + muted in the corner. */
.day-icon { font-size: 10px; line-height: 1.6; color: #6c7689; }
.day-doctor-dot {
  right: 12px;
  top: 28px;
  width: 5px;
  height: 5px;
}

/* Worked / label / flex-badge stack. */
.day-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  font-size: 10px;
  line-height: 1.2;
}
.day-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 12px;
  overflow: hidden;
}
.day-worked {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #8b92a3;
  white-space: nowrap;
}
.day-kind {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 10px;
  color: #8b92a3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day--holiday .day-kind { color: #ff8d7e; }
.day--klamdag .day-kind { color: #e8c46b; }
.day--vacation .day-kind { color: #e8c46b; }
.day--sick .day-kind { color: #f6cdc6; }
.day--parental .day-kind { color: #ffd7e9; }
.day--paid-leave .day-kind { color: #c9f7ec; }
.day--unpaid .day-kind { color: #c8cdd8; }
.day--manual .day-kind { color: #cdddff; }
.day-balance {
  font-family: var(--font-mono);
  font-size: 10px;
  min-height: 12px;
}
.day-balance.balance--neutral { color: #8b92a3; }

/* ── Hint line + legend ──────────────────────────────────────────────────── */
.grid-hint {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 12px;
  color: var(--color-text-faint);
}
.cal-legend { margin: 8px 0 0; }
.cal-legend__body {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
}
.cal-legend__title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
}
.cal-legend__swatch { border-radius: 5px; }
.cal-legend__hint {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 11px;
  color: var(--color-text-faint);
}

/* ── Context menu: opaque popover on the new chrome ──────────────────────── */
.cal-context-menu {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.cal-context-menu__date {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b92a3;
}
.cal-context-menu button { border-radius: 8px; }