/* ==========================================================================
   SEKCE SVĚTLOMETY (Sjednoceno do luxusního 1-ŘÁDKOVÉHO GRIDU)
   ========================================================================== */

/* 1. HLAVNÍ LAYOUT A SEZNAMY */
.lights-section .jc-acc-panel { 
  padding-top: 0; 
}

.lights-checklist,
.lights-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* 2. PEVNÉ ŘÁDKY (Checklist) */
.lights-check-item {
  display: grid !important;
  align-items: start !important; /* Vše visí nahoře, nesjíždí na střed */
  /* 4 sloupce: Stav | Label | Poznámka | Soubor */
  grid-template-columns: 40px 320px minmax(0, 1fr) 220px !important;
  grid-template-areas: "state label note file" !important;
  gap: 16px !important;
  padding: 20px 16px !important; 
  min-height: 80px !important; 
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
}

.lights-check-item .jc-state { 
  grid-area: state !important; /* Pevné jméno zamezí skákání */
  justify-self: center !important; 
  margin-top: 6px !important; /* Srovnání kolečka s textem vpravo */
}

.lights-check-item .lights-note { 
  grid-area: note !important; 
}

.lights-check-item .lights-file { 
  grid-area: file !important; 
  width: 220px !important; 
}

.lights-check-item .lights-item-label {
  grid-area: label !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  align-self: start !important; /* Nadpis drží nahoře s kolečkem */
  padding-top: 6px !important; /* Srovnání nadpisu s kolečkem */
}

/* 3. STAVOVÉ KOLEČKO (Obrana proti vajíčku) */
.lights-section .jc-state,
.lights-check-item .jc-state,
.lights-note-item .jc-state {
  width: 36px !important; 
  height: 36px !important; 
  min-width: 36px !important; 
  min-height: 36px !important;
  flex-shrink: 0 !important; 
  border-radius: 50% !important; 
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important; 
  cursor: pointer !important; 
  display: grid !important;
  place-items: center !important; 
  transition: transform 0.1s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; 
  margin: 0 !important; 
  padding: 0 !important;
  box-sizing: border-box !important; 
  font-size: 0 !important;
}

.lights-section .jc-state:active,
.lights-check-item .jc-state:active,
.lights-note-item .jc-state:active { 
  transform: scale(0.9) !important; 
}

.lights-section .jc-state::before,
.lights-check-item .jc-state::before,
.lights-note-item .jc-state::before { 
  content: '•' !important; 
  color: #ffffff !important; 
  font-size: 18px !important; 
  font-weight: bold !important; 
}

.lights-section .jc-state[data-state="ok"],
.lights-check-item .jc-state[data-state="ok"],
.lights-note-item .jc-state[data-state="ok"] { 
  background-color: rgba(16, 185, 129, 0.15) !important; 
  border-color: rgba(16, 185, 129, 0.5) !important; 
}

.lights-section .jc-state[data-state="ok"]::before,
.lights-check-item .jc-state[data-state="ok"]::before,
.lights-note-item .jc-state[data-state="ok"]::before { 
  content: '✔' !important; 
}

.lights-section .jc-state[data-state="bad"], 
.lights-section .jc-state[data-state="warn"],
.lights-check-item .jc-state[data-state="bad"],
.lights-check-item .jc-state[data-state="warn"],
.lights-note-item .jc-state[data-state="bad"],
.lights-note-item .jc-state[data-state="warn"] { 
  background-color: rgba(239, 68, 68, 0.15) !important; 
  border-color: rgba(239, 68, 68, 0.5) !important; 
}

.lights-section .jc-state[data-state="bad"]::before, 
.lights-section .jc-state[data-state="warn"]::before,
.lights-check-item .jc-state[data-state="bad"]::before,
.lights-check-item .jc-state[data-state="warn"]::before,
.lights-note-item .jc-state[data-state="bad"]::before,
.lights-note-item .jc-state[data-state="warn"]::before { 
  content: '!' !important; 
}

/* 4. POZNÁMKY (Statické i dynamické políčko) */
.lights-check-item .lights-note,
.lights-note-item .note-text {
  display: block !important; 
  width: 100% !important; 
  min-width: 100% !important; 
  max-width: none !important;
  border-radius: 10px !important; 
  border: 2px solid #777 !important; 
  background-color: #1e1e24 !important;
  padding: 10px 12px !important; 
  height: 48px !important; 
  color: #fff !important; 
  box-sizing: border-box !important;
  font-size: 15px !important; 
  margin: 0 !important;
}

.lights-check-item .lights-note::placeholder, 
.lights-note-item .note-text::placeholder { 
  color: rgba(255,255,255,.55) !important; 
}

/* 5. INPUT SOUBORU */
.lights-check-item .lights-file,
.lights-note-item .note-file {
  display: flex !important; 
  flex-direction: column !important; 
  gap: 6px !important; 
  position: relative !important; 
  margin: 0 !important; 
  width: 220px !important;
}

.lights-check-item .lights-file input[type="file"], 
.lights-note-item .note-file input[type="file"] { 
  width: 100% !important; 
  margin: 0 !important; 
  font-size: 13px !important; 
  color: #dddddd !important; 
  cursor: pointer !important; 
}

/* 6. DYNAMICKÉ ŘÁDKY (Přidané poznámky) */
.lights-extra { 
  margin-top: 16px; 
}

.lights-note-item {
  display: grid !important; 
  align-items: start !important; /* I tady vše visí hezky nahoře */
  /* 4 sloupce (bez labelu): Stav | Poznámka | Soubor | Křížek */
  grid-template-columns: 40px minmax(0, 1fr) 220px 40px !important;
  grid-template-areas: "state note file remove" !important;
  gap: 16px !important; 
  padding: 20px 16px !important; 
  min-height: 80px !important; 
  margin-bottom: 12px !important;
  border-radius: 12px !important; 
  border: 2px solid #f0f0f2 !important; 
  background-color: #3a3a47 !important;
}

.lights-note-item .jc-state { 
  grid-area: state !important; 
  justify-self: center !important; 
  margin-top: 6px !important; /* Srovnání kolečka s inputem */
}

.lights-note-item .note-text { 
  grid-area: note !important; 
}

.lights-note-item .note-file { 
  grid-area: file !important; 
}

.lights-note-item .note-remove {
  grid-area: remove !important; /* Drží se ve svém sloupci */
  align-self: end !important; /* Sjíždí úplně dolů */
  background: transparent !important; 
  border: none !important; 
  color: #ef4444 !important;
  font-size: 24px !important; 
  font-weight: bold !important; 
  cursor: pointer !important; 
  justify-self: center !important; 
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.lights-note-item .note-remove:hover { 
  color: #ff6b6b !important; 
}

/* 7. TLAČÍTKO + PŘIDAT POZNÁMKU */
.lights-add-note-btn {
  display: block !important; 
  width: 200px !important; 
  max-width: 100% !important;
  padding: 12px 20px !important; 
  margin: 20px auto !important;
  background-color: #a73014 !important; 
  border: 2px solid #f0f0f2 !important; 
  border-radius: 25px !important;
  color: #ffffff !important; 
  font-weight: bold !important; 
  cursor: pointer !important; 
  text-align: center !important;
}

/* 8. TVRDÝ ZÁMEK VELIKOSTI (Náhledy fotek v pevných i dynamických řádcích) */
.lights-check-item .lights-preview,
.lights-note-item .note-preview {
  width: 220px !important; 
  max-width: 220px !important; 
  margin-top: 6px !important; 
  display: block !important;
}

.lights-section .ph,
.lights-check-item .lights-preview > div {
  position: relative !important;
  width: 220px !important; 
  min-width: 220px !important; 
  max-width: 220px !important;
  height: 160px !important; 
  min-height: 160px !important; 
  max-height: 160px !important;
  border-radius: 10px !important; 
  overflow: hidden !important; 
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.04) !important; 
  display: block !important; 
  margin: 0 !important; 
  box-sizing: border-box !important;
}

.lights-section .ph img,
.lights-check-item .lights-preview > div img {
  width: 100% !important; 
  max-width: 100% !important; 
  height: 100% !important; 
  max-height: 100% !important;
  object-fit: cover !important; 
  display: block !important; 
  cursor: zoom-in !important; 
  transition: transform 0.3s ease !important;
}

.lights-section .ph:hover img,
.lights-check-item .lights-preview > div:hover img { 
  transform: scale(1.05) !important; 
}

/* Tlačítko křížku přímo na fotce */
.lights-section .ph .photo-remove,
.lights-check-item .lights-preview > div .photo-remove {
  position: absolute !important; 
  top: 6px !important; 
  right: 6px !important; 
  border: none !important; 
  border-radius: 8px !important;
  padding: 6px 8px !important; 
  background: rgba(0, 0, 0, 0.55) !important; 
  color: #fff !important; 
  font-size: 14px !important;
  z-index: 10 !important; 
  line-height: 1 !important; 
  cursor: pointer !important;
}

.lights-section .ph .photo-remove:hover,
.lights-check-item .lights-preview > div .photo-remove:hover { 
  background: rgba(220, 38, 38, 1) !important; 
}

/* =========================================================
   MOBILNÍ ZOBRAZENÍ
   ========================================================= */
@media (max-width: 900px) {
  .lights-check-item {
    grid-template-areas: 
      "state label" 
      "state note" 
      "state file" !important;
    grid-template-columns: 40px 1fr !important; 
    row-gap: 8px !important; 
    min-height: auto !important; 
    padding: 16px !important;
  }
  
  .lights-note-item {
    grid-template-areas: 
      "state remove" 
      "note note" 
      "file file" !important;
    grid-template-columns: 40px 1fr !important; 
    row-gap: 8px !important; 
    min-height: auto !important; 
    padding: 16px !important;
  }
  
  .lights-check-item .lights-file,
  .lights-note-item .note-file,
  .lights-check-item .lights-preview,
  .lights-note-item .note-preview,
  .lights-note-item > div {
    width: 100% !important; 
    max-width: 100% !important;
  }

  /* Na mobilu fotka nesmí být guma! */
  .lights-section .ph,
  .lights-check-item .lights-preview > div {
    width: 220px !important; 
    height: 160px !important; 
    max-width: 100% !important;
  }
  
  /* Vrácení křížku hezky nahoru vedle kolečka v mobilní verzi */
  .lights-note-item .note-remove {
    align-self: start !important;
    justify-self: end !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================================================== 
   SVĚTLOMETY – SJEDNOCENÝ ČTYŘSTAVOVÝ CHECKLIST
   ========================================================================== */
#sekce-svetlomety .lights-checklist,
#sekce-svetlomety .lights-note-list {
  gap: 8px !important;
}

#sekce-svetlomety .lights-check-item {
  grid-template-columns: minmax(180px, 260px) 152px minmax(240px, 1fr) 56px !important;
  grid-template-areas: "label state note file" !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 132px !important;
  padding: 20px 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: #343441 !important;
}

#sekce-svetlomety .lights-check-item.has-photo {
  grid-template-columns: minmax(180px, 260px) 152px minmax(240px, 1fr) 150px !important;
}

#sekce-svetlomety .lights-item-label {
  grid-area: label !important;
  align-self: center !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#sekce-svetlomety .jc-state {
  grid-area: state !important;
  justify-self: stretch !important;
  width: 152px !important;
  min-width: 152px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 10px !important;
  background: #282832 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  box-shadow: none !important;
  color: #c7ccd5 !important;
  font-size: 12px !important;
}

#sekce-svetlomety .jc-state::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #8f96a3 !important;
  box-shadow: none !important;
}

#sekce-svetlomety .jc-state::after {
  content: 'Nezkontrolováno' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#sekce-svetlomety .jc-state[data-state="ok"] {
  color: #8be0bb !important;
  border-color: rgba(16,185,129,.42) !important;
  background: rgba(16,185,129,.11) !important;
}
#sekce-svetlomety .jc-state[data-state="ok"]::before { background:#32c98a !important; box-shadow:0 0 0 3px rgba(50,201,138,.13) !important; }
#sekce-svetlomety .jc-state[data-state="ok"]::after { content:'V pořádku' !important; }

#sekce-svetlomety .jc-state[data-state="warn"] {
  color: #f5ca72 !important;
  border-color: rgba(245,158,11,.48) !important;
  background: rgba(245,158,11,.11) !important;
}
#sekce-svetlomety .jc-state[data-state="warn"]::before { background:#f2ad32 !important; box-shadow:0 0 0 3px rgba(245,158,11,.14) !important; }
#sekce-svetlomety .jc-state[data-state="warn"]::after { content:'S výhradou' !important; }

#sekce-svetlomety .jc-state[data-state="bad"] {
  color: #ffaaa6 !important;
  border-color: rgba(239,68,68,.45) !important;
  background: rgba(239,68,68,.11) !important;
}
#sekce-svetlomety .jc-state[data-state="bad"]::before { background:#ef5b57 !important; box-shadow:0 0 0 3px rgba(239,68,68,.13) !important; }
#sekce-svetlomety .jc-state[data-state="bad"]::after { content:'Závada' !important; }

#sekce-svetlomety .lights-note,
#sekce-svetlomety .note-text {
  grid-area: note !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 10px !important;
  background: #222229 !important;
  color: #fff !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

#sekce-svetlomety .lights-note:focus,
#sekce-svetlomety .note-text:focus {
  border-color: #4591d5 !important;
  outline: 2px solid rgba(69,145,213,.14) !important;
}

#sekce-svetlomety .lights-file,
#sekce-svetlomety .note-file {
  grid-area: file !important;
  position: relative !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

#sekce-svetlomety .lights-file:not(.has-preview)::after,
#sekce-svetlomety .note-file:not(.has-preview)::after {
  content: '▧';
  position: absolute;
  inset: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: #292933;
  color: #c7d0dc;
  font-size: 16px;
  pointer-events: none;
  z-index: 3;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

#sekce-svetlomety .lights-file:not(.has-preview):hover::after,
#sekce-svetlomety .note-file:not(.has-preview):hover::after {
  border-color: #4591d5 !important;
  background: #303846 !important;
  color: #fff !important;
}

#sekce-svetlomety .lights-file:not(.has-preview) > input[type="file"],
#sekce-svetlomety .note-file:not(.has-preview) > input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 4 !important;
}

#sekce-svetlomety .has-preview > input[type="file"] { display:none !important; }

#sekce-svetlomety .lights-note-item {
  grid-template-columns: 152px minmax(240px, 1fr) 56px 42px !important;
  grid-template-areas: "state note file remove" !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 132px !important;
  padding: 20px 18px !important;
  margin: 0 0 8px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: #343441 !important;
}

#sekce-svetlomety .lights-note-item.has-photo {
  grid-template-columns: 152px minmax(240px, 1fr) 150px 42px !important;
}

#sekce-svetlomety .note-remove {
  grid-area: remove !important;
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(239,68,68,.42) !important;
  border-radius: 10px !important;
  background: rgba(239,68,68,.09) !important;
  color: #ff7771 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#sekce-svetlomety .lights-add-note-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 210px !important;
  margin: 12px 0 0 !important;
  padding: 11px 16px !important;
  border: 1px solid #4591d5 !important;
  border-radius: 10px !important;
  background: rgba(69,145,213,.13) !important;
  color: #e2f1ff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#sekce-svetlomety .lights-file.has-preview,
#sekce-svetlomety .note-file.has-preview {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 96px !important;
}

#sekce-svetlomety .has-preview > .lights-preview,
#sekce-svetlomety .has-preview > .note-preview,
#sekce-svetlomety .has-preview .ph,
#sekce-svetlomety .has-preview .photo-thumb,
#sekce-svetlomety .has-preview img {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

@media (max-width: 760px) {
  #sekce-svetlomety .lights-check-item,
  #sekce-svetlomety .lights-check-item.has-photo {
    grid-template-columns: minmax(0,1fr) var(--lights-mobile-photo,56px) !important;
    grid-template-areas: "label file" "state state" "note note" !important;
    min-height: auto !important;
    padding: 13px !important;
    gap: 9px 12px !important;
  }
  #sekce-svetlomety .lights-check-item.has-photo { --lights-mobile-photo:150px; }
  #sekce-svetlomety .jc-state { width:100% !important; min-width:0 !important; }

  #sekce-svetlomety .lights-note-item,
  #sekce-svetlomety .lights-note-item.has-photo {
    grid-template-columns: minmax(0,1fr) var(--lights-extra-photo,56px) 42px !important;
    grid-template-areas: "state file remove" "note note note" !important;
    min-height: auto !important;
    padding: 13px !important;
    gap: 9px 12px !important;
  }
  #sekce-svetlomety .lights-note-item.has-photo { --lights-extra-photo:150px; }
}

#sekce-svetlomety .jc-state[data-state="ok"]::before { content:'✓' !important; width:14px !important; background:transparent !important; box-shadow:none !important; color:#34d399 !important; font-size:17px !important; }
#sekce-svetlomety .jc-state[data-state="warn"]::before { content:'!' !important; width:14px !important; background:transparent !important; box-shadow:none !important; color:#fbbf24 !important; font-size:16px !important; }
#sekce-svetlomety .jc-state[data-state="bad"]::before { content:'×' !important; width:14px !important; background:transparent !important; box-shadow:none !important; color:#fb7185 !important; font-size:20px !important; }

/* Sjednocená osa ikon ve stavových tlačítkách Světlometů. */
#sekce-svetlomety .lights-check-item .jc-state,
#sekce-svetlomety .lights-note-item .jc-state {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-width: 150px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  text-align: left !important;
}

#sekce-svetlomety .lights-check-item .jc-state::before,
#sekce-svetlomety .lights-note-item .jc-state::before {
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 18px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#sekce-svetlomety .lights-check-item .jc-state::after,
#sekce-svetlomety .lights-note-item .jc-state::after {
  grid-column: 2 !important;
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#sekce-svetlomety .lights-check-item .jc-state[data-state="none"]::before,
#sekce-svetlomety .lights-note-item .jc-state[data-state="none"]::before {
  content: "" !important;
  width: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  border-radius: 50% !important;
  background: #929aa8 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#sekce-svetlomety .lights-check-item .jc-state[data-state="ok"]::before,
#sekce-svetlomety .lights-note-item .jc-state[data-state="ok"]::before {
  content: "\2713" !important;
  color: #34d399 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 20px !important;
}

#sekce-svetlomety .lights-check-item .jc-state[data-state="warn"]::before,
#sekce-svetlomety .lights-note-item .jc-state[data-state="warn"]::before {
  content: "!" !important;
  color: #fbbf24 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

#sekce-svetlomety .lights-check-item .jc-state[data-state="bad"]::before,
#sekce-svetlomety .lights-note-item .jc-state[data-state="bad"]::before {
  content: "\00d7" !important;
  color: #fb7185 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 22px !important;
}