/**
 * @version     CVS: 1.0.0
 * @package     com_records
 * @copyright   2026 Michael
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      Michael <micha-3773@web.de>
 */

.rekorde-event {
    font-weight: 600;
    white-space: nowrap;
}

.rekorde-event-empty {
    width: 1%;
}

.rekorde-event-name {
    font-weight: 600;
}

.rekorde-event-description {
    margin-top: 2px;
    font-size: 0.92em;
    font-weight: 400;
    color: #777;
    line-height: 1.25;
}

.rekorde-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Disziplin */
.rekorde-table th:nth-child(1),
.rekorde-table td:nth-child(1) {
    width: 18%;
}

/* Leistung */
.rekorde-table th:nth-child(2),
.rekorde-table td:nth-child(2) {
    width: 15%;
    text-align: right;
}

/* Person */
.rekorde-table th:nth-child(3),
.rekorde-table td:nth-child(3) {
    width: 27%;
}

/* Datum */
.rekorde-table th:nth-child(4),
.rekorde-table td:nth-child(4) {
    width: 18%;
}

/* Ort */
.rekorde-table th:nth-child(5),
.rekorde-table td:nth-child(5) {
    width: 19%;
}

/* Pfeil */
.rekorde-table th:nth-child(6),
.rekorde-table td:nth-child(6) {
    width: 3%;
}

/* Leistung immer rechtsbündig */
.rekorde-result {
    text-align: right;
    white-space: nowrap;
}

.rekorde-measurement {
    margin-left: 0.25rem;
    font-weight: normal;
}

.rekorde-agegroup {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 1rem;

    background: #f1f1f1;
    border-left: 5px solid #c00;
    border-bottom: 1px solid #ddd;

    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    color: #333;
}

.rekorde-agegroup:first-child {
    margin-top: 0;
}

.rekorde-table td,
.rekorde-table th {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Personen dürfen umbrechen */
.rekorde-table .rekorde-persons {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Ort darf umbrechen */
.rekorde-table .rekorde-location {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Disziplin darf ebenfalls umbrechen */
.rekorde-table .rekorde-event {
    white-space: normal;
    overflow-wrap: anywhere;
}


/* -------------------------------------------------
   History-Button
   ------------------------------------------------- */

.rekorde-history-toggle {
    width: 40px;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.rekorde-history-button {
    position: relative;

    border: 0;
    background: transparent;
    padding: 0.4rem 0.6rem;

    cursor: pointer;
    color: #c00;

    line-height: 1;
}

.rekorde-history-button:hover {
    color: #900;
}


/* -------------------------------------------------
   Pfeil
   ------------------------------------------------- */

.rekorde-arrow {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition: transform 0.2s ease;
}


/* Pfeil nach oben wenn geöffnet */

.rekorde-history-button[aria-expanded="true"] .rekorde-arrow {
    transform: rotate(225deg);
}


/* -------------------------------------------------
   Spinner während AJAX
   ------------------------------------------------- */

.rekorde-history-button.loading .rekorde-arrow {
    display: none;
}

.rekorde-history-button.loading::after {
    content: "";

    display: inline-block;

    width: 12px;
    height: 12px;

    border: 2px solid rgba(192, 0, 0, 0.25);
    border-top-color: #c00;

    border-radius: 50%;

    animation: rekorde-spin 0.7s linear infinite;
}

@keyframes rekorde-spin {
    to {
        transform: rotate(360deg);
    }
}


/* -------------------------------------------------
   Historische Rekorde
   ------------------------------------------------- */

.rekorde-history-item {
    background-color: #fafafa;
}


/*
 * Anfangszustand der historischen Zeilen.
 * JavaScript setzt beim Einfügen zunächst
 * opacity und transform.
 */

.rekorde-history-item.rekorde-history-hidden {
    opacity: 0;
    transform: translateY(-8px);
}


/*
 * Endzustand
 */

.rekorde-history-item.rekorde-history-visible {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}


/*
 * Historische Rekorde etwas dezenter
 */

.rekorde-history-item td {
    color: #555;
}






/* Smartphone */
@media (max-width: 768px) {

    .rekorde-agegroup {
        margin-top: 2rem;
        margin-bottom: 0.5rem;
        padding: 0.55rem 0.75rem;

        font-size: 1.25rem;
        line-height: 1.3;
    }

    .rekorde-table {
        font-size: 0.9rem;
    }

    .rekorde-table th,
    .rekorde-table td {
        padding: 0.4rem 0.35rem;
    }

    /* Spaltenbreiten */
    .rekorde-table th:nth-child(1),
    .rekorde-table td:nth-child(1) {
        width: 18%;
    }

    .rekorde-table th:nth-child(2),
    .rekorde-table td:nth-child(2) {
        width: 18%;
    }

    .rekorde-table th:nth-child(3),
    .rekorde-table td:nth-child(3) {
        width: 26%;
    }

    .rekorde-table th:nth-child(4),
    .rekorde-table td:nth-child(4) {
        width: 18%;
    }

    .rekorde-table th:nth-child(5),
    .rekorde-table td:nth-child(5) {
        width: 20%;
    }

    /* Leistung rechtsbündig */
    .rekorde-result {
        text-align: right;
        white-space: nowrap;
    }

    /* Personen dürfen umbrechen */
    .rekorde-persons {
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /* Datum nicht umbrechen */
    .rekorde-date {
        white-space: nowrap;
    }

    /* Ort darf umbrechen */
    .rekorde-location {
        white-space: normal;
    }

    .rekorde-measurement {
        font-size: 0.85em;
    }
}