/* 37c - CRM zgłoszeń (/crm): układ planszy operatora. Ładowane PO 37a/37b
   i nadpisuje z nich tylko wymiary i przewijanie.

   Zasada: strona nie rośnie z liczbą zgłoszeń. Plansza zajmuje okno minus
   nagłówek; kanban przewija się w poziomie, każda kolumna w pionie, tabela
   we własnej ramce. Pasek narzędzi i nagłówki kolumn zostają na miejscu,
   a suwak poziomy jest zawsze na dole okna, nie na dole najdłuższej kolumny. */

.crm-page {
  --crm-naglowek: 88px;                       /* wysokość .header (02-naglowek-a) */
  display: flex;
  flex-direction: column;
  gap: var(--ai-s2);
  max-width: none;                             /* pełna szerokość okna, nie --page-width */
  height: calc(100dvh - var(--crm-naglowek));
  padding-block: var(--ai-s3);
}

/* --- nagłówek strony w jednej linii --- */
.crm-page .journey-heading {
  display: flex;
  align-items: baseline;
  gap: var(--ai-s3);
  max-width: none;
  margin: 0;
}
.crm-page .journey-heading h1 {
  margin: 0;
  font-size: var(--ai-size-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* --- pasek narzędzi: zwięzły, w jednym-dwóch rzędach --- */
.crm-pasek {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ai-s2) var(--ai-s4);
  padding: var(--ai-s2) var(--ai-s3);
  margin-bottom: 0;
}
.crm-podsumowanie {
  gap: var(--ai-s3);
  margin-right: auto;
}
.crm-podsumowanie dd {
  font-size: var(--ai-size-body);
}
.crm-widok,
.crm-btn {
  min-height: 40px;
  padding: 8px 12px;
}
.crm-filtry {
  flex: 1 1 100%;
  align-items: center;
}
.crm-pole {
  flex-direction: row;
  align-items: center;
  gap: var(--ai-s1);
}
.crm-pole input,
.crm-pole select {
  min-height: 40px;
  min-width: 200px;
}
.crm-stan {
  margin: 0;
  min-height: 0;
}
.crm-stan:empty {
  display: none;
}

/* --- plansza wypełnia resztę okna --- */
.crm-plansza {
  flex: 1 1 auto;
  min-height: 0;
}
.crm-kanban {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--ai-s1);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.crm-kolumna {
  flex: 1 0 260px;
  max-width: 380px;
  max-height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
}
.crm-kolumna__glowa {
  flex: 0 0 auto;
}
.crm-kolumna__lista {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-right: 2px;
}
.crm-karta__id {
  white-space: nowrap;
}
.crm-plansza > .crm-tabela-ramka {
  max-height: 100%;
  overflow: auto;
}

/* --- wąski ekran: strona może rosnąć, plansza ma stałą wysokość --- */
@media (max-width: 760px) {
  .crm-page {
    --crm-naglowek: 76px;
    height: auto;
    min-height: calc(100dvh - var(--crm-naglowek));
  }
  .crm-page .journey-heading {
    flex-wrap: wrap;
    gap: var(--ai-s1) var(--ai-s3);
  }
  .crm-podsumowanie {
    margin-right: 0;
  }
  .crm-pole {
    flex-direction: column;
    align-items: stretch;
  }
  .crm-plansza {
    flex: 0 0 auto;
    height: 72dvh;
  }
  .crm-kolumna {
    flex-basis: 84vw;
    max-width: none;
  }
}