/* ---------------------------------------------------------------------
 * Calendar page — toolbar (filters + view tabs) + list view + month grid.
 * Multi-select kind chips w GitHub-labels styled.
 * ------------------------------------------------------------------ */

.calendar-page { color: var(--ink); }

/* View tabs (Lista/Miesiąc) — pill toggle obok tytułu strony. */
.calendar-tabs {
  display: inline-flex; gap: 2px;
  background: var(--bg-sunk);
  border-radius: 8px;
  padding: 2px;
}

/* Filter row — widoczna gdy user kliknie filter icon w headerze. */
.calendar-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-querybar-wrap { flex: 1; min-width: 240px; }

.cal-view-tabs {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.cal-view-tab {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  transition: background 80ms ease, color 80ms ease;
}
.cal-view-tab:hover { color: var(--ink); }
.cal-view-tab[data-active] {
  background: var(--accent, #3b6bf6);
  color: #fff;
}

.cal-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-filter-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-weight: 500;
}

.cal-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.cal-select {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
}

/* ── GitHub-style kind labels ────────────────────────────────────── */

.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: opacity 80ms ease, background 80ms ease;
  /* Inactive: zgaszony, tylko obrys */
  opacity: 0.55;
  background: var(--bg);
  color: var(--ink-3);
  border-color: var(--line);
}
.cal-chip:hover { opacity: 0.85; }
.cal-chip[data-active] { opacity: 1; }

.cal-chip-sm { padding: 1px 7px; font-size: 10px; cursor: default; }

/* Kolory per kind — używane zarówno na toolbarze (filter chip)
   jak i w timeline/grid (active items). data-active="true" wpina pełny
   kolor; default jest zgaszony. */
.cal-chip-phone[data-active]    { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }
.cal-chip-meet[data-active]     { background: #E0E7FF; color: #312E81; border-color: #A5B4FC; }
.cal-chip-meeting[data-active]  { background: #D1FAE5; color: #064E3B; border-color: #6EE7B7; }
.cal-chip-contract[data-active] { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
.cal-chip-invoice[data-active]  { background: #FFE4E6; color: #881337; border-color: #FDA4AF; }

/* sm variant (timeline + grid) zawsze "aktywny" wizualnie. */
.cal-chip-sm.cal-chip-phone    { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; opacity: 1; }
.cal-chip-sm.cal-chip-meet     { background: #E0E7FF; color: #312E81; border-color: #A5B4FC; opacity: 1; }
.cal-chip-sm.cal-chip-meeting  { background: #D1FAE5; color: #064E3B; border-color: #6EE7B7; opacity: 1; }
.cal-chip-sm.cal-chip-contract { background: #FEF3C7; color: #78350F; border-color: #FCD34D; opacity: 1; }
.cal-chip-sm.cal-chip-invoice  { background: #FFE4E6; color: #881337; border-color: #FDA4AF; opacity: 1; }

/* Dark theme — łagodniejsze tła + lżejsze etykiety. */
:root[data-theme="dark"] .cal-chip-phone[data-active],
:root[data-theme="dark"] .cal-chip-sm.cal-chip-phone    { background: rgba(59,107,246,0.18); color: #DBEAFE; border-color: rgba(59,107,246,0.4); }
:root[data-theme="dark"] .cal-chip-meet[data-active],
:root[data-theme="dark"] .cal-chip-sm.cal-chip-meet     { background: rgba(99,102,241,0.18); color: #E0E7FF; border-color: rgba(99,102,241,0.4); }
:root[data-theme="dark"] .cal-chip-meeting[data-active],
:root[data-theme="dark"] .cal-chip-sm.cal-chip-meeting  { background: rgba(16,185,129,0.18); color: #D1FAE5; border-color: rgba(16,185,129,0.4); }
:root[data-theme="dark"] .cal-chip-contract[data-active],
:root[data-theme="dark"] .cal-chip-sm.cal-chip-contract { background: rgba(234,179,8,0.18); color: #FEF3C7; border-color: rgba(234,179,8,0.4); }
:root[data-theme="dark"] .cal-chip-invoice[data-active],
:root[data-theme="dark"] .cal-chip-sm.cal-chip-invoice  { background: rgba(244,63,94,0.18); color: #FFE4E6; border-color: rgba(244,63,94,0.4); }

/* ── Month navigation buttons (prev/next/today) ─────────────────── */

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
.cal-nav-btn:hover { background: var(--bg-elev); color: var(--ink); }
.cal-nav-today { font-size: 11px; padding: 0 10px; }

.cal-month-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
  min-width: 130px;
  text-align: center;
}

/* ── List view ───────────────────────────────────────────────────── */

.cal-empty {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px;
  text-align: center;
  color: var(--ink-3);
}

.cal-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.cal-list-row:last-child { border-bottom: none; }

.cal-list-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  min-width: 50px;
}
.cal-list-link {
  flex: 1;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  line-height: 1.4;
}
.cal-list-link:hover { color: var(--accent, #3b6bf6); }
.cal-list-leadtitle { color: var(--ink-4); font-size: 11px; margin-left: 6px; }
.cal-list-author { font-size: 11px; color: var(--ink-4); }

/* ── Month grid ──────────────────────────────────────────────────── */

.cal-month {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.cal-month-h {
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-weight: 500;
  text-align: center;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, auto);
}

.cal-month-day {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 96px;
  background: var(--bg);
}
.cal-month-day:nth-child(7n) { border-right: none; }
/* ostatni wiersz bez dolnego obrysu */
.cal-month-grid > .cal-month-day:nth-last-child(-n+7) { border-bottom: none; }

.cal-month-day:not([data-in-month]) { background: var(--bg-elev); }
.cal-month-day:not([data-in-month]) .cal-month-day-num { color: var(--ink-5); }
.cal-month-day[data-weekend] .cal-month-day-num { color: var(--ink-4); }
.cal-month-day[data-today] {
  outline: 2px solid var(--accent, #3b6bf6);
  outline-offset: -2px;
}
.cal-month-day[data-today] .cal-month-day-num {
  background: var(--accent, #3b6bf6);
  color: #fff;
}

.cal-month-day-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0 4px;
}

.cal-month-day-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.cal-month-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-month-item:hover { filter: brightness(0.95); }
.cal-month-item-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  opacity: 0.75;
  flex: 0 0 auto;
}
.cal-month-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-month-more {
  font-size: 10px;
  color: var(--ink-4);
  padding: 1px 6px;
}