/* calendar.css
   ============
   Zakladka Kalendarz: siatka miesiaca, legenda, formularz wpisu oraz
   sekcja kalendarza osadzona w kartotece pojazdu/kierowcy.

   Kolory statusow celowo TE SAME co .term-badge w kartoteki.css - odznaka
   "za 12 dni" w kartotece i kropka w kalendarzu maja znaczyc dokladnie to
   samo i wygladac tak samo. Przy zmianie palety trzeba ruszyc oba pliki.
*/

  /* ===== Pasek nawigacji miesiaca ===== */

  .cal-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .cal-nav-btn {
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-family: inherit;
    font-size: 13px; cursor: pointer;
  }
  .cal-nav-btn:hover { border-color: var(--accent-brand); }
  .cal-month-label {
    font-size: 15px; font-weight: 700; min-width: 170px; text-align: center;
  }
  .cal-toolbar-spacer { flex: 1; }

  /* ===== Siatka miesiaca ===== */

  .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  }
  .cal-weekday {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-dim); text-align: center; padding: 4px 0 6px;
  }
  .cal-day {
    min-height: 84px; padding: 5px 6px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface-2);
    display: flex; flex-direction: column; gap: 3px; overflow: hidden;
  }
  /* Dni sasiednich miesiecy - widoczne, ale wygaszone, zeby siatka miala
     pelne tygodnie i nie "skakala" przy przewijaniu miesiecy. */
  .cal-day.cal-day-other { opacity: 0.4; }
  .cal-day.cal-day-today { border-color: var(--accent-brand); }
  .cal-day.cal-day-weekend { background: transparent; }
  .cal-day-num { font-size: 11px; color: var(--text-dim); font-weight: 600; }
  .cal-day.cal-day-today .cal-day-num { color: var(--accent-brand); }

  /* ===== Wpis w dniu ===== */

  .cal-chip {
    font-size: 10.5px; line-height: 1.25; padding: 2px 6px; border-radius: 5px;
    cursor: pointer; border: none; font-family: inherit; text-align: left;
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cal-chip-readonly { cursor: default; }

  /* Terminy - paleta zgodna z .term-badge (kartoteki.css). */
  .cal-chip-ok       { background: rgba(52, 211, 153, 0.15); color: var(--accent-green); }
  .cal-chip-soon     { background: rgba(245, 166, 35, 0.15); color: var(--accent-amber); }
  .cal-chip-expired  { background: rgba(242, 84, 91, 0.18); color: var(--accent-red); }

  /* Okresy nieobecnosci - osobna, chlodna paleta, zeby na pierwszy rzut
     oka bylo widac, ze to INNA kategoria niz termin (patrz "kind" w
     calendar_events.py), a nie termin o innym statusie. */
  .cal-chip-okres            { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
  .cal-chip-okres-l4         { background: rgba(167, 139, 250, 0.20); color: #c4b5fd; }
  .cal-chip-okres-praca      { background: rgba(148, 163, 184, 0.20); color: #cbd5e1; }

  .cal-more {
    font-size: 10px; color: var(--text-dim); padding-left: 2px; cursor: pointer;
    background: none; border: none; font-family: inherit; text-align: left;
  }
  .cal-more:hover { color: var(--accent-brand); }

  /* ===== Legenda ===== */

  .cal-legend {
    display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px;
    padding-top: 10px; border-top: 1px dashed var(--border);
    font-size: 11px; color: var(--text-dim);
  }
  .cal-legend-item { display: flex; align-items: center; gap: 6px; }
  .cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

  /* ===== Formularz wpisu ===== */

  .cal-form { margin-bottom: 14px; }
  .cal-form-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 10px;
  }
  .cal-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
  .cal-form-field label { font-size: 11px; color: var(--text-dim); }
  .cal-form-field select,
  .cal-form-field input[type="date"],
  .cal-form-field input[type="text"] {
    padding: 8px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-family: inherit;
    font-size: 13px; box-sizing: border-box; width: 100%;
  }
  .cal-form-status { font-size: 12px; color: var(--text-dim); min-height: 16px; }

  /* ===== Lista wpisow (uzywana w kartotece i pod siatka) ===== */

  .cal-list-row {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
  }
  .cal-list-row:last-child { border-bottom: none; }
  .cal-list-dates { font-variant-numeric: tabular-nums; color: var(--text-dim); min-width: 165px; }
  .cal-list-label { flex: 1; }
  .cal-list-source {
    font-size: 10px; color: var(--text-dim); border: 1px solid var(--border);
    padding: 1px 6px; border-radius: 5px;
  }
  .cal-del-btn {
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    font-family: inherit; font-size: 12px; padding: 0 4px;
  }
  .cal-del-btn:hover { color: var(--accent-red); }

  /* ===== Telefon ===== */
  /* Siatka 7-kolumnowa na waskim ekranie robi sie nieczytelna - ponizej
     560px przechodzimy na liste chronologiczna (patrz renderCalendarView
     w index.html, ktore renderuje OBA warianty i przelacza je stylem, bez
     osobnej sciezki w JS). */

  .cal-list-view { display: none; }

  @media (max-width: 560px) {
    .cal-grid, .cal-weekday { display: none; }
    .cal-list-view { display: block; }
    .cal-month-label { min-width: 0; flex: 1; }
    .cal-form-field { min-width: 100%; }
  }