/* ==========================================================================
   SEKCE PNEU (Nezávislý a pevný Grid - Design Dokumenty)
   ========================================================================== */

/* 1. HLAVNÍ LAYOUT - PEVNÉ ŘÁDKY */
.pneu-section .body-check-item {
  display: grid !important;
  align-items: center !important;
  grid-template-columns: 40px 320px minmax(0, 1fr) 220px !important;
  grid-template-areas: "state label note file" !important;
  gap: 12px !important;
  
  padding: 24px 16px !important; 
  min-height: 80px !important; 
  
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
  position: relative !important;
}

.pneu-section .body-check-item .jc-state {
  grid-area: state !important;
  justify-self: center !important;
}
.pneu-section .body-check-item .body-item-label {
  grid-area: label !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pneu-section .body-check-item .jc-note { grid-area: note !important; }
.pneu-section .body-check-item .pneu-file { grid-area: file !important; }

/* 2. LAYOUT - DYNAMICKÉ ŘÁDKY */
.pneu-section .body-note-item {
  display: grid !important;
  align-items: center !important;
  grid-template-columns: 40px 320px minmax(0, 1fr) 220px 40px !important;
  grid-template-areas: "state . note file remove" !important; 
  gap: 12px !important;
  
  padding: 24px 16px !important;
  min-height: 80px !important; 
  
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
}

.pneu-section .body-note-item .jc-state { grid-area: state !important; justify-self: center !important; }
.pneu-section .body-note-item .note-text { grid-area: note !important; }
.pneu-section .body-note-item .note-file { grid-area: file !important; }
.pneu-section .body-note-item .note-remove { grid-area: remove !important; justify-self: center !important; }

/* 3. STAVOVÉ KOLEČKO (✅ / ⚠️ / •) */
.pneu-section .jc-state {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: transform 0.1s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  margin: 0 !important;
}
.pneu-section .jc-state:active {
  transform: scale(0.9) !important;
}
.pneu-section .jc-state .jc-icon {
  display: none !important;
}
.pneu-section .jc-state::before {
  content: '•' !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
}
.pneu-section .jc-state[data-state="ok"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}
.pneu-section .jc-state[data-state="ok"]::before {
  content: '✔' !important;
  color: #ffffff !important;
}
.pneu-section .jc-state[data-state="bad"] {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.pneu-section .jc-state[data-state="bad"]::before {
  content: '!' !important;
  color: #ffffff !important;
}

/* 4. POZNÁMKY A INPUTY */
.pneu-section .jc-note,
.pneu-section .note-text {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important; 
  max-width: none !important;
  flex: none !important;
  border-radius: 10px !important;
  border: 2px solid #777 !important;
  background-color: #1e1e24 !important;
  
  padding: 12px 16px !important;
  height: 48px !important; 
  
  color: #fff !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  margin: 0 !important;
}
.pneu-section .jc-note::placeholder,
.pneu-section .note-text::placeholder {
  color: rgba(255,255,255,.55) !important;
}

/* 5. SOUBORY A MAZÁNÍ */
.pneu-section .pneu-file,
.pneu-section .note-file {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #dddddd !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.pneu-section .pneu-file input[type="file"],
.pneu-section .note-file input[type="file"] {
  width: 220px !important; 
  margin: 0 !important;
}

.pneu-section .note-remove {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  font-weight: bold !important;
}
.pneu-section .note-remove:hover {
  color: #ff6b6b !important;
}

/* 6. NÁHLEDY FOTEK (Opravený obal proti zdvojování) */
.pneu-section .note-preview,
.pneu-section .pneu-preview {
  width: 100% !important;
  max-width: 220px !important;
  margin-top: 6px !important;
  display: block !important; /* Vypne mřížku */
}

/* 6.1. Obal tvořený JavaScriptem - ten tvoří rámeček */
.pneu-section .note-preview > div,
.pneu-section .pneu-preview > div {
  position: relative !important;
  width: 120px !important;
  height: 90px !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;
  padding: 0 !important;
}

/* 6.2. Samotný obrázek uvnitř obalu */
.pneu-section .note-preview > div > img,
.pneu-section .pneu-preview > div > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: zoom-in !important;
  transition: transform 0.3s ease !important;
}

/* 6.3. Hover efekt přiblížení */
.pneu-section .note-preview > div:hover > img,
.pneu-section .pneu-preview > div:hover > img {
  transform: scale(1.05) !important;
}

/* 6.4. Červený křížek uvnitř obalu */
.pneu-section .note-preview > div > button,
.pneu-section .pneu-preview > div > button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  cursor: pointer !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  width: auto !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
  z-index: 10 !important;
}

.pneu-section .note-preview > div > button:hover,
.pneu-section .pneu-preview > div > button:hover {
  background: rgba(220, 38, 38, 1) !important;
  transform: scale(1.05) !important;
}

/* 7. TLAČÍTKO "+ PŘIDAT POZNÁMKU" */
.pneu-section .jc-add-note-btn {
  display: block !important;
  width: 100% !important;
  max-width: 200px !important;
  padding: 12px 20px !important;
  margin: 20px auto !important;
  background-color: #a73014 !important;
  border: 2px solid #f0f0f2 !important;
  border-radius: 25px !important;
  box-shadow: 0 0 10px rgba(2, 2, 2, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 15px !important;
  text-align: center !important;
}
.pneu-section .jc-add-note-btn:hover {
  background-color: #a33e25 !important;
}

/* 8. RESPONZIVITA (Pro mobily) */
@media (max-width: 900px) {
  .pneu-section .body-check-item {
    grid-template-areas:
      "state label"
      "state note"
      "state file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
  }
  
  .pneu-section .body-note-item {
    grid-template-areas:
      "state remove"
      "note note"
      "file file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
  }
  
  .pneu-section .pneu-file,
  .pneu-section .note-file {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   OPRAVA ZAROVNÁNÍ KOLEČKA (Pneu)
   ========================================================================== */

/* 1. Zastavit centrování celého řádku - vše musí viset nahoře */
.pneu-section .body-check-item {
    align-items: start !important;
}

/* 2. Přilepit kolečko nahoru a posunout ho o kousek dolů, ať lícuje s textem */
.pneu-section .jc-state {
    align-self: start !important;
    margin-top: 6px !important;
}

/* 3. Srovnání nadpisu */
.pneu-section .body-item-label {
    align-self: start !important;
    padding-top: 6px !important;
    display: inline-block !important; /* Pojistka, aby na span fungoval padding */
}

/* ========================================================================== 
   PNEU – SJEDNOCENÝ ČTYŘSTAVOVÝ CHECKLIST
   ========================================================================== */
#sekce-pneu .jc-checklist,
#sekce-pneu .jc-note-list {
  display:grid !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

#sekce-pneu .body-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:64px !important;
  padding:10px 14px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  background:#343441 !important;
  box-sizing:border-box !important;
}

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

#sekce-pneu .body-item-label {
  grid-area:label !important;
  align-self:center !important;
  padding:0 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}

#sekce-pneu .jc-state {
  grid-area:state !important;
  align-self:center !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;
  box-sizing:border-box !important;
  font-size:0 !important;
}

#sekce-pneu .jc-state::before {
  content:'•' !important;
  width:10px !important;
  color:#9ca3af !important;
  font-size:22px !important;
  line-height:1 !important;
}

#sekce-pneu .jc-state::after {
  content:'Nezkontrolováno' !important;
  color:#e2e8f0 !important;
  font-size:12px !important;
  font-weight:750 !important;
  white-space:nowrap !important;
}

#sekce-pneu .jc-state[data-state="ok"] { border-color:rgba(16,185,129,.52) !important; background:rgba(16,185,129,.12) !important; }
#sekce-pneu .jc-state[data-state="ok"]::before { content:'✓' !important; color:#34d399 !important; font-size:17px !important; }
#sekce-pneu .jc-state[data-state="ok"]::after { content:'V pořádku' !important; color:#a7f3d0 !important; }
#sekce-pneu .jc-state[data-state="warn"] { border-color:rgba(245,158,11,.58) !important; background:rgba(245,158,11,.12) !important; }
#sekce-pneu .jc-state[data-state="warn"]::before { content:'!' !important; color:#fbbf24 !important; font-size:16px !important; }
#sekce-pneu .jc-state[data-state="warn"]::after { content:'S výhradou' !important; color:#fde68a !important; }
#sekce-pneu .jc-state[data-state="bad"] { border-color:rgba(239,68,68,.58) !important; background:rgba(239,68,68,.12) !important; }
#sekce-pneu .jc-state[data-state="bad"]::before { content:'×' !important; color:#fb7185 !important; font-size:20px !important; }
#sekce-pneu .jc-state[data-state="bad"]::after { content:'Závada' !important; color:#fecdd3 !important; }

#sekce-pneu .jc-note,
#sekce-pneu .note-text {
  grid-area:note !important;
  width:100% !important;
  min-width:0 !important;
  height:50px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:10px !important;
  background:#202027 !important;
  color:#fff !important;
  font-size:14px !important;
  box-sizing:border-box !important;
}

#sekce-pneu input[type="number"].jc-note { font-variant-numeric:tabular-nums; }

#sekce-pneu .pneu-file,
#sekce-pneu .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;
  gap:0 !important;
}

#sekce-pneu .pneu-file:not(.has-preview)::after,
#sekce-pneu .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-pneu .pneu-file:not(.has-preview):hover::after,
#sekce-pneu .note-file:not(.has-preview):hover::after {
  border-color:#4591d5 !important;
  background:#303846 !important;
  color:#fff !important;
}

#sekce-pneu .pneu-file:not(.has-preview) > input[type="file"],
#sekce-pneu .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-pneu .has-preview > input[type="file"] { display:none !important; }

#sekce-pneu .body-note-item {
  display:grid !important;
  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:64px !important;
  padding:10px 14px !important;
  margin:0 0 8px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  background:#343441 !important;
  box-sizing:border-box !important;
}

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

#sekce-pneu .body-note-item .note-remove {
  grid-area:remove !important;
  width:42px !important;
  min-width:42px !important;
  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,.08) !important;
  color:#fb7185 !important;
  display:grid !important;
  place-items:center !important;
}

#sekce-pneu .jc-add-note-btn {
  display:block !important;
  width:250px !important;
  max-width:100% !important;
  min-height:55px !important;
  margin:14px 0 0 !important;
  padding:0 20px !important;
  border:1px solid #4591d5 !important;
  border-radius:12px !important;
  background:#27394c !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:750 !important;
}

#sekce-pneu .jc-add-note-btn:hover { background:#304a63 !important; }

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

#sekce-pneu .has-preview > .pneu-preview,
#sekce-pneu .has-preview > .note-preview,
#sekce-pneu .has-preview .ph,
#sekce-pneu .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-pneu .body-check-item,
  #sekce-pneu .body-check-item.has-photo {
    grid-template-columns:minmax(0,1fr) var(--pneu-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-pneu .body-check-item.has-photo { --pneu-mobile-photo:150px; }
  #sekce-pneu .jc-state { width:100% !important; min-width:0 !important; }

  #sekce-pneu .body-note-item,
  #sekce-pneu .body-note-item.has-photo {
    grid-template-columns:minmax(0,1fr) var(--pneu-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-pneu .body-note-item.has-photo { --pneu-extra-photo:150px; }
}