/*
 * Wspólny pasek filtrów list w panelu (.vf-filters).
 * Użycie: <form class="vf-filters"> z polami .vf-field (label + input/select) i blokiem .vf-actions.
 * Pole z ustawionym (niedomyślnym) filtrem dostaje klasę .is-active - wyróżnione obramowanie.
 */
.vf-filters {
  --vf-border: #e3e7ee;
  --vf-bg: #f3f5f9;
  --vf-text: #3a3f4b;
  --vf-muted: #8a93a3;
  --vf-accent: #36b9cc;
  --vf-accent-dark: #2a9fb0;
  --vf-ring: rgba(54, 185, 204, .15);
  background: #fff;
  border: 1px solid var(--vf-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vf-filters .vf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.vf-filters .vf-field { display: flex; flex-direction: column; flex: 1 1 170px; min-width: 150px; max-width: 240px; }
.vf-filters .vf-field.vf-w-lg { flex-basis: 240px; max-width: 320px; }
.vf-filters .vf-field.vf-w-sm { flex-basis: 120px; min-width: 110px; max-width: 160px; }

/* Checkbox / przełącznik jako filtr - wysokość jak pola, żeby trzymał linię */
.vf-filters .vf-check {
  display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .8rem;
  border: 1px solid var(--vf-border); border-radius: 10px; background: var(--vf-bg);
  font-size: .875rem; color: var(--vf-text); cursor: pointer; white-space: nowrap; margin: 0;
}
.vf-filters .vf-check input[type=checkbox] { transform: none; margin: 0; accent-color: var(--vf-accent); }
.vf-filters .vf-field.is-active .vf-check { background: #fff; border-color: var(--vf-accent); }

/* select2 z wieloma wartościami */
.vf-filters .select2-container--default .select2-selection--multiple {
  min-height: 38px; border: 1px solid var(--vf-border); border-radius: 10px; background-color: var(--vf-bg);
}
.vf-filters .select2-container--default.select2-container--focus .select2-selection--multiple {
  background-color: #fff; border-color: var(--vf-accent); box-shadow: 0 0 0 3px var(--vf-ring);
}
.vf-filters .vf-field.is-active .select2-selection--multiple { background-color: #fff; border-color: var(--vf-accent); }
.vf-filters .vf-field > label {
  font-size: .72rem; font-weight: 500; color: var(--vf-muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 5px 2px;
}

/* Pola: input, select, select2 - wspólny wygląd */
.vf-filters .form-control,
.vf-filters .form-select,
.vf-filters .select2-container--default .select2-selection--single {
  height: 38px; border: 1px solid var(--vf-border); border-radius: 10px;
  background-color: var(--vf-bg); color: var(--vf-text); font-size: .875rem;
  box-shadow: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.vf-filters .form-control { padding: .375rem .8rem; }
/* template.css ustawia .form-control { margin-bottom: 6px !important } - w pasku filtrów pola muszą stać w jednej linii */
.vf-filters .form-control,
.vf-filters .form-select,
.vf-filters .select2-container { margin: 0 !important; }
.vf-filters .form-control,
.vf-filters .form-select { height: 38px !important; line-height: 1.5; }
.vf-filters .form-select { padding: .375rem 2.25rem .375rem .8rem; }
.vf-filters .form-control::placeholder { color: #a3abb9; }
.vf-filters .form-control:focus,
.vf-filters .form-select:focus,
.vf-filters .select2-container--focus .select2-selection--single,
.vf-filters .select2-container--open .select2-selection--single {
  background-color: #fff; border-color: var(--vf-accent); box-shadow: 0 0 0 3px var(--vf-ring); outline: none;
}
.vf-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px; padding-left: .8rem; padding-right: 2rem; color: var(--vf-text);
}
.vf-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; }

/* Ustawiony filtr */
.vf-filters .vf-field.is-active > label { color: var(--vf-accent-dark); }
.vf-filters .vf-field.is-active .form-control,
.vf-filters .vf-field.is-active .form-select,
.vf-filters .vf-field.is-active .select2-selection--single {
  background-color: #fff; border-color: var(--vf-accent);
}

/* Input z ikoną lupy */
.vf-filters .vf-input-icon { position: relative; }
.vf-filters .vf-input-icon > i {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: #9aa3b2; font-size: .8rem; pointer-events: none;
}
.vf-filters .vf-input-icon > .form-control { padding-left: 2.1rem; }

/* Przyciski */
.vf-filters .vf-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vf-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1rem;
  border-radius: 10px; border: 1px solid transparent; font-size: .85rem; font-weight: 500;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.vf-btn:hover { text-decoration: none; }
.vf-btn-primary { background: #36b9cc; color: #fff; }
.vf-btn-primary:hover { background: #2a9fb0; color: #fff; }
.vf-btn-ghost { background: transparent; color: #6b7280; border-color: #e3e7ee; }
.vf-btn-ghost:hover { background: #fdecec; color: #c53030; border-color: #f3b4b4; }
.vf-btn-soft { background: #fff7e6; color: #8a5a00; border-color: #f6d58e; height: 32px; font-size: .8rem; }
.vf-btn-soft:hover { background: #ffefcc; color: #6b4600; }
/* Pobieranie plików (XLS, PDF, ZIP, CSV...) - zielony, ikona wg typu pliku */
.vf-btn-download { background: #e9f7ef; color: #1e6b43; border-color: #b9e3c9; height: 32px; font-size: .8rem; }
.vf-btn-download:hover { background: #d6f0e1; color: #155234; }
/* Akcja nieodwracalna/usuwająca w stopce */
.vf-btn-danger { background: #fdecec; color: #a12c2c; border-color: #f3b4b4; height: 32px; font-size: .8rem; }
.vf-btn-danger:hover { background: #fadada; color: #8a2020; }
.vf-btn .vf-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgba(255, 255, 255, .28); font-size: .7rem; font-weight: 600;
}

/* Stopka (np. eksport) */
.vf-filters .vf-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vf-border);
}
.vf-filters .vf-footer-label { font-size: .72rem; color: var(--vf-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
/* Separator między grupą akcji a grupą pobierania w stopce */
.vf-filters .vf-footer-sep { width: 1px; height: 20px; background: var(--vf-border); margin: 0 4px; }
/* Formularze-nośniki dla przycisków z atrybutem form="..." (POST z ukrytymi polami) */
.vf-hidden-form { display: none; }

@media (max-width: 767.98px) {
  .vf-filters .vf-field, .vf-filters .vf-field.vf-w-lg { max-width: none; flex-basis: 100%; }
  .vf-filters .vf-actions { margin-left: 0; width: 100%; }
  .vf-filters .vf-actions .vf-btn { flex: 1; justify-content: center; }
}

/* Pole daty otwiera kalendarz po kliknięciu w całe pole (skrypt w template.php) */
.vf-filters input[type=date], .vf-filters input[type=datetime-local], .vf-filters input[type=month] { cursor: pointer; }

/* Panel z samymi akcjami (strony bez filtrów): <div class="vf-filters vf-actions-only"><div class="vf-footer">...</div></div> */
.vf-filters.vf-actions-only { padding: 10px 16px; }
.vf-filters.vf-actions-only .vf-footer { margin-top: 0; padding-top: 0; border-top: 0; }

/*
 * Przyciski akcji w wierszu tabeli - kwadrat z ikoną, kolor wg rodzaju akcji, podpis w dymku (data-vf-tip):
 *   <span class="vf-row-actions">
 *     <a href="..." class="vf-row-btn vf-rb-edit"   data-vf-tip="Edytuj"   aria-label="Edytuj"><i class="fa-solid fa-pen"></i></a>
 *     <a href="..." class="vf-row-btn vf-rb-info"   data-vf-tip="Szczegóły" aria-label="Szczegóły"><i class="fa-solid fa-eye"></i></a>
 *     <button       class="vf-row-btn vf-rb-danger" data-vf-tip="Usuń"     aria-label="Usuń"><i class="fa-solid fa-trash"></i></button>
 *   </span>
 * Kolory (jak w Bootstrapie): vf-rb-edit = żółty (warning), vf-rb-danger = czerwony, vf-rb-info = niebieski,
 * vf-rb-success = zielony (np. zaloguj, aktywuj, pobierz), bez modyfikatora = neutralny szary.
 * Wariant z tekstem: dodaj klasę vf-rb-text i wpisz tekst po ikonie.
 */
.vf-row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.vf-row-btn {
  --rb-bg: #f1f3f6; --rb-fg: #6b7280; --rb-border: #e3e7ee; --rb-hover-bg: #6b7280; --rb-hover-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid var(--rb-border); background: var(--rb-bg); color: var(--rb-fg);
  font-size: .8rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.vf-row-btn i, .vf-row-btn:link i, .vf-row-btn:visited i { font-size: .8rem; color: var(--rb-fg) !important; }
.vf-row-btn:hover i, .vf-row-btn:focus-visible i { color: var(--rb-hover-fg) !important; }
.vf-row-btn:hover, .vf-row-btn:focus-visible { background: var(--rb-hover-bg); border-color: var(--rb-hover-bg); color: var(--rb-hover-fg); text-decoration: none; }
.vf-row-btn:active { transform: translateY(1px); }
.vf-row-btn.vf-rb-text { width: auto; padding: 0 .75rem; }

.vf-row-btn.vf-rb-edit    { --rb-bg: #fff3cd; --rb-fg: #997404; --rb-border: #ffe69c; --rb-hover-bg: #ffc107; --rb-hover-fg: #3d2e00; }
.vf-row-btn.vf-rb-danger  { --rb-bg: #f8d7da; --rb-fg: #b02a37; --rb-border: #f1aeb5; --rb-hover-bg: #dc3545; --rb-hover-fg: #fff; }
.vf-row-btn.vf-rb-info    { --rb-bg: #cfe2ff; --rb-fg: #0a58ca; --rb-border: #9ec5fe; --rb-hover-bg: #0d6efd; --rb-hover-fg: #fff; }
.vf-row-btn.vf-rb-success { --rb-bg: #d1e7dd; --rb-fg: #146c43; --rb-border: #a3cfbb; --rb-hover-bg: #198754; --rb-hover-fg: #fff; }

/* Dymek z podpisem (bez JS - działa też po przerysowaniu DataTables) */
[data-vf-tip]::after {
  content: attr(data-vf-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 3px);
  padding: .3rem .55rem; border-radius: 6px; background: #26333b; color: #fff;
  font-size: .72rem; font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s, transform .12s; z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
[data-vf-tip]:hover::after, [data-vf-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Przycisk nieaktywny (np. „Duplikuj” przed wyborem programu) */
.vf-btn:disabled, .vf-btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Akceptacja/zatwierdzenie (np. „Zaznaczone: OK”) - zielony, jak pobieranie */
.vf-btn-success { background: #d1e7dd; color: #146c43; border-color: #a3cfbb; }
.vf-btn-success:hover { background: #198754; border-color: #198754; color: #fff; }
.vf-btn.vf-btn-danger { height: 38px; font-size: .85rem; }
.vf-btn-danger:hover { background: #dc3545; border-color: #dc3545; color: #fff; }

/* Szerokie pole filtra (np. wielokrotny wybór produktów) */
.vf-filters .vf-field.vf-w-xl { flex: 2 1 320px; max-width: 560px; }
/* TomSelect w pasku filtrów: przenosi klasę form-select na wrapper - stała wysokość ucinałaby wybrane pozycje */
.vf-filters .ts-wrapper.form-select, .vf-filters .ts-wrapper.form-control { height: auto !important; min-height: 38px; padding: 0 !important; border: 0; background: none; }
.vf-filters .ts-wrapper .ts-control { min-height: 38px; border: 1px solid var(--vf-border) !important; border-radius: 10px !important; background-color: var(--vf-bg) !important; padding: .3rem .6rem; font-size: .875rem; box-shadow: none; }
.vf-filters .ts-wrapper.focus .ts-control { background-color: #fff !important; border-color: var(--vf-accent) !important; box-shadow: 0 0 0 3px var(--vf-ring); }
.vf-filters .ts-wrapper.multi .ts-control > .item { background: #e8f7fa; border: 1px solid #a9dfe7; color: #1f7f8d; border-radius: 6px; }