/* ============================================================
   msCalendar — bazowy, samowystarczalny wyglad (niezalezny od hosta)
   Motyw sterowany zmiennymi CSS na .msc-calendar — host (np. MobileSerwis)
   moze je nadpisac per skorka, nie ruszajac tego pliku.
   ============================================================ */

.msc-calendar {
  /* paleta / typografia */
  --msc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --msc-font-size: 11px;
  --msc-bg: #ffffff;
  --msc-text: #2b2f36;
  --msc-muted: #8b929c;
  --msc-border: #e7eaee;
  --msc-border-strong: #d4d9df;

  /* tla siatki */
  --msc-work: #ffffff;
  --msc-free: #f5f6f8;
  --msc-today: #fff7d6;

  /* przyciski naglowka */
  --msc-btn-bg: #ffffff;
  --msc-btn-text: #3a4049;
  --msc-btn-border: #d7dbe0;
  --msc-btn-bg-hover: #f1f3f5;
  --msc-btn-active-bg: #e7ebef;
  --msc-btn-active-text: #1f2937;

  /* akcent (np. zaznaczenie / fokus) */
  --msc-accent: #3b82f6;
  --msc-now: #ea4335;   /* linia biezacej godziny ("teraz") */
  --msc-done: #eafaf0;  /* lekko zielone tlo zlecen wykonanych/rozliczonych */
  /* karta urlopu/L4 (kind=free, klasa .msc-hol): slate w ukosne paski ("niedostepny") - odrozniona od zlecen */
  --msc-hol-hatch-a: #e6e8f6;
  --msc-hol-hatch-b: #eef0fb;
  --msc-hol-text: #312e6b;
  /* swieto ustawowe (ms_polish_holidays): kolor daty/gwiazdki w naglowkach dni */
  --msc-hol-ink: #c0392b;

  /* zdarzenia */
  --msc-event-radius: 6px;
  --msc-event-shadow: 0 1px 3px rgba(20, 30, 50, .18), 0 1px 1px rgba(20, 30, 50, .10);
  --msc-event-shadow-hover: 0 4px 10px rgba(20, 30, 50, .22);

  --msc-radius: 8px;

  font-family: var(--msc-font);
  font-size: var(--msc-font-size);
  line-height: 1.35;
  padding: 0;
  margin: 0;
  position: relative;
  /* wlasny kontekst stackingu: wewnetrzne z-index (maski sticky 90000+, numer dnia 99999)
     NIE moga przebijac modali aplikacji (okno zlecenia ~z-index 1000) - bez tego fragment
     kalendarza/etykiety serwisantow wychodzily NAD okno zlecenia otwarte z widoku mapy */
  isolation: isolate;
  border: 1px solid var(--msc-border-strong);
  border-radius: var(--msc-radius);
  background: var(--msc-bg);
  color: var(--msc-text);
  overflow: hidden;
  box-sizing: border-box;
}

.msc-calendar *,
.msc-calendar *::before,
.msc-calendar *::after {
  box-sizing: border-box;
}

.msc-calendar a {
  color: var(--msc-text);
  text-decoration: none;
  display: block;
  padding: 0 2px;
}

.msc-calendar a:hover {
  color: var(--msc-accent);
}

/* ---------- naglowek ---------- */

.msc-headers {
  position: relative;
  text-align: center;
  border-bottom: 1px solid var(--msc-border);
  overflow: hidden;
  background: var(--msc-bg);
}

.msc-headers-left { float: left; }
.msc-headers-right { float: right; }

/* SEKCJA 2: panel etykiet kolumn (serwisanci / dni) - osobny, pod legenda */
.msc-colpanel {
  position: relative;
  overflow: hidden;
  background: var(--msc-bg);
  border-bottom: 1px solid var(--msc-border);
}

.msc-title {
  /* przyklejony do GORNEGO wiersza paska (miedzy przyciskami a nawigacja); absolutnie
     wysrodkowany, zeby przy waskim oknie NIE zawijal sie na wiersz etykiet kolumn (top:30) */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--msc-text);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;   /* nie blokuje przyciskow pod spodem */
}

/* etykiety kolumn (serwisanci / dni) */
.msc-header {
  font-weight: 600;
  transition: background-color .12s ease;
}

.msc-header:hover {
  background: var(--msc-btn-bg-hover) !important;
  cursor: pointer;
}

.msc-header.selected {
  background: color-mix(in srgb, var(--msc-accent) 18%, transparent) !important;
  box-shadow: inset 0 -2px 0 var(--msc-accent);
  cursor: pointer;
}

/* ---------- siatka miesieczna ---------- */

.msc-day-box {
  color: var(--msc-text);
  transition: background-color .12s ease;
}

.msc-day-box:hover {
  background: var(--msc-btn-bg-hover) !important;
  cursor: pointer;
}

/* klikalny naglowek komorki (numer dnia) w widoku Miesiac-siatka -> przejscie do tygodnia */
.msc-day-num {
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 3px;
  transition: background-color .12s ease, color .12s ease;
}
.msc-day-num:hover {
  background: var(--msc-btn-bg-hover);
  color: var(--msc-accent) !important;
}

/* ---------- obszar kalendarza ---------- */

.msc-cal {
  position: relative;
  overflow: auto;          /* pionowy (godziny) + poziomy (kolumny serwisantow gdy min-width) */
  scrollbar-width: thin;
  /* jednopalcowy scroll OK; dwupalcowy pinch zostawiamy JS (zoom) - przegladarka nie zoomuje strony */
  touch-action: pan-x pan-y;
}

.msc-time-head {
  color: var(--msc-muted);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}

.msc-time-line {
  pointer-events: none;
}

/* Linia "teraz" (biezaca godzina) - pozioma w Dzien/Tydzien (kolumna dzisiaj), pionowa w Gancie. */
.msc-nowline {
  position: absolute; height: 0; z-index: 50;
  border-top: 2px solid var(--msc-now);
  pointer-events: none;
}
.msc-nowline .msc-nowdot {
  position: absolute; left: -3px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--msc-now);
}
.msc-nowline-v {
  position: absolute; width: 0; z-index: 50;
  border-left: 2px solid var(--msc-now);
  pointer-events: none;
}

/* Pasek zaznaczenia zakresu czasu (long-press: Dzien pionowo, Gantt poziomo) - do dodania
   zdarzenia/urlopu. Rysowany w divEvents (te same wspolrzedne co kafelki). */
.msc-slot-sel {
  position: absolute; z-index: 60; pointer-events: none; box-sizing: border-box;
  border: 1.5px solid var(--msc-accent); border-radius: 5px;
  background: color-mix(in srgb, var(--msc-accent) 16%, transparent);
}
.msc-slot-sel-lbl {
  position: absolute; top: 1px; left: 3px;
  background: var(--msc-accent); color: #fff;
  font-size: 10px; line-height: 1.3; font-weight: 600;
  padding: 0 5px; border-radius: 4px; white-space: nowrap;
}
.msc-slot-sel.msc-slot-sel-h .msc-slot-sel-lbl { top: 50%; transform: translateY(-50%); }

/* ---------- zdarzenia ---------- */

.msc-event {
  border-radius: var(--msc-event-radius);
  box-shadow: var(--msc-event-shadow);
  transition: box-shadow .12s ease, transform .12s ease;
  cursor: pointer;
}

.msc-event:hover {
  box-shadow: var(--msc-event-shadow-hover);
  z-index: 9999 !important;
}

.msc-event-content {
  height: 100%;
  position: relative;
}

.msc-event-title {
  padding: 2px 4px 2px 8px;   /* lewy padding robi miejsce na pionowy pasek akcentu serwisanta */
  overflow: hidden;
}

/* Pionowy pasek w kolorze serwisanta na lewej krawedzi (tlo karty jest neutralne). */
.msc-event-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-top-left-radius: var(--msc-event-radius);
  border-bottom-left-radius: var(--msc-event-radius);
  pointer-events: none;
  z-index: 1;
}

/* Naglowek zdarzenia: ikona stanu + znaczniki (kropki .tag) w jednym rzedzie.
   Gdy sie nie miesci, JS (fitBadges) skaluje CALY klaster - kropki zostaja kwadratowe. */
.msc-event-badges {
  display: flex;
  align-items: center;
  padding: 2px 4px 0 0;       /* bez lewego paddingu - ikona flush do lewej (akcent 4px jest pointer-events:none) */
  overflow: hidden;
  white-space: nowrap;
  /* odstepy przez marginesy (pewniejsze niz flex gap; ostatnia kropka chowa nadmiar pod padding/overflow) */
}
.msc-event-badges img { width: 14px; height: 14px; flex: none; vertical-align: middle; margin-right: 3px; }

/* Adres 2-liniowy: linia glowna (kod+miasto) pogrubiona, druga (ulica+nr) przygaszona. */
.msc-event-addr { padding: 1px 4px 2px 8px; overflow: hidden; }   /* lewy padding = miejsce na pasek akcentu */
.msc-event-addr-main { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msc-event-addr-sub { display: block; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Plakietka priorytetu (rog gorny-prawy) i chip plikow (rog dolny-prawy) - TYLKO w wersji wysokiej. */
.msc-event-prio {
  position: absolute; top: 0; right: 0; z-index: 3;   /* wtulona w rog karty */
  display: none; align-items: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  color: #fff; padding: 2px 5px 2px 6px;
  /* gorny-prawy rog pokrywa sie z zaokragleniem karty; dolny-lewy lekko zaokraglony */
  border-radius: 0 var(--msc-event-radius) 0 6px;
}
.msc-event-prio.prio-wy { background: #f59e0b; }   /* WYSOKI */
.msc-event-prio.prio-aw { background: #e5484d; }   /* AWARIA */
.msc-event-files {
  position: absolute; bottom: 1px; right: 1px; z-index: 3;   /* mocniej w prawy DOLNY rog */
  display: none; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; color: var(--msc-text);
  background: rgba(255, 255, 255, .88); border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 20px; padding: 0 6px 0 5px; line-height: 17px;   /* +2px wyzszy */
  cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
/* hover: czytelny sygnal, ze chip jest klikalny (lista plikow) - podswietlenie akcentem */
.msc-event-files:hover {
  background: color-mix(in srgb, var(--msc-accent) 22%, #fff);
  border-color: var(--msc-accent);
  box-shadow: 0 0 0 1px var(--msc-accent);
}
.msc-event-files svg { width: 13px; height: 13px; flex: none; opacity: .7; }   /* +2px */
.msc-event.tall .msc-event-prio { display: inline-flex; }
.msc-event.tall .msc-event-files { display: inline-flex; }
.msc-event.tall .msc-event-addr { padding-bottom: 20px; }   /* miejsce, by adres nie wchodzil pod (wiekszy) chip plikow */
/* Chip plikow w wersji KOMPAKTOWEJ (Gantt): mniejszy, ciasniejszy - pasek jest niski. */
.msc-event-files.msc-files-compact { font-size: 8.5px; padding: 0 4px 0 3px; line-height: 14px; bottom: 1px; right: 1px; gap: 2px; }
.msc-event-files.msc-files-compact svg { width: 11px; height: 11px; }
.msc-gantt-bar.tall .msc-event-files { display: inline-flex; }
/* MALE, PLASKIE kropki znacznikow bez ramki, z odstepem przez margin-right (bije app.css div.tag). */
.msc-event-badges .tag { flex: none; width: 10px !important; height: 10px !important; border-radius: 50%; border: 0 !important; box-shadow: none !important; margin: 0 1px 0 0 !important; }
/* realne zmniejszanie, gdy klaster sie nie miesci (fitBadges). */
.msc-event-badges.compact img { width: 11px !important; height: 11px !important; margin-right: 3px; }
.msc-event-badges.compact .tag { width: 8px !important; height: 8px !important; margin-right: 1px !important; }
.msc-event-badges.tiny img { width: 9px !important; height: 9px !important; margin-right: 2px; }
.msc-event-badges.tiny .tag { width: 7px !important; height: 7px !important; margin-right: 1px !important; }

/* WYBRANY slot / przeciagane zlecenie (slot biezacego zlecenia w pickerze) - styl "aktywnej
   pozycji" SPOJNY z kalendarzem klasycznym (#order_calendar a.cal-pick): jasnoniebieskie tlo
   (z serwera) + subtelna niebieska obwodka + pierscien. Bez ciezkiej ramki/poswiaty. */
.msc-event.moveevent {
  outline: 1.5px solid rgba(42, 159, 255, .55);
  outline-offset: -1px;
  box-shadow: 0 0 0 2px rgba(42, 159, 255, .30), var(--msc-event-shadow);
  z-index: 5 !important;
}
/* uchwyty przeciagania/zmiany rozmiaru (tylko dla .moveevent) */
.moveevent { -webkit-user-select: none; user-select: none; }
.moveevent .msc-event-header {
  height: 5px;
  width: 100%;
  background-color: rgba(0, 0, 0, .35);
  cursor: move;
}

.moveevent .msc-event-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: rgba(0, 0, 0, .35);
  cursor: ns-resize;
}

/* ---------- przyciski naglowka ---------- */

.msc-but {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 6px;
  font-family: inherit;
  color: var(--msc-btn-text);
  font-size: 11px;
  font-weight: 600;
  background: var(--msc-btn-bg);
  padding: 0 6px;
  margin: 1px 2px;
  height: 22px;
  min-width: 54px;
  text-decoration: none;
  border: 1px solid var(--msc-btn-border);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.msc-but:focus-visible {
  outline: 2px solid var(--msc-accent);
  outline-offset: 1px;
}

select.msc-but {
  /* strzalka jako inline SVG (bez zaleznosci od pliku obrazka) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a828c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding: 1px 22px 1px 8px;
  min-width: 110px;
  width: auto;
}

button.msc-but:hover,
select.msc-but:hover {
  background-color: var(--msc-btn-bg-hover);
  border-color: var(--msc-border-strong);
}

.msc-active {
  background: var(--msc-btn-active-bg);
  color: var(--msc-btn-active-text);
  border-color: var(--msc-border-strong);
}

select.msc-sel-resources {
  max-width: 140px;
}

/* ---------- pasek "caly dzien" (urlopy / L4) ---------- */
.msc-allday {
  position: relative;
  border-bottom: 1px solid var(--msc-border-strong);
  background: var(--msc-bg);
  overflow: hidden;
}
.msc-allday-label {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--msc-muted);
  overflow: hidden;
  border-right: 1px solid var(--msc-border);
  background: var(--msc-bg);   /* maskuje kafelki "caly dzien" przewijane pod spodem */
  z-index: 5;
  cursor: default;
}
.msc-allday-ico { width: 15px; height: 15px; flex: none; opacity: .8; }
.msc-allday-cell {
  position: absolute;
  top: 0; bottom: 0;
  border-right: 1px solid var(--msc-border);
  padding: 3px 4px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
/* komorka klikalna (host z onAllDayClick: dodanie/usuniecie dyzuru serwisanta) */
.msc-allday-cell.msc-allday-click { cursor: pointer; }
.msc-allday-cell.msc-allday-click:hover { background: color-mix(in srgb, var(--msc-accent) 10%, transparent); }

/* urlop calodniowy (pigulka kind=free w pasku): tlo kolumny serwisanta w siatce godzin
   = neutralne szare + ukosne paski "niedostepny" (spojne z karta urlopu .msc-hol).
   NIE --msc-free (w jasnych skorkach to kremowe tlo godzin wolnych, nie szarosc). */
.msc-day-holbg {
  pointer-events: none;
  background: rgba(127, 127, 127, .14) repeating-linear-gradient(135deg,
    var(--msc-hol-hatch-a) 0, var(--msc-hol-hatch-a) 6px,
    transparent 6px, transparent 14px);
}

/* ===== Swieto ustawowe (ms_polish_holidays, mapa z serwera) - oznaczenie dni ===== */
.msc-header.msc-head-hol, .msc-day-num.msc-head-hol { color: var(--msc-hol-ink); }
.msc-hol-star { color: var(--msc-hol-ink); font-size: 9px; vertical-align: 1px; }
.msc-title-hol { color: var(--msc-hol-ink); font-weight: 600; }
.msc-allday-item {
  display: flex;              /* ikona + tekst wyśrodkowane w pionie (koniec rozjazdu na baseline) */
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  line-height: 1.25;
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--msc-today);
  border-left: 3px solid rgba(0, 0, 0, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* urlopy/L4 maja tresc w <a> (ikona+tekst), alarm ma ikone bezposrednio - oba wysrodkowane */
.msc-allday-item > a { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.msc-allday-item img { width: 14px; height: 14px; flex: none; }
.msc-allday-more {
  font-size: 10px;
  line-height: 1.25;
  padding: 0 5px;
  color: var(--msc-muted);
  font-weight: 600;
  cursor: pointer;
}
.msc-allday-more:hover { color: var(--msc-text); text-decoration: underline; }

/* KARTA URLOPU / L4 (kind=free -> klasa .msc-hol) - odrozniona od zlecen: slate + ukosne paski
   ("niedostepny"), POJEDYNCZY akcent po lewej wg podtypu (1=L4 czerwony, 2=na zadanie bursztyn,
   3=wypoczynkowy zielony). Dotyczy pigulki "caly dzien" (.msc-allday-item) i kafelka siatki (.msc-event). */
.msc-allday-item.msc-hol,
.msc-event.msc-hol .msc-event-content,
.msc-lane-tile.msc-hol {
  background: repeating-linear-gradient(45deg,
    var(--msc-hol-hatch-a) 0, var(--msc-hol-hatch-a) 5px,
    var(--msc-hol-hatch-b) 5px, var(--msc-hol-hatch-b) 11px) !important;
  color: var(--msc-hol-text) !important;
}
.msc-allday-item.msc-hol,
.msc-event.msc-hol .msc-event-content { border-left: 4px solid #8b93b8; }   /* akcent; per-typ nizej */
.msc-allday-item.msc-hol { border-radius: 0 5px 5px 0; }
/* !important: w glownym kalendarzu (#calendar) rezydualna regula `#calendar a.popupTrigger{color:#000}`
   (app.css) ma wyzsza specyficznosc (ID) i czernila tekst pigulek urlopu, ktory siedzi WPROST w <a>
   (inaczej niz zlecenia, gdzie popupTrigger to niewidzialna nakladka). W oknie zlecenia (#order_calendar_cal)
   regula nie lapala -> tam bylo dobrze. Wymuszamy kolor karty urlopu we wszystkich kontekstach/skorkach. */
.msc-allday-item.msc-hol > a,
.msc-event.msc-hol .msc-event-title,
.msc-event.msc-hol .msc-event-title > a,
.msc-lane-tile.msc-hol { color: var(--msc-hol-text) !important; }
/* kafelek siatki ma WLASNY pasek serwisanta (.msc-event-accent, absolutny z lewej) - ukrywamy go
   na urlopie, zeby akcent podtypu (border-left) byl POJEDYNCZY (koniec podwojnej kreski). */
.msc-hol .msc-event-accent { display: none; }
/* Hint (podglad hover .popupTrigger) urlopu w SIATCE: kafelek jest wysoki, a <a> z ikona+opisem
   zajmowal tylko ~24px u gory -> hint dzialal "tylko na ikonce". Rozciagamy trigger na CALY
   kafelek (content jest position:relative), tresc zostaje u gory. */
.msc-event.msc-hol .msc-event-title { position: static; }
.msc-event.msc-hol .msc-event-title > a.popupTrigger { position: absolute; inset: 0; display: block; padding: 2px 6px; }
/* to samo dla pigulki "caly dzien": <a> byl tylko na szerokosc tekstu, a pigulka urlopu
   wielodniowego jest szeroka -> hint dzialal tylko na tekscie. Rozciagamy <a> na cala pigulke.
   UWAGA: NIE absolutnie (pigulka bierze wysokosc z tresci <a> -> zapadlaby sie do 0) - flex-grow,
   ktory zostaje w flow i wypelnia szerokosc. Pigulka jest display:flex (baza). */
.msc-allday-item.msc-hol > a.popupTrigger { flex: 1 1 auto; }
/* akcent podtypu - tylko pigulka i content kafelka (NIE cala ramka kafelka) */
.msc-allday-item.msc-hol-t1, .msc-event.msc-hol-t1 .msc-event-content { border-left-color: #e5484d; }
.msc-allday-item.msc-hol-t2, .msc-event.msc-hol-t2 .msc-event-content { border-left-color: #f59e0b; }
.msc-allday-item.msc-hol-t3, .msc-event.msc-hol-t3 .msc-event-content { border-left-color: #16a34a; }

/* ---------- widok SWIMLANE (wiersz = serwisant) ---------- */
.msc-lane-row {
  position: absolute;
  left: 0;
  border-bottom: 1px solid var(--msc-border);
  box-sizing: border-box;
}
.msc-lane-row:nth-child(odd) { background: color-mix(in srgb, var(--msc-free) 50%, transparent); }
/* Gantt: przyklejona lewa kolumna etykiet serwisantow - CSS sticky (bez JS -> brak lagu przy szybkim
   scrollu). Tylko left:0 (poziomo przyklejone), pion przewija sie naturalnie z trescia. */
.msc-lane-col { position: sticky; left: 0; z-index: 5; background: var(--msc-bg); }
.msc-lane-label {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  font-weight: 600;
  font-size: 12px;
  color: var(--msc-text);
  background: var(--msc-bg);
  border-right: 1px solid var(--msc-border-strong);
  border-bottom: 1px solid var(--msc-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  z-index: 2;
}
.msc-lane-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.msc-lane-cellsep { position: absolute; width: 1px; background: var(--msc-border); }
/* Gantt: pas godzin poza pracą (tlo "free" jak w widoku dnia) - pod separatorami i paskami zdarzen */
.msc-lane-freeband { position: absolute; background: var(--msc-free); pointer-events: none; }
/* Gantt tygodniowy: naglowek dnia + separator dnia (mocniejszy niz godzinowy) */
.msc-gantt-dayhead {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  border-left: 1px solid var(--msc-border-strong);
  font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
/* przy dużym zoomie nazwa dnia u GÓRY (mniejsza czcionka), a pod nią godziny - bez nachodzenia */
.msc-gantt-dayhead.with-hours {
  align-items: flex-start;
  padding-top: 0;
  font-size: 8.5px;
  /* !important nadpisuje inline line-height (=wysokosc panelu) ustawiane przez setCss w drawHeader,
     ktore w przeciwnym razie centrowalo nazwe dnia w pionie -> nachodzila na godziny */
  line-height: 10px !important;
}
.msc-gantt-hourtick {
  position: absolute;
  bottom: 1px; height: 12px; line-height: 12px;
  font-size: 9px; text-align: center;
  color: var(--msc-muted);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}
.msc-lane-daysep { position: absolute; width: 1px; background: var(--msc-border-strong); }
.msc-lane-tile {
  position: absolute;
  border-radius: 5px;
  padding: 0 4px;
  font-size: 10.5px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: var(--msc-event-shadow);
  box-sizing: border-box;
}
/* Pasek Gantta KOMPAKTOWY: neutralne tlo + pasek akcentu serwisanta, w JEDNEJ linii
   ikona stanu + znaczniki + adres (kod+miasto bold, ulica szary) OBOK statusu; plakietka
   priorytetu i chip plikow w rogach (wysoki pasek). Zawsze 1 linia - bez rozbijania na karte. */
.msc-gantt-bar {
  display: flex; align-items: center; gap: 4px;
  background: var(--msc-bg); color: var(--msc-text);
  border: 1px solid var(--msc-border);
  padding-left: 8px;   /* miejsce na pasek akcentu (4px) */
}
.msc-gantt-bar.done { background: var(--msc-done); }   /* wykonane/rozliczone */
.msc-gantt-bar .msc-event-badges { flex: none; padding: 0; }
.msc-gantt-bar .msc-lt-main { flex: 0 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msc-gantt-bar .msc-lt-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; opacity: .78; }
/* wysoki pasek: plakietka priorytetu (rog gorny-prawy) + chip plikow (dolny-prawy) */
.msc-gantt-bar.tall { padding-right: 3px; }
.msc-gantt-bar.tall .msc-event-prio { display: inline-flex; }
/* WYSOKI pasek = styl KARTY (jak widok dnia): kolumna - znaczniki u gory, pod spodem
   kod+miasto (bold) i ulica (szary) w DWoCH liniach. Nizszy pasek zostaje kompaktowy (1 linia). */
.msc-gantt-bar.card {
  flex-direction: column; align-items: stretch; justify-content: center; gap: 1px;
  padding: 3px 7px 3px 10px;   /* 10px z lewej = miejsce na pasek akcentu (4px) */
}
.msc-gantt-bar.card .msc-event-badges { flex: none; }
.msc-gantt-bar.card .msc-event-addr { padding: 0; overflow: hidden; min-width: 0; }
.msc-gantt-bar.card .msc-event-addr-main,
.msc-gantt-bar.card .msc-event-addr-sub { line-height: 1.3; }
/* POSREDNI pasek: znaczniki OBOK 2-liniowego adresu (nie NAD nim) - mniejsza wymagana wysokosc
   niz karta. Pasek zostaje ukladem WIERSZOWYM (align-items:center), adres = wewnetrzna kolumna. */
.msc-gantt-bar.mid .msc-event-addr {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0;
}
.msc-gantt-bar.mid .msc-event-addr-main,
.msc-gantt-bar.mid .msc-event-addr-sub { line-height: 1.25; }
/* POSREDNI: znaczniki MNIEJSZE, kropki POD ikona (nie obok) -> ikona blokowo u gory, kropki w
   JEDNYM rzedzie ponizej (inline-block, bez zawijania) -> stala niska wysokosc (~22px) niezaleznie
   od liczby kropek i waski blok = wiecej miejsca w poziomie na 2-liniowy adres. */
.msc-gantt-bar.mid .msc-event-badges { flex: none; }
.msc-gantt-bar.mid .msc-event-badges > a {
  display: inline-block; text-align: center; line-height: 0; white-space: nowrap;
}
.msc-gantt-bar.mid .msc-event-badges svg { display: block; margin: 0 auto 1px; width: 15px !important; height: 15px !important; }
.msc-gantt-bar.mid .msc-event-badges .tag {
  display: inline-block; width: 6px !important; height: 6px !important;
  margin: 0 1px 0 0 !important; vertical-align: middle;
}
.msc-lane-more {
  position: absolute;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--msc-muted);
  cursor: pointer;
}
.msc-but svg.msc-ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}
.msc-lane-heat {
  position: absolute;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--msc-heat-text, #1f3a5f);
  overflow: hidden;
  cursor: pointer;
}
/* Miesiac->Wiersze: klikalna komorka dnia (klik = widok Dzien tej daty); nad separatorami,
   pod licznikiem (heat), z podswietleniem hover na calej kolumnie dnia w wierszu serwisanta */
.msc-lane-daycell { position: absolute; cursor: pointer; }
.msc-lane-daycell:hover { background: color-mix(in srgb, var(--msc-accent) 12%, transparent); }
/* rampa obciazenia (heat) - tematyzowana zmiennymi, zeby skorka dark mogla ja przyciemnic */
.msc-heat1 { background: var(--msc-heat1, #dbeafe); }
.msc-heat2 { background: var(--msc-heat2, #93c5fd); }
.msc-heat3 { background: var(--msc-heat3, #60a5fa); }
.msc-heat4 { background: var(--msc-heat4, #2563eb); color: var(--msc-heat4-text, #fff); }

/* ---------- legenda serwisantow (pod naglowkiem z data) ---------- */
.msc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--msc-border);
  background: var(--msc-bg);
  overflow: hidden;
}
.msc-legend-chk { display: inline-flex; gap: 5px; align-items: center; margin-right: 4px; }
.msc-legend-chk a {
  display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
  border: 1px solid var(--msc-btn-border); border-radius: 6px; color: var(--msc-muted); background: var(--msc-btn-bg);
}
.msc-legend-chk a svg { width: 14px; height: 14px; }
.msc-legend-chk a[data-chk-all="1"] { color: var(--msc-accent); border-color: color-mix(in srgb, var(--msc-accent) 45%, var(--msc-btn-border)); }
.msc-legend-chk a:hover { background: var(--msc-btn-bg-hover); }
.msc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--msc-btn-border); border-radius: 16px; padding: 1px 8px 1px 5px;
  cursor: pointer; background: var(--msc-btn-bg); font-size: 11.5px; color: var(--msc-text);
  -webkit-user-select: none; user-select: none; transition: opacity .12s, background .12s;
}
.msc-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.msc-chip.off { opacity: .4; text-decoration: line-through; }
.msc-chip:hover { background: var(--msc-btn-bg-hover); }