:root {
    /* STRUCTURE (blue) */
    --ath-struct: #2f5b8a;
    --ath-struct-soft: rgba(47,91,138,0.08);
    --ath-struct-border: rgba(47,91,138,0.25);
    /* ACCENT (orange) */
    --ath-accent: #ff6a00;
    --ath-accent-hover: #ff8126;
    --ath-accent-soft: rgba(255,106,0,0.15);
    /* HEADER gray */
    --ath-header-bg: #2b2f33;
    --ath-header-bg-soft: #3a3f44;
    /* BACKGROUND */
    --ath-bg: #f4f6f8;
    --ath-card: #ffffff;
    /* TEXT */
    --ath-text: #1c1f23;
    --ath-text-muted: #6c757d;
    /* BORDER */
    --ath-border: rgba(0,0,0,0.08);
    /* SHADOW */
    --ath-shadow: 0 4px 12px rgba(0,0,0,0.06);
}


:root,
[data-bs-theme=light] {
    --ons-result: darkblue;
    --ons-sidebar-color: #white;
    --ons-navbar-color: white;
    /*--ons-navbar-color: rgb(33, 37, 41);*/
    --ons-navbar-text-color: black;
    --ons-wind-color: #333;
    --ons-muted-color: #626262;
    --ons-muted-border-color: #c2bfbf;
    --ons-nav-link-color: black;
    /*--ons-bg-dark-header: rgb(5,1,32);*/
    --ons-bg-dark-header: rgb(33, 37, 41);
    /* --ons-bg-dark-header: rgb(33, 37, 41); */ /* poslední */
    /*--ons-bg-discipline-header: #0b5ea0;*/
    --ons-bg-discipline-header: rgb(21, 57, 90);
    /*--ons-bg-discipline-header: rgb(34,46,60); původní */
    /*--ons-bg-discipline-header: rgb(19,67,105);*/
    --ath-dark: #2b2f33;
}

[data-bs-theme=dark] {
    --ons-result: gold;
    --ons-sidebar-color: #222;
    /*--ons-navbar-color: #111;*/
    --ons-navbar-color: rgb(33, 37, 41);
    --ons-navbar-text-color: white;
    --ons-wind-color: #ccc;
    --ons-muted-color: #b4b4b4;
    --ons-muted-border-color: #3b3a3a;
    --ons-nav-link-color: white;
    --ons-bg-dark-header: #222;
    /*--ons-bg-discipline-header: #222;*/
    /*--ons-bg-discipline-header: rgb(19,67,105);*/
    --ons-bg-discipline-header: rgb(34,46,60);
    /*--ons-bg-discipline-header: #395e60;*/


    --ath-struct: #4a8fdc;
    --ath-struct-soft: rgba(74,143,220,0.15);
    --ath-struct-border: rgba(74,143,220,0.35);
    --ath-header-bg: #1b1f24;
    --ath-header-bg-soft: #252a30;
    --ath-bg: #121417;
    --ath-card: #1b1f24;
    --ath-text: #f1f3f5;
    --ath-text-muted: #9aa4ad;
    --ath-border: rgba(255,255,255,0.08);
    --ath-shadow: 0 6px 18px rgba(0,0,0,0.35);
}


/* ========================================
   PAGE BACKGROUND
   ======================================== */
.results-container {
    /*background: var(--ath-bg) !important;*/
    color: var(--ath-text);
}



/* ========================================
   DISCIPLINE HEADER
   ======================================== */

.ath-header {
    background: linear-gradient( 135deg, var(--ath-header-bg), var(--ath-header-bg-soft) );
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    box-shadow: var(--ath-shadow);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}


    /* accent stripe */
    .ath-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--ath-accent);
    }


    .ath-header img {
        width: 42px;
        height: 42px;
        background: white;
        padding: 6px;
        border-radius: 8px;
    }


.ath-title {
    font-size: 1.3rem;
    font-weight: 700;
}


.ath-sub {
    font-size: .9rem;
    opacity: .8;
}



/* ========================================
   HEATS CONTAINER
   ======================================== */

.ath-heats-container {
    padding: 4px;
}



/* ========================================
   HEAT CARD
   ======================================== */

.ath-heat {
    background: var(--ath-card);
    border-radius: 12px;
    border: 1px solid var(--ath-border);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--ath-shadow);
    /*transition: all .15s ease;*/
}


.ath-heat /*:hover*/ {
    border-color: var(--ath-struct-border);
    box-shadow: var(--ath-shadow), 0 0 0 1px var(--ath-struct-soft);
}

.ath-advance {
    overflow: hidden;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--ath-border);
    margin-bottom: 16px;
    box-shadow: var(--ath-shadow);
}

/* ========================================
   HEAT HEADER
   ======================================== */
.ath-heat-header {
    padding: 8px 12px;
    background: linear-gradient( to right, var(--ath-struct-soft), transparent );
    border-bottom: 1px solid var(--ath-border);
    position: relative;
}


    /* blue accent stripe */
    .ath-heat-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--ath-struct);
    }


.ath-heat-name {
    font-weight: 600;
    font-size: 1rem;
}

@media (min-width: 600px) {
    .ath-heat-name {
        width: 100%;
    }
}



.ath-meta {
    font-size: .8rem;
    color: var(--ath-text-muted);
}


.ath-official {
    margin-left: 8px;
    font-weight: 700;
    font-size: .75rem;
    color: var(--ath-accent);
    letter-spacing: .4px;
}

/* ========================================
   HEAT HEADER RESPONSIVE LAYOUT
   ======================================== */

.ath-heat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
}


/* left info block */
.ath-heat-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    /*width: 100%;*/
    font-size: 90%;
}


/* buttons block */
.ath-heat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}



/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 600px) {

    .ath-heat-name {
        width: auto;
    }

    .ath-heat-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }


    /* meta takes full width row 1 */
    .ath-heat-meta {
        width: 100%;
        order: 1;
    }


    /* actions move to row 2 */
    .ath-heat-actions {
        width: 100%;
        order: 2;
        margin-top: 6px;
    }


    /* optional: left align buttons instead of right */
    .ath-heat-actions {
        justify-content: end;
    }
}



/* ========================================
   HEAT BODY
   ======================================== */

.ath-heat-body {
    padding: 0;
}

#mySidenav .ath-heat-body{
    padding: 5px;
}
/* ========================================
   BUTTONS – SPORT MODERN
   ======================================== */
.ath-btn {
    font-size: .75rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--ath-border);
    background: transparent;
    color: var(--ath-text);
    letter-spacing: .3px;
    text-transform: uppercase;
    /*transition: all .15s ease;*/
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


    /* neutral hover */
    .ath-btn:hover {
        border-color: var(--ath-struct);
        color: var(--ath-struct);
        background: var(--ath-struct-soft);
    }



/* PRIMARY – modern sport blue */
.ath-btn-primary {
    background: linear-gradient( 180deg, var(--ath-struct), #24496f );
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


    .ath-btn-primary:hover {
        background: linear-gradient( 180deg, #3a6ea5, var(--ath-struct) );
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        color: white;
    }


    .ath-btn-primary:disabled {
        background: linear-gradient( 180deg, #3a6ea5, var(--ath-struct-soft) );
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        color: white;
    }


/* SECONDARY – outline sport */
.ath-btn-secondary {
    border: 1px solid var(--ath-struct-border);
    color: var(--ath-struct);
    background: transparent;
}

    .ath-btn-secondary:hover {
        background: var(--ath-struct-soft);
        border-color: var(--ath-struct);
    }



/* ACCENT – orange highlight (use sparingly) */
.ath-btn-accent {
    background: var(--ath-accent-soft);
    color: var(--ath-accent);
    border: 1px solid rgba(255,106,0,0.3);
}

    .ath-btn-accent:hover {
        background: rgba(255,106,0,0.25);
        border-color: var(--ath-accent);
    }

.ath-btn.active {
    background: var(--ath-accent-soft);
    border-color: var(--ath-accent);
    color: var(--ath-accent);
}

.nav-item .ath-btn.active {
    background: linear-gradient( 180deg, var(--ath-struct), #24496f );
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


/* ICON BUTTON */

.ath-btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ========================================
   TABLE IMPROVEMENTS (optional but recommended)
   ======================================== */

.ath-heat table {
    margin-bottom: 0;
}


    .ath-heat table tr {
        /*transition: background .12s ease;*/
    }


        .ath-heat table tr:hover {
            background: var(--ath-struct-soft);
        }

/* ========================================
   TABLE BASE
   ======================================== */

.ath-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    background: var(--ath-card);
}





/* ========================================
   BADGES (PB, SB, etc.)
   ======================================== */

.ath-badge {
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    margin-left: 6px;
    letter-spacing: .4px;
    background: rgba(40,167,69,0.15);
    color: #28a745;
}


/* Personal Best */
.ath-badge-PB {
    background: rgba(40,167,69,0.15);
    color: #28a745;
}


/* Season Best */
.ath-badge-SB {
    background: rgba(0,123,255,0.15);
    color: #007bff;
}


/* National Record */
.ath-badge-NR {
    background: rgba(255,106,0,0.18);
    color: var(--ath-accent);
}


/* World Lead */
.ath-badge-WL, .ath-badge-NL {
    background: rgba(111,66,193,0.18);
    color: #6f42c1;
}

.ath-badge- {
    display: none;
}


/* ========================================
   SPLIT TIMES TABLE – SPORT MODERN
   ======================================== */

.ath-splits {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .85rem;
}


    /* header */

    .ath-splits thead th {
        text-align: left;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--ath-text-soft);
        padding: 10px 8px;
        border-bottom: 1px solid var(--ath-border);
    }


    /* rows */

    .ath-splits tbody tr {
        transition: background .12s ease;
    }


        .ath-splits tbody tr:hover {
            background: var(--ath-hover);
        }


    /* cells */

    .ath-splits td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--ath-border-soft);
    }


    /* position */

    .ath-splits .ath-pos {
        font-weight: 700;
        /*color: var(--ath-struct);*/
        margin-right: 15px;
    }


    /* name */

    .ath-splits .ath-name {
        font-weight: 600;
        white-space: nowrap;
    }

        .ath-splits .ath-name .text-muted {
            margin-left: 15px;
        }


/* split block */

.ath-split-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(60px, 1fr));
    gap: 6px;
}


.ath-split {
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--ath-bg-soft);
}


.ath-split-distance {
    font-size: .65rem;
    color: var(--ath-text-soft);
}


.ath-split-time {
    font-weight: 600;
    font-size: .8rem;
}



/* ========================================
   MOBILE CARD MODE
   ======================================== */

@media (max-width: 640px) {

    .ath-splits thead {
        display: none;
    }

    .ath-splits,
    .ath-splits tbody,
    .ath-splits tr,
    .ath-splits td {
        display: block;
        width: 100%;
    }

        .ath-splits tr {
            background: var(--ath-bg-soft);
            margin-bottom: 12px;
            border-radius: 10px;
            padding: 10px;
            border: 1px solid var(--ath-border-soft);
        }

        .ath-splits td {
            border: none;
            padding: 4px 0;
        }


    /* header line */

    .ath-name-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }


    /* splits grid mobile */

    .ath-split-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}


/* ========================================
   FILTER BAR CONTAINER
   ======================================== */

.ath-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--ath-card-bg);
    border: 1px solid var(--ath-border);
}



/* ========================================
   FILTER BUTTON BASE
   ======================================== */

.ath-filter {
    position: relative;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--ath-border);
    background: transparent;
    color: var(--ath-text);
    cursor: pointer;
    transition: all 0.18s ease;
}



    /* hover */

    .ath-filter:hover {
        border-color: var(--ath-accent);
        color: var(--ath-accent);
        background: rgba(59,130,246,0.08);
    }



    /* active */

    .ath-filter.active {
        background: var(--ath-accent);
        border-color: var(--ath-accent);
        color: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }




/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 640px) {

    .ath-filter-bar {
        padding: 8px;
        gap: 6px;
    }

    .ath-filter {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/*============================================
    RECORDS
    ========================================
*/
.ath-records {
    overflow: hidden;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--ath-border);
    margin-bottom: 16px;
    box-shadow: var(--ath-shadow);
}

.ath-record {
    padding-left: 15px;
    padding-right: 15px;
}

    .ath-record span {
        padding-left: 15px;
        padding-right: 15px;
        /*margin-right: 15px;*/
    }

.ath-advance .btn {
    margin-top: -5px;
}

.ath-record-hidden .ath-record-info {
    display: none;
    flex-wrap: nowrap;
}

.ath-record-visible .ath-record-info {
    /*border-bottom: 1px solid grey;*/
    margin-bottom: 10px;
}

.ath-record-visible .ath-record {
    background: var(--ath-border);
    border-radius: 10px;
    margin: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ath-record-visible .ath-record-mark {
    float: right;
}

.ath-records-panel {
    display: flex;
}

@media (max-width: 640px) {

    .ath-records-panel {
        display: block;
    }

    .ath-record-visible .ath-record {
        display: block;
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (min-width: 640px) {

    .ath-record-visible .ath-record {
        display: block;
        flex-wrap: nowrap;
    }
}