/* Einzellauf-Analyse-Seite (runs/details.html) */

/* KPI-Karten für die wichtigsten Kennzahlen */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5em;
    margin-bottom: 2em;
}
.kpi-card {
    background: #fff;
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}
.kpi-card .value { font-size: 2.5em; font-weight: 600; color: #007bff; }
.kpi-card .label { font-size: 1em; color: #666; margin-top: 0.5em; }
.kpi-card .unit { font-size: 0.8em; color: #888; }

/* Lauf-Beschreibung */
.run-description {
    background-color: #fff;
    border-left: 4px solid #007bff;
    padding: 1em;
    margin-top: 1em;
    border-radius: 4px;
    color: #444;
    line-height: 1.6;
}
.run-description h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 0.9em;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.05em;
}

/* Meta-Info-Zeile unter dem Titel */
.meta-info { color: #666; font-size: 0.95em; margin-bottom: 1em; }
.meta-separator { margin: 0 0.5em; color: #ccc; }

/* Inhalts-Karte (Diagramme, Tabellen) */
.content-card {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-top: 2em;
}
.content-card h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    font-size: 1.5em;
}

/* Ausklappbare Abschnitte innerhalb der content-card */
.content-card details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content-card details > summary::-webkit-details-marker { display: none; }
.content-card details > summary h2 { border-bottom: none; margin-bottom: 0; }
.content-card details > summary::after {
    content: '›';
    font-size: 2.5em;
    line-height: 1;
    font-weight: 300;
    color: #007bff;
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}
.content-card details[open] > summary::after { transform: rotate(90deg); }

/* Detail-Grid (technische Lauf-Parameter) */
.details-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5em 2.5em;
}
.detail-group h3 {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 1em;
    margin-top: 0;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5em;
}
.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.7em 0.2em;
    font-size: 0.95em;
    border-bottom: 1px solid #f5f5f5;
}
.detail-group .detail-item:last-child { border-bottom: none; }
.detail-item .label { color: #555; }
.detail-item .value { font-weight: 600; color: #000; }
.detail-item .unit { color: #777; margin-left: 0.25em; font-size: 0.9em; }

/* Rundentyp-Zelle (bearbeitbar) */
.lap-type-cell { cursor: pointer; user-select: none; }
tbody.editing-disabled .lap-type-cell { cursor: not-allowed; color: #6c757d; }
tbody.editing-disabled .lap-type-cell:hover { background-color: transparent; }

/* Zonen-Zelle (bearbeitbar) */
tbody.editing-disabled .lap-zone-cell { cursor: not-allowed; opacity: 0.8; }
tbody:not(.editing-disabled) .lap-zone-cell { cursor: pointer; }
tbody:not(.editing-disabled) .lap-zone-cell:hover { background-color: #f8f9fa; }

/* Interaktiver Karten-Header mit Sperr-Icon */
.card-header-interactive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}
.card-header-interactive h2 { margin: 0; padding: 0; border: none; }

/* Sperr-Icon (SVG als Hintergrundbild) */
.lock-icon {
    width: 24px; height: 24px; cursor: pointer;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    transition: transform 0.2s ease-in-out;
}
.lock-icon:hover { transform: scale(1.1); }
.lock-icon.is-locked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
}
.lock-icon:not(.is-locked) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'%3E%3C/path%3E%3C/svg%3E");
}

/* Filter-Dropdown in Tabellen-Header */
.filter-dropdown {
    padding: 5px 8px; border-radius: 5px; border: 1px solid #ddd;
    background-color: #fff; font-size: 0.9em; font-family: inherit; margin: -5px 0;
}

/* Werkzeug-Leiste über der Tabelle */
.header-tools { display: flex; align-items: center; gap: 15px; }

.btn-tool {
    background-color: #f0f4f8; border: 1px solid #d1d9e6; border-radius: 20px;
    padding: 5px 12px; cursor: pointer; font-size: 0.9em; color: #555;
    transition: all 0.2s ease; display: flex; align-items: center; gap: 5px;
}
.btn-tool:hover { background-color: #e2e6ea; color: #007bff; border-color: #007bff; }
.btn-tool .icon { font-size: 1.1em; }
.btn-tool:disabled { opacity: 0.5; cursor: not-allowed; background-color: #e9ecef; border-color: #dee2e6; color: #adb5bd; }

/* Checkbox-Spalte (Runden zusammenführen) */
.checkbox-col { display: none; width: 40px; text-align: center; }

/* Zusammenführen-Button */
.btn-merge { display: none; background-color: #fff3cd; border-color: #ffeeba; color: #856404; }
.btn-merge:hover { background-color: #ffeeba; }

/* ML-Training-Button */
.btn-ml-train { background-color: #e8f4fd; border-color: #b8daff; color: #004085; }
.btn-ml-train:hover { background-color: #cce5ff; border-color: #004085; color: #004085; }