/* =========================
   PRANCHETA (ISOLADA)
========================= */

/* =========================
   Canvas base
   ========================= */
#plantCanvas {
  width: 100%;
  height: 140px;
  display: block;
}

/* =========================
   Wrapper e layout geral
   ========================= */
.plant-wrapper {
  grid-column: 1 / -1; /* 🔥 ocupa toda largura do grid */
  width: 100%;
}

.plant-wrapper canvas {
  width: 100%;
  height: 160px;
  display: block;
}

.plant-wrapper .tuning-table-wrap {
  max-width: 500px;
}

/* =========================
   Modo prancheta no modal
   ========================= */
.measures-body.plant-mode {
  display: block !important;
}

.plant-wrapper {
  max-width: 800px;
  margin: auto;
}

/* =========================
   Controles da prancheta
   ========================= */
.plant-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.plant-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  font-size: 0.92rem;
}

.plant-controls input,
.plant-controls select {
  min-height: 36px;
  padding: 6px 8px;
}

/* =========================
   Tabela de apoio e detalhes
   ========================= */
.plant-wrapper .measures-table {
  width: 100%;
}

.plant-frets-details {
  margin-top: 6px;
}

.plant-frets-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fafafa;
}

.plant-frets-details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.plant-frets-details > .measures-table {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* =========================
   Responsividade
   ========================= */
/* Mobile refinements */
@media (max-width: 768px) {
  .measures-body.plant-mode {
    padding: 8px;
    max-height: 82vh;
    overflow-y: auto;
  }

  .plant-wrapper {
    max-width: 100%;
    margin: 0;
  }

  .plant-wrapper h4 {
    margin: 10px 0 8px;
    font-size: 1rem;
    line-height: 1.3;
  }

  .plant-controls {
    flex-direction: column;
    gap: 8px;
  }

  .plant-controls label {
    width: 100%;
    min-width: 0;
  }

  .plant-controls input,
  .plant-controls select {
    width: 100%;
    font-size: 16px; /* evita zoom no iOS */
  }

  #plantCanvas,
  .plant-wrapper canvas {
    height: 180px;
  }

  .plant-wrapper .measures-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.9rem;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
  }

  .plant-wrapper .measures-table th,
  .plant-wrapper .measures-table td {
    padding: 6px 8px;
  }

  /* Na Prancheta, manter rótulos técnicos em uma linha no mobile */
  .measures-body.plant-mode .plant-wrapper .measures-table th,
  .measures-body.plant-mode .plant-wrapper .measures-table td {
    white-space: nowrap !important;
    word-break: normal !important;
  }

  .plant-wrapper > .measures-table {
    margin-bottom: 10px;
  }

  .plant-wrapper h4 + .measures-table {
    margin-top: 6px;
  }

  .plant-frets-details summary {
    font-size: 0.92rem;
  }
}