@charset "utf-8";
/* CSS Document */

/* Definice CSS proměnných pro barvy */
body {
  --text-color: #1a202c; /* Výchozí textová barva pro světlý režim */
  --background-color: #f7fafc; /* Výchozí barva pozadí pro světlý režim */
  --header-bg-color: #fff; /* Barva pozadí hlavičky ve světlém režimu */
  --footer-bg-color: #f8f9fa; /* Barva pozadí patičky ve světlém režimu */
  --card-bg-color: #fff; /* Barva pozadí karet ve světlém režimu */
  --card-border-color: #dee2e6; /* Barva okraje karet ve světlém režimu */
  --input-bg-color: #fff; /* Barva pozadí inputů ve světlém režimu */
  --logo-fill: #000; /* Barva loga ve světlém režimu */
  --chart-bg-color: #e6eefa; /* Barva pozadí grafů ve světlém režimu */
  --table-header-bg: #f8f9fa; /* Barva pozadí záhlaví tabulek ve světlém režimu */
  --table-even-row-bg: #f2f2f2; /* Barva sudých řádků tabulek ve světlém režimu */
}

body.dark-mode {
  --text-color: #f7fafc; /* Textová barva pro tmavý režim */
  --background-color: #1a202c; /* Barva pozadí pro tmavý režim */
  --header-bg-color: #2d3748; /* Barva pozadí hlavičky v tmavém režimu */
  --footer-bg-color: #2d3748; /* Barva pozadí patičky v tmavém režimu */
  --card-bg-color: #2d3748; /* Barva pozadí karet v tmavém režimu */
  --card-border-color: #4a5568; /* Barva okraje karet v tmavém režimu */
  --input-bg-color: #ffffff; /* Barva pozadí inputů v tmavém režimu (původně bílá) */
  --logo-fill: #fff; /* Barva loga v tmavém režimu */
  --chart-bg-color: #2d3748; /* Tmavší pozadí pro grafy v tmavém režimu */
  --table-header-bg: #2d3748; /* Tmavší pozadí záhlaví tabulek v tmavém režimu */
  --table-even-row-bg: #222c3d; /* Tmavší sudé řádky tabulek v tmavém režimu */
}
/* Styly pro text uvnitř karet */
.card .card-text,
.card .card-title {
  color: var(--text-color); /* Použijeme textovou barvu, která se mění s tématem */
}
/* Aplikace proměnných na relevantní elementy */
main {
  flex-grow: 1;
}

#theme-toggle i { /* Opravený selektor */
  color: var(--logo-fill); /* Použití proměnné pro konzistentní barvu */
}

.bi {
  color: inherit; /* Ponecháme inherit, aby se barva brala z nadřazeného elementu */
}

/* .dark-mode .bi styl je níže v upravených btn stylech */

body {
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color); /* Použití proměnné */
  color: var(--text-color); /* Použití proměnné */
}

body.dark-mode {
  background-color: var(--background-color); /* Použití proměnné */
  color: var(--text-color); /* Použití proměnné */
}

.cls-1 { fill: var(--logo-fill); } /* Použití proměnné */
.dark-mode .cls-1 { fill: var(--logo-fill) !important; } /* Použití proměnné s !important */

/* Form Control styly - ponechány původní, protože mají specifické barvy */
.dark-mode .form-control {
  background-color: #ffffff;
  color: #1a202c;
}
.dark-mode .form-label,
.dark-mode .invalid-feedback {
  color: #1a202c;
}

/* Footer styly */
.footer {
  background-color: var(--footer-bg-color); /* Použití proměnné */
  color: var(--text-color); /* Použití proměnné */
}
body.dark-mode .footer {
  background-color: var(--footer-bg-color); /* Použití proměnné */
  color: var(--text-color); /* Použití proměnné */
}

/* Equal height dashboard columns */
.row.align-items-stretch > .col-md-6 { display: flex; }
.row.align-items-stretch > .col-md-6 > section { flex: 1; }

/* Ensure header is opaque and above content */
header.fixed-top {
  z-index: 2000;
  background-color: var(--header-bg-color) !important; /* Použití proměnné s !important */
}
body.dark-mode header.fixed-top {
  background-color: var(--header-bg-color) !important; /* Použití proměnné s !important */
}

/* Pagination styles */
.pagination .page-item.active .page-link {
  background-color: #198754 !important;  /* Bootstrap success zelená */
  border-color: #198754 !important;
  color: #fff !important;
}
.pagination .page-link {
  color: #198754;
}
.pagination .page-link:hover {

  color: #157347;
}

/* Device Card styles */
.device-card {
  transition: background 0.2s, box-shadow 0.2s;
  background-color: var(--card-bg-color); /* Použití proměnné */
  border-color: var(--card-border-color); /* Použití proměnné */
}
.device-card:hover {
  background: #e9f7ef !important; /* Ponecháme fixní, pokud nemá být tmavý hover v dark-mode */
  box-shadow: 0 2px 16px 0 rgba(25,135,84,0.15);
  border-color: #198754 !important;
}
body.dark-mode .device-card:hover {
  background: #e9f7ef !important; /* Ponecháme fixní, pokud nemá být tmavý hover v dark-mode */
  border-color: #33ff99 !important;
}

/* MODAL CENTER + BIGGER IMAGE */
.modal {
  z-index: 2001 !important;
  overflow: hidden;
}
.modal-backdrop {
  z-index: 2000 !important;
}
#spzImageModal .modal-content {
  background: #111;
  border-radius: 10px;
  border: none;
}
#spzImageModal .modal-header {
  background: #222;
  color: #fff;
  border-bottom: none;
}
#spzImageModal .modal-body {
  padding: 0 !important;
  background: #111;
}
#spzModalImg {
  max-width: 98vw;
  max-height: 85vh;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  background: #000;
  border-radius: 6px;
}
/* Dočasné styly pro vynucení disabled vzhledu */
.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Styling for buttons in dark mode */
body.dark-mode .btn-outline-secondary {
  color: #ccc !important;
  border-color: #ccc !important;
  background-color: transparent !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary:active {
  color: #1a202c !important;
  background-color: #33ff99 !important;
  border-color: #33ff99 !important;
}
.btn-close-white {
  filter: invert(1);
}

/* Styling for buttons in light mode */
.btn-primary {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #157347 !important;
  border-color: #157347 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Styling for buttons in dark mode */
body.dark-mode .btn-primary {
  background-color: #33ff99 !important;
  border-color: #33ff99 !important;
  color: #1a202c !important;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active {
  background-color: #28cc7a !important;
  border-color: #28cc7a !important;
  color: #1a202c !important;
}

body.dark-mode .btn-outline-secondary {
  color: #ccc !important;
  border-color: #ccc !important;
  background-color: transparent !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary:active {
  color: #1a202c !important;
  background-color: #33ff99 !important;
  border-color: #33ff99 !important;
}

/* Zajištění, že se barva písma u ikon bi změní i v tlačítkách v dark mode */
.dark-mode .btn-primary .bi,
.dark-mode .btn-outline-secondary:hover .bi {
  color: #1a202c !important;
}

/* Hover efekt a orámování pro karty SPZ záznamů */
.spz-record-card {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border: 1px solid var(--card-border-color); /* Použití proměnné */
  background-color: var(--card-bg-color); /* Použití proměnné */
}

.spz-record-card:hover {
  background-color: #e6f7ff !important; /* Světle modrá barva pozadí */
  border-color: #198754 !important; /* Zelené ohraničení */
  box-shadow: 0 0 8px rgba(25, 135, 84, 0.2); /* Jemný stín pro zvýraznění */
  cursor: pointer;
}

body.dark-mode .spz-record-card:hover {
    background-color: #F3F90B !important; /* Tmavší pozadí pro dark mode */
    border-color: #FF9600 !important; /* Světlejší zelené ohraničení v dark mode */
    box-shadow: 0 0 8px rgba(51, 255, 153, 0.2);
}

/* Nové styly pro kompaktní zobrazení SPZ záznamů */
.spz-record-card .text-nowrap {
  white-space: nowrap;
}

/* Jemná úprava pro zarovnání obsahu uvnitř badge */
.spz-record-card .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

/* Optional: Pro mobilní zobrazení můžeme snížit mezeru */
@media (max-width: 767.98px) {
  .spz-record-card .d-flex.align-items-center.me-3 {
    margin-right: 0 !important;
  }
}

/* Úpravy pro obrázky SPZ */
.spz-image-thumb {
  transition: transform 0.2s ease-in-out;
}

.spz-image-thumb:hover {
  transform: scale(1.05);
}
/* Zmenšení miniatury fotky SPZ a sjednocení velikosti s místem bez fotky */
.spz-image-thumb,
.spz-image-thumb-disabled {
  width: 70px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Styl pro karty SPZ, které nemají být klikatelné (např. vyhledané SPZ) */
.spz-record-card.no-hover {
  background-color: var(--card-bg-color) !important; /* Použití proměnné */
  border-color: var(--card-border-color) !important; /* Použití proměnné */
  box-shadow: none !important;
  cursor: default !important;
}

/* Zmenšení písma a odsazení pro kompaktnější záznamy SPZ */
.spz-record-card .row .col-md-8 p {
    font-size: 0.9rem;
    margin-bottom: 0.25rem !important;
}

.spz-record-card .row .col-md-8 .d-flex strong {
    font-size: 1.0rem;
}

/* Upravené odsazení celé karty pro menší výšku */
.spz-record-card.card {
    padding: 0.75rem !important;
}

/* Sjednocená velikost miniatury fotky SPZ */
.spz-image-thumb,
.spz-image-thumb-disabled {
  width: 70px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Styly pro disabled obrázky (pokud je spz-image-thumb-disabled stále používáno pro demo) */
.spz-image-thumb-disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Nové styly pro progress bar a tabulky s grafy */
.card .progress {
    background: var(--chart-bg-color); /* Použití proměnné */
}

.chart-table td div.progress-bar-container {
    background: var(--chart-bg-color); /* Použití proměnné */
}

/* Barva textu v navigační liště, která byla předtím pevně definovaná */
.navbar-brand svg .cls-1 {
    fill: var(--logo-fill); /* Použití proměnné pro logo */
}

/* Texty v hlavičce */
.nav-item.text-primary, .nav-item.text-success {
    color: var(--text-color) !important; /* Zajistí, že barva textu uživatele se přepne */
}