/* ========================================
   GEAR GENERATOR - Page-specific styles
   ======================================== */

/* Hint/tooltip styly jsou v components.css */



/* 📏 Measurement Guide */
.measurement-guide {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 25px;
}

.measurement-guide summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
  padding: 5px 0;
}

.measurement-guide summary::-webkit-details-marker {
  display: none;
}

.measurement-guide summary:hover {
  color: var(--primary);
}

.guide-content {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.measure-step {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.measure-step h4 {
  margin: 0 0 10px 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.measure-step p {
  margin: 5px 0;
  line-height: 1.5;
  font-size: 0.95rem;
}

.measure-step ul {
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Spec Cards */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.spec-card {
  background: var(--bg-secondary);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
}

.spec-card .label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.spec-card .value {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-primary);
}

/* 3D Viewer */
#viewer {
  width: 100%;
  height: 500px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Debug Timestamp */
.debug-timestamp {
  position: fixed;
  top: 60px;
  right: 10px;
  background: var(--bg-secondary);
  color: var(--success);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  z-index: 9999;
}

/* Material Modal */
#materialModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#materialModal > div {
  background: var(--bg-secondary);
  padding: 35px;
  border-radius: 12px;
  max-width: 550px;
  width: 90%;
  border: 2px solid var(--border-color);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

#materialModal h3 {
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 24px;
}

#materialModal p {
  color: var(--text-secondary);
  margin-bottom: 25px;
}

#materialModal label {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

#materialModal select {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* === Typ dílu: ozubené kolo / řemenice / řetězové kolo === */
.part-type-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.part-type-switch .part-type-btn {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 10px 8px;
  font-size: 0.95rem;
}
.part-type-switch .part-type-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* atribut hidden musí vyhrát i nad pravidly s display (např. .measurement-guide) */
.field-group [hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  .part-type-switch { flex-direction: column; }
}

/* uložit / nahrát parametry (JSON) */
.format-parametru {
  display: flex;
  gap: 8px;
  margin: -6px 0 16px;
}
.format-parametru .btn {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 7px 8px;
  font-size: 0.85rem;
}

/* === Díly pro automatizaci: volba směru senzoru s obrázkem === */
.orientation-switch .part-type-btn,
.din-kind-switch .part-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  line-height: 1.2;
}
.orientation-switch .part-type-btn svg,
.din-kind-switch .part-type-btn svg { flex: none; }

/* === Adaptér robot – chapadlo: více čísel na řádku a poznámky u polí === */
.inline-inputs {
  display: flex;
  gap: 8px;
}
.inline-inputs .input-field {
  flex: 1;
  min-width: 0;
}
.field-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 6px 0 12px;
}

/* === Díly na DIN lištu: seznam otvorů krabičky (strana + ✕ / druh přes celou šířku / rozměr, posun, výška) === */
.din-otvory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.din-otvor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.din-otvor .input-field {
  margin: 0;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
}
.din-otvor .otvor-strana { grid-column: 1; grid-row: 1; }
.din-otvor .btn.otvor-smazat {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  margin: 0;
  padding: 6px 12px;
}
.din-otvor .otvor-typ { grid-column: 1 / -1; grid-row: 2; }
.din-otvor .otvor-cisla {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px 8px;
}
.din-otvor .otvor-cisla label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}
#btnAddHole {
  width: auto;
  margin: 0 0 12px;
}