/* ==========================================================================
   SEKCE MOTOR A PŘEVODOVKA (DOKONALÝ 1-ŘÁDKOVÝ GRID - OPRAVENÁ VELIKOST FOTEK)
   ========================================================================== */

/* 1. HLAVNÍ LAYOUT */
.engine-section .eg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.engine-section .eg-item {
  display: grid !important;
  align-items: center !important;
  /* Definice 4 sloupců: Stav (40px) | Text (320px) | Poznámka (flex) | Soubor (220px) */
  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;
}

.engine-section .eg-state {
  grid-area: state !important;
  justify-self: center !important;
}

.engine-section .eg-note {
  grid-area: note !important;
}

.engine-section .eg-file {
  grid-area: file !important;
  /* Zajištění, že sloupec pro soubor nepřeteče */
  width: 220px !important;
}

/* Obal pro Text + Hvězdičky */
.engine-section .eg-label-wrap {
  grid-area: label !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: center !important;
}

.engine-section .eg-item-label {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* HVĚZDIČKY */
.engine-section .eg-rating {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  margin: 0 !important;
}

.engine-section .star {
  font-size: 24px !important;
  font-weight: normal !important;
  color: #d0d0d0 !important;
  line-height: 1 !important;
  transition: transform 0.1s ease, color 0.2s ease !important;
  cursor: pointer !important;
}

.engine-section .star.active {
  color: #f59e0b !important;
  text-shadow: 0 0 5px rgb(245 158 11 / 7%) !important;
}

.engine-section .star:hover {
  transform: scale(1.15) !important;
}

/* STAVOVÉ KOLEČKO (Obrana proti vajíčku) */
.engine-section .eg-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;
}

.engine-section .eg-state:active {
  transform: scale(0.9) !important;
}

.engine-section .eg-state::before {
  content: '•' !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

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

.engine-section .eg-state[data-state="ok"]::before {
  content: '✔' !important;
}

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

.engine-section .eg-state[data-state="bad"]::before,
.engine-section .eg-state[data-state="warn"]::before {
  content: '!' !important;
}

/* POZNÁMKY */
.engine-section .eg-note {
  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;
}

/* NÁHLEDY FOTEK (Zde je oprava velikosti) */
.engine-section .eg-preview {
  width: 220px !important; /* Fixní šířka náhledu */
  margin-top: 6px !important;
  display: block !important;
}

.engine-section .eg-preview > div {
  position: relative !important;
  width: 220px !important; /* Fixní šířka */
  height: 160px !important; /* Fixní výška - aby to vypadalo jako u kol */
  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;
}

.engine-section .eg-preview > div > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Vyplní plochu bez deformace */
  display: block !important;
  cursor: zoom-in !important;
  transition: transform 0.3s ease !important;
}

.engine-section .eg-preview > div > button {
  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;
}

/* DYNAMICKÉ ŘÁDKY */
.engine-section .eg-note-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
}

.engine-section .eg-remove {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  grid-area: remove !important;
  justify-self: center !important;
}

.engine-section .eg-add-note-btn {
  display: block !important;
  width: 200px !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;
}

/* MOBIL */
@media (max-width: 900px) {
  .engine-section .eg-item {
    grid-template-areas:
        "state label"
        "state note"
        "state file" !important;
        grid-template-columns: 40px 1fr !important;
        row-gap: 8px !important;
  }
  
  .engine-section .eg-note-list .eg-item {
    grid-template-areas: 
      "state remove" 
      "note note" 
      "file file" !important;
  }
  
  .engine-section .eg-file,
  .engine-section .eg-preview {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* OPRAVA: Vrácení výšky na 160px, aby to bylo kompaktní jako u Kol */
  .engine-section .eg-preview > div {
    width: 100% !important;
    height: 160px !important; 
    max-width: 100% !important;
  }
}
/* ==========================================================================
   OPRAVA ZAROVNÁNÍ KOLEČKA (Motor a převodovka)
   ========================================================================== */

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

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

/* 3. Pokud máš nadpis zabalený v .eg-label-wrap, srovnáme i ten */
.engine-section .eg-label-wrap {
    align-self: start !important;
    padding-top: 6px !important;
}

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

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

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

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

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

#sekce-motor-prevodovka .eg-file.has-preview { width:150px !important; min-width:150px !important; max-width:150px !important; height:96px !important; }
#sekce-motor-prevodovka .has-preview>.eg-preview,
#sekce-motor-prevodovka .has-preview .ph,
#sekce-motor-prevodovka .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-motor-prevodovka .eg-list>.eg-item,
  #sekce-motor-prevodovka .eg-list>.eg-item.has-photo { grid-template-columns:minmax(0,1fr) var(--engine-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-motor-prevodovka .eg-list>.eg-item.has-photo { --engine-mobile-photo:150px; }
  #sekce-motor-prevodovka .eg-state { width:100% !important; min-width:0 !important; }
  #sekce-motor-prevodovka .eg-note-list>.eg-item,
  #sekce-motor-prevodovka .eg-note-list>.eg-item.has-photo { grid-template-columns:minmax(0,1fr) var(--engine-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-motor-prevodovka .eg-note-list>.eg-item.has-photo { --engine-extra-photo:150px; }
}