/* Niezbędnik WP — khaki theme for Bootstrap 5 */
/* === Paleta === */
:root {
  --khaki-50:  #f5f4eb;
  --khaki-100: #efeee7;
  --khaki-200: #e2e1d4;
  --khaki-300: #c9c8b9;
  --khaki-400: #b0afa0;
  --khaki-500: #7a7964;
  --khaki-600: #6b6a57; /* główny */
  --khaki-700: #5b5a4a;
  --khaki-800: #4b4a3d;
  --khaki-900: #3d3c31;

  /* Bootstrap 5.3+ CSS variables */
  --bs-primary: var(--khaki-600);
  --bs-primary-rgb: 107,106,87;

  --bs-link-color: var(--khaki-600);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--khaki-700);
  --bs-link-hover-color-rgb: 91,90,74;

  --bs-focus-ring-color: rgba(107,106,87,.25);

  /* Subtle variants (BS 5.3) */
  --bs-primary-text-emphasis: var(--khaki-900);
  --bs-primary-bg-subtle: var(--khaki-100);
  --bs-primary-border-subtle: #d2d1c5;

  /* możesz dostroić te 3 zmienne pod swój gust */
  --field-bg:             var(--khaki-50);   /* lekkie, „papierowe” tło */
  --field-border:         #bdbca9;           /* ciemniejsze od defaultu */
  --field-border-hover:   #9a9988;           /* najechanie */
  --field-placeholder:    #8a8977;           /* placeholder bardziej widoczny */

    --bs-accordion-color: var(--khaki-900);
  --bs-accordion-bg: #fff; /* tło treści (body) */
  --bs-accordion-border-color: var(--bs-primary-border-subtle, #d2d1c5);

  --bs-accordion-btn-color: var(--khaki-900);
  --bs-accordion-btn-bg: var(--khaki-100);     /* nagłówek (collapsed) */
  --bs-accordion-active-color: var(--khaki-900);
  --bs-accordion-active-bg: var(--khaki-200);  /* nagłówek (open) */

  --bs-accordion-btn-focus-border-color: rgba(107,106,87,.5);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(107,106,87,.25);

  /* Kolor strzałki (caret) */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%235b5a4a' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);

}

/* === Global linki === */
a,
.link-primary { color: var(--khaki-600) !important; }
a:hover,
a:focus,
.link-primary:hover { color: var(--khaki-700) !important; }

/* Tekst i elementy „primary” */
.text-primary { color: var(--khaki-600) !important; }
.border-primary { border-color: var(--khaki-600) !important; }
.bg-primary { background-color: var(--khaki-600) !important; }
.bg-primary-subtle { background-color: var(--khaki-100) !important; }

/* === Focusy formularzy === */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(107,106,87,.25) !important;
  border-color: rgba(107,106,87,.5) !important;
  outline: 0;
}

/* === Przyciski (fallback dla BS < 5.3) === */
.btn-primary {
  color: #fff !important;
  background-color: var(--khaki-600) !important;
  border-color: var(--khaki-600) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  background-color: var(--khaki-700) !important;
  border-color: var(--khaki-700) !important;
}
.btn-outline-primary {
  color: var(--khaki-600) !important;
  border-color: var(--khaki-600) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--khaki-600) !important;
  border-color: var(--khaki-600) !important;
}

/* === Badge, alert, pagination, nav-pills, dropdown === */
.badge.bg-primary { background-color: var(--khaki-600) !important; }
.alert-primary {
  color: var(--khaki-900) !important;
  background-color: var(--khaki-100) !important;
  border-color: var(--bs-primary-border-subtle, #d2d1c5) !important;
}
.pagination .page-link {
  color: var(--khaki-600) !important;
  border-color: #d2d1c5 !important;
}
.page-item.active .page-link {
  color: #fff !important;
  background-color: var(--khaki-600) !important;
  border-color: var(--khaki-600) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  background-color: var(--khaki-600) !important;
}
.nav-link,
.navbar-nav .nav-link { color: var(--khaki-600) !important; }
.nav-link:hover,
.navbar-nav .nav-link:hover { color: var(--khaki-700) !important; }

.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  background-color: var(--khaki-600) !important;
}

/* === Kontrolki wejścia (checked/aktywny) === */
.form-check-input:checked {
  background-color: var(--khaki-600) !important;
  border-color: var(--khaki-600) !important;
}
.form-range::-webkit-slider-thumb { background-color: var(--khaki-600); }
.form-range::-moz-range-thumb    { background-color: var(--khaki-600); }

/* === Accordion akcent === */
.accordion-button:not(.collapsed) {
  color: var(--khaki-900);
  background-color: var(--khaki-100);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}

/* === Utility klasy (jak w Twojej stronie) === */
.bg-khaki-subtle { background-color: var(--khaki-100) !important; }
.border-khaki     { border-color: var(--khaki-600) !important; }
.text-khaki       { color: var(--khaki-600) !important; }

/* === Kafelki podsumowania (kalkulator uposażeń) === */
.summary-tile{
  background-color: var(--khaki-100);
  border: 1px solid var(--bs-primary-border-subtle, #d2d1c5);
  border-radius: .75rem;
  padding: .9rem .75rem;
}
.summary-tile .label{
  color: var(--khaki-900);
  font-weight: 600;
  font-size: .9rem;
}
.summary-tile .value{
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: .25rem;
}
/* Akcent lewego brzegu — odcienie khaki */
.summary-base{  border-left: 6px solid var(--khaki-600); } /* Uposażenie zasadnicze */
.summary-gross{ border-left: 6px solid var(--khaki-700); } /* Brutto (opodatk.) */
.summary-net{   border-left: 6px solid var(--khaki-500); } /* Netto (przelew) */

/* Karty w khaki-panelu – neutralne tło i delikatna ramka */
.bg-khaki-subtle .card,
.p-4.bg-khaki-subtle .card,
.p-5.bg-khaki-subtle .card {
  background-color: #fff;
  border-color: var(--bs-primary-border-subtle, #d2d1c5);
}

/* === Formularze: wyraźniejsze obramowanie i delikatne tło (khaki) === */
/* Pola tekstowe / selecty */
.form-control,
.form-select,
textarea.form-control{
  background-color: var(--field-bg) !important;
  border-color: var(--field-border) !important;
  color: var(--bs-body-color);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s;
}

/* Hover (gdy nie ma fokusa) */
.form-control:hover,
.form-select:hover,
textarea.form-control:hover{
  border-color: var(--field-border-hover) !important;
}

/* Focus – ring masz już w motywie; doprecyzujmy border, by był czytelny */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
  border-color: rgba(107,106,87,.55) !important; /* khaki */
  /* ring jest ustawiony wcześniej w motywie:
     box-shadow: 0 0 0 .25rem rgba(107,106,87,.25); */
}

/* Placeholder */
.form-control::placeholder,
textarea.form-control::placeholder{
  color: var(--field-placeholder) !important;
  opacity: .95;
}

/* Input-group, by nie „odcinał” się od pola */
.input-group .input-group-text{
  background-color: var(--khaki-100) !important;
  border-color: var(--field-border) !important;
  color: var(--khaki-900);
}

/* Checkboksy/radia – wyraźniejsza ramka w stanie neutralnym */
.form-check-input{
  border-color: var(--field-border) !important;
}
.form-check-input:hover{
  border-color: var(--field-border-hover) !important;
}

/* Disabled/readonly – subtelnie ciemniejsze tło + wyłączony hover */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
  background-color: var(--khaki-100) !important;
  border-color: var(--field-border) !important;
  color: #6c757d !important;
  opacity: 1; /* bez „wyszarzania” całego elementu */
}
.form-control:disabled:hover,
.form-select:disabled:hover{ border-color: var(--field-border) !important; }

/* Walidacja — zachowujemy kolory Bootstrapa, tylko wzmacniamy obramowanie */
.is-invalid.form-control,
.is-invalid.form-select{ border-color: #dc3545 !important; }
.is-valid.form-control,
.is-valid.form-select{ border-color: #198754 !important; }

/* (Opcjonalnie) form-floating — label czytelniejszy na khaki tle */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label{
  color: var(--khaki-700);
}

/* Dark mode (jeśli używasz data-bs-theme="dark") — kontrast wyższy */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select{
  background-color: #2f2f29 !important;
  border-color: #6f6e5e !important;
}
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover{
  border-color: #8a8977 !important;
}
[data-bs-theme="dark"] .input-group .input-group-text{
  background-color: #3a3a34 !important;
  border-color: #6f6e5e !important;
  color: #e9e9e2;
}

/* === FAQ: akordeon w kolorystyce khaki (czytelniejsze nagłówki) === */
/* Fallback dla starszych 5.x (bez zmiennych akordeonu) */
.accordion-item{
  border-color: var(--bs-accordion-border-color, #d2d1c5) !important;
}
.accordion-button{
  background-color: var(--khaki-100) !important;
  color: var(--khaki-900) !important;
}
.accordion-button:hover{
  background-color: var(--khaki-200) !important;
}
.accordion-button:not(.collapsed){
  background-color: var(--khaki-200) !important;
  color: var(--khaki-900) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
/* Focus w kolorze khaki */
.accordion-button:focus{
  border-color: rgba(107,106,87,.5) !important;
  box-shadow: 0 0 0 .25rem rgba(107,106,87,.25) !important;
  outline: 0;
}
/* Strzałka (caret) w odcieniu khaki */
.accordion-button::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%235b5a4a' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* Delikatna linia nad treścią dla lepszego oddzielenia */
.accordion-collapse{
  border-top: 1px solid var(--bs-accordion-border-color, #d2d1c5);
}

/* Trix x Bootstrap/khaki */
trix-editor.trix-khaki{
  min-height: 180px;
  background-color: var(--field-bg, var(--khaki-50));
  border: 1px solid var(--field-border, #bdbca9);
  border-radius: .5rem;
  padding: .75rem .9rem;
}
trix-editor.trix-khaki:focus{
  border-color: rgba(107,106,87,.55);
  box-shadow: 0 0 0 .25rem rgba(107,106,87,.25);
  outline: 0;
}
.trix-toolbar{
  background: var(--khaki-100);
  border: 1px solid var(--field-border, #bdbca9);
  border-radius: .5rem;
  margin-bottom: .5rem;
}
.trix-button-group{ border-color: var(--field-border, #bdbca9); }
.trix-button.trix-active{ background: var(--khaki-200); }
.trix-dialog{
  border-color: var(--field-border, #bdbca9);
  background: #fff;
}
.trix-dialog__link-fields .trix-input{
  border-color: var(--field-border, #bdbca9);
  background: var(--field-bg, var(--khaki-50));
}

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.form-control:disabled,
.input-group:has(.form-control:disabled) {
  opacity: .75;
}

.list-group-item {
    color: var(--khaki-900);
}