/****************************************************
 *   GLOBALER RAHMEN FÜR ALLE SIMU-SEKTIONEN
 ****************************************************/
#simu-input-table-wrapper,
#simu-comment-table-wrapper,
#simu-comment-line-wrapper,
#simu-run-wrapper,
#simu-output-json-wrapper,
#simu-output-plot-wrapper,
#simu-input-mini-wrapper,
#simu-output-table-wrapper {
    margin-bottom: 2rem;
}


/****************************************************
 *   EINHEITLICHE TABELLENSTILE
 *   (gilt für alle Simu-Tabellen)
 ****************************************************/

#simu-input-table,
#simu-comment-table,
#simu-input-mini-table,
#simu-output-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* Kopfzellen */
#simu-input-table th,
#simu-comment-table th,
#simu-input-mini-table th,
#simu-output-table-wrapper th {
    font-weight: bold;
    background: #f5f5f5;
    border: 1px solid #ddd;
    text-align: left;
    padding: 0.25rem 0.4rem;
}

/* Normale Zellen */
#simu-input-table td,
#simu-comment-table td,
#simu-input-mini-table td,
#simu-output-table-wrapper td {
    border: 1px solid #ddd;
    padding: 0.25rem 0.4rem;
    vertical-align: middle;
}

/****************************************************
 *   SPEZIFIKA: Eingabe- und Kommentartabelle
 ****************************************************/
#simu-input-table input.simu-input,
#simu-comment-table textarea.simu-comment {
    width: 100%;
    box-sizing: border-box;
}


/****************************************************
 *   RUN-BUTTON + STATUS
 ****************************************************/
#simu-run-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#simu-run-button,
#simu-toggle-detail,
#simu-export-csv {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: 1px solid #0073aa;
    background: #0073aa;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

#simu-run-button:hover,
#simu-toggle-detail:hover,
#simu-export-csv:hover {
    background: #005f8d;
}

#simu-status {
    font-size: 0.9rem;
}


/****************************************************
 *   JSON-AUSGABE
 ****************************************************/
#simu-output-json {
    background: #B0C4DE;
    color: #032403;
    padding: 0.8rem;
    border-radius: 4px;
    max-height: 400px;
    overflow: auto;
    font-size: 0.85rem;
}

/****************************************************
 *   PLOTLY-BLOCK (alignwide)
 ****************************************************/

/* Initial versteckt */
#simu-output-plot-wrapper {
    display: none;
}

/* Sichtbar */
#simu-output-plot-wrapper.simu-visible {
    display: block;
}

/* Steuerbare Parameter */
:root {
    --simu-plot-pad: 20px;     /* Abstand links/rechts zum Viewport */
    --simu-plot-max: 1600px;   /* optionale Obergrenze */
    --simu-plot-ratio: 16 / 10;/* Aspect Ratio pro Plot (lesbar) */

}

/* alignwide Wrapper: symmetrisch + Luft zum Rand */
#simu-output-plot-wrapper.alignwide.simu-visible {
    box-sizing: border-box;
    padding-left: var(--simu-plot-pad);
    padding-right: var(--simu-plot-pad);
}

/* Grid: nutzt die alignwide-Breite, aber nicht mehr */
#simu-output-plot-wrapper.alignwide.simu-visible #simu-plot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    width: 100%;
    max-width: var(--simu-plot-max);
    margin-left: auto;
    margin-right: auto;

    overflow-x: hidden;
}

/* Wichtig gegen horizontales Überlaufen */
#simu-output-plot-wrapper.alignwide.simu-visible #simu-plot-grid > * {
    min-width: 0;
}

/* ---------- Aspect Ratio Wrapper pro Plot ---------- */
#simu-output-plot-wrapper .simu-plot-ratio {
    width: 100%;
    aspect-ratio: var(--simu-plot-ratio);
    position: relative;
}

#simu-output-plot-wrapper .simu-plot {
    position: absolute;
    inset: 0;
}

/* ---------- Fallback für Browser ohne aspect-ratio ---------- */
@supports not (aspect-ratio: 1 / 1) {
    #simu-output-plot-wrapper .simu-plot-ratio {
        height: 420px;   /* Default-Höhe (lesbar) */
    }
}
/* ------------------------------------------------------------ */

/* Mobile: 1x4 */
/* Mobile: volle Breite nutzen (kein Rand), 1x4 */
@media (max-width: 700px) {
  #simu-output-plot-wrapper.alignwide.simu-visible {
    padding-left: 0;
    padding-right: 0;
  }
  #simu-output-plot-wrapper.alignwide.simu-visible #simu-plot-grid {
    grid-template-columns: 1fr;
  }
    /* optional: auf Mobile etwas höher für bessere Lesbarkeit */
  :root {
    --simu-plot-ratio: 4 / 4;
  }
}



/****************************************************
 *   MINI-EINGABE-TABELLE
 ****************************************************/
#simu-input-mini-wrapper h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}


/****************************************************
 *   OUTPUT: TABELLENBEREICH
 ****************************************************/

/* Abstand & Struktur */
#simu-output-table-wrapper h3,
#simu-output-table-wrapper h4 {
    margin-bottom: 0.4rem;
}

/* Bereich der großen Datentabelle (standardmäßig ausgeblendet) */
#simu-output-table {
    margin-top: 1rem;
    display: none;  /* JS blendet ein/aus */
}

/* Flight Phases Tabelle */
#simu-flight-phases {
    margin-bottom: 0.8rem;
}