:root {
  --tblr-border-radius: 6px;
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 6px;
  --tblr-primary: #0c8b8b;      /* teal z logo */
  --tblr-primary-rgb: 12, 139, 139;
  --tblr-primary-lt: #e5f3f3;
  --brand-yellow: #f7b52c;      /* żółć z logo */
  --slot-h: 20px;
}
.btn { border-radius: 6px; }
.form-narrow { max-width: 860px; }
.kv-label { color: var(--tblr-secondary-color, #6c757d); font-weight: 400; }
.kv-value { color: var(--tblr-body-color, #1d273b); font-weight: 500; }

/* Tom Select nad modalem, nieprzezroczysty dropdown */
.ts-dropdown { background-color: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color, #dadfe5);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); z-index: 1060; }
.ts-dropdown .ts-dropdown-content { background-color: var(--tblr-bg-surface, #fff); }
.ts-dropdown .option.active, .ts-dropdown .active { background-color: var(--tblr-primary-lt); }
.ts-wrapper.single .ts-control { background-color: var(--tblr-bg-surface, #fff); }

/* ── Grafik ─────────────────────────────────────────────────────────────── */
.cal { display: grid; grid-template-columns: var(--tpl-d); border: 1px solid var(--tblr-border-color); border-radius: 6px; background: #fff; }
.cal-head { position: sticky; top: 0; z-index: 3; background: var(--tblr-bg-surface-secondary, #f8fafc); border-bottom: 1px solid var(--tblr-border-color); padding: 6px 8px; text-align: center; font-size: .8rem; line-height: 1.2; }
.cal-head.today { background: var(--tblr-primary-lt); }
.cal-col.today { background-color: rgba(12,139,139,.04); }
.cal-head .t { font-weight: 600; }
.cal-head .s { color: var(--tblr-secondary); }
.cal-times { position: relative; height: calc(var(--slot-h) * var(--slots)); border-right: 1px solid var(--tblr-border-color); }
.cal-times .h { position: absolute; right: 6px; margin-top: 2px; font-size: .7rem; color: var(--tblr-secondary); }  /* pod linią godziny, żeby pierwsza nie była ucięta */
/* Linie siatki: pełna co godzinę, cienka przerywana co slot (15 min). Przerywana to kafelek SVG
   6×20 px z kreską 3 px u dołu, skalowany do wysokości slotu. */
.cal-col { position: relative; height: calc(var(--slot-h) * var(--slots)); border-right: 1px solid var(--tblr-border-color); cursor: crosshair;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--slot-h) * var(--sph) - 1px), var(--tblr-border-color) calc(var(--slot-h) * var(--sph) - 1px), var(--tblr-border-color) calc(var(--slot-h) * var(--sph))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='20'%3E%3Crect x='0' y='19' width='3' height='1' fill='%23d5dae0'/%3E%3C/svg%3E");
  background-size: 100% 100%, 6px var(--slot-h);
  background-repeat: no-repeat, repeat; }
.cal-col:last-child, .cal-head:last-child { border-right: 0; }
.cal-avail { position: absolute; left: 0; right: 0; background: rgba(12,139,139,.10); border-left: 3px solid rgba(12,139,139,.5); pointer-events: none; }
.cal-visit { position: absolute; box-sizing: border-box; padding: 2px 5px; border-radius: 4px; font-size: .74rem; line-height: 1.15; color: #fff; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.6); }
.cal-visit:hover { filter: brightness(1.08); z-index: 2; }
.cal-visit .p { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-visit .m { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-visit.completed { opacity: .65; }
.cal-visit.no_show { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px); }
.cal-visit.home { border-style: dashed; border-color: #fff; }
.cal-visit.private { outline: 2px dotted #fff; outline-offset: -4px; }
/* Siatka przewija się razem ze stroną (wewnętrzny scroll nie działał w aplikacji desktopowej);
   nagłówki dni/miejsc są przyklejone do góry okna. */
.cal-wrap { overflow: visible; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.status-badge { font-weight: 500; }

/* Widok miejsc: gabinety szersze, kolumny domowe węższe i lekko wyróżnione */
.cal-group { position: sticky; top: 0; z-index: 4; background: var(--tblr-bg-surface-secondary, #f8fafc); border-bottom: 1px solid var(--tblr-border-color); border-right: 1px solid var(--tblr-border-color); padding: 4px 8px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); text-align: center; }
.cal-group:last-child { border-right: 0; }
.cal-group-home, .cal-head.home, .cal-col.home { background-color: #fbfbf7; }
.cal-places .cal-head { top: 25px; }
.cal-visit.busy { opacity: .45; cursor: default; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }

/* Przeciąganie wizyt */
.cal-visit[data-draggable] { cursor: grab; touch-action: none; }
.cal-visit.drag-source { opacity: .35; }
.cal-visit.dragging { position: fixed; z-index: 1000; pointer-events: none; opacity: .92; box-shadow: 0 10px 28px rgba(0,0,0,.35); transform: scale(1.02); }
.cal-col.drop-target { background-color: rgba(12,139,139,.12); }
.drag-hint { position: fixed; z-index: 1001; pointer-events: none; font-size: .72rem; background: #1d273b; color: #fff; padding: 2px 6px; border-radius: 4px; }

/* Logo w nagłówku: Tabler wymusza własną wysokość obrazka w .navbar-brand, stąd !important. */
.navbar-brand .brand-logo { height: 28px !important; width: auto !important; display: block; }
.navbar { min-height: 3rem; }

/* ── Planer dostępności ─────────────────────────────────────────────────── */
.av-month th { text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary, #f8fafc); }
.av-month td.av-day { height: 84px; vertical-align: top; padding: 4px 6px; cursor: pointer; user-select: none; transition: background-color .08s; width: 13.5%; }
.av-month td.av-day:hover { background: var(--tblr-primary-lt); }
.av-month td.av-day.selected { background: var(--tblr-primary-lt); box-shadow: inset 0 0 0 2px var(--tblr-primary); }
.av-month td.av-day.other { background: #fafbfc; cursor: default; }
.av-month td.av-day.other .av-num { color: #c8cdd3; }
.av-month td.av-day.past { color: var(--tblr-secondary); cursor: default; background: #fafbfc; }
.av-month td.av-day.past .av-block { opacity: .6; }
.av-month td.av-day.today .av-num { background: var(--tblr-primary); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.av-num { font-weight: 600; font-size: .85rem; margin-bottom: 3px; }
.av-block { font-size: .78rem; font-weight: 500; color: var(--tblr-primary); background: rgba(12,139,139,.10); border-radius: 4px; padding: 1px 5px; margin-bottom: 2px; white-space: nowrap; }
.av-free { font-size: .75rem; color: #c0c6cd; }
.av-actions { background: #fafbfc; }

/* Pole kwoty: jedna linia, przyciski i „zł” nie zawijają się. W formularzach wypełnia kolumnę
   i kurczy się na wąskim ekranie; w tabelach (wersja -sm) jest zwarte, o stałej szerokości. */
.money-group { flex-wrap: nowrap; display: flex; width: 100%; max-width: 100%; }
.money-group .money-input { flex: 1 1 96px; width: 96px; min-width: 48px; }
.money-group .btn { font-weight: 600; flex: 0 0 auto; }
.money-group .input-group-text { flex: 0 0 auto; }
.money-group.input-group-sm { display: inline-flex; width: auto; }
.money-group.input-group-sm .money-input { flex: 0 0 96px; }

/* ── Flatpickr: duży, czytelny kalendarz w motywie Tablera ─────────────────── */
.flatpickr-calendar { font-size: 1rem; border: 1px solid var(--tblr-border-color, #dadfe5); box-shadow: 0 6px 20px rgba(0,0,0,.14); border-radius: 8px; }
.flatpickr-calendar, .flatpickr-days, .flatpickr-calendar .dayContainer { width: 336px; min-width: 336px; max-width: 336px; }
.flatpickr-day { max-width: 48px; height: 42px; line-height: 42px; font-size: 1rem; border-radius: 6px; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { height: 44px; }
.flatpickr-current-month { font-size: 1.05rem; padding-top: 8px; }
.flatpickr-weekdaycontainer .flatpickr-weekday { font-size: .8rem; font-weight: 600; color: var(--tblr-secondary); }
.flatpickr-current-month span.cur-month:hover, .flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month input.cur-year, .flatpickr-current-month input.cur-year:hover, .flatpickr-current-month input.cur-year:focus { background: transparent; }
.flatpickr-current-month .numInputWrapper { width: 7ch; }
.flatpickr-current-month .numInputWrapper span { opacity: 1; border: none; }
.flatpickr-current-month .numInputWrapper span:hover { background: transparent; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: 12px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--tblr-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
.flatpickr-day.today { border-color: var(--tblr-primary); font-weight: 600; }
.flatpickr-day:hover { background: var(--tblr-primary-lt); border-color: var(--tblr-primary-lt); }
.flatpickr-today-btn { margin: 4px 10px 10px; padding: .45rem; text-align: center; cursor: pointer; font-size: .9rem; font-weight: 500;
  color: var(--tblr-primary); border: 1px solid var(--tblr-border-color, #dadfe5); border-radius: 6px; }
.flatpickr-today-btn:hover { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); }
.flatpickr-calendar.open { z-index: 1070; }   /* nad modalem Bootstrapa */

/* ── Telefon / tablet ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-toggler { margin-right: .5rem; }
  #navbar-menu .navbar-nav { padding: .5rem 0; }
  #navbar-menu .nav-link { padding: .5rem .25rem; }
  /* Grafik: siatka przewija się w obie strony wewnątrz kontenera; godziny i nagłówki przyklejone. */
  .cal-wrap { overflow: auto; max-height: calc(100vh - 150px); -webkit-overflow-scrolling: touch; }
  /* Siatka musi być tak szeroka jak jej kolumny (max-content) — inaczej przyklejona kolumna godzin
     może się przesuwać tylko w obrębie szerokości ekranu i „zatrzymuje się” w środku grafiku. */
  .cal { grid-template-columns: var(--tpl-m); border-radius: 0; width: max-content; min-width: 100%; }
  /* Kolumna godzin przyklejona z lewej; bez własnej krawędzi (wyglądała jak linia przez gabinet),
     zamiast niej lekki cień widoczny tylko, gdy siatka jest przesunięta w bok. */
  .cal-times { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 0; box-shadow: 2px 0 6px -2px rgba(0,0,0,.12); }
  .cal .cal-head:first-child { position: sticky; left: 0; z-index: 4; border-right: 0; }
  .cal-places .cal-group:first-child { position: sticky; left: 0; z-index: 5; border-right: 0; }
  .cal-times .h { font-size: .65rem; right: 3px; }
  .cal-visit { font-size: .7rem; }
  .page-title { font-size: 1.1rem; }
  .money-group.input-group-sm .money-input { flex: 0 0 84px; width: 84px; }
}
@media (max-width: 575.98px) {
  .page-body { padding-top: .75rem; padding-bottom: 1rem; }
  .container-fluid { padding-left: .6rem; padding-right: .6rem; }
  .btn-group > .btn { padding-left: .5rem; padding-right: .5rem; }
}

/* Modale: treść modala to <form> owijający header/body/footer — musi być kolumną flex,
   inaczej .modal-body nie przewija się i przyciski Zapisz wypadają poza ekran (telefon). */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; }
  .modal-dialog-scrollable { height: calc(100% - 1rem); }
  .modal-footer { position: sticky; bottom: 0; background: var(--tblr-bg-surface, #fff); }
}

/* Pasek narzędzi list (wyszukiwarka + przełączniki): zawija się, pole rośnie, lupa na środku pola */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.toolbar-search { flex: 1 1 220px; max-width: 360px; }
@media (max-width: 991.98px) {
  .page-body { overflow-x: hidden; }
}

.rates-table { table-layout: fixed; width: 100%; }
.rates-table .rates-col { width: 40%; }
.rates-table td, .rates-table th { padding-left: .5rem; padding-right: .5rem; }
@media (max-width: 575.98px) {
  .rates-table .rates-col { width: 56%; }
  .rates-table .money-group .money-input { min-width: 36px; }
  .rates-table .money-group .input-group-text { display: none; }
}