/* ==========================================================================
   SEKCE KOLA A BRZDY (Neprůstřelný Grid s podporou hvězdiček)
   ========================================================================== */

/* 1. HLAVNÍ LAYOUT - PEVNÉ ŘÁDKY */
.wheels-section .jc-checklist li.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;
}

/* TVRDÉ PŘEBITÍ PRO PRVNÍ ŘÁDEK S HVĚZDIČKAMI */
.wheels-section .jc-checklist li.wheels-rating-item {
  grid-template-columns: 40px 320px minmax(0, 1fr) 220px !important;
  grid-template-rows: auto auto !important; /* Dva řádky ve sloupci 2 */
  grid-template-areas: 
    "state label note file"
    "state stars note file" !important;
}

/* Zarovnání prvků (společné) */
.wheels-section .jc-checklist li.body-check-item .jc-state { grid-area: state !important; justify-self: center !important; }
.wheels-section .jc-checklist li.body-check-item .jc-note { grid-area: note !important; }
.wheels-section .jc-checklist li.body-check-item .wheels-file { grid-area: file !important; }

/* Text a nadpis */
.wheels-section .jc-checklist li.body-check-item .wheels-label-wrap,
.wheels-section .jc-checklist li.body-check-item .body-item-label {
  grid-area: label !important;
  margin: 0 !important;
  padding: 0 0 4px 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* =========================================================
   HVĚZDIČKY (Definitivní odříznutí global.css)
   ========================================================= */
.wheels-section .jc-checklist li.wheels-rating-item .jc-rating {
  grid-area: stars !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Zabití starých stylů pro buttony okolo hvězdiček */
.wheels-section .jc-checklist li.wheels-rating-item .jc-rating button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Samotná hvězdička (Základní šedá a ODLEHČENÁ) */
.wheels-section .jc-checklist li.wheels-rating-item .jc-rating .star {
  font-size: 26px !important; /* UPRAVENO NA 24px */
  font-weight: normal !important; /* ZÁKAZ TUČNÉHO PÍSMA */
  color: #d0d0d0 !important;
  line-height: 1 !important;
  transition: transform 0.1s ease, color 0.2s ease !important;
  display: block !important;
}

/* SUPER SILNÝ SELEKTOR PRO AKTIVNÍ (ZLATOU) HVĚZDIČKU */
.wheels-section .jc-checklist li.wheels-rating-item .jc-rating .star.active {
    color: #f59e0b !important;
    text-shadow: 0 0 5px rgb(245 158 11 / 7%) !important;
}

.wheels-section .jc-checklist li.wheels-rating-item .jc-rating button:hover .star {
  transform: scale(1.15) !important;
}


/* =========================================================
   2. LAYOUT - DYNAMICKÉ ŘÁDKY
   ========================================================= */
.wheels-section .jc-extra li.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;
}

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


/* =========================================================
   3. STAVOVÉ KOLEČKO (✅ / ⚠️ / •)
   ========================================================= */
.wheels-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;
}
.wheels-section .jc-state:active { transform: scale(0.9) !important; }
.wheels-section .jc-state .jc-icon { display: none !important; }
.wheels-section .jc-state::before {
  content: '•' !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
}
.wheels-section .jc-state[data-state="ok"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}
.wheels-section .jc-state[data-state="ok"]::before {
  content: '✔' !important;
  color: #ffffff !important;
}
.wheels-section .jc-state[data-state="bad"],
.wheels-section .jc-state[data-state="warn"] {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.wheels-section .jc-state[data-state="bad"]::before,
.wheels-section .jc-state[data-state="warn"]::before {
  content: '!' !important;
  color: #ffffff !important;
}


/* =========================================================
   4. POZNÁMKY A INPUTY
   ========================================================= */
.wheels-section .jc-note,
.wheels-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;
}
.wheels-section .jc-note::placeholder,
.wheels-section .note-text::placeholder { color: rgba(255,255,255,.55) !important; }


/* =========================================================
   5. SOUBORY A MAZÁNÍ
   ========================================================= */
.wheels-section .wheels-file,
.wheels-section .note-file {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #dddddd !important;
  position: relative !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.wheels-section .wheels-file input[type="file"],
.wheels-section .note-file input[type="file"] {
  width: 220px !important; 
  margin: 0 !important;
}
.wheels-section .note-remove {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  font-weight: bold !important;
}
.wheels-section .note-remove:hover { color: #ff6b6b !important; }


/* =========================================================
   6. NÁHLEDY FOTEK
   ========================================================= */
.wheels-section .note-preview,
.wheels-section .wheels-preview {
  width: 100% !important;
  max-width: 220px !important;
  margin-top: 6px !important;
  display: block !important;
}
.wheels-section .note-preview > div,
.wheels-section .wheels-preview > div {
  position: relative !important;
  width: 220px !important; 
  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;
  padding: 0 !important;
}
.wheels-section .note-preview > div > img,
.wheels-section .wheels-preview > div > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  display: block !important;
  cursor: zoom-in !important;
  transition: transform 0.3s ease !important;
}
.wheels-section .note-preview > div:hover > img,
.wheels-section .wheels-preview > div:hover > img { transform: scale(1.05) !important; }

/* Tlačítko odstranit (Křížek na fotce) */
.wheels-section .note-preview > div > button,
.wheels-section .wheels-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;
  font-size: 14px !important;
  line-height: 1 !important;
  z-index: 10 !important;
}
.wheels-section .note-preview > div > button:hover,
.wheels-section .wheels-preview > div > button:hover {
  background: rgba(220, 38, 38, 1) !important;
  transform: scale(1.05) !important;
}


/* =========================================================
   7. TLAČÍTKO PŘIDAT POZNÁMKU
   ========================================================= */
.wheels-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;
}
.wheels-section .jc-add-note-btn:hover { background-color: #a33e25 !important; }


/* =========================================================
   8. ODSTRANĚNÍ DUPLICITNÍCH FOTEK (ZE STARÉHO SYSTÉMU)
   ========================================================= */
.wheels-section .note-preview .photo-thumb,
.wheels-section .wheels-preview .photo-thumb { display: none !important; }


/* =========================================================
   9. RESPONZIVITA (Pro mobily)
   ========================================================= */
@media (max-width: 900px) {
  /* Obyčejné řádky */
  .wheels-section .jc-checklist li.body-check-item {
    grid-template-areas: "state label" "state note" "state file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
  }
  
  /* Hvězdičkový řádek */
  .wheels-section .jc-checklist li.wheels-rating-item {
    grid-template-areas: "state label" "state stars" "state note" "state file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
  }

  /* Dynamické řádky */
  .wheels-section .jc-extra li.body-note-item {
    grid-template-areas: "state remove" "note note" "file file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
  }

  .wheels-section .wheels-file, .wheels-section .note-file {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   OPRAVA ZAROVNÁNÍ KOLEČKA (Kola a brzdy)
   ========================================================================== */

/* 1. Zastavit centrování celého řádku - vše musí viset nahoře */
.wheels-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 */
.wheels-section .jc-state {
    align-self: start !important;
    margin-top: 6px !important;
}

/* 3. Srovnání obalu pro text a hvězdičky */
.wheels-section .wheels-label-wrap {
    align-self: start !important;
    padding-top: 6px !important;
}

/* Sjednocený čtyřstavový checklist */
#sekce-kola-brzdy .jc-checklist,
#sekce-kola-brzdy .jc-note-list { display:grid !important; gap:8px !important; margin:0 !important; padding:0 !important; list-style:none !important; }

#sekce-kola-brzdy .body-check-item,
#sekce-kola-brzdy .body-check-item.wheels-rating-item {
  display:grid !important;
  grid-template-columns:minmax(180px,260px) 152px minmax(240px,1fr) 56px !important;
  grid-template-rows:auto !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-kola-brzdy .body-check-item.has-photo { grid-template-columns:minmax(180px,260px) 152px minmax(240px,1fr) 150px !important; min-height:118px !important; }
#sekce-kola-brzdy .wheels-label-wrap,
#sekce-kola-brzdy .body-item-label { grid-area:label !important; align-self:center !important; padding:0 !important; margin:0 !important; color:#fff !important; font-size:14px !important; font-weight:600 !important; line-height:1.35 !important; }
#sekce-kola-brzdy .wheels-label-wrap { display:block !important; }
#sekce-kola-brzdy .jc-rating { display:none !important; }

#sekce-kola-brzdy .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-kola-brzdy .jc-state::before { content:'•' !important; width:14px !important; background:transparent !important; box-shadow:none !important; color:#9ca3af !important; font-size:22px !important; line-height:1 !important; }
#sekce-kola-brzdy .jc-state::after { content:'Nezkontrolováno' !important; color:#e2e8f0 !important; font-size:12px !important; font-weight:750 !important; white-space:nowrap !important; }
#sekce-kola-brzdy .jc-state[data-state="ok"] { border-color:rgba(16,185,129,.52) !important; background:rgba(16,185,129,.12) !important; }
#sekce-kola-brzdy .jc-state[data-state="ok"]::before { content:'✓' !important; color:#34d399 !important; font-size:17px !important; }
#sekce-kola-brzdy .jc-state[data-state="ok"]::after { content:'V pořádku' !important; color:#a7f3d0 !important; }
#sekce-kola-brzdy .jc-state[data-state="warn"] { border-color:rgba(245,158,11,.58) !important; background:rgba(245,158,11,.12) !important; }
#sekce-kola-brzdy .jc-state[data-state="warn"]::before { content:'!' !important; color:#fbbf24 !important; font-size:16px !important; }
#sekce-kola-brzdy .jc-state[data-state="warn"]::after { content:'S výhradou' !important; color:#fde68a !important; }
#sekce-kola-brzdy .jc-state[data-state="bad"] { border-color:rgba(239,68,68,.58) !important; background:rgba(239,68,68,.12) !important; }
#sekce-kola-brzdy .jc-state[data-state="bad"]::before { content:'×' !important; color:#fb7185 !important; font-size:20px !important; }
#sekce-kola-brzdy .jc-state[data-state="bad"]::after { content:'Závada' !important; color:#fecdd3 !important; }

#sekce-kola-brzdy .jc-note,
#sekce-kola-brzdy .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-kola-brzdy .wheels-file,
#sekce-kola-brzdy .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-kola-brzdy .wheels-file:not(.has-preview)::after,
#sekce-kola-brzdy .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-kola-brzdy .wheels-file:not(.has-preview):hover::after,
#sekce-kola-brzdy .note-file:not(.has-preview):hover::after { border-color:#4591d5 !important; background:#303846 !important; color:#fff !important; }
#sekce-kola-brzdy .wheels-file:not(.has-preview)>input[type="file"],
#sekce-kola-brzdy .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-kola-brzdy .has-preview>input[type="file"] { display:none !important; }

#sekce-kola-brzdy .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-kola-brzdy .body-note-item.has-photo { grid-template-columns:152px minmax(240px,1fr) 150px 42px !important; min-height:118px !important; }
#sekce-kola-brzdy .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-kola-brzdy .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-kola-brzdy .jc-add-note-btn:hover { background:#304a63 !important; }

#sekce-kola-brzdy .wheels-file.has-preview,
#sekce-kola-brzdy .note-file.has-preview { width:150px !important; min-width:150px !important; max-width:150px !important; height:96px !important; }
#sekce-kola-brzdy .has-preview>.wheels-preview,
#sekce-kola-brzdy .has-preview>.note-preview,
#sekce-kola-brzdy .has-preview .ph,
#sekce-kola-brzdy .has-preview img { display:block !important; 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-kola-brzdy .body-check-item,
  #sekce-kola-brzdy .body-check-item.wheels-rating-item,
  #sekce-kola-brzdy .body-check-item.has-photo { grid-template-columns:minmax(0,1fr) var(--wheels-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-kola-brzdy .body-check-item.has-photo { --wheels-mobile-photo:150px; }
  #sekce-kola-brzdy .jc-state { width:100% !important; min-width:0 !important; }
  #sekce-kola-brzdy .body-note-item,
  #sekce-kola-brzdy .body-note-item.has-photo { grid-template-columns:minmax(0,1fr) var(--wheels-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-kola-brzdy .body-note-item.has-photo { --wheels-extra-photo:150px; }
}