/*
 * Theme CSS dla aplikacji uSell
 * Nadpisuje wartości zmiennych Bootstrap/Tabler
 */

/* Zmiana szerokości strony na 100% */
.container-xxl {
  max-width:95%;
}

/* Zmiana lewego marginesu na desktop */
@media (min-width: 992px) {
    .navbar-expand-lg.navbar-vertical~.navbar, .navbar-expand-lg.navbar-vertical~.page-wrapper {
        margin-left: 14rem;
    }
}

:root {
  /* Zmiana głównego koloru z #206bc4 na #2563eb (jasny niebieski) */
  --tblr-primary: #2563eb;
  --tblr-primary-rgb: 37, 99, 235;
  
  /* Powiązane kolory pochodne */
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #1d4ed8;
  --tblr-primary-darker: #1e40af;
  --tblr-primary-lighten: #3b82f6;
  --tblr-primary-lighter: #60a5fa;
  
  /* Czcionki systemu */
  --tblr-font-sans-serif: "Jost", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

/* Dostosowanie tła przycisków primary */
.btn-primary {
  --tblr-btn-color: var(--tblr-primary-fg);
  --tblr-btn-bg: var(--tblr-primary);
  --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: var(--tblr-primary-darken);
  --tblr-btn-hover-border-color: var(--tblr-primary-darker);
  --tblr-btn-active-color: var(--tblr-primary-fg);
  --tblr-btn-active-bg: var(--tblr-primary-darker);
  --tblr-btn-active-border-color: var(--tblr-primary-darker);
  --tblr-btn-disabled-color: var(--tblr-primary-fg);
  --tblr-btn-disabled-bg: var(--tblr-primary);
  --tblr-btn-disabled-border-color: var(--tblr-primary);
}

/* Ikony nawigacji głównej, aktywny kolor */
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon, 
.navbar-vertical .navbar-nav .nav-item.active .nav-link-icon {
  color: var(--tblr-primary);
}

/* Dostosowanie kolorów linków */
a {
  color: var(--tblr-primary);
}
a:hover {
  color: var(--tblr-primary-darken);
}

/* Kolor ikon w panelu bocznym */
.navbar-vertical .navbar-nav .nav-link.active {
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.1);
}

/* Globalne ustawienia czcionki dla całej aplikacji */
body {
  font-family: var(--tblr-font-sans-serif);
}

/* Dostosowanie kolorów paska postępu */
.progress-bar {
  background-color: var(--tblr-primary);
}

/* Dostosowanie kolorów boksów alertów primary */
.alert-primary {
  --tblr-alert-color: var(--tblr-primary-darker);
  --tblr-alert-bg: rgba(var(--tblr-primary-rgb), 0.1);
  --tblr-alert-border-color: rgba(var(--tblr-primary-rgb), 0.2);
}

/* Dostosowanie kolorów tekstów */
.text-primary {
  color: var(--tblr-primary) !important;
}

/* Dostosowanie kolorów tła */
.bg-primary {
  background-color: var(--tblr-primary) !important;
}

/* Dostosowanie kolorów obramowań */
.border-primary {
  border-color: var(--tblr-primary) !important;
}

/* Kolorystyka znaczników (badges) */
.badge.bg-primary {
  background-color: var(--tblr-primary) !important;
  color: var(--tblr-primary-fg);
}

/* Tabela - wiersz aktywny */
.table-primary {
  --tblr-table-bg: rgba(var(--tblr-primary-rgb), 0.1);
  --tblr-table-color: var(--tblr-primary-darker);
  --tblr-table-border-color: rgba(var(--tblr-primary-rgb), 0.2);
}

/* Kolorystyka switchów (przełączników) */
.form-switch .form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

/* Style dla sprawdzonych checkboxów */
.form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

/* Paginacja - dostosowanie kolorów aktywnej strony */
.page-item.active .page-link {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

.page-link {
  color: var(--tblr-primary);
}

.page-link:hover {
  color: var(--tblr-primary-darken);
}

/* Kolorystyka dropdownów */
.dropdown-item.active, 
.dropdown-item:active {
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

/* Style dla list group */
.list-group-item.active {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

/* Style dla navów i tabów */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

.nav-link {
  color: var(--tblr-primary);
}

.nav-link:hover, 
.nav-link:focus {
  color: var(--tblr-primary-darken);
}

.nav-tabs .nav-link.active {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
}

/* Karty - podświetlanie obramowania przy hoverze */
.card:hover {
  border-color: var(--tblr-primary-lighter);
}

/* Styl dla sliderów (zakresów) */
.form-range::-webkit-slider-thumb {
  background-color: var(--tblr-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--tblr-primary);
}

/* Styl dla focusa na inputach */
.form-control:focus, 
.form-select:focus {
  border-color: var(--tblr-primary-lighter);
  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

/* Dostosowanie kolorów dla tooltipów */
.tooltip .tooltip-inner {
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

.tooltip .tooltip-arrow::before {
  border-top-color: var(--tblr-primary);
}