/* =====================================================
   TrailBook v0.2
   Tema principale
   ===================================================== */

:root{

    --primary:#F59E0B;
    --primary-dark:#D97706;

    --dark:#111827;
    --dark-2:#1F2937;
    --light:#F8FAFC;

    --text:#1E293B;
    --muted:#64748B;

    --radius:18px;

    --shadow:
        0 15px 35px rgba(0,0,0,.12);

}

/* ===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background:#F4F6F9;

    color:var(--text);

}

/* ===================================================== */
/* NAVBAR */
/* ===================================================== */

.navbar{

    z-index: 1030;

    background:rgba(17,24,39,.92)!important;

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.navbar-brand{

    font-size:1.6rem;

    font-weight:800;

    color:white!important;

}

.nav-link{

    color:white!important;

    opacity:.8;

    transition:.3s;

}

.nav-link:hover{

    opacity:1;

    color:var(--primary)!important;

}

.nav-link.active,
.nav-link[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.navbar-toggler {
    padding: 0.45rem 0.6rem;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.75rem;
}

.navbar-toggler:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

.navbar-toggler:focus {
    box-shadow:
        0 0 0 0.2rem
        rgba(255, 255, 255, 0.22);
}

.navbar-toggler-icon {
    filter:
        invert(1)
        grayscale(1)
        brightness(2);
}

@media (max-width: 991.98px) {

    .navbar-collapse {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .navbar-nav {
        gap: 0.25rem;
    }

    #navbar .nav-link {
        display: flex;
        align-items: center;

        min-height: 44px;
        padding: 0.7rem 0.85rem;

        border-radius: 0.75rem;
    }

    #navbar .nav-link:hover {
        background:
            rgba(255, 255, 255, 0.08);
    }

    #navbar .nav-link.active,
    #navbar .nav-link[aria-current="page"] {
        opacity: 1;

        background:
            rgba(255, 255, 255, 0.14);

        text-decoration: none;
    }

}

@media (max-width: 575.98px) {

    .navbar-brand {
        font-size: 1.3rem;
    }

}

/* ===================================================== */
/* HERO */
/* ===================================================== */

.hero{

    min-height:88vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        rgba(17,24,39,.96),
        rgba(31,41,55,.92)
    );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(245,158,11,.18),
    transparent 40%);

}

.hero .container{

    position:relative;

    z-index:10;

}

.hero h1{

    font-size:5rem;

    font-weight:800;

    color:white;

    line-height:1;

}

.hero h3{

    color:var(--primary);

    font-weight:700;

}

.hero p{

    color:#CBD5E1;

}

.hero h2{

    color:white;

    font-weight:700;

}

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

.race-card{

    border:none;

    border-radius:var(--radius);

    background:

    rgba(255,255,255,.10);

    color:white;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

}

.race-card hr{

    border-color:rgba(255,255,255,.15);

}

.race-card p{

    color:#E5E7EB;

}

.race-card strong{

    color:white;

}

/* ===================================================== */
/* SEZIONI */
/* ===================================================== */

.section{

    padding:90px 0;

}

.section h2{

    font-size:2.2rem;

    font-weight:800;

    margin-bottom:40px;

    position:relative;

}

.section h2::after{

    content:"";

    width:90px;

    height:5px;

    background:var(--primary);

    display:block;

    margin-top:12px;

    border-radius:30px;

}

/* ===================================================== */
/* BOX STATISTICHE */
/* ===================================================== */

.stat-box{

    background:white;

    border-radius:18px;

    padding:35px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h3{

    font-size:2.2rem;

    font-weight:800;

    color:var(--dark);

}

.stat-box p{

    color:var(--muted);

    margin-top:10px;

}

/* ===================================================== */
/* PROFILO */
/* ===================================================== */

.profile-placeholder{

    height:350px;

    background:white;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 12px 35px rgba(0,0,0,.08);

}

.profile-placeholder i{

    color:var(--primary);

}

/* ===================================================== */
/* FOOTER */
/* ===================================================== */

footer{

    padding:60px 0;

    background:var(--dark);

    color:white;

}

footer p{

    opacity:.75;

}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:992px){

.hero{

padding:120px 0;

}

.hero h1{

font-size:3.2rem;

}

.race-card{

margin-top:50px;

}

}

.loader-card{

    background:white;

    border-radius:20px;

    padding:50px;

    margin:50px auto;

    max-width:900px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.loader-subtitle{

    color:#777;

    margin-bottom:30px;

}

.upload-button{

    display:inline-block;

    padding:15px 40px;

    border-radius:12px;

    background:#f59e0b;

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.upload-button:hover{

    background:#d97706;

    transform:translateY(-2px);

}

#loaderText{

    margin-top:25px;

    font-weight:600;

    color:#555;

}

/* =====================================================
   Elevation Chart
===================================================== */

.elevation-chart-wrapper {
    position: relative;
    width: 100%;
    height: 360px;
}

.elevation-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .elevation-chart-wrapper {
        height: 280px;
    }
}

/* =====================================================
   Profile Summary
===================================================== */

.profile-stat-card {
    height: 100%;
    padding: 1.25rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.profile-stat-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

.profile-stat-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.2;
}

/* =====================================================
   Climb Table
===================================================== */

.climb-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.climb-count-badge {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(25, 135, 84, 0.12);
    border-radius: 999px;
}

.climb-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.025);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.climb-table-wrapper {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.climb-table-wrapper thead th {
    padding: 0.9rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.035);
}

.climb-table-wrapper tbody td {
    padding: 1rem;
    white-space: nowrap;
}

.climb-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(25, 135, 84, 0.12);
}

.climb-grade {
    font-weight: 700;
}

.climb-elevation-range {
    color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
    .climb-table-header {
        flex-direction: column;
    }
}

/* =====================================================
   Chart and Climb Interaction
===================================================== */

.elevation-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.climb-row {
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.climb-row:hover {
    background-color: rgba(25, 135, 84, 0.06);
}

.climb-row.is-active {
    background-color: rgba(25, 135, 84, 0.13);
}

.climb-row.is-active .climb-number {
    transform: scale(1.08);
}

@media (max-width: 576px) {
    .elevation-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.climb-grade small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
}

/* =====================================================
   Climb Difficulty
===================================================== */

.climb-difficulty {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.climb-difficulty--easy {
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
}

.climb-difficulty--moderate {
    color: #997404;
    background: rgba(255, 193, 7, 0.2);
}

.climb-difficulty--hard {
    color: #b54708;
    background: rgba(253, 126, 20, 0.18);
}

.climb-difficulty--extreme {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.climb-score {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: rgba(0, 0, 0, 0.55);
}

/* =====================================================
   Route Analysis
===================================================== */

.route-analysis-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.route-insight-card {
    height: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 1rem;
}

.route-insight-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.route-insight-card strong {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}

.route-difficulty-badge {
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.14);
}

.route-difficulty-badge--easy {
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
}

.route-difficulty-badge--moderate {
    color: #997404;
    background: rgba(255, 193, 7, 0.2);
}

.route-difficulty-badge--hard {
    color: #b54708;
    background: rgba(253, 126, 20, 0.18);
}

.route-difficulty-badge--extreme {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

@media (max-width: 768px) {
    .route-analysis-header {
        flex-direction: column;
    }
}

/* =====================================================
   Terrain Breakdown
===================================================== */

.terrain-header {
    margin-bottom: 1.5rem;
}

.terrain-card {
    height: 100%;
    padding: 1.1rem;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 1rem;
}

.terrain-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.terrain-card-header span {
    font-weight: 700;
}

.terrain-card-header strong {
    white-space: nowrap;
}

.terrain-progress {
    width: 100%;
    height: 0.65rem;
    margin-bottom: 0.55rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.09);
    border-radius: 999px;
}

.terrain-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.terrain-progress-bar--uphill {
    background: #dc3545;
}

.terrain-progress-bar--runnable {
    background: #198754;
}

.terrain-progress-bar--downhill {
    background: #0d6efd;
}

.terrain-card small {
    color: rgba(0, 0, 0, 0.58);
}

/* =====================================================
   Split Table
===================================================== */

.split-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.split-count-badge {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(13, 110, 253, 0.12);
    border-radius: 999px;
}

.split-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.025);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.split-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.split-table-wrapper table {
    min-width: 1250px;
}

.split-table-wrapper thead th {
    padding: 0.9rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.035);
}

.split-table-wrapper tbody td {
    padding: 1rem;
    white-space: nowrap;
}

.split-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.12);
}

.split-elevation small,
.split-terrain-details {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: rgba(0, 0, 0, 0.55);
}

.split-terrain {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.split-terrain--uphill {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.split-terrain--runnable {
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
}

.split-terrain--downhill {
    color: #084298;
    background: rgba(13, 110, 253, 0.14);
}

@media (max-width: 768px) {
    .split-table-header {
        flex-direction: column;
    }
}

/* =====================================================
   Split and Chart Interaction
===================================================== */

.split-row {
    cursor: pointer;
}

.split-row > td {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/*
Bootstrap colora direttamente le celle della tabella.
Modifichiamo quindi la sua variabile di stato.
*/
.split-row:hover > td {
    --bs-table-bg-state: rgba(13, 110, 253, 0.06);
}

.split-row.is-active > td {
    --bs-table-bg-state: rgba(13, 110, 253, 0.15);
}

.split-row .split-number {
    transition: transform 0.2s ease;
}

.split-row.is-active .split-number {
    transform: scale(1.1);
}

/* =====================================================
   Split Effort
===================================================== */

.split-effort {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.split-effort--low {
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
}

.split-effort--medium {
    color: #997404;
    background: rgba(255, 193, 7, 0.2);
}

.split-effort--high {
    color: #b54708;
    background: rgba(253, 126, 20, 0.18);
}

.split-effort--extreme {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.split-effort-details {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: rgba(0, 0, 0, 0.55);
}

/* =====================================================
   Pacing Planner
===================================================== */

.pacing-header {
    margin-bottom: 1.5rem;
}

.pacing-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.pacing-time-field {
    width: 110px;
}

.pacing-time-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.65;
}

.pacing-feedback {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.58);
}

.pacing-feedback.is-error {
    color: #b02a37;
}

.pacing-summary-card {
    height: 100%;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.045);
    border: 1px solid rgba(13, 110, 253, 0.11);
    border-radius: 1rem;
}

.pacing-summary-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.pacing-summary-card strong {
    display: block;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .pacing-time-field {
        width: calc(50% - 0.5rem);
    }

    .pacing-controls .btn {
        width: 100%;
    }
}

.split-pacing {
    font-weight: 650;
}

.split-table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.split-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.045);
    border-radius: 999px;
}

.split-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(13, 110, 253, 0.35);
    border-radius: 999px;
}

.split-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 110, 253, 0.55);
}

/* =====================================================
   Nutrition Planner
===================================================== */

.nutrition-header {
    margin-bottom: 1.5rem;
}

.nutrition-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.nutrition-field {
    width: 140px;
}

.nutrition-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.65;
}

.nutrition-feedback {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.58);
}

.nutrition-feedback.is-error {
    color: #b02a37;
}

.nutrition-summary-card {
    height: 100%;
    padding: 1rem;
    background: rgba(25, 135, 84, 0.05);
    border: 1px solid rgba(25, 135, 84, 0.12);
    border-radius: 1rem;
}

.nutrition-summary-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.nutrition-summary-card strong {
    display: block;
    font-size: 1rem;
}

.nutrition-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.nutrition-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.nutrition-table-wrapper table {
    min-width: 760px;
}

.nutrition-table-wrapper th,
.nutrition-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.nutrition-dose-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
    border-radius: 50%;
}

@media (max-width: 576px) {
    .nutrition-field {
        width: calc(50% - 0.5rem);
    }

    .nutrition-controls .btn {
        width: 100%;
    }
}

/* =====================================================
   Nutrition Table Interaction
===================================================== */

.nutrition-row {
    cursor: pointer;
}

.nutrition-row > td {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.nutrition-row:hover > td {
    --bs-table-bg-state:
        rgba(25, 135, 84, 0.06);
}

.nutrition-row.is-active > td {
    --bs-table-bg-state:
        rgba(25, 135, 84, 0.15);
}

.nutrition-row .nutrition-dose-number {
    transition: transform 0.2s ease;
}

.nutrition-row.is-active
.nutrition-dose-number {
    transform: scale(1.1);
}

/* =====================================================
   Hydration Planner
===================================================== */

.hydration-header {
    margin-bottom: 1.5rem;
}

.hydration-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.hydration-field {
    width: 180px;
}

.hydration-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.65;
}

.hydration-feedback {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.58);
}

.hydration-feedback.is-error {
    color: #b02a37;
}

.hydration-summary-card {
    height: 100%;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.12);
    border-radius: 1rem;
}

.hydration-summary-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.hydration-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.hydration-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.hydration-table-wrapper table {
    min-width: 680px;
}

.hydration-table-wrapper th,
.hydration-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.hydration-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    color: #084298;
    background: rgba(13, 110, 253, 0.14);
    border-radius: 50%;
}

/* =====================================================
   Hydration Table Interaction
===================================================== */

.hydration-row {
    cursor: pointer;
}

.hydration-row > td {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hydration-row:hover > td {
    --bs-table-bg-state:
        rgba(13, 110, 253, 0.06);
}

.hydration-row.is-active > td {
    --bs-table-bg-state:
        rgba(13, 110, 253, 0.15);
}

.hydration-row .hydration-number {
    transition: transform 0.2s ease;
}

.hydration-row.is-active
.hydration-number {
    transform: scale(1.1);
}

/* =====================================================
   Race Roadbook
===================================================== */

.roadbook-header {
    margin-bottom: 1.5rem;
}

.roadbook-summary-card {
    height: 100%;
    padding: 1rem;
    background: rgba(108, 117, 125, 0.05);
    border: 1px solid rgba(108, 117, 125, 0.13);
    border-radius: 1rem;
}

.roadbook-summary-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.roadbook-summary-card strong {
    display: block;
    font-size: 1rem;
}

.roadbook-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.roadbook-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.roadbook-table-wrapper table {
    min-width: 900px;
}

.roadbook-table-wrapper th,
.roadbook-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.roadbook-sequence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-weight: 700;
    background: rgba(108, 117, 125, 0.12);
    border-radius: 999px;
}

.roadbook-type {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
}

.roadbook-type--start {
    color: #495057;
    background: rgba(108, 117, 125, 0.14);
}

.roadbook-type--split {
    color: #084298;
    background: rgba(13, 110, 253, 0.14);
}

.roadbook-type--nutrition {
    color: #146c43;
    background: rgba(25, 135, 84, 0.14);
}

.roadbook-type--hydration {
    color: #055160;
    background: rgba(13, 202, 240, 0.16);
}

.roadbook-title {
    display: block;
}

.roadbook-detail {
    display: block;
    margin-top: 0.25rem;
    color: rgba(0, 0, 0, 0.55);
}

.roadbook-row--nutrition > td {
    --bs-table-bg:
        rgba(25, 135, 84, 0.018);
}

.roadbook-row--hydration > td {
    --bs-table-bg:
        rgba(13, 202, 240, 0.022);
}

.roadbook-row--split > td {
    --bs-table-bg:
        rgba(13, 110, 253, 0.018);
}

/* =====================================================
   Interactive Roadbook
===================================================== */

.roadbook-row {
    cursor: pointer;
}

.roadbook-row > td {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.roadbook-row:hover > td {
    --bs-table-bg-state:
        rgba(108, 117, 125, 0.07);
}

.roadbook-row.is-active > td {
    --bs-table-bg-state:
        rgba(108, 117, 125, 0.15);
}

.roadbook-row--split.is-active > td {
    --bs-table-bg-state:
        rgba(13, 110, 253, 0.15);
}

.roadbook-row--nutrition.is-active > td {
    --bs-table-bg-state:
        rgba(25, 135, 84, 0.15);
}

.roadbook-row--hydration.is-active > td {
    --bs-table-bg-state:
        rgba(13, 202, 240, 0.18);
}

.roadbook-row .roadbook-sequence {
    transition: transform 0.2s ease;
}

.roadbook-row.is-active
.roadbook-sequence {
    transform: scale(1.1);
}

/* =====================================================
   Printable Roadbook
===================================================== */

.roadbook-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.roadbook-print-summary {
    display: none;
}

@media (max-width: 576px) {

    .roadbook-header {
        flex-direction: column;
    }

    #printRoadbook {
        width: 100%;
    }

}

/* =====================================================
   Print layout
===================================================== */

@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {

    body.print-roadbook {
        background: #ffffff;
    }

    /*
    Nascondiamo completamente il resto
    dell'app durante la stampa Roadbook.
    Display none evita la generazione
    di pagine bianche aggiuntive.
    */

    body.print-roadbook > * {
        display: none !important;
    }

    body.print-roadbook
    > #roadbookSection {
        display: block !important;

        position: static;

        width: 100%;
        max-width: none;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.print-roadbook
    #roadbookSection
    .card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.print-roadbook
    #roadbookSection
    .card-body {
        padding: 0 !important;
    }

    body.print-roadbook
    #printRoadbook,
    body.print-roadbook
    .roadbook-screen-summary,
    body.print-roadbook
    .roadbook-empty-state {
        display: none !important;
    }

    body.print-roadbook
    .roadbook-header {
        display: block;
        margin-bottom: 5mm;
        padding-bottom: 4mm;
        border-bottom: 1px solid #999999;
    }

    body.print-roadbook
    .roadbook-header h2 {
        margin: 0 0 2mm;
        font-size: 18pt;
    }

    body.print-roadbook
    .roadbook-header p {
        font-size: 9.5pt;
    }

    body.print-roadbook
    .roadbook-print-summary {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 2mm;
        margin-bottom: 5mm;
    }

    body.print-roadbook
    .roadbook-print-summary > div {
        padding: 2.5mm;
        border: 1px solid #b7b7b7;
        border-radius: 2mm;
    }

    body.print-roadbook
    .roadbook-print-summary span {
        display: block;
        margin-bottom: 1mm;
        font-size: 7pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.print-roadbook
    .roadbook-print-summary strong {
        display: block;
        font-size: 9pt;
    }

    body.print-roadbook
    .roadbook-table-wrapper {
        display: block !important;
        overflow: visible !important;
        margin-top: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body.print-roadbook
    .roadbook-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 8.5pt;
    }

    body.print-roadbook
    .roadbook-table-wrapper th,
    body.print-roadbook
    .roadbook-table-wrapper td {
        padding: 1.8mm 1.5mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(1) {
        width: 6%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(2) {
        width: 9%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(3) {
        width: 10%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(4) {
        width: 12%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(5) {
        width: 14%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(6) {
        width: 37%;
    }

    body.print-roadbook
    .roadbook-table-wrapper th:nth-child(7) {
        width: 12%;
    }

    body.print-roadbook
    .roadbook-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-roadbook
    .roadbook-sequence {
        min-width: 0;
        width: 5mm;
        height: 5mm;
        padding: 0;
        font-size: 7.5pt;
    }

    body.print-roadbook
    .roadbook-type {
        padding: 1mm 1.5mm;
        font-size: 6.5pt;
    }

    body.print-roadbook
    .roadbook-title {
        font-size: 8.5pt;
    }

    body.print-roadbook
    .roadbook-detail {
        margin-top: 0.8mm;
        font-size: 7.5pt;
    }

    body.print-roadbook
    .roadbook-resupply {
        margin-top: 1.5mm;
        padding: 1.5mm 2mm;
        border-width: 0.3mm;
        border-left-width: 1mm;
        border-radius: 1mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-roadbook
    .roadbook-resupply-header {
        margin-bottom: 0.8mm;
    }

    body.print-roadbook
    .roadbook-resupply-title {
        font-size: 6.5pt;
    }

    body.print-roadbook
    .roadbook-resupply-status {
        padding: 0.5mm 1mm;
        font-size: 5.5pt;
    }

    body.print-roadbook
    .roadbook-resupply-instruction {
        font-size: 6.8pt;
        line-height: 1.3;
    }

    /*
    Roadbook tascabile
    */

    body.print-roadbook
    #roadbookSection
    .roadbook-header {
        margin-bottom: 3mm;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-header h2 {
        margin: 0 0 1mm !important;
        font-size: 15pt;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-header p {
        margin: 0;
        font-size: 7.5pt;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-print-summary {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 1.5mm;
        margin-bottom: 4mm;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-print-summary > div {
        padding: 1.8mm;
        border: 1px solid #b7b7b7;
        border-radius: 1.5mm;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-print-summary span {
        display: block;
        margin-bottom: 0.5mm;
        font-size: 5.5pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-print-summary strong {
        font-size: 7.5pt;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-table-wrapper {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 6.8pt;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(1) {
        width: 5%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(2) {
        width: 10%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(3) {
        width: 10%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(4) {
        width: 10%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(5) {
        width: 12%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(6) {
        width: 43%;
    }

    body.print-roadbook
    #roadbookSection
    th:nth-child(7) {
        width: 10%;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-table-wrapper th,
    body.print-roadbook
    #roadbookSection
    .roadbook-table-wrapper td {
        padding: 1.2mm 1mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #a9a9a9;
        line-height: 1.25;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-title {
        font-size: 7pt;
        font-weight: 700;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-type {
        font-size: 5.8pt;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-stop,
    body.print-roadbook
    #roadbookSection
    .roadbook-resupply {
        margin-top: 1mm;
        padding: 1mm;
        font-size: 6pt;
    }

}

/* =====================================================
   Race Settings
===================================================== */

.race-settings-header {
    margin-bottom: 1.5rem;
}

.race-settings-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.race-name-field {
    flex: 1 1 280px;
}

.race-athlete-field {
    flex: 1 1 240px;
}

.race-date-field,
.race-time-field {
    width: 180px;
}

.race-settings-controls label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.65;
}

.race-settings-feedback {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.58);
}

.race-settings-feedback.is-error {
    color: #b02a37;
}

.roadbook-clock {
    color: #084298;
}

.roadbook-table-wrapper table {
    min-width: 1020px;
}

@media (max-width: 576px) {

    .race-name-field,
    .race-athlete-field,
    .race-date-field,
    .race-time-field {
        width: 100%;
        flex-basis: 100%;
    }

}

/* =====================================================
   Official Checkpoints
===================================================== */

.checkpoint-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.checkpoint-count {
    display: inline-flex;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 193, 7, 0.2);
    border-radius: 999px;
    white-space: nowrap;
}

.checkpoint-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkpoint-name-field {
    flex: 1 1 250px;
}

.checkpoint-km-field {
    width: 130px;
}

.checkpoint-type-field {
    width: 210px;
}

.checkpoint-controls label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.65;
}

.checkpoint-feedback {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.58);
}

.checkpoint-feedback.is-error {
    color: #b02a37;
}

.checkpoint-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.checkpoint-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.checkpoint-table-wrapper table {
    min-width: 1050px;
}

.checkpoint-table-wrapper th,
.checkpoint-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.checkpoint-row {
    cursor: pointer;
}

.checkpoint-row > td {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.checkpoint-row:hover > td {
    --bs-table-bg-state:
        rgba(255, 193, 7, 0.08);
}

.checkpoint-row.is-active > td {
    --bs-table-bg-state:
        rgba(255, 193, 7, 0.2);
}

.checkpoint-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    color: #664d03;
    background: rgba(255, 193, 7, 0.24);
    border-radius: 50%;
}

.checkpoint-type {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
}

.checkpoint-type--full {
    color: #664d03;
    background: rgba(255, 193, 7, 0.2);
}

.checkpoint-type--water {
    color: #055160;
    background: rgba(13, 202, 240, 0.17);
}

.checkpoint-type--assistance {
    color: #842029;
    background: rgba(220, 53, 69, 0.14);
}

.checkpoint-type--checkpoint {
    color: #41464b;
    background: rgba(108, 117, 125, 0.15);
}

.checkpoint-clock {
    color: #8a6500;
}

@media (max-width: 576px) {

    .checkpoint-header {
        flex-direction: column;
    }

    .checkpoint-name-field,
    .checkpoint-km-field,
    .checkpoint-type-field {
        width: 100%;
        flex-basis: 100%;
    }

    .checkpoint-controls .btn {
        width: 100%;
    }

}

.roadbook-type--checkpoint {
    color: #664d03;
    background: rgba(255, 193, 7, 0.22);
}

.roadbook-row--checkpoint > td {
    --bs-table-bg:
        rgba(255, 193, 7, 0.025);
}

.roadbook-row--checkpoint.is-active > td {
    --bs-table-bg-state:
        rgba(255, 193, 7, 0.2);
}

/* =====================================================
   Official Checkpoint Hydration Coverage
===================================================== */

.hydration-coverage-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.hydration-coverage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hydration-coverage-header h3 {
    font-size: 1.2rem;
}

.hydration-coverage-status {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 750;
    border-radius: 999px;
    white-space: nowrap;
}

.hydration-coverage-status--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.hydration-coverage-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.hydration-coverage-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.hydration-coverage-note {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    color: rgba(0, 0, 0, 0.62);
    background: rgba(13, 110, 253, 0.045);
    border-left: 4px solid rgba(13, 110, 253, 0.45);
    border-radius: 0.65rem;
}

.hydration-coverage-card {
    height: 100%;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 1rem;
}

.hydration-coverage-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.hydration-coverage-card strong {
    display: block;
    font-size: 0.92rem;
}

.hydration-coverage-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.hydration-coverage-table-wrapper table {
    min-width: 900px;
}

.hydration-coverage-table-wrapper th,
.hydration-coverage-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.coverage-arrow {
    margin: 0 0.4rem;
    opacity: 0.45;
}

.hydration-coverage-badge {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
}

.hydration-coverage-badge--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.hydration-coverage-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.hydration-coverage-badge--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.hydration-coverage-row--warning > td {
    --bs-table-bg:
        rgba(255, 193, 7, 0.025);
}

.hydration-coverage-row--critical > td {
    --bs-table-bg:
        rgba(220, 53, 69, 0.025);
}

@media (max-width: 576px) {

    .hydration-coverage-header {
        flex-direction: column;
    }

}

/* =====================================================
   Official Checkpoint Nutrition Coverage
===================================================== */

.nutrition-coverage-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.nutrition-coverage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nutrition-coverage-header h3 {
    font-size: 1.2rem;
}

.nutrition-coverage-status {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 750;
    border-radius: 999px;
    white-space: nowrap;
}

.nutrition-coverage-status--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.nutrition-coverage-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.nutrition-coverage-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.nutrition-coverage-note {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    color: rgba(0, 0, 0, 0.62);
    background: rgba(25, 135, 84, 0.045);
    border-left: 4px solid rgba(25, 135, 84, 0.45);
    border-radius: 0.65rem;
}

.nutrition-coverage-card {
    height: 100%;
    padding: 1rem;
    background: rgba(25, 135, 84, 0.035);
    border: 1px solid rgba(25, 135, 84, 0.1);
    border-radius: 1rem;
}

.nutrition-coverage-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.nutrition-coverage-card strong {
    display: block;
    font-size: 0.92rem;
}

.nutrition-coverage-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.nutrition-coverage-table-wrapper table {
    min-width: 1020px;
}

.nutrition-coverage-table-wrapper th,
.nutrition-coverage-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.nutrition-coverage-badge {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
}

.nutrition-coverage-badge--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.nutrition-coverage-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.nutrition-coverage-badge--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.nutrition-coverage-row--warning > td {
    --bs-table-bg:
        rgba(255, 193, 7, 0.025);
}

.nutrition-coverage-row--critical > td {
    --bs-table-bg:
        rgba(220, 53, 69, 0.025);
}

@media (max-width: 576px) {

    .nutrition-coverage-header {
        flex-direction: column;
    }

}

/* =====================================================
   Operational Resupply Plan
===================================================== */

.resupply-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.resupply-status {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 750;
    border-radius: 999px;
    white-space: nowrap;
}

.resupply-status--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.resupply-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.resupply-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.resupply-note {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    color: rgba(0, 0, 0, 0.62);
    background: rgba(111, 66, 193, 0.045);
    border-left: 4px solid rgba(111, 66, 193, 0.45);
    border-radius: 0.65rem;
}

.resupply-summary-card {
    height: 100%;
    padding: 1rem;
    background: rgba(111, 66, 193, 0.035);
    border: 1px solid rgba(111, 66, 193, 0.1);
    border-radius: 1rem;
}

.resupply-summary-card span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.resupply-summary-card strong {
    display: block;
    font-size: 0.94rem;
}

.resupply-empty-state {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

.resupply-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
}

.resupply-table-wrapper table {
    min-width: 1500px;
}

.resupply-table-wrapper th,
.resupply-table-wrapper td {
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.resupply-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    color: #432874;
    background: rgba(111, 66, 193, 0.15);
    border-radius: 50%;
}

.resupply-point-type,
.resupply-clock,
.resupply-detail {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.55);
}

.resupply-unavailable {
    color: rgba(0, 0, 0, 0.45);
}

.resupply-badge {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
}

.resupply-badge--neutral {
    color: #41464b;
    background: rgba(108, 117, 125, 0.15);
}

.resupply-badge--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.resupply-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.resupply-badge--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.resupply-row--warning > td {
    --bs-table-bg:
        rgba(255, 193, 7, 0.025);
}

.resupply-row--critical > td {
    --bs-table-bg:
        rgba(220, 53, 69, 0.025);
}

@media (max-width: 576px) {

    .resupply-header {
        flex-direction: column;
    }

}

/* =====================================================
   Operational Roadbook Instructions
===================================================== */

.roadbook-resupply {
    margin-top: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(111, 66, 193, 0.13);
    border-left-width: 4px;
    border-radius: 0.65rem;
    background: rgba(111, 66, 193, 0.035);
}

.roadbook-resupply--neutral {
    border-left-color: #6c757d;
}

.roadbook-resupply--safe {
    border-left-color: #198754;
}

.roadbook-resupply--warning {
    border-left-color: #ffc107;
}

.roadbook-resupply--critical {
    border-left-color: #dc3545;
}

.roadbook-resupply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.roadbook-resupply-title {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #432874;
}

.roadbook-resupply-status {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
}

.roadbook-resupply-status--neutral {
    color: #41464b;
    background: rgba(108, 117, 125, 0.15);
}

.roadbook-resupply-status--safe {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.roadbook-resupply-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.roadbook-resupply-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.roadbook-resupply-instruction {
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.7);
}

/* =====================================================
   Automatic Race Briefing
===================================================== */

.briefing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.briefing-status {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 750;
    border-radius: 999px;
    white-space: nowrap;
}

.briefing-status--ready {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.briefing-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.briefing-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.briefing-summary-card {
    height: 100%;
    min-height: 92px;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.09);
    border-radius: 1rem;
}

.briefing-summary-card span {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.58;
}

.briefing-summary-card strong {
    display: block;
    font-size: 0.94rem;
    line-height: 1.35;
}

.briefing-alerts-header {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.briefing-alerts-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.briefing-alerts-header p {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(0, 0, 0, 0.55);
}

.briefing-alert-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.briefing-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left-width: 5px;
    border-radius: 0.9rem;
}

.briefing-alert--warning {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.035);
}

.briefing-alert--critical {
    border-left-color: #dc3545;
    background: rgba(220, 53, 69, 0.035);
}

.briefing-alert-icon {
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1;
}

.briefing-alert-content {
    flex: 1;
    min-width: 0;
}

.briefing-alert-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.briefing-alert-heading strong {
    font-size: 0.93rem;
}

.briefing-alert-category {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.5;
}

.briefing-alert-content p {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.67);
}

.briefing-alert-badge {
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 999px;
}

.briefing-alert-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.22);
}

.briefing-alert-badge--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.briefing-success {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    color: #146c43;
    background: rgba(25, 135, 84, 0.055);
    border: 1px solid rgba(25, 135, 84, 0.16);
    border-radius: 0.9rem;
}

.briefing-success-icon {
    font-size: 1.3rem;
}

.briefing-success strong {
    display: block;
    margin-bottom: 0.2rem;
}

.briefing-success p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.briefing-placeholder {
    padding: 2rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
}

@media (max-width: 576px) {

    .briefing-header {
        flex-direction: column;
    }

}

/* =====================================================
   Interactive Briefing Alerts
===================================================== */

.briefing-alert.is-interactive {
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.briefing-alert.is-interactive:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0.35rem 1rem
        rgba(0, 0, 0, 0.07);
}

.briefing-alert.is-interactive:focus-visible {
    outline: 3px solid
        rgba(13, 110, 253, 0.25);
    outline-offset: 3px;
}

.briefing-alert.is-active {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px
        rgba(13, 110, 253, 0.14);
}

.briefing-alert--warning.is-active {
    background:
        rgba(255, 193, 7, 0.09);
}

.briefing-alert--critical.is-active {
    background:
        rgba(220, 53, 69, 0.085);
}

/* =====================================================
   Printable Race Dossier
===================================================== */

.briefing-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

#raceDossierPrintRoot {
    display: none;
}

@media (max-width: 576px) {

    .briefing-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    #printRaceDossier {
        width: 100%;
    }

}

@media print {

    body.print-race-dossier {
        background: #ffffff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /*
    Nascondiamo tutta l’app e mostriamo
    soltanto il dossier temporaneo.
    */
    body.print-race-dossier > * {
        display: none !important;
    }

    body.print-race-dossier
    > #raceDossierPrintRoot {
        display: block !important;
    }

    #raceDossierPrintRoot {
        width: 100%;
        margin: 0;
        padding: 0;
        color: #000000;
        background: #ffffff;
    }

    .dossier-print-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8mm;
        margin-bottom: 7mm;
        padding-bottom: 5mm;
        border-bottom: 1px solid #8d8d8d;
    }

    .dossier-print-kicker {
        display: block;
        margin-bottom: 1mm;
        font-size: 7pt;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .dossier-print-header h1 {
        margin: 0 0 1.5mm;
        font-size: 21pt;
    }

    .dossier-print-athlete {
        margin: 0 0 1.5mm !important;
        font-size: 8.5pt !important;
    }

    .dossier-print-athlete strong {
        font-weight: 700;
    }

    .dossier-print-header p {
        margin: 0;
        font-size: 9pt;
    }

    .dossier-print-route {
        flex: 0 0 auto;
        text-align: right;
    }

    .dossier-print-route span {
        display: block;
        margin-bottom: 1mm;
        font-size: 7pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    .dossier-print-route strong {
        font-size: 10pt;
    }

    .dossier-print-section {
        width: 100%;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
    Gestione intelligente delle pagine del dossier.
    Briefing e checkpoint possono condividere
    la stessa pagina; le sezioni operative
    principali iniziano invece su pagina nuova.
    */

    .dossier-print-section {
        break-before: auto;
        page-break-before: auto;
    }

    .dossier-print-section--nutrition,
    .dossier-print-section--hydration,
    .dossier-print-section--roadbook,
    .dossier-print-section--profile,
    .dossier-print-section--climbs {
        break-before: page;
        page-break-before: always;
    }

    .dossier-print-section
    h2,
    .dossier-print-section
    h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .dossier-print-section--checkpoints
    .checkpoint-header {
        break-after: avoid;
        page-break-after: avoid;
    }

    .dossier-print-section--checkpoints
    thead {
        break-after: avoid;
        page-break-after: avoid;
    }

    .dossier-print-section .card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .dossier-print-section .card-body {
        padding: 0 !important;
    }

    .dossier-print-section h2 {
        font-size: 16pt;
    }

    .dossier-print-section h3 {
        font-size: 11pt;
    }

    /*
    Briefing
    */

    .dossier-print-section--briefing
    .briefing-header {
        margin-bottom: 4mm;
    }

    .dossier-print-section--briefing
    .briefing-header-actions {
        display: block;
    }

    .dossier-print-section--briefing
    .briefing-summary-card {
        min-height: 0;
        padding: 2.5mm;
    }

    .dossier-print-section--briefing
    .briefing-summary-card span {
        font-size: 6pt;
    }

    .dossier-print-section--briefing
    .briefing-summary-card strong {
        font-size: 8.5pt;
    }

    .dossier-print-section--briefing
    .briefing-alerts-header {
        margin-top: 5mm;
        padding-top: 4mm;
    }

    .dossier-print-section--briefing
    .briefing-alert-list {
        gap: 2mm;
    }

    .dossier-print-section--briefing
    .briefing-alert,
    .dossier-print-section--briefing
    .briefing-success {
        padding: 2.5mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .dossier-print-section--briefing
    .briefing-alert.is-interactive {
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    /*
    Punti ufficiali / checkpoint
    */

    .dossier-print-section--checkpoints
    .checkpoint-header {
        margin-bottom: 4mm;
    }

    .dossier-print-section--checkpoints
    .checkpoint-header h2 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--checkpoints
    .checkpoint-header p {
        font-size: 8pt;
    }

    .dossier-print-section--checkpoints
    .checkpoint-count {
        font-size: 8pt;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper[hidden] {
        display: none !important;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper:not([hidden]) {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 8pt;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th,
    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper td {
        padding: 1.8mm 1.3mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(1) {
        width: 6%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(2) {
        width: 23%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(3) {
        width: 10%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(4) {
        width: 19%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(5) {
        width: 14%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(6) {
        width: 16%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper th:nth-child(7) {
        width: 12%;
    }

    .dossier-print-section--checkpoints
    .checkpoint-table-wrapper tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /*
    Nutrizione
    */

    .dossier-print-section--nutrition
    .nutrition-header {
        margin-bottom: 4mm;
    }

    .dossier-print-section--nutrition
    .nutrition-header h2 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--nutrition
    .nutrition-header p {
        font-size: 8pt;
    }

    .dossier-print-section--nutrition
    .nutrition-summary-card {
        min-height: 0;
        padding: 2.5mm;
    }

    .dossier-print-section--nutrition
    .nutrition-summary-card span {
        font-size: 6.5pt;
    }

    .dossier-print-section--nutrition
    .nutrition-summary-card strong {
        font-size: 8.5pt;
    }

    .dossier-print-section--nutrition
    .nutrition-empty-state[hidden] {
        display: none !important;
    }

    .dossier-print-section--nutrition
    .nutrition-table-wrapper:not([hidden]),
    .dossier-print-section--nutrition
    .nutrition-coverage-table-wrapper:not([hidden]) {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .dossier-print-section--nutrition
    .nutrition-table-wrapper table,
    .dossier-print-section--nutrition
    .nutrition-coverage-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 7.5pt;
    }

    .dossier-print-section--nutrition
    .nutrition-table-wrapper th,
    .dossier-print-section--nutrition
    .nutrition-table-wrapper td,
    .dossier-print-section--nutrition
    .nutrition-coverage-table-wrapper th,
    .dossier-print-section--nutrition
    .nutrition-coverage-table-wrapper td {
        padding: 1.6mm 1.2mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    .dossier-print-section--nutrition
    .nutrition-table-wrapper tbody tr,
    .dossier-print-section--nutrition
    .nutrition-coverage-table-wrapper tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-section {
        margin-top: 7mm;
        padding-top: 5mm;
        border-top: 1px solid #b7b7b7;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-header {
        margin-bottom: 3mm;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-header h3 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-header p,
    .dossier-print-section--nutrition
    .nutrition-coverage-note {
        font-size: 7.5pt;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-note {
        padding: 2.5mm;
        margin-bottom: 3mm;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-card {
        min-height: 0;
        padding: 2.5mm;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-card span {
        font-size: 6.5pt;
    }

    .dossier-print-section--nutrition
    .nutrition-coverage-card strong {
        font-size: 8.5pt;
    }

    /*
    Idratazione
    */

    .dossier-print-section--hydration
    .hydration-header {
        margin-bottom: 4mm;
    }

    .dossier-print-section--hydration
    .hydration-header h2 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--hydration
    .hydration-header p {
        font-size: 8pt;
    }

    .dossier-print-section--hydration
    .hydration-summary-card {
        min-height: 0;
        padding: 2.5mm;
    }

    .dossier-print-section--hydration
    .hydration-summary-card span {
        font-size: 6.5pt;
    }

    .dossier-print-section--hydration
    .hydration-summary-card strong {
        font-size: 8.5pt;
    }

    .dossier-print-section--hydration
    .hydration-empty-state[hidden] {
        display: none !important;
    }

    .dossier-print-section--hydration
    .hydration-table-wrapper:not([hidden]),
    .dossier-print-section--hydration
    .hydration-coverage-table-wrapper:not([hidden]) {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .dossier-print-section--hydration
    .hydration-table-wrapper table,
    .dossier-print-section--hydration
    .hydration-coverage-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 7.5pt;
    }

    .dossier-print-section--hydration
    .hydration-table-wrapper th,
    .dossier-print-section--hydration
    .hydration-table-wrapper td,
    .dossier-print-section--hydration
    .hydration-coverage-table-wrapper th,
    .dossier-print-section--hydration
    .hydration-coverage-table-wrapper td {
        padding: 1.6mm 1.2mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    .dossier-print-section--hydration
    .hydration-table-wrapper tbody tr,
    .dossier-print-section--hydration
    .hydration-coverage-table-wrapper tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .dossier-print-section--hydration
    .hydration-coverage-section {
        margin-top: 7mm;
        padding-top: 5mm;
        border-top: 1px solid #b7b7b7;
    }

    .dossier-print-section--hydration
    .hydration-coverage-header {
        margin-bottom: 3mm;
    }

    .dossier-print-section--hydration
    .hydration-coverage-header h3 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--hydration
    .hydration-coverage-header p,
    .dossier-print-section--hydration
    .hydration-coverage-note {
        font-size: 7.5pt;
    }

    .dossier-print-section--hydration
    .hydration-coverage-note {
        padding: 2.5mm;
        margin-bottom: 3mm;
    }

    .dossier-print-section--hydration
    .hydration-coverage-card {
        min-height: 0;
        padding: 2.5mm;
    }

    .dossier-print-section--hydration
    .hydration-coverage-card span {
        font-size: 6.5pt;
    }

    .dossier-print-section--hydration
    .hydration-coverage-card strong {
        font-size: 8.5pt;
    }

    /*
    Roadbook
    */

    .dossier-print-section--roadbook
    .roadbook-screen-summary,
    .dossier-print-section--roadbook
    .roadbook-empty-state {
        display: none !important;
    }

    .dossier-print-section--roadbook
    .roadbook-print-summary {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 2mm;
        margin-bottom: 5mm;
    }

    .dossier-print-section--roadbook
    .roadbook-print-summary > div {
        padding: 2.5mm;
        border: 1px solid #b7b7b7;
        border-radius: 2mm;
    }

    .dossier-print-section--roadbook
    .roadbook-print-summary span {
        display: block;
        margin-bottom: 1mm;
        font-size: 6.5pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    .dossier-print-section--roadbook
    .roadbook-print-summary strong {
        font-size: 8.5pt;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper {
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 7.8pt;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th,
    .dossier-print-section--roadbook
    .roadbook-table-wrapper td {
        padding: 1.7mm 1.3mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(1) {
        width: 6%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(2) {
        width: 9%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(3) {
        width: 10%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(4) {
        width: 12%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(5) {
        width: 14%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(6) {
        width: 37%;
    }

    .dossier-print-section--roadbook
    .roadbook-table-wrapper th:nth-child(7) {
        width: 12%;
    }

    .dossier-print-section--roadbook
    .roadbook-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row--climb td {
        font-weight: 600;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row--climb td:first-child {
        border-left: 3px solid #000;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row--climb
    .roadbook-title {
        font-weight: 800;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row--finish td {
        font-weight: 800;
        border-top: 2px solid #000;
    }

    body.print-roadbook
    #roadbookSection
    .roadbook-row--finish
    .roadbook-title {
        font-size: 8pt;
        font-weight: 900;
    }

    .dossier-print-section--roadbook
    .roadbook-resupply {
        margin-top: 1.5mm;
        padding: 1.5mm;
    }

    /*
    Profilo altimetrico
    */

    .dossier-print-section--profile
    .elevation-chart-header {
        margin-bottom: 5mm;
    }

    .dossier-print-section--profile
    .elevation-chart-header h2 {
        margin: 0 !important;
    }

    .dossier-print-section--profile
    .elevation-chart-wrapper {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 0;
        overflow: visible !important;
    }

    .dossier-print-profile-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    .dossier-print-section--profile {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /*
    Salite rilevate
    */

    .dossier-print-section--climbs
    .climb-table-header {
        margin-bottom: 5mm;
    }

    .dossier-print-section--climbs
    .climb-table-header h2 {
        margin-bottom: 1mm !important;
    }

    .dossier-print-section--climbs
    .climb-table-header p {
        font-size: 8pt;
    }

    .dossier-print-section--climbs
    .climb-count-badge {
        font-size: 8pt;
    }

    .dossier-print-section--climbs
    .climb-empty-state[hidden] {
        display: none !important;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper:not([hidden]) {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 7.3pt;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th,
    .dossier-print-section--climbs
    .climb-table-wrapper td {
        padding: 1.6mm 1.1mm !important;
        white-space: normal !important;
        vertical-align: top;
        border: 1px solid #b7b7b7;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(1) {
        width: 10%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(2) {
        width: 10%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(3) {
        width: 10%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(4) {
        width: 14%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(5) {
        width: 10%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(6) {
        width: 12%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(7) {
        width: 18%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper th:nth-child(8) {
        width: 16%;
    }

    .dossier-print-section--climbs
    .climb-table-wrapper tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

}

/* =====================================================
   Local Race Preset
===================================================== */

.race-preset-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.race-preset-storage-status {
    display: inline-flex;
    padding: 0.45rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.race-preset-storage-status--empty {
    color: #41464b;
    background: rgba(108, 117, 125, 0.15);
}

.race-preset-storage-status--saved {
    color: #146c43;
    background: rgba(25, 135, 84, 0.15);
}

.race-preset-note {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.62);
    background: rgba(13, 110, 253, 0.045);
    border-left: 4px solid rgba(13, 110, 253, 0.45);
    border-radius: 0.65rem;
}

.race-preset-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.race-preset-feedback {
    margin: 0.9rem 0 0;
    font-size: 0.83rem;
}

.race-preset-feedback--neutral {
    color: rgba(0, 0, 0, 0.58);
}

.race-preset-feedback--success {
    color: #146c43;
}

.race-preset-feedback--error {
    color: #b02a37;
}

@media (max-width: 576px) {

    .race-preset-header {
        flex-direction: column;
    }

    .race-preset-actions {
        align-items: stretch;
    }

    .race-preset-actions .btn {
        width: 100%;
    }

}

/* =====================================================
   Portable Race Preset
===================================================== */

.race-preset-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

@media (max-width: 768px) {

    .race-preset-actions .btn {
        flex: 1 1 210px;
    }

}

@media (max-width: 576px) {

    .race-preset-actions .btn {
        flex-basis: 100%;
    }

}

/* =====================================================
   Multiple Race Preset Library
===================================================== */

.race-preset-library-controls {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(300px, 1.4fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.race-preset-library-controls label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    opacity: 0.62;
}

.race-preset-select-field select {
    text-overflow: ellipsis;
}

@media (max-width: 768px) {

    .race-preset-library-controls {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   Full Race Library Backup
===================================================== */

.race-library-backup {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.race-library-backup-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.race-library-backup-header p {
    margin: 0;
    font-size: 0.83rem;
    color: rgba(0, 0, 0, 0.56);
}

.race-library-backup-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.race-library-mode-field {
    flex: 1 1 310px;
}

.race-library-mode-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    opacity: 0.62;
}

.race-library-backup-controls .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.race-library-feedback {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
}

.race-library-feedback--neutral {
    color: rgba(0, 0, 0, 0.58);
}

.race-library-feedback--success {
    color: #146c43;
}

.race-library-feedback--error {
    color: #b02a37;
}

@media (max-width: 576px) {

    .race-library-mode-field {
        flex-basis: 100%;
    }

    .race-library-backup-controls .btn {
        width: 100%;
    }

}

/* =====================================================
   GPX and Preset Route Compatibility
===================================================== */

.race-preset-route-status {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-left-width: 5px;
    border-radius: 0.85rem;
}

.race-preset-route-status--compatible {
    border-left-color: #198754;
    background: rgba(25, 135, 84, 0.045);
}

.race-preset-route-status--warning {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.055);
}

.race-preset-route-status--different {
    border-left-color: #dc3545;
    background: rgba(220, 53, 69, 0.045);
}

.race-preset-route-status--unknown {
    border-left-color: #6c757d;
    background: rgba(108, 117, 125, 0.045);
}

.race-preset-route-status-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.race-preset-route-status-heading strong {
    font-size: 0.88rem;
}

.race-preset-route-status p {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.64);
}

.race-preset-route-badge {
    display: inline-flex;
    padding: 0.3rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 750;
    border-radius: 999px;
}

.race-preset-route-badge--compatible {
    color: #146c43;
    background: rgba(25, 135, 84, 0.16);
}

.race-preset-route-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.24);
}

.race-preset-route-badge--different {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.race-preset-route-badge--unknown {
    color: #41464b;
    background: rgba(108, 117, 125, 0.16);
}

.race-preset-route-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    font-size: 0.74rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.race-preset-route-metrics[hidden] {
    display: none;
}

.race-preset-route-metrics span {
    color: rgba(0, 0, 0, 0.58);
}

.race-preset-route-metrics strong {
    color: rgba(0, 0, 0, 0.82);
}

/* =====================================================
   Automatic Race Preset Suggestion
===================================================== */

.race-preset-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-left-width: 5px;
    border-radius: 0.9rem;
}

.race-preset-suggestion[hidden] {
    display: none;
}

.race-preset-suggestion--compatible {
    border-left-color: #198754;
    background: rgba(25, 135, 84, 0.055);
}

.race-preset-suggestion--warning {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.065);
}

.race-preset-suggestion-content {
    flex: 1;
    min-width: 0;
}

.race-preset-suggestion-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.race-preset-suggestion-icon {
    flex: 0 0 auto;
    font-size: 1.45rem;
}

.race-preset-suggestion-heading > div {
    flex: 1;
    min-width: 180px;
}

.race-preset-suggestion-kicker {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}

.race-preset-suggestion-heading strong {
    display: block;
    font-size: 0.98rem;
}

.race-preset-suggestion-badge {
    display: inline-flex;
    padding: 0.3rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 750;
    border-radius: 999px;
}

.race-preset-suggestion-badge--compatible {
    color: #146c43;
    background: rgba(25, 135, 84, 0.16);
}

.race-preset-suggestion-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.24);
}

.race-preset-suggestion p {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.66);
}

.race-preset-suggestion-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.65rem;
    font-size: 0.73rem;
}

.race-preset-suggestion-metrics span {
    color: rgba(0, 0, 0, 0.58);
}

.race-preset-suggestion-metrics strong {
    color: rgba(0, 0, 0, 0.82);
}

.race-preset-suggestion-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.race-preset-suggestion-actions .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {

    .race-preset-suggestion {
        align-items: stretch;
        flex-direction: column;
    }

    .race-preset-suggestion-actions {
        width: 100%;
    }

    .race-preset-suggestion-actions .btn {
        flex: 1 1 200px;
    }

}

@media (max-width: 576px) {

    .race-preset-suggestion-actions .btn {
        flex-basis: 100%;
    }

}

/* =====================================================
   GPX Waypoint Import
===================================================== */

.waypoint-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.waypoint-import-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.waypoint-summary-card {
    height: 100%;
    padding: 0.9rem 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.09);
    border-radius: 0.9rem;
}

.waypoint-summary-card span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.58;
}

.waypoint-summary-card strong {
    font-size: 1.15rem;
}

.waypoint-import-feedback {
    margin: 1rem 0;
    font-size: 0.83rem;
}

.waypoint-import-feedback--neutral {
    color: rgba(0, 0, 0, 0.58);
}

.waypoint-import-feedback--success {
    color: #146c43;
}

.waypoint-import-feedback--error {
    color: #b02a37;
}

.waypoint-import-empty-state {
    padding: 1.5rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 0.9rem;
}

.waypoint-import-table-wrapper {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.9rem;
}

.waypoint-import-table-wrapper table {
    min-width: 920px;
}

.waypoint-import-row > td {
    transition:
        background-color 0.18s ease;
}

.waypoint-import-row--ready > td {
    --bs-table-bg-state:
        rgba(25, 135, 84, 0.025);
}

.waypoint-import-row--duplicate > td {
    --bs-table-bg-state:
        rgba(255, 193, 7, 0.045);
}

.waypoint-import-row--offroute > td,
.waypoint-import-row--invalid > td {
    --bs-table-bg-state:
        rgba(220, 53, 69, 0.035);
}

.waypoint-import-row td strong {
    display: block;
}

.waypoint-import-row td small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.52);
}

.waypoint-status-badge {
    display: inline-flex;
    padding: 0.28rem 0.6rem;
    font-size: 0.67rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.waypoint-status-badge--ready {
    color: #146c43;
    background: rgba(25, 135, 84, 0.16);
}

.waypoint-status-badge--duplicate {
    color: #997404;
    background: rgba(255, 193, 7, 0.23);
}

.waypoint-status-badge--offroute,
.waypoint-status-badge--invalid {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

@media (max-width: 768px) {

    .waypoint-import-header {
        flex-direction: column;
    }

    .waypoint-import-actions {
        width: 100%;
    }

    .waypoint-import-actions .btn {
        flex: 1 1 190px;
    }

}

@media (max-width: 576px) {

    .waypoint-import-actions .btn {
        flex-basis: 100%;
    }

}

/* =====================================================
   Checkpoint Validation
===================================================== */

.checkpoint-validation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkpoint-validation-status {
    display: inline-flex;
    padding: 0.42rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 750;
    border-radius: 999px;
    white-space: nowrap;
}

.checkpoint-validation-status--valid {
    color: #146c43;
    background: rgba(25, 135, 84, 0.16);
}

.checkpoint-validation-status--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.24);
}

.checkpoint-validation-status--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

.checkpoint-validation-status--unknown {
    color: #41464b;
    background: rgba(108, 117, 125, 0.16);
}

.checkpoint-validation-card {
    height: 100%;
    padding: 0.9rem 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.09);
    border-radius: 0.9rem;
}

.checkpoint-validation-card span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.58;
}

.checkpoint-validation-card strong {
    font-size: 1.15rem;
}

.checkpoint-validation-empty {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 1.25rem;
    text-align: center;
    border-radius: 0.9rem;
}

.checkpoint-validation-empty--neutral {
    color: rgba(0, 0, 0, 0.58);
    border: 1px dashed rgba(0, 0, 0, 0.15);
}

.checkpoint-validation-empty--success {
    color: #146c43;
    background: rgba(25, 135, 84, 0.055);
    border: 1px solid rgba(25, 135, 84, 0.16);
}

.checkpoint-validation-empty[hidden] {
    display: none;
}

.checkpoint-validation-empty span {
    font-size: 0.82rem;
}

.checkpoint-validation-table-wrapper {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.9rem;
}

.checkpoint-validation-table-wrapper table {
    min-width: 760px;
}

.checkpoint-validation-row > td {
    transition:
        background-color 0.18s ease;
}

.checkpoint-validation-row--warning > td {
    --bs-table-bg-state:
        rgba(255, 193, 7, 0.04);
}

.checkpoint-validation-row--critical > td {
    --bs-table-bg-state:
        rgba(220, 53, 69, 0.04);
}

.checkpoint-validation-row td strong {
    display: block;
}

.checkpoint-validation-row td small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.71rem;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.56);
}

.checkpoint-validation-badge {
    display: inline-flex;
    padding: 0.28rem 0.6rem;
    font-size: 0.67rem;
    font-weight: 700;
    border-radius: 999px;
}

.checkpoint-validation-badge--warning {
    color: #997404;
    background: rgba(255, 193, 7, 0.23);
}

.checkpoint-validation-badge--critical {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.16);
}

@media (max-width: 576px) {

    .checkpoint-validation-header {
        flex-direction: column;
    }

}

/* =====================================================
   Checkpoint Stop Planner
===================================================== */

.checkpoint-stop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkpoint-stop-summary-card {
    height: 100%;
    padding: 0.9rem 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.09);
    border-radius: 0.9rem;
}

.checkpoint-stop-summary-card span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.58;
}

.checkpoint-stop-summary-card strong {
    font-size: 1.05rem;
}

.checkpoint-stop-empty {
    margin-top: 1rem;
    padding: 1.4rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.52);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 0.9rem;
}

.checkpoint-stop-empty[hidden] {
    display: none;
}

.checkpoint-stop-table-wrapper {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.9rem;
}

.checkpoint-stop-table-wrapper table {
    min-width: 850px;
}

.checkpoint-stop-table-wrapper td strong {
    display: block;
}

.checkpoint-stop-table-wrapper td small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.71rem;
    color: rgba(0, 0, 0, 0.54);
}

.checkpoint-stop-input-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 105px;
}

.checkpoint-stop-input-group input {
    min-width: 65px;
}

.checkpoint-stop-input-group span {
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.58);
}

/* Roadbook stop instruction */

.roadbook-stop {
    margin-top: 0.45rem;
    padding: 0.5rem 0.6rem;
    background: rgba(13, 110, 253, 0.05);
    border-left: 3px solid rgba(13, 110, 253, 0.6);
    border-radius: 0.45rem;
}

.roadbook-stop-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.roadbook-stop-heading strong {
    font-size: 0.72rem;
}

.roadbook-stop-heading span {
    display: inline-flex;
    padding: 0.18rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(13, 110, 253, 0.13);
    border-radius: 999px;
}

.roadbook-stop p {
    margin: 0.3rem 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
}

@media print {

    .roadbook-toolbar,
    .roadbook-filter-empty {
        display: none !important;
    }

    .roadbook-row.is-filtered-out {
        display: table-row !important;
    }

    .roadbook-stop {
        padding: 1.5mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

}

@media (max-width: 576px) {

    .checkpoint-stop-header {
        flex-direction: column;
    }

}

/* =====================================================
   Roadbook Filters and Search
===================================================== */

.roadbook-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.8fr);
    gap: 0.85rem 1rem;
    margin: 1.25rem 0;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.035);
    border: 1px solid rgba(13, 110, 253, 0.09);
    border-radius: 0.95rem;
}

.roadbook-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.roadbook-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    color: rgba(0, 0, 0, 0.68);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.roadbook-filter-button:hover {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.35);
}

.roadbook-filter-button.is-active {
    color: #ffffff;
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow:
        0 0.25rem 0.65rem
        rgba(13, 110, 253, 0.18);
}

.roadbook-filter-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.3rem;
    color: inherit;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    font-size: 0.65rem;
}

.roadbook-filter-button.is-active span {
    background: rgba(255, 255, 255, 0.2);
}

.roadbook-search-area {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.roadbook-search-field {
    flex: 1;
    min-width: 0;
}

.roadbook-visible-count {
    grid-column: 1 / -1;
    font-size: 0.74rem;
    color: rgba(0, 0, 0, 0.55);
}

.roadbook-filter-empty {
    margin: 1rem 0;
    padding: 1.25rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.56);
    border: 1px dashed rgba(0, 0, 0, 0.16);
    border-radius: 0.9rem;
}

.roadbook-filter-empty[hidden] {
    display: none;
}

.roadbook-row.is-filtered-out {
    display: none;
}

@media (max-width: 992px) {

    .roadbook-toolbar {
        grid-template-columns: 1fr;
    }

    .roadbook-visible-count {
        grid-column: auto;
    }

}

@media (max-width: 576px) {

    .roadbook-filter-group {
        align-items: stretch;
    }

    .roadbook-filter-button {
        flex: 1 1 130px;
        justify-content: center;
    }

    .roadbook-search-area {
        flex-direction: column;
        align-items: stretch;
    }

    .roadbook-search-area .btn {
        width: 100%;
    }

}

#overview,
#strategy,
#nutrition,
#roadbook,
#roadbookSection,
#profile,
#climbs {
    scroll-margin-top: 90px;
}

.dossier-menu-anchor {
    position: relative;
    height: 0;
}

/* =========================================
   Dossier Section Headings
========================================= */

.dossier-section-heading {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
}

.dossier-section-heading__panel {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;

    padding: 1.5rem;

    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;

    box-shadow:
        0 0.75rem 2rem
        rgba(15, 23, 42, 0.06);
}

.dossier-section-heading__index {
    flex-shrink: 0;

    padding: 0.4rem 0.7rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dossier-section-heading h2 {
    margin: 0 0 0.35rem;

    font-size: clamp(
        1.35rem,
        2vw,
        1.8rem
    );

    font-weight: 800;
}

.dossier-section-heading p {
    max-width: 760px;
    margin: 0;

    color: var(--bs-secondary-color);
    line-height: 1.6;
}

@media (max-width: 575.98px) {

    .dossier-section-heading {
        margin-top: 2.5rem;
    }

    .dossier-section-heading__panel {
        flex-direction: column;
        gap: 0.9rem;

        padding: 1.25rem;
    }

}

/* =========================================
   Mobile Dossier Layout
========================================= */

@media (max-width: 575.98px) {

    .dossier-section-heading {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .dossier-section-heading__panel {
        gap: 0.75rem;
        padding: 1rem;

        border-radius: 0.875rem;
    }

    .dossier-section-heading__index {
        padding: 0.35rem 0.6rem;

        font-size: 0.68rem;
        letter-spacing: 0.06em;
    }

    .dossier-section-heading h2 {
        margin-bottom: 0.25rem;

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

    .dossier-section-heading p {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    section.container.my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    section.container > .card {
        border-radius: 0.875rem !important;
    }

    section.container > .card > .card-body {
        padding: 1rem;
    }

}

/* =========================================
   Mobile Responsive Tables
========================================= */

@media (max-width: 767.98px) {

    /*
     * Evita che le card vengano allargate
     * dal contenuto delle tabelle.
     */

    .card,
    .card-body {
        min-width: 0;
    }

    /*
     * Wrapper delle tabelle operative.
     */

    .waypoint-import-table-wrapper,
    .checkpoint-table-wrapper,
    .checkpoint-validation-table-wrapper,
    .checkpoint-stop-table-wrapper,
    .resupply-table-wrapper,
    .nutrition-table-wrapper,
    .nutrition-coverage-table-wrapper,
    .hydration-table-wrapper,
    .hydration-coverage-table-wrapper,
    .roadbook-table-wrapper,
    .split-table-wrapper,
    .climb-table-wrapper {
        position: relative;

        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto !important;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        scrollbar-width: thin;
        scrollbar-color:
            rgba(13, 110, 253, 0.45)
            rgba(0, 0, 0, 0.06);
    }

    /*
     * Indicazione visiva presente sopra
     * ogni tabella scorrevole.
     */

    .waypoint-import-table-wrapper::before,
    .checkpoint-table-wrapper::before,
    .checkpoint-validation-table-wrapper::before,
    .checkpoint-stop-table-wrapper::before,
    .resupply-table-wrapper::before,
    .nutrition-table-wrapper::before,
    .nutrition-coverage-table-wrapper::before,
    .hydration-table-wrapper::before,
    .hydration-coverage-table-wrapper::before,
    .roadbook-table-wrapper::before,
    .split-table-wrapper::before,
    .climb-table-wrapper::before {
        content: "↔ Scorri la tabella";

        position: sticky;
        left: 0;
        z-index: 4;

        display: block;
        width: max-content;

        margin: 0.55rem 0.7rem 0.35rem;
        padding: 0.3rem 0.55rem;

        color: rgba(0, 0, 0, 0.62);
        background: rgba(248, 249, 250, 0.94);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 999px;

        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.03em;

        pointer-events: none;
    }

    /*
     * Mantiene la tabella Salite abbastanza
     * larga da rendere leggibili le colonne.
     */

    .climb-table-wrapper table {
        min-width: 760px;
    }

    /*
     * Elimina lo spazio Bootstrap sotto
     * l’ultima riga.
     */

    .waypoint-import-table-wrapper table,
    .checkpoint-table-wrapper table,
    .checkpoint-validation-table-wrapper table,
    .checkpoint-stop-table-wrapper table,
    .resupply-table-wrapper table,
    .nutrition-table-wrapper table,
    .nutrition-coverage-table-wrapper table,
    .hydration-table-wrapper table,
    .hydration-coverage-table-wrapper table,
    .roadbook-table-wrapper table,
    .split-table-wrapper table,
    .climb-table-wrapper table {
        margin-bottom: 0;
    }

    .race-day-content {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .race-day-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .race-day-next-event {
        border-radius: 1rem;
    }

    .race-day-next-event h2 {
        font-size: clamp(
            1.65rem,
            7vw,
            2.25rem
        );

        line-height: 1.05;
        margin-bottom: 1rem;
    }

    .race-day-event-metrics strong {
        font-size: 1.15rem;
    }

    .race-day-next-detail {
        font-size: 1rem;
        line-height: 1.45;
    }

    .race-day-complete-button {
        min-height: 64px;
        font-size: 1.05rem;
    }

    .race-day-undo-button,
    .race-day-reset-button {
        min-height: 52px;
    }

    .race-day-view.is-focus .race-day-next-event h2 {
        font-size: clamp(
            2rem,
            9vw,
            2.7rem
        );
    }

    .race-day-view.is-focus .race-day-content {
        padding-top: .75rem;
    }

}

/* Scrollbar Safari e Chrome */

.waypoint-import-table-wrapper::-webkit-scrollbar,
.checkpoint-table-wrapper::-webkit-scrollbar,
.checkpoint-validation-table-wrapper::-webkit-scrollbar,
.checkpoint-stop-table-wrapper::-webkit-scrollbar,
.resupply-table-wrapper::-webkit-scrollbar,
.nutrition-table-wrapper::-webkit-scrollbar,
.nutrition-coverage-table-wrapper::-webkit-scrollbar,
.hydration-table-wrapper::-webkit-scrollbar,
.hydration-coverage-table-wrapper::-webkit-scrollbar,
.roadbook-table-wrapper::-webkit-scrollbar,
.split-table-wrapper::-webkit-scrollbar,
.climb-table-wrapper::-webkit-scrollbar {
    height: 9px;
}


.waypoint-import-table-wrapper::-webkit-scrollbar-track,
.checkpoint-table-wrapper::-webkit-scrollbar-track,
.checkpoint-validation-table-wrapper::-webkit-scrollbar-track,
.checkpoint-stop-table-wrapper::-webkit-scrollbar-track,
.resupply-table-wrapper::-webkit-scrollbar-track,
.nutrition-table-wrapper::-webkit-scrollbar-track,
.nutrition-coverage-table-wrapper::-webkit-scrollbar-track,
.hydration-table-wrapper::-webkit-scrollbar-track,
.roadbook-table-wrapper::-webkit-scrollbar-track,
.split-table-wrapper::-webkit-scrollbar-track,
.climb-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
}


.waypoint-import-table-wrapper::-webkit-scrollbar-thumb,
.checkpoint-table-wrapper::-webkit-scrollbar-thumb,
.checkpoint-validation-table-wrapper::-webkit-scrollbar-thumb,
.checkpoint-stop-table-wrapper::-webkit-scrollbar-thumb,
.resupply-table-wrapper::-webkit-scrollbar-thumb,
.nutrition-table-wrapper::-webkit-scrollbar-thumb,
.nutrition-coverage-table-wrapper::-webkit-scrollbar-thumb,
.hydration-table-wrapper::-webkit-scrollbar-thumb,
.hydration-coverage-table-wrapper::-webkit-scrollbar-thumb,
.roadbook-table-wrapper::-webkit-scrollbar-thumb,
.split-table-wrapper::-webkit-scrollbar-thumb,
.climb-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(13, 110, 253, 0.4);
    border-radius: 999px;
}

/* =========================================
   Briefing Preparation Status
========================================= */

.briefing-preparation {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 0.65rem;

    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.briefing-preparation-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    min-height: 44px;
    padding: 0.65rem 0.75rem;

    color: rgba(0, 0, 0, 0.58);
    background: rgba(0, 0, 0, 0.035);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.8rem;

    font-size: 0.78rem;
    font-weight: 700;
}

.briefing-preparation-item.is-ready {
    color: #146c43;
    background: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.28);
}

.briefing-preparation-item.is-pending {
    color: rgba(0, 0, 0, 0.55);
}

.briefing-preparation-icon {
    flex-shrink: 0;

    font-size: 1rem;
    line-height: 1;
}

/*
=====================================================

Race Day Mode

=====================================================
*/

body.race-day-open {
    overflow: hidden;
}

.race-day-view {
    position: fixed;

    inset: 0;

    z-index: 2000;

    overflow-y: auto;

    background: #111111;
    color: #ffffff;

    overscroll-behavior: contain;
}

.race-day-view[hidden] {
    display: none !important;
}

.race-day-shell {
    width: 100%;
    min-height: 100vh;

    max-width: 960px;

    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.race-day-header {
    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.25rem 0;

    background: #111111;

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );
}

.race-day-brand {
    display: block;

    margin-bottom: 0.35rem;

    color: #ffc107;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.race-day-header h1 {
    margin: 0;

    font-size: clamp(
        1.5rem,
        5vw,
        2.4rem
    );

    font-weight: 800;
}

.race-day-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    padding: 0;

    color: #ffffff;
    background: rgba(
        255,
        255,
        255,
        0.08
    );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 50%;

    font-size: 1.15rem;
}

.race-day-content {
    padding-top: 1.25rem;
}

.race-day-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 0.75rem;

    margin-bottom: 1.5rem;
}

.race-day-summary-item {
    padding: 1rem;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 1rem;
}

.race-day-summary-item span {
    display: block;

    margin-bottom: 0.35rem;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}

.race-day-summary-item strong {
    display: block;

    font-size: 1.05rem;
    font-weight: 800;
}

.race-day-next-event {
    margin-bottom: 1.5rem;

    padding: 1.4rem;

    background:
        rgba(
            255,
            193,
            7,
            0.09
        );

    border:
        1px solid rgba(
            255,
            193,
            7,
            0.35
        );

    border-radius: 1.25rem;
}

.race-day-next-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.8rem;
}

.race-day-section-label {
    color: #ffc107;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.race-day-event-type {
    padding:
        0.35rem
        0.65rem;

    color: #111111;
    background: #ffc107;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 800;

    text-transform: uppercase;
}

.race-day-next-event h2 {
    margin:
        0 0
        1.25rem;

    font-size:
        clamp(
            1.6rem,
            6vw,
            2.5rem
        );

    font-weight: 850;
}

.race-day-event-metrics {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 0.65rem;

    margin-bottom: 1rem;
}

.race-day-event-metrics > div {
    padding: 0.85rem;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius: 0.85rem;
}

.race-day-event-metrics span {
    display: block;

    margin-bottom: 0.3rem;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size: 0.67rem;
    font-weight: 700;

    text-transform: uppercase;
}

.race-day-event-metrics strong {
    display: block;

    font-size: 1.08rem;
    font-weight: 850;
}

.race-day-next-detail {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 0.95rem;
    line-height: 1.5;
}

.race-day-progress {
    margin-top: 1.25rem;
    padding-top: 1rem;

    border-top:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );
}

.race-day-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.55rem;
}

.race-day-progress-copy span {
    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-size: 0.7rem;
    font-weight: 700;

    text-transform: uppercase;
}

.race-day-progress-copy strong {
    font-size: 0.8rem;
    font-weight: 800;
}

.race-day-progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius: 999px;
}

.race-day-progress-bar {
    width: 0;
    height: 100%;

    background: #ffc107;

    border-radius: inherit;

    transition:
        width 0.25s ease;
}

.race-day-event-actions {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 0.65rem;

    margin-top: 1rem;
}

.race-day-complete-button,
.race-day-undo-button {
    min-height: 48px;

    border-radius: 0.85rem;

    font-weight: 800;
}

.race-day-complete-button {
    color: #111111;
    background: #ffc107;

    border: 1px solid #ffc107;
}

.race-day-complete-button.is-armed {
    color: #111;
    background: #ff922b;
    border-color: #ff922b;

    transform: scale(.985);
}

.race-day-complete-button.is-armed::after {
    content: "CONFERMA ENTRO 2,5 SEC";
    display: block;

    margin-top: .2rem;

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;

    opacity: .75;
}

.race-day-undo-button {
    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.18
        );
}

.race-day-complete-button:disabled,
.race-day-undo-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.race-day-upcoming {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 0.75rem;

    margin-bottom: 1.5rem;
}

.race-day-upcoming[hidden] {
    display: none !important;
}

.race-day-upcoming-card {
    min-width: 0;

    padding: 1rem;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 1rem;
}

.race-day-upcoming-label {
    display: block;

    margin-bottom: 0.65rem;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.race-day-upcoming-card h3 {
    margin:
        0 0
        0.55rem;

    font-size: 1.05rem;
    font-weight: 800;
}

.race-day-upcoming-time {
    display: block;

    margin-bottom: 0.65rem;

    color: #ffc107;

    font-size: 0.82rem;
    font-weight: 800;
}

.race-day-upcoming-card p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 0.82rem;
    line-height: 1.45;
}

.race-day-placeholder {
    min-height: 280px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 2rem;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    border:
        1px dashed rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 1.25rem;
}

.race-day-placeholder-label {
    margin-bottom: 0.75rem;

    color: #ffc107;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
}

.race-day-placeholder h2 {
    margin-bottom: 0.75rem;

    font-weight: 800;
}

.race-day-placeholder p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    line-height: 1.6;
}

.race-day-reset-button {
    min-height: 48px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    background: transparent;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 0.85rem;

    font-weight: 700;
}

.race-day-reset-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.race-day-next-event {
    background: #171717;
    border: 1px solid rgba(255, 255, 255, .16);
}

.race-day-next-event h2 {
    color: #ffffff;
}

.race-day-next-detail {
    color: rgba(255, 255, 255, .88);
}

.race-day-event-metrics strong {
    color: #ffffff;
}

.race-day-event-metrics span {
    color: rgba(255, 255, 255, .62);
}

/* =========================================
   Race Day - Offline Status
========================================= */

.race-day-offline-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    margin-top: .45rem;
    padding: .3rem .65rem;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;

    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .05);
}

.race-day-offline-dot {
    width: .5rem;
    height: .5rem;

    flex: 0 0 .5rem;

    border-radius: 50%;
    background: currentColor;
}

.race-day-offline-status.is-ready {
    color: #7ee787;
    border-color: rgba(126, 231, 135, .28);
    background: rgba(126, 231, 135, .08);
}

.race-day-offline-status.is-offline {
    color: #ffd43b;
    border-color: rgba(255, 212, 59, .3);
    background: rgba(255, 212, 59, .09);
}

.race-day-offline-status.is-pending {
    color: rgba(255, 255, 255, .55);
}

/* =========================================
   Race Day - Smartphone Safe Area
========================================= */

.race-day-view {
    padding-top:
        env(safe-area-inset-top);

    padding-right:
        env(safe-area-inset-right);

    padding-bottom:
        env(safe-area-inset-bottom);

    padding-left:
        env(safe-area-inset-left);
}

.race-day-header {
    padding-top:
        max(
            1rem,
            env(safe-area-inset-top)
        );
}

.race-day-content {
    padding-bottom:
        max(
            1.5rem,
            env(safe-area-inset-bottom)
        );
}

/* =========================================
   Race Day - Focus Mode
========================================= */

.race-day-header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.race-day-focus-button {
    min-height: 42px;
    padding: .55rem .85rem;

    color: #ffd43b;
    background: rgba(255, 212, 59, .08);

    border: 1px solid rgba(255, 212, 59, .35);
    border-radius: .8rem;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;

    white-space: nowrap;
}

.race-day-focus-button[aria-pressed="true"] {
    color: #111;
    background: #ffd43b;
    border-color: #ffd43b;
}

.race-day-view.is-focus .race-day-summary,
.race-day-view.is-focus #raceDayUpcoming {
    display: none !important;
}

.race-day-view.is-focus .race-day-next-event {
    margin-top: .75rem;
}

.race-day-view.is-focus .race-day-next-event h2 {
    font-size: clamp(
        2rem,
        6vw,
        3rem
    );
}

.race-day-view.is-focus .race-day-next-detail {
    font-size: 1.05rem;
}

@media (
    max-width: 575.98px
) {

    .race-day-shell {
        padding:
            0 0.9rem
            2rem;
    }

    .race-day-header {
        padding:
            1rem 0;
    }

    .race-day-summary {
        grid-template-columns:
            1fr;
    }

    .race-day-summary-item {
        padding: 0.85rem 1rem;
    }

    .race-day-placeholder {
        padding: 1.25rem;
    }

    .race-day-event-metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 0.4rem;
    }

    .race-day-event-metrics > div {
        padding:
            0.7rem
            0.55rem;
    }

    .race-day-event-metrics strong {
        font-size: 0.9rem;
    }
    
    .race-day-upcoming {
        grid-template-columns: 1fr;
    }

    .race-day-upcoming-card {
        padding: 0.9rem 1rem;
    }

    .race-day-upcoming-card h3 {
        font-size: 1rem;
    }

    .race-day-event-actions {
        grid-template-columns: 1fr;
    }

    .race-day-complete-button {
        min-height: 54px;
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {

    .briefing-preparation {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 575.98px) {

    .briefing-preparation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.5rem;
    }

    .briefing-preparation-item {
        justify-content: flex-start;

        padding: 0.6rem;
        font-size: 0.74rem;
    }

}

.briefing-preparation-note {
    margin: -0.5rem 0 1.25rem;
    color: rgba(0, 0, 0, 0.58);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* =====================================================
   Nutrition Product Selector
===================================================== */

.nutrition-products-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.65);
}

.nutrition-products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nutrition-products-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.nutrition-products-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nutrition-products-selection-summary {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.nutrition-product-brand {
    margin-bottom: 1.25rem;
}

.nutrition-product-brand:last-child {
    margin-bottom: 0;
}

.nutrition-product-brand-title {
    margin-bottom: 0.65rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nutrition-product-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );
    gap: 0.75rem;
}

.nutrition-product-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.85rem;
    background: #fff;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.nutrition-product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.nutrition-product-card.is-selected {
    border-color: rgba(25, 135, 84, 0.45);
    background: rgba(25, 135, 84, 0.045);
}

.nutrition-product-card input {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.nutrition-product-content {
    min-width: 0;
}

.nutrition-product-name {
    display: block;
    font-weight: 700;
    line-height: 1.25;
}

.nutrition-product-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: #6c757d;
    line-height: 1.4;
}

.nutrition-product-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.nutrition-product-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.055);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 767px) {

    .nutrition-products-header {
        flex-direction: column;
    }

    .nutrition-products-actions {
        width: 100%;
    }

}

/* ================================
   Nutrition Caffeine Strategy
================================ */

.nutrition-caffeine-strategy {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 20px;
}

.nutrition-caffeine-strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.nutrition-caffeine-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.nutrition-caffeine-status--active {
    background: rgba(25, 135, 84, 0.12);
}

.nutrition-caffeine-status--warning {
    background: rgba(255, 193, 7, 0.16);
}

.nutrition-caffeine-status--disabled {
    background: rgba(108, 117, 125, 0.12);
}

.nutrition-caffeine-strategy-content {
    margin-top: 18px;
}

.nutrition-caffeine-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nutrition-caffeine-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.025);
}

.nutrition-caffeine-card span {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.nutrition-caffeine-card strong {
    font-size: 0.95rem;
}

.nutrition-caffeine-card small {
    opacity: 0.7;
}

.nutrition-caffeine-reason {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nutrition-caffeine-empty {
    padding: 12px 0;
    opacity: 0.75;
}

@media (max-width: 767px) {

    .nutrition-caffeine-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .nutrition-caffeine-strategy-header {
        flex-direction: column;
    }

}

.nutrition-caffeine-dose-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.nutrition-caffeine-dose {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 16px;
}

.nutrition-caffeine-dose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.nutrition-caffeine-dose-header strong {
    font-size: 1rem;
}

.nutrition-caffeine-dose-header span {
    font-size: 0.9rem;
    opacity: 0.7;
}

.nutrition-caffeine-dose-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nutrition-caffeine-dose-grid > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nutrition-caffeine-dose-grid span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.nutrition-caffeine-dose-grid strong {
    font-size: 0.92rem;
}

.nutrition-caffeine-dose-grid small {
    opacity: 0.7;
}

.nutrition-caffeine-dose-reason {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.9rem;
}

@media (max-width: 767px) {

    .nutrition-caffeine-dose-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .nutrition-caffeine-dose-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =====================================================
   ROADBOOK · DUAL FLASK STRATEGY
   ===================================================== */

.roadbook-flask-plan {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.025);
}

.roadbook-flask-plan-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roadbook-flask-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.roadbook-flask {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.6rem;
    background: #fff;
}

.roadbook-flask-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.2rem;
    padding: 0.55rem 0.35rem;
    font-weight: 800;
    font-size: 0.76rem;
    background: rgba(0, 0, 0, 0.06);
}

.roadbook-flask-body {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.6rem;
}

.roadbook-flask-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.roadbook-flask-details {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0.78;
}

.roadbook-flask-auto {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 0, 0.07);
}

.roadbook-flask--carbs {
    border-left: 3px solid #d9a400;
}

.roadbook-flask--electrolytes {
    border-left: 3px solid #17a2b8;
}

.roadbook-flask--water {
    border-left: 3px solid #0d6efd;
}

.roadbook-flask--keep {
    border-left: 3px solid #6c757d;
}

.roadbook-flask--neutral {
    border-left: 3px solid #adb5bd;
}

@media (max-width: 767px) {

    .roadbook-flask-grid {
        grid-template-columns: 1fr;
    }

}

@media print {

    .roadbook-flask-plan {
        break-inside: avoid;
        background: #fff;
    }

    .roadbook-flask {
        background: #fff;
    }

}

/* =====================================================
   RACE DAY · DUAL FLASK
   ===================================================== */

.race-day-flask-plan {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.race-day-flask-plan[hidden] {
    display: none !important;
}

.race-day-flask-plan-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

.race-day-flask-icon {
    font-size: 1.45rem;
    line-height: 1;
}

.race-day-flask-kicker {
    margin-bottom: 0.05rem;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.65;
}

.race-day-flask-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.race-day-flask {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.race-day-flask-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    padding: 0.8rem 0.45rem;
    font-size: 1rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.08);
}

.race-day-flask-content {
    flex: 1;
    min-width: 0;
    padding: 0.75rem;
}

.race-day-flask-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.95rem;
}

.race-day-flask-details {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0.82;
}

.race-day-flask-auto {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.12);
}

.race-day-flask--carbs {
    border-left: 4px solid #d9a400;
}

.race-day-flask--electrolytes {
    border-left: 4px solid #17a2b8;
}

.race-day-flask--water {
    border-left: 4px solid #0d6efd;
}

.race-day-flask--keep {
    border-left: 4px solid #6c757d;
}

.race-day-flask--neutral {
    border-left: 4px solid #adb5bd;
}

@media (max-width: 575px) {

    .race-day-flask-grid {
        grid-template-columns: 1fr;
    }

    .race-day-flask-number {
        flex-basis: 3.25rem;
        font-size: 1.05rem;
    }

    .race-day-flask-heading {
        font-size: 1rem;
    }

    .race-day-flask-details {
        font-size: 0.88rem;
    }

}

/* =====================================================
   RACE DAY · UPCOMING FLASK
   ===================================================== */

.race-day-upcoming-flask {
    margin-top: 0.8rem;
    padding: 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.055);
}

.race-day-upcoming-flask[hidden] {
    display: none !important;
}

.race-day-upcoming-flask-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.race-day-upcoming-flask-header > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.race-day-upcoming-flask-time {
    font-size: 0.78rem;
    font-weight: 800;
    opacity: 0.7;
}

.race-day-upcoming-flask-location {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-bottom: 0.65rem;
}

.race-day-upcoming-flask-location > span {
    font-size: 0.75rem;
    opacity: 0.68;
}

.race-day-upcoming-flask-lines {
    display: grid;
    gap: 0.4rem;
}

.race-day-upcoming-flask-line {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.06);
}

.race-day-upcoming-flask-id {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 2.6rem;
    padding: 0.5rem 0.35rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.08);
}

.race-day-upcoming-flask-content {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
}

.race-day-upcoming-flask-content strong {
    font-size: 0.78rem;
}

.race-day-upcoming-flask-content span {
    font-size: 0.72rem;
    opacity: 0.75;
}

@media (max-width: 575px) {

    .race-day-upcoming-flask-location {
        display: block;
    }

    .race-day-upcoming-flask-location > span {
        display: block;
        margin-top: 0.15rem;
    }

    .race-day-upcoming-flask-content {
        display: block;
    }

    .race-day-upcoming-flask-content span {
        display: block;
        margin-top: 0.15rem;
        line-height: 1.35;
    }

}