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

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

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

/* 2. PEVNÉ ŘÁDKY (Checklist) */
#sekce-karoserie .body-check-item {
  display: grid !important;
  align-items: start !important; /* OPRAVA: 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;
}

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

#sekce-karoserie .body-note { 
  grid-area: note !important; 
}

#sekce-karoserie .body-file { 
  grid-area: file !important; 
  width: 220px !important; 
}

#sekce-karoserie .body-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; /* OPRAVA: 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) */
#sekce-karoserie .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;
}

#sekce-karoserie .jc-state:active { 
  transform: scale(0.9) !important; 
}

#sekce-karoserie .jc-state::before { 
  content: '•' !important; 
  color: #ffffff !important; 
  font-size: 18px !important; 
  font-weight: bold !important; 
}

#sekce-karoserie .jc-state[data-state="ok"] { 
  background-color: rgba(16, 185, 129, 0.15) !important; 
  border-color: rgba(16, 185, 129, 0.5) !important; 
}

#sekce-karoserie .jc-state[data-state="ok"]::before { 
  content: '✔' !important; 
}

#sekce-karoserie .jc-state[data-state="bad"], 
#sekce-karoserie .jc-state[data-state="warn"] { 
  background-color: rgba(239, 68, 68, 0.15) !important; 
  border-color: rgba(239, 68, 68, 0.5) !important; 
}

#sekce-karoserie .jc-state[data-state="bad"]::before, 
#sekce-karoserie .jc-state[data-state="warn"]::before { 
  content: '!' !important; 
}

/* 4. POZNÁMKY (Statické i dynamické políčko) */
#sekce-karoserie .body-note,
#sekce-karoserie .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;
}

#sekce-karoserie .body-note::placeholder, 
#sekce-karoserie .note-text::placeholder { 
  color: rgba(255,255,255,.55) !important; 
}

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

#sekce-karoserie .body-file input[type="file"], 
#sekce-karoserie .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) */
#sekce-karoserie .body-extra { 
  margin-top: 16px; 
}

#sekce-karoserie .body-note-item {
  display: grid !important; 
  align-items: start !important; /* OPRAVA: 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;
}

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

#sekce-karoserie .body-note-item .note-text { 
  grid-area: note !important; 
}

#sekce-karoserie .body-note-item .note-file { 
  grid-area: file !important; 
}

#sekce-karoserie .body-note-item .note-remove {
  grid-area: remove !important; /* OPRAVA: Drží se ve svém sloupci */
  align-self: end !important; /* OPRAVA: Sjíždí úplně dolů (jak jsi chtěl na desktopu) */
  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;
}

#sekce-karoserie .body-note-item .note-remove:hover { 
  color: #ff6b6b !important; 
}

/* 7. TLAČÍTKO + PŘIDAT POZNÁMKU */
#sekce-karoserie .body-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) */
#sekce-karoserie .body-preview,
#sekce-karoserie .note-preview {
  width: 220px !important; 
  max-width: 220px !important; 
  margin-top: 6px !important; 
  display: block !important;
}

#sekce-karoserie .ph,
#sekce-karoserie .body-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;
}

#sekce-karoserie .ph img,
#sekce-karoserie .body-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;
}

#sekce-karoserie .ph:hover img,
#sekce-karoserie .body-preview > div:hover img { 
  transform: scale(1.05) !important; 
}

/* Tlačítko křížku přímo na fotce */
#sekce-karoserie .ph .photo-remove,
#sekce-karoserie .body-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;
}

#sekce-karoserie .ph .photo-remove:hover,
#sekce-karoserie .body-preview > div .photo-remove:hover { 
  background: rgba(220, 38, 38, 1) !important; 
}

/* =========================================================
   MOBILNÍ ZOBRAZENÍ
   ========================================================= */
@media (max-width: 900px) {
  #sekce-karoserie .body-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;
  }
  
  #sekce-karoserie .body-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;
  }
  
  #sekce-karoserie .body-file,
  #sekce-karoserie .note-file,
  #sekce-karoserie .body-preview,
  #sekce-karoserie .note-preview,
  #sekce-karoserie .body-note-item > div {
    width: 100% !important; 
    max-width: 100% !important;
  }

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

/* ========================================================================== 
   KAROSERIE – KOMPAKTNÍ ČTYŘSTAVOVÝ CHECKLIST
   ========================================================================== */
#sekce-karoserie .body-checklist,
#sekce-karoserie .body-note-list {
  gap: 8px !important;
}

#sekce-karoserie .body-check-item {
  grid-template-columns: minmax(180px, 260px) 152px minmax(240px, 1fr) 48px !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;
}

#sekce-karoserie .body-check-item:focus-within,
#sekce-karoserie .body-note-item:focus-within {
  border-color: rgba(69,145,213,.75) !important;
  background: #373744 !important;
}

#sekce-karoserie .body-item-label {
  align-self: center !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#sekce-karoserie .jc-state {
  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-karoserie .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-karoserie .jc-state::after {
  content: 'Nezkontrolováno' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#sekce-karoserie .jc-state[data-state="ok"] {
  color: #8be0bb !important;
  border-color: rgba(16,185,129,.42) !important;
  background: rgba(16,185,129,.11) !important;
}

#sekce-karoserie .jc-state[data-state="ok"]::before {
  content: '' !important;
  background: #32c98a !important;
  box-shadow: 0 0 0 3px rgba(50,201,138,.13) !important;
}

#sekce-karoserie .jc-state[data-state="ok"]::after { content: 'V pořádku' !important; }

#sekce-karoserie .jc-state[data-state="warn"] {
  color: #f5ca72 !important;
  border-color: rgba(245,158,11,.48) !important;
  background: rgba(245,158,11,.11) !important;
}

#sekce-karoserie .jc-state[data-state="warn"]::before {
  content: '' !important;
  background: #f2ad32 !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.14) !important;
}

#sekce-karoserie .jc-state[data-state="warn"]::after { content: 'S výhradou' !important; }

#sekce-karoserie .jc-state[data-state="bad"] {
  color: #ffaaa6 !important;
  border-color: rgba(239,68,68,.45) !important;
  background: rgba(239,68,68,.11) !important;
}

#sekce-karoserie .jc-state[data-state="bad"]::before {
  content: '' !important;
  background: #ef5b57 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.13) !important;
}

#sekce-karoserie .jc-state[data-state="bad"]::after { content: 'Závada' !important; }

#sekce-karoserie .body-note,
#sekce-karoserie .note-text {
  height: 40px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 10px !important;
  background: #222229 !important;
  font-size: 13px !important;
}

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

#sekce-karoserie .body-file,
#sekce-karoserie .note-file,
#sekce-karoserie .body-note-item > .note-file {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
}

#sekce-karoserie .body-file > input[type="file"][data-compact-photo="1"],
#sekce-karoserie .note-file > input[type="file"][data-compact-photo="1"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

#sekce-karoserie .body-photo-trigger {
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: #292933;
  color: #b8c0cd;
  cursor: pointer;
  font-size: 17px;
}

#sekce-karoserie .body-photo-trigger:hover {
  color: #fff;
  border-color: #4591d5;
  background: #303846;
}

#sekce-karoserie .body-note-item {
  grid-template-columns: 152px minmax(240px, 1fr) 48px 36px !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;
}

#sekce-karoserie .body-note-item .note-remove {
  align-self: center !important;
  margin: 0 !important;
  font-size: 18px !important;
}

#sekce-karoserie .body-add-note-btn {
  margin: 10px 0 0 !important;
  padding: 10px 14px !important;
  border: 1px solid #4591d5 !important;
  border-radius: 10px !important;
  background: rgba(69,145,213,.12) !important;
  color: #dceeff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Větší náhled se ukáže pouze u řádku, který fotografii skutečně obsahuje. */
#sekce-karoserie .body-check-item.has-photo {
  grid-template-columns: minmax(180px, 260px) 152px minmax(240px, 1fr) 150px !important;
  min-height: 118px !important;
}

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

#sekce-karoserie .body-file.has-preview,
#sekce-karoserie .note-file.has-preview,
#sekce-karoserie .body-note-item > .note-file.has-preview {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  min-height: 96px !important;
  display: block !important;
}

#sekce-karoserie .has-preview > .body-photo-trigger { display: none !important; }

#sekce-karoserie .has-preview > .body-preview,
#sekce-karoserie .has-preview > .note-preview {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  min-height: 96px !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  gap: 6px !important;
  overflow: visible !important;
}

#sekce-karoserie .has-preview .ph,
#sekce-karoserie .has-preview .photo-thumb,
#sekce-karoserie .has-preview .body-preview > div,
#sekce-karoserie .has-preview .note-preview > div {
  position: relative !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;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#sekce-karoserie .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;
  object-fit: cover !important;
  transform: none !important;
}

#sekce-karoserie .has-preview .photo-remove {
  top: 6px !important;
  right: 6px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 22px !important;
}

@media (max-width: 1050px) and (min-width: 761px) {
  #sekce-karoserie .body-check-item,
  #sekce-karoserie .body-check-item.has-photo {
    grid-template-columns: minmax(160px, 220px) 152px minmax(180px, 1fr) var(--body-photo-col, 48px) !important;
  }

  #sekce-karoserie .body-check-item.has-photo { --body-photo-col: 150px; }
}

@media (max-width: 760px) {
  #sekce-karoserie .body-check-item,
  #sekce-karoserie .body-check-item.has-photo {
    grid-template-columns: minmax(0, 1fr) var(--body-mobile-photo, 48px) !important;
    grid-template-areas:
      "label file"
      "state state"
      "note note" !important;
    gap: 9px 12px !important;
    padding: 13px !important;
  }

  #sekce-karoserie .body-check-item.has-photo { --body-mobile-photo: 150px; }
  #sekce-karoserie .jc-state { width: 100% !important; min-width: 0 !important; }
  #sekce-karoserie .body-file { justify-self: end !important; }

  #sekce-karoserie .body-note-item,
  #sekce-karoserie .body-note-item.has-photo {
    grid-template-columns: minmax(0, 1fr) var(--body-extra-photo, 48px) 36px !important;
    grid-template-areas:
      "state file remove"
      "note note note" !important;
  }

  #sekce-karoserie .body-note-item.has-photo { --body-extra-photo: 150px; }
}

/* Definitivní fallback fotografie: skutečný file input zůstává klikací a je
   pouze vizuálně zmenšený. Nezávisí tedy na vytvoření tlačítka JavaScriptem. */
#sekce-karoserie .body-photo-trigger {
  display: none !important;
}

#sekce-karoserie .body-note-item > .body-photo-trigger,
#sekce-karoserie .body-note-item > .note-file > .body-photo-trigger {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#sekce-karoserie .body-file:not(.has-preview)::after,
#sekce-karoserie .note-file:not(.has-preview)::after {
  content: '▧';
  position: absolute;
  inset: 0;
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #c7d0dc;
  font-size: 16px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}

#sekce-karoserie .body-file:not(.has-preview),
#sekce-karoserie .note-file:not(.has-preview) {
  cursor: pointer !important;
}

#sekce-karoserie .body-file > input[type="file"],
#sekce-karoserie .note-file > input[type="file"],
#sekce-karoserie .body-file > input[type="file"][data-compact-photo="1"],
#sekce-karoserie .note-file > input[type="file"][data-compact-photo="1"] {
  position: static !important;
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

#sekce-karoserie .body-file > input[type="file"]::file-selector-button,
#sekce-karoserie .note-file > input[type="file"]::file-selector-button {
  width: 44px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: #292933;
  color: transparent;
  cursor: pointer;
}

#sekce-karoserie .body-file > input[type="file"]:hover::file-selector-button,
#sekce-karoserie .note-file > input[type="file"]:hover::file-selector-button {
  border-color: #4591d5;
  background: #303846;
}

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

/* Nativní input je průhledná klikací vrstva přes jedinou viditelnou ikonu. */
#sekce-karoserie .body-file:not(.has-preview) > input[type="file"],
#sekce-karoserie .note-file:not(.has-preview) > input[type="file"],
#sekce-karoserie .body-file:not(.has-preview) > input[type="file"][data-compact-photo="1"],
#sekce-karoserie .note-file:not(.has-preview) > input[type="file"][data-compact-photo="1"] {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 4 !important;
}

/* Vizuální rozměry pevného řádku přesně podle sekce Dokumenty. */
#sekce-karoserie .body-check-item {
  grid-template-columns: minmax(180px, 260px) 152px minmax(240px, 1fr) 56px !important;
  min-height: 132px !important;
  padding: 20px 18px !important;
}

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

#sekce-karoserie .body-file:not(.has-preview) {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}

#sekce-karoserie .body-file:not(.has-preview)::after {
  inset: 0 !important;
  width: 54px !important;
  height: 54px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 11px !important;
  background: #292933 !important;
}

#sekce-karoserie .body-file:not(.has-preview):hover::after {
  border-color: #4591d5 !important;
  background: #303846 !important;
}

#sekce-karoserie .body-file:not(.has-preview) > input[type="file"],
#sekce-karoserie .body-file:not(.has-preview) > input[type="file"][data-compact-photo="1"] {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

@media (max-width: 1050px) and (min-width: 761px) {
  #sekce-karoserie .body-check-item {
    grid-template-columns: minmax(160px, 220px) 152px minmax(180px, 1fr) 56px !important;
  }

  #sekce-karoserie .body-check-item.has-photo {
    grid-template-columns: minmax(160px, 220px) 152px minmax(180px, 1fr) 150px !important;
  }
}

@media (max-width: 760px) {
  #sekce-karoserie .body-check-item,
  #sekce-karoserie .body-check-item.has-photo {
    min-height: auto !important;
    padding: 13px !important;
  }

  #sekce-karoserie .body-check-item:not(.has-photo) {
    --body-mobile-photo: 56px;
  }
}

/* Dynamický vlastní bod – stejné proporce jako v Dokumentech. */
#sekce-karoserie .body-note-item {
  grid-template-columns: 152px minmax(240px, 1fr) 56px 42px !important;
  grid-template-areas: "state note file remove" !important;
  min-height: 132px !important;
  padding: 20px 18px !important;
  align-items: center !important;
}

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

#sekce-karoserie .note-file:not(.has-preview) {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 54px !important;
  min-height: 54px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}

#sekce-karoserie .note-file:not(.has-preview)::after {
  inset: 0 !important;
  width: 54px !important;
  height: 54px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 11px !important;
  background: #292933 !important;
}

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

#sekce-karoserie .note-file:not(.has-preview) > input[type="file"],
#sekce-karoserie .note-file:not(.has-preview) > input[type="file"][data-compact-photo="1"] {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

#sekce-karoserie .body-note-item .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;
  max-width: 42px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-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-karoserie .body-note-item .note-remove:hover {
  border-color: rgba(239,68,68,.72) !important;
  background: rgba(239,68,68,.18) !important;
}

#sekce-karoserie .body-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;
  box-shadow: none !important;
}

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

#sekce-karoserie .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-karoserie .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-karoserie .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; }

/* Finální zarovnání Karoserie – kompaktní řádek jako v Dokumentech. */
#sekce-karoserie .body-checklist { gap:8px !important; }
#sekce-karoserie .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;
  height:82px !important;
  min-height:82px !important;
  padding:10px 14px !important;
  gap: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-karoserie .body-check-item.has-photo {
  grid-template-columns:minmax(180px,260px) 152px minmax(240px,1fr) 150px !important;
  height:118px !important;
  min-height:118px !important;
}
#sekce-karoserie .body-check-item .body-item-label {
  grid-area:label !important;
  align-self:center !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
}
#sekce-karoserie .body-check-item .jc-state {
  grid-area:state !important;
  align-self:center !important;
  justify-self:stretch !important;
  margin:0 !important;
}
#sekce-karoserie .body-check-item .body-note {
  grid-area:note !important;
  align-self:center !important;
  width:100% !important;
  height:42px !important;
  margin:0 !important;
  padding:0 14px !important;
}
#sekce-karoserie .jc-state[data-state="none"]::before {
  content:'' !important;
  display:block !important;
  width:10px !important;
  min-width:10px !important;
  max-width:10px !important;
  height:10px !important;
  min-height:10px !important;
  max-height:10px !important;
  flex:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#929aa8 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
#sekce-karoserie .body-note-item {
  min-height:82px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
}
#sekce-karoserie .body-note-item.has-photo { min-height:118px !important; }

@media (max-width:1050px) and (min-width:761px) {
  #sekce-karoserie .body-check-item { grid-template-columns:minmax(160px,220px) 152px minmax(180px,1fr) 56px !important; }
  #sekce-karoserie .body-check-item.has-photo { grid-template-columns:minmax(160px,220px) 152px minmax(180px,1fr) 150px !important; }
}
@media (max-width:760px) {
  #sekce-karoserie .body-check-item,
  #sekce-karoserie .body-check-item.has-photo {
    grid-template-columns:minmax(0,1fr) var(--body-final-photo,56px) !important;
    grid-template-areas:"label file" "state state" "note note" !important;
    height:auto !important;
    min-height:auto !important;
    padding:13px !important;
  }
  #sekce-karoserie .body-check-item.has-photo { --body-final-photo:150px; }
}

/* Sjednocená osa ikon ve stavových tlačítkách Karoserie. */
#sekce-karoserie .body-check-item .jc-state {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  column-gap: 6px !important;
  width: 100% !important;
  min-width: 152px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  text-align: left !important;
}

#sekce-karoserie .body-check-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: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 24px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#sekce-karoserie .body-check-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-karoserie .body-check-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: 25px !important;
}

#sekce-karoserie .body-check-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: 20px !important;
}

#sekce-karoserie .body-check-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: 28px !important;
}

/* Jemnější velikost značek - po sjednocení osy už nemají působit přerostle. */
#sekce-karoserie .body-check-item .jc-state {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  min-width: 150px !important;
  height: 50px !important;
  min-height: 50px !important;
}

#sekce-karoserie .body-check-item .jc-state::before {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
}

#sekce-karoserie .body-check-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;
  justify-self: center !important;
  border-radius: 50% !important;
  background: #929aa8 !important;
}

#sekce-karoserie .body-check-item .jc-state[data-state="ok"]::before {
  font-size: 20px !important;
}

#sekce-karoserie .body-check-item .jc-state[data-state="warn"]::before {
  font-size: 16px !important;
}

#sekce-karoserie .body-check-item .jc-state[data-state="bad"]::before {
  font-size: 22px !important;
}