/* ===== THEME VARS (light default) ===== */
:root{
  /* Bootstrap core */
  --bs-body-bg: #f8f9fa;            /* było: var(--bs-gray-100) */
  --bs-body-color: #111111;
  --bs-border-color: #ced4da;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-table-striped-bg: rgba(0,0,0,.05);
  --bs-table-striped-color: inherit;

  /* Twoje dodatki */
  --panel-bg: #ffffff;
  --panel-fg: #111111;
  --muted-bg: #e9ecef;
  --overlay: rgba(255,255,255,0.7);
  --popup-bg: #ffffff;
  --popup-fg: #111111;
  --hover-bg: #dbdbdbaa; /* dropdown hover */
  --accent-blue: #1C98FC;
  --danger: #dc3545;
  --ok: #111111;
}

/* ===== DARK MODE OVERRIDES ===== */
html[data-theme="dark"]{
  --bs-body-bg: #0e0e0f;
  --bs-body-color: #e6e6e6;
  --bs-border-color: #2d2f33;
  --bs-link-color: #89b4ff;
  --bs-link-hover-color: #b3cdfc;
  --bs-table-striped-bg: rgba(255,255,255,.03);

  --panel-bg: #151518;
  --panel-fg: #e6e6e6;
  --muted-bg: #222529;
  --overlay: rgba(0,0,0,0.6);
  --popup-bg: #1a1b1e;
  --popup-fg: #e6e6e6;
  --hover-bg: rgba(255,255,255,0.1);
  --accent-blue: #76b4ff;
  --danger: #ff6b6b;
  --ok: #e6e6e6;
}

/* ===== Global bindings ===== */
body{ background: var(--bs-body-bg); color: var(--bs-body-color); }

/* Leaflet popups */
.leaflet-popup-content-wrapper{ background: var(--popup-bg); color: var(--popup-fg); }

/* Tła/panele/ramki itp. */
#loading-overlay,
#loading-overlay-show{ background-color: var(--overlay); }
thead tr, th{ border-color: var(--bs-border-color); color: var(--bs-body-color); }
.nav-link {
  color: #fff !important;
  font-weight: bold;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: yellow !important;
  font-weight: bolder;
}

/* Muted / disabled */
.disabled{ background-color: var(--muted-bg); }

/* Twoje kolory bazuj na zmiennych gdzie się da */
.leaflet-top{ z-index: 500 !important; }
.dropdown-menu{ z-index: 1000; }
.dropdown-menu li a.dropdown-item:hover{ background-color: var(--hover-bg); color: var(--bs-body-color); }

/* Przykłady „stałych” kolorów przeniesionych na zmienne */
.blue, .blue:hover, .blue.focus, .blue.active{ color: var(--accent-blue) !important; font-weight: bold !important; }
.red, .red:hover, .red.focus, .red.active{ color: var(--danger) !important; font-weight: bold !important; }
.black, .black:hover, .black.focus, .black.active{ color: var(--ok) !important; font-weight: 100; }

/* Datatables – stronicowanie, hover itd. (zachowaj gradienty, ale pod kolory zmiennych) */
.dt-paging-button{ color: inherit !important; border-color: transparent; background: transparent; }
.dt-paging-button:hover{
  color: #fff !important;
  border: 1px solid var(--ok);
  background-color: var(--ok);
}
.dt-paging-button.current:hover{
  color: inherit !important;
  border: 1px solid var(--bs-border-color);
  background-color: rgba(0,0,0,0.05);
}
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before{ color: red; }
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after{ color: blue; }

/* Swiper miniatury z ciemnym tłem? */
.swiper-slide{ background: #000; }             /* zostawiasz jak było */
.date-caption{ color: #fff; }                   /* zostawiasz jak było */

/* Popup info na zdjęciu – użyj zmiennych */
.photo-info{
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}
html[data-theme="dark"] .photo-info{
  background-color: rgba(255,255,255,0.12);
  color: var(--panel-fg);
}

#darkModeSwitch {
  background-color: #ccc;
}
#darkModeSwitch:checked {
  background-color: #444;
}
html[data-theme="dark"] #darkModeSwitch {
  background-color: #555;
}
html[data-theme="dark"] #darkModeSwitch:checked {
  background-color: #ddd;
}

html[data-theme="dark"] .breadcrumb-item.active {
  color: var(--bs-body-color);
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  color: var(--bs-body-color);
}

div[style*="background-color: white"] .row div {
  color: #000 !important;
}

/* === INPUTY w trybie ciemnym === */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid var(--bs-border-color);
}

/* === Placeholdery w trybie ciemnym === */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #888;
}

/* === input-group-text (np. ikona z lewej strony inputa) === */
html[data-theme="dark"] .input-group-text {
  background-color: #2c2c2c;
  color: #fff;
  border: 1px solid var(--bs-border-color);
}

/* Zwiększenie czytelności disabled inputów w ciemnym trybie */
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] .form-control:disabled {
  background-color: #2a2a2a !important;
  color: #ccc !important;
  opacity: 1 !important;
  border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dt-paging-button.disabled {
  color: #ccc !important;
}

/* Niekliknięty (unchecked) przełącznik – domyślny wygląd */
.form-check-input:not(:checked) {
    background-color: #ccc;        /* szare tło suwaka */
    border-color: #ccc;            /* szara ramka (jeśli nie masz border-0) */
}

/* Kółko w środku – tylko jeśli jest widoczne (np. w Firefoxie) */
.form-check-input:not(:checked)::before {
    background-color: #ccc;
}

/* Dodatkowo usuń niebieski focus */
.form-check-input:focus {
    outline: none;
    box-shadow: none;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid var(--bs-border-color);
}

/* Breadcrumb */
.breadcrumb {
  color: var(--bs-body-color);
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--bs-body-color);
}

.breadcrumb-item.active {
  color: var(--bs-body-color);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-body-color);
  opacity: .65;
}

html[data-theme="dark"] select:disabled {
  background-color: var(--muted-bg) !important;
  color: var(--bs-body-color) !important;
  opacity: 0.6 !important;
  border-color: var(--bs-border-color) !important;
}

/* ===== Rejestracja użytkownika ===== */
.register-section {
  background-color: var(--bs-body-bg);
}

.register-card {
  background-color: var(--panel-bg);
  color: var(--panel-fg);
  border: 1px solid var(--bs-border-color);
  border-radius: 25px;
}

.register-card .card-body {
  color: var(--panel-fg);
}

.register-card p,
.register-card h1,
.register-card h2,
.register-card h3,
.register-card h4,
.register-card h5,
.register-card h6,
.register-card label,
.register-card small,
.register-card li,
.register-card ul,
.register-card span,
.register-card i,
.register-card abbr {
  color: inherit;
}

.register-card .form-text {
  color: inherit;
  opacity: .85;
}

.register-card .text-center,
.register-card .fw-bold,
.register-card .h1 {
  color: var(--panel-fg);
}

.register-card .form-control {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

.register-card .form-control::placeholder {
  color: rgba(128,128,128,.9);
}

html[data-theme="dark"] .register-card .form-control {
  background-color: #1e1e1e;
  color: #fff;
  border-color: var(--bs-border-color);
}

html[data-theme="dark"] .register-card .form-control::placeholder {
  color: #888;
}

.register-card .btn:disabled {
  opacity: 1;
}

html[data-theme="dark"] .register-card .btn:disabled {
  background-color: #2a2a2a;
  border-color: var(--bs-border-color);
  color: #aaa;
}

.register-card .is-invalid {
  border-color: var(--danger) !important;
}

.register-card .is-valid {
  border-color: #198754 !important;
}

html[data-theme="dark"] .register-card .toast-header {
  background-color: var(--muted-bg);
  color: var(--panel-fg);
  border-bottom: 1px solid var(--bs-border-color);
}

html[data-theme="dark"] .register-card .btn-close {
  filter: invert(1);
}

html[data-theme="dark"] .dropdown-menu {
  background-color: var(--panel-bg);
  border: 1px solid var(--bs-border-color);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--bs-body-color);
  background-color: transparent;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu .dropdown-item.active,
html[data-theme="dark"] .dropdown-menu .dropdown-item:active,
html[data-theme="dark"] .dropdown-menu .show > .dropdown-item {
  background-color: var(--hover-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-divider {
  border-top-color: var(--bs-border-color);
}

html[data-theme="dark"] .dropdown-menu .dropdown-divider {
  border-top: 1px solid #444;
  opacity: 1;
}

html[data-theme="dark"] .tooltip {
  --bs-tooltip-bg: #1a1b1e;
  --bs-tooltip-color: #e6e6e6;
  --bs-tooltip-opacity: 1;
}

html[data-theme="dark"] .tooltip .tooltip-inner {
  background-color: var(--popup-bg);
  color: var(--popup-fg);
  border: 1px solid var(--bs-border-color);
}

html[data-theme="dark"] .tooltip .tooltip-arrow::before {
  border-top-color: var(--popup-bg) !important;
  border-bottom-color: var(--popup-bg) !important;
  border-left-color: var(--popup-bg) !important;
  border-right-color: var(--popup-bg) !important;
}

/* ===== Ikony kalendarza / czasu w dark mode ===== */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"] {
  color-scheme: dark !important;
  -webkit-appearance: none;
  appearance: none;
}

html[data-theme="dark"] button.dt-paging-button[aria-disabled="true"],
html[data-theme="dark"] button.dt-paging-button[aria-disabled="true"]:hover,
html[data-theme="dark"] button.dt-paging-button[aria-disabled="true"]:focus,
html[data-theme="dark"] button.dt-paging-button[aria-disabled="true"]:active {
  color: #8f949b !important;
  -webkit-text-fill-color: #8f949b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="dark"] .vms-card {
  background-color: var(--panel-bg);
  color: var(--panel-fg);
  border-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
    border: 1px solid var(--bs-border-color) !important;
}

.nav-tabs .nav-link.active {
    border: 1px solid var(--bs-border-color) !important;
}

/* Dark mode */
html[data-theme="dark"] .nav-tabs .nav-link {
    border-color: #3a3d42 !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    border-color: #4a4d52 !important;
    color: #000 !important;
}