/* MSDateRange — filtr dat. Wygląd dziedziczy z tokenów programu (--popup-*, --ui-accent),
   więc dopasowuje się do dialogów i innych kontrolek w każdej skórce. .msdr-dark dla skórki dark
   dostraja jedynie subtelne tła (hover/zakres), reszta z tokenów. */
.msdr{
  --msdr-card:   var(--popup-bg, #ffffff);
  --msdr-fg:     var(--popup-fg, #2b2f36);
  --msdr-border: var(--popup-border, #d9dee5);
  --msdr-shadow: var(--popup-shadow, 0 14px 40px rgba(0,0,0,.22));
  --msdr-accent: var(--ui-accent, #2A9FFF);
  --msdr-accent-ink: var(--ui-accent-ink, #1373c4);
  --msdr-muted:  #8a9099;
  --msdr-hover:  rgba(127,127,127,.12);
  --msdr-range:  rgba(42,159,255,.16);
  --msdr-range:  color-mix(in srgb, var(--ui-accent, #2A9FFF) 16%, transparent);
  position:relative; display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  font-family:inherit; font-size:12px; line-height:1.4; text-align:left; color:var(--msdr-fg);
}
/* Skórka dark: tokeny --popup-* są w dark.css ograniczone do #popup_container/#skin_switcher,
   a popup .msdr-pop żyje poza tym zasięgiem — więc ustawiamy powierzchnię wprost (te same
   wartości co ciemny popup), żeby tło/tekst/obramowanie nie wpadały w jasny fallback. */
.msdr.msdr-dark{
  --msdr-card:#222a33; --msdr-fg:#c7ccd1; --msdr-border:#3a434f;
  --msdr-shadow:0 12px 40px rgba(0,0,0,.6);
  --msdr-muted:#9aa4ae; --msdr-hover:rgba(255,255,255,.08);
}
.msdr button{ font-family:inherit }

.msdr-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--msdr-border);
  border-radius:7px;background:var(--msdr-card);color:var(--msdr-fg);cursor:pointer;font-size:13px;font-weight:bold;white-space:nowrap;
  transition:border-color .12s, box-shadow .12s}
.msdr-chip:hover{border-color:var(--msdr-accent)}
/* focus jak pola formularzy/filtrow (akcent skorki); --msdr-accent = --ui-accent danej skorki */
.msdr-chip:focus{border-color:var(--msdr-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--msdr-accent) 25%, transparent);outline:none}
/* Stała szerokość etykiety w obrębie danego typu zakresu — strzałki ◀ ▶ nie przesuwają się,
   gdy zmienia się treść (np. kolejne miesiące/zakresy mają różną długość tekstu). */
.msdr-lbl{display:inline-block;text-align:center;min-width:140px;white-space:nowrap}
.msdr[data-mode="quarter"] .msdr-lbl,
.msdr[data-mode="year"] .msdr-lbl{min-width:92px}
.msdr[data-mode="week"] .msdr-lbl,
.msdr[data-mode="roll7"] .msdr-lbl{min-width:152px}
.msdr[data-mode="roll30"] .msdr-lbl,
.msdr[data-mode="roll365"] .msdr-lbl,
.msdr[data-mode="months12"] .msdr-lbl,
.msdr[data-mode="custom"] .msdr-lbl{min-width:188px}
.msdr-cal{color:var(--msdr-accent);font-weight:normal}
.msdr-car{color:var(--msdr-muted);font-size:10px}
.msdr-steps{display:inline-flex;border:1px solid var(--msdr-border);border-radius:7px;overflow:hidden;background:var(--msdr-card)}
.msdr-steps button{border:0;background:transparent;color:var(--msdr-fg);width:28px;height:30px;cursor:pointer;font-size:15px;line-height:1}
.msdr-steps button:hover{background:var(--msdr-hover)}
.msdr-steps button+button{border-left:1px solid var(--msdr-border)}
.msdr-now{height:30px;padding:0 12px;border:1px solid var(--msdr-border);border-radius:7px;background:var(--msdr-card);
  color:var(--msdr-accent-ink);cursor:pointer;font-weight:bold;font-size:12px}
.msdr-now:hover{border-color:var(--msdr-accent);background:var(--msdr-hover)}

.msdr-pop{position:absolute;z-index:1200;top:36px;left:0;width:540px;max-width:92vw;background:var(--msdr-card);
  border:1px solid var(--msdr-border);border-radius:10px;box-shadow:var(--msdr-shadow);display:none}
.msdr-pop.open{display:block}
.msdr-popbody{display:flex}
.msdr-presets{width:190px;border-right:1px solid var(--msdr-border);padding:7px;display:flex;flex-direction:column;gap:1px}
.msdr-presets button{text-align:left;border:0;background:transparent;color:var(--msdr-fg);padding:8px 11px;border-radius:6px;cursor:pointer;font-size:12.5px}
.msdr-presets button:hover{background:var(--msdr-hover)}
.msdr-presets button.on{background:var(--msdr-range);color:var(--msdr-accent-ink);font-weight:bold}
.msdr-calwrap{flex:1;padding:10px 12px}
.msdr-calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.msdr-calhead .msdr-m{font-weight:bold;color:var(--msdr-fg)}
.msdr-calhead button{border:0;background:transparent;color:var(--msdr-fg);cursor:pointer;width:28px;height:28px;border-radius:6px;font-size:16px}
.msdr-calhead button:hover{background:var(--msdr-hover)}
.msdr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.msdr-dow{text-align:center;color:var(--msdr-muted);font-size:11px;padding:3px 0}
.msdr-day{position:relative;text-align:center;padding:7px 0;font-size:12.5px;cursor:pointer;border-radius:7px;color:var(--msdr-fg)}
.msdr-day:hover{background:var(--msdr-hover)}
.msdr-day.out{color:var(--msdr-muted);opacity:.5}
.msdr-day.rng{background:var(--msdr-range);border-radius:0}
.msdr-day.start{background:var(--msdr-accent);color:#fff;border-radius:7px 0 0 7px}
.msdr-day.end{background:var(--msdr-accent);color:#fff;border-radius:0 7px 7px 0}
.msdr-day.start.end{border-radius:7px}
.msdr-day.today::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--msdr-accent)}
.msdr-day.start.today::after,.msdr-day.end.today::after{background:#fff}
.msdr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--msdr-border);padding:9px 12px}
.msdr-hint{font-size:11.5px;color:var(--msdr-muted)}
.msdr-btns{display:flex;gap:7px}
.msdr-foot button{height:30px;padding:0 15px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:bold}
.msdr-cancel{border:1px solid var(--popup-cancel-border, var(--msdr-border));background:var(--popup-cancel-bg, transparent);color:var(--popup-cancel-fg, var(--msdr-fg))}
.msdr-cancel:hover{background:var(--popup-cancel-bg-hover, var(--msdr-hover))}
.msdr-apply{border:1px solid var(--popup-ok-bg, var(--msdr-accent));background:var(--popup-ok-bg, var(--msdr-accent));color:var(--popup-ok-fg, #fff)}
.msdr-apply:hover{background:var(--popup-ok-bg-hover, var(--msdr-accent-ink));border-color:var(--popup-ok-bg-hover, var(--msdr-accent-ink))}

/* ===== Wariant kompaktowy (data-compact="1") — zamiennik <input>+jQuery UI datepicker.
   Pole wygląda jak input, popup to sam kalendarz (bez presetów, strzałek okresu,
   przycisku „Teraz" i stopki); klik w dzień od razu zatwierdza wybór i zamyka. ===== */
.msdr-compact .msdr-steps,
.msdr-compact .msdr-presets,
.msdr-compact .msdr-foot{ display:none }
.msdr-compact .msdr-pop{ width:auto; top:34px }
.msdr-compact .msdr-popbody{ display:block }
.msdr-compact .msdr-calwrap{ min-width:236px; padding:9px 11px }
.msdr-compact .msdr-chip{ font-weight:normal }
.msdr-compact .msdr-lbl{ min-width:96px; text-align:left }
.msdr-compact .msdr-cal{ font-size:13px }
/* mini-skróty „Wszystko" / „Dziś" pod kalendarzem (tylko wariant kompaktowy) */
.msdr-mini{ margin-top:7px; padding-top:8px; border-top:1px solid var(--msdr-border); display:flex; gap:7px; justify-content:center }
.msdr-mini button{ border:1px solid var(--msdr-border); background:var(--msdr-card); color:var(--msdr-accent-ink);
  border-radius:6px; padding:5px 14px; font-size:12px; font-weight:bold; cursor:pointer }
.msdr-mini button:hover{ border-color:var(--msdr-accent); background:var(--msdr-hover) }

/* ===== Stan pusty / „Wszystko" (clearable) — brak ograniczenia zakresu danych ===== */
.msdr-empty .msdr-lbl{ color:var(--msdr-muted); font-weight:normal }   /* chip wygląda jak puste pole (placeholder) */
.msdr-empty .msdr-steps{ display:none }                                /* strzałki okresu bez sensu, gdy brak zakresu */
.msdr-presets .msdr-all{ font-weight:bold }                            /* „Wszystko" na górze listy presetów */

@media (max-width:600px){ .msdr-pop{width:96vw} .msdr-popbody{flex-direction:column} .msdr-presets{width:auto;border-right:0;border-bottom:1px solid var(--msdr-border);flex-direction:row;flex-wrap:wrap}
  .msdr-compact .msdr-pop{width:auto} .msdr-compact .msdr-popbody{flex-direction:column} }