/* ============================================================================
   REDS RUNNERS - tema nero e giallo
   ----------------------------------------------------------------------------
   Questo foglio si carica dopo app.min.css (Material Admin) e ne sovrascrive
   i colori. Il framework sotto resta intatto: se un giorno si aggiorna, basta
   ricontrollare questo file.

   Indice:
     1. Variabili
     2. Base e struttura
     3. Sidebar e header
     4. Card, tabelle, form, bottoni
     5. Componenti della classifica (rr-*)
     6. Responsive
   ========================================================================== */

/* --- 1. Variabili -------------------------------------------------------- */
:root {
    --rr-bg:          #0d0d0d;
    --rr-surface:     #17171a;
    --rr-surface-2:   #1f1f24;
    --rr-surface-3:   #26262d;
    --rr-border:      #2e2e35;
    --rr-text:        #ececec;
    --rr-text-soft:   #c2c2c8;
    --rr-muted:       #8b8b93;

    --rr-yellow:      #ffd200;
    --rr-yellow-dark: #d9a900;
    --rr-yellow-soft: rgba(255, 210, 0, .12);
    --rr-yellow-line: rgba(255, 210, 0, .35);

    --rr-gold:        #ffd700;
    --rr-silver:      #c8ccd4;
    --rr-bronze:      #cd7f32;

    --rr-danger:      #ff5a5a;
    --rr-ok:          #4ad991;

    --rr-radius:      6px;
    --rr-shadow:      0 6px 24px -6px rgba(0, 0, 0, .8);
}

/* --- 2. Base e struttura ------------------------------------------------- */
body,
body[data-ma-theme="orange"] {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--rr-bg);
    color: var(--rr-text);
}

.main,
.content,
.page-loader {
    background-color: var(--rr-bg);
}

a {
    color: var(--rr-yellow);
}

a:hover,
a:focus {
    color: var(--rr-yellow-dark);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rr-text);
}

hr,
.rr-hr {
    border-color: var(--rr-border);
}

::selection {
    background: var(--rr-yellow);
    color: #000;
}

/* Scrollbar del contenitore laterale */
.scrollbar-inner > .scroll-element .scroll-bar {
    background-color: var(--rr-yellow-dark);
}

/* --- 3. Sidebar e header ------------------------------------------------- */
.header {
    background-color: #000;
    border-bottom: 1px solid var(--rr-yellow-line);
}

.header__logo h1 a {
    color: var(--rr-yellow);
    font-weight: 700;
    letter-spacing: .5px;
}

.navigation-trigger__line {
    background-color: var(--rr-yellow);
}

.sidebar {
    background-color: var(--rr-surface);
    border-right: 1px solid var(--rr-border);
}

.sidebar .user {
    background-color: #000;
    border-bottom: 1px solid var(--rr-border);
}

.sidebar .user__name {
    color: var(--rr-yellow);
    font-weight: 600;
}

.sidebar .user__email {
    color: var(--rr-muted);
}

.navigation > li > a,
.navigation ul li a {
    color: var(--rr-text-soft);
}

.navigation > li > a:hover,
.navigation ul li a:hover {
    background-color: var(--rr-yellow-soft);
    color: var(--rr-yellow);
}

.navigation > li.navigation__sub--active > a,
.navigation > li.active > a {
    color: var(--rr-yellow);
    border-left: 3px solid var(--rr-yellow);
}

.navigation__sub > ul {
    background-color: var(--rr-surface-2);
}

.dropdown-menu {
    background-color: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
}

.dropdown-item {
    color: var(--rr-text-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--rr-yellow-soft);
    color: var(--rr-yellow);
}

.footer,
.footer p {
    color: var(--rr-muted);
    background: transparent;
}

/* --- 4. Card, tabelle, form, bottoni ------------------------------------- */
.card,
.card.bg-white,
.bg-white {
    background-color: var(--rr-surface) !important;
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
}

.card-shadow {
    border-radius: var(--rr-radius);
    padding: 1.6em;
    margin: 2rem;
    box-shadow: var(--rr-shadow);
}

.card-body,
.card-header {
    color: var(--rr-text);
}

.card-header {
    border-bottom: 1px solid var(--rr-border);
}

/* Tabelle */
.table {
    color: var(--rr-text);
}

.table thead th {
    background-color: var(--rr-surface-2);
    color: var(--rr-yellow);
    border-bottom: 2px solid var(--rr-yellow-line);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
}

.table td,
.table th {
    border-top: 1px solid var(--rr-border);
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: var(--rr-yellow-soft);
}

/* Bootstrap disegna .thead-light chiaro con testo scuro, e la sua regola
   (.table .thead-light th) e' piu' specifica della nostra: sulle pagine
   vecchie restava una fascia bianca in mezzo alla pagina nera. */
.table .thead-light th,
.table thead.thead-light th {
    background-color: var(--rr-surface-2);
    color: var(--rr-yellow);
    border-color: var(--rr-border);
}

/* Cornice di DataTables: ricerca, contatore, paginazione */
.dataTables_wrapper,
.dataTables_wrapper label,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
    color: var(--rr-text-soft);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--rr-text-soft) !important;
    background: transparent !important;
    border: 1px solid var(--rr-border) !important;
    border-radius: 4px;
    margin: 0 .15rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #101010 !important;
    background: var(--rr-yellow) !important;
    border-color: var(--rr-yellow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--rr-muted) !important;
    background: transparent !important;
}

/* Intestazioni ordinabili */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--rr-yellow);
}

/* I bottoni azione nelle tabelle: contorno invece di blocchi pieni,
   altrimenti in una lista lunga sono l'unica cosa che si vede */
.table .actions .btn,
td.actions .btn {
    background-color: transparent;
    border: 1px solid var(--rr-yellow);
    color: var(--rr-yellow);
    padding: .2rem .6rem;
    margin: .1rem;
    font-size: .8rem;
}

.table .actions .btn:hover,
td.actions .btn:hover {
    background-color: var(--rr-yellow);
    color: #101010;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .02);
}

/* Form
   ----------------------------------------------------------------------------
   Material Admin disegna i campi con fondo trasparente e testo scuro: su
   sfondo nero non si legge niente. Qui servono gli !important perche' le
   regole del framework sono piu' specifiche di queste.

   Scelta: i campi di testo restano scuri con testo bianco, le select invece
   diventano chiare con testo nero. Il motivo e' che la tendina aperta di una
   select la disegna il sistema operativo, non il CSS: tenerla chiara e' l'unico
   modo per essere sicuri che si legga sia chiusa che aperta, su tutti i browser.
   -------------------------------------------------------------------------- */

/* Campi di testo, textarea, campi file: testo bianco su fondo scuro */
.form-control,
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
textarea.form-control {
    background-color: var(--rr-surface-2) !important;
    border: 1px solid var(--rr-border) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    border-radius: 4px;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
    background-color: var(--rr-surface-3) !important;
    border-color: var(--rr-yellow) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 0 0 .15rem var(--rr-yellow-soft);
}

.form-control::placeholder,
textarea::placeholder {
    color: #8b8b93 !important;
    -webkit-text-fill-color: #8b8b93;
    opacity: 1;
}

/* Campi in sola lettura: leggibili, ma visibilmente non modificabili */
.form-control[readonly],
input[readonly] {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #d2d2d8 !important;
    -webkit-text-fill-color: #d2d2d8;
    border-style: dashed !important;
    cursor: not-allowed;
}

/* Select: fondo chiaro e testo nero, chiusa e aperta.
   Il prefisso "html body" alza la specificita' oltre qualsiasi regola del
   framework: senza, .form-control di Material Admin (colore #495057 su fondo
   trasparente) lasciava le select grigio scuro su nero, illeggibili. */
html body select,
html body select.form-control,
html body .rr-select,
html body select.rr-select,
.rr-filters select,
.rr-hero select {
    background-color: #f4f4f6 !important;
    border: 1px solid #c9c9d0 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010;
    border-radius: 4px;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    padding: .3rem .4rem;
    font-weight: 600;
}

html body select:focus,
html body select.form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--rr-yellow) !important;
    color: #101010 !important;
    box-shadow: 0 0 0 .15rem var(--rr-yellow-soft);
}

html body select option,
html body select.form-control option {
    background-color: #ffffff;
    color: #101010;
}

/* Select2
   ----------------------------------------------------------------------------
   Quando select2 e' attivo il <select> vero viene nascosto e sostituito da una
   catasta di <span>: tutte le regole scritte sopra per il tag select non lo
   toccano nemmeno di striscio, ed e' per questo che il menu restava grigio
   scuro su nero. Qui si veste il rimpiazzo, con gli stessi colori: fondo
   chiaro e testo nero, aperto e chiuso.
   Se select2 non e' attivo su una pagina queste regole semplicemente non
   trovano nulla da applicare, quindi non danno fastidio.
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #f4f4f6 !important;
    border: 1px solid #c9c9d0 !important;
    border-radius: 4px !important;
    height: auto !important;
    min-height: 34px;
    padding: .15rem .2rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #101010 !important;
    font-weight: 600;
    line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6b6b73 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #101010 transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #101010 transparent !important;
}

/* La tendina che si apre */
.select2-dropdown,
.select2-container--default .select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #c9c9d0 !important;
    color: #101010 !important;
}

.select2-results__option,
.select2-container--default .select2-results__option {
    color: #101010 !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected=true],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--rr-yellow) !important;
    color: #101010 !important;
}

/* Il campo di ricerca dentro la tendina */
.select2-container--default .select2-search--dropdown {
    background-color: #ffffff !important;
    padding: .4rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #ffffff !important;
    border: 1px solid #c9c9d0 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010;
    border-radius: 3px;
    padding: .3rem .5rem;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: #101010 !important;
    -webkit-text-fill-color: #101010;
}

.select2-container--default .select2-results__option[aria-disabled=true],
.select2-container--default .select2-results__message {
    color: #6b6b73 !important;
}

/* Select da sistemare: bordo rosso ma sempre leggibile */
.rr-select--missing,
select.rr-select--missing {
    border: 2px solid var(--rr-danger) !important;
    background-color: #fff1f1 !important;
}

label,
.form-group label,
.control-label {
    color: var(--rr-text-soft);
    font-weight: 600;
    font-size: .85rem;
}

/* Campo data nativo del browser
   color-scheme dice al browser di disegnare il calendario in versione scura;
   senza, si apre una finestra bianca in mezzo alla pagina nera. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    background-color: var(--rr-surface-2) !important;
    border: 1px solid var(--rr-border) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    color-scheme: dark;
    border-radius: 4px;
    padding: .35rem .5rem;
}

input[type="date"]:focus {
    border-color: var(--rr-yellow) !important;
    box-shadow: 0 0 0 .15rem var(--rr-yellow-soft);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .85;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Campo file */
.form-control-file,
input[type="file"] {
    color: var(--rr-text) !important;
    background: transparent !important;
    border: none !important;
}

input[type="file"]::file-selector-button {
    background-color: var(--rr-yellow);
    color: #101010;
    border: none;
    border-radius: 4px;
    padding: .35rem .8rem;
    font-weight: 600;
    margin-right: .8rem;
    cursor: pointer;
}

/* Bottoni */
.btn-warning,
.btn-primary,
.btn-info,
.btn-success {
    background-color: var(--rr-yellow);
    border-color: var(--rr-yellow);
    color: #101010;
    font-weight: 600;
}

.btn-warning:hover,
.btn-primary:hover,
.btn-info:hover,
.btn-success:hover,
.btn-warning:focus,
.btn-primary:focus {
    background-color: var(--rr-yellow-dark);
    border-color: var(--rr-yellow-dark);
    color: #000;
}

.btn-link {
    color: var(--rr-muted);
}

.btn-link:hover {
    color: var(--rr-yellow);
}

.btn-danger {
    background-color: transparent;
    border-color: var(--rr-danger);
    color: var(--rr-danger);
}

/* Riga della password nella scheda utente */
.rr-password-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 1.2rem 0 .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rr-border);
}

.rr-password-row__label {
    color: var(--rr-text-soft);
    font-weight: 600;
    font-size: .85rem;
}

/* Guida in linea
   ----------------------------------------------------------------------------
   L'icona sta dentro i titoli, quindi deve stare sulla riga senza spostare
   niente: dimensione fissa e allineamento verticale al testo. */
.rr-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: .5rem;
    padding: 0;
    vertical-align: middle;
    border: 1px solid var(--rr-yellow-line);
    border-radius: 50%;
    background-color: transparent;
    color: var(--rr-yellow);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.rr-help:hover,
.rr-help:focus {
    background-color: var(--rr-yellow);
    color: #101010;
    outline: none;
}

.rr-help__intro {
    color: var(--rr-text-soft);
    margin-bottom: 1rem;
}

/* Elenco delle spiegazioni: etichetta in giallo, testo sotto */
.rr-help__list {
    margin: 0;
    text-align: left;
}

.rr-help__list dt {
    color: var(--rr-yellow);
    font-weight: 700;
    font-size: .9rem;
    margin-top: 1rem;
}

.rr-help__list dt:first-child {
    margin-top: 0;
}

.rr-help__list dd {
    margin: .25rem 0 0;
    color: var(--rr-text-soft);
    font-size: .9rem;
    line-height: 1.55;
}

/* Nella finestra il testo va a sinistra: SweetAlert2 centra tutto.
   Ci si aggancia alle classi del contenuto, che sono nostre, invece che a
   una classe applicata al riquadro: customClass cambia forma fra le versioni
   della libreria e non e' un appiglio affidabile. */
.swal2-popup .rr-help__intro,
.swal2-popup .rr-help__list,
.swal2-popup .rr-help__list dt,
.swal2-popup .rr-help__list dd {
    text-align: left !important;
}

.rr-help__index {
    margin: 0;
    padding-left: 1.1rem;
    columns: 2;
    column-gap: 2rem;
}

.rr-help__index li {
    margin-bottom: .35rem;
}

@media (max-width: 767px) {
    .rr-help__index {
        columns: 1;
    }
}

/* Finestre SweetAlert2 */
.swal2-popup {
    background-color: var(--rr-surface) !important;
    color: var(--rr-text) !important;
    border: 1px solid var(--rr-yellow-line);
    border-radius: var(--rr-radius);
}

.swal2-title,
.swal2-popup .swal2-title {
    color: var(--rr-yellow) !important;
}

.swal2-html-container,
.swal2-content,
.swal2-popup .swal2-content {
    color: var(--rr-text-soft) !important;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea {
    background-color: var(--rr-surface-2) !important;
    border: 1px solid var(--rr-border) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: none !important;
}

.swal2-popup .swal2-input:focus {
    border-color: var(--rr-yellow) !important;
    box-shadow: 0 0 0 .15rem var(--rr-yellow-soft) !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--rr-yellow) !important;
    color: #101010 !important;
    font-weight: 600;
}

.swal2-popup .swal2-styled.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid var(--rr-border) !important;
    color: var(--rr-text-soft) !important;
}

.swal2-popup .swal2-validation-message {
    background-color: rgba(255, 90, 90, .12) !important;
    color: var(--rr-danger) !important;
}

.swal2-popup .swal2-close {
    color: var(--rr-muted) !important;
}

/* Messaggi flash */
.alert,
.message {
    border-radius: var(--rr-radius);
    border: 1px solid var(--rr-border);
    background-color: var(--rr-surface-2);
    color: var(--rr-text);
    margin: 2rem 2rem 0;
    padding: 1rem 1.2rem;
}

.alert-success,
.message.success {
    border-color: var(--rr-ok);
    color: var(--rr-ok);
}

.alert-danger,
.message.error {
    border-color: var(--rr-danger);
    color: var(--rr-danger);
}

.dataTables_buttons {
    display: none;
}

.font-weight-bold {
    font-weight: 600 !important;
}

/* --- 5. Componenti della classifica -------------------------------------- */

/* Intestazione con i filtri */
.rr-hero {
    background: linear-gradient(135deg, #101010 0%, #1c1a10 100%);
    border: 1px solid var(--rr-yellow-line);
    border-radius: var(--rr-radius);
    padding: 1.8rem;
    margin: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.rr-hero__title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--rr-yellow);
    letter-spacing: .5px;
}

.rr-hero__subtitle {
    margin: .4rem 0 0;
    color: var(--rr-muted);
    font-size: .92rem;
}

.rr-filters {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin: 0;
}

.rr-filters .form-group {
    margin-bottom: 0;
}

.rr-select {
    min-width: 170px;
}

/* Sezioni */
.rr-section {
    margin: 2rem;
    padding: 1.5rem;
    background-color: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    box-shadow: var(--rr-shadow);
}

.rr-row .rr-section {
    margin-left: 0;
    margin-right: 0;
}

.rr-row {
    margin-left: 2rem;
    margin-right: 2rem;
}

.rr-section__title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rr-yellow);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rr-section__hint {
    margin-top: -.6rem;
    margin-bottom: 1.2rem;
}

.rr-muted {
    color: var(--rr-muted);
    font-size: .88rem;
}

.rr-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

/* Podio */
.rr-podium {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.rr-podium__card {
    flex: 1 1 200px;
    background-color: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
    border-top: 4px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 1.2rem;
    text-align: center;
    position: relative;
}

.rr-podium--small .rr-podium__card {
    padding: .9rem;
}

.rr-podium__position {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rr-muted);
}

.rr-podium__name {
    margin-top: .5rem;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--rr-text);
}

.rr-podium__count {
    margin-top: .3rem;
    color: var(--rr-muted);
    font-size: .88rem;
}

.rr-podium__count strong {
    color: var(--rr-yellow);
    font-size: 1.1rem;
}

/* Riga secondaria: le competitive contano solo come spareggio */
.rr-podium__extra {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--rr-text-soft);
    opacity: .8;
}

.rr-list__extra {
    font-size: .75rem;
    color: var(--rr-text-soft);
    opacity: .8;
    margin-right: .5rem;
}

/* Medaglie */
.rr-medal--gold {
    border-top-color: var(--rr-gold);
}

.rr-medal--gold .rr-podium__position,
.rr-pos.rr-medal--gold {
    color: var(--rr-gold);
}

.rr-medal--silver {
    border-top-color: var(--rr-silver);
}

.rr-medal--silver .rr-podium__position,
.rr-pos.rr-medal--silver {
    color: var(--rr-silver);
}

.rr-medal--bronze {
    border-top-color: var(--rr-bronze);
}

.rr-medal--bronze .rr-podium__position,
.rr-pos.rr-medal--bronze {
    color: var(--rr-bronze);
}

/* Liste uomini / donne */
.rr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rr;
}

.rr-list__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--rr-border);
    background-color: var(--rr-surface-2);
    border-radius: 4px;
    margin-bottom: .5rem;
}

.rr-list__item.rr-medal--gold {
    border-left-color: var(--rr-gold);
}

.rr-list__item.rr-medal--silver {
    border-left-color: var(--rr-silver);
}

.rr-list__item.rr-medal--bronze {
    border-left-color: var(--rr-bronze);
}

.rr-list__pos {
    font-weight: 800;
    min-width: 2.2rem;
    color: var(--rr-muted);
}

.rr-list__name {
    flex: 1;
    font-weight: 600;
}

.rr-list__count {
    font-weight: 800;
    color: var(--rr-yellow);
}

/* Maglia nera */
.rr-jersey {
    background: #000;
    border: 1px solid var(--rr-yellow-line);
    border-radius: var(--rr-radius);
    padding: 1.1rem;
    text-align: center;
    height: 100%;
}

.rr-jersey__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rr-yellow);
    font-weight: 700;
    margin-bottom: .5rem;
}

.rr-jersey__name {
    font-weight: 700;
    color: var(--rr-text);
}

.rr-jersey__count {
    color: var(--rr-muted);
    font-size: .85rem;
    margin-bottom: .4rem;
}

/* Badge */
.rr-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-color: var(--rr-surface-3);
    color: var(--rr-text-soft);
    border: 1px solid var(--rr-border);
}

.rr-badge--tie {
    margin-top: .5rem;
    background-color: var(--rr-yellow-soft);
    color: var(--rr-yellow);
    border-color: var(--rr-yellow-line);
}

.rr-badge--ok {
    background-color: rgba(74, 217, 145, .12);
    color: var(--rr-ok);
    border-color: rgba(74, 217, 145, .4);
}

.rr-badge--warn {
    background-color: rgba(255, 210, 0, .14);
    color: var(--rr-yellow);
    border-color: var(--rr-yellow-line);
}

.rr-badge--new {
    background-color: rgba(120, 160, 255, .14);
    color: #9db6ff;
    border-color: rgba(120, 160, 255, .4);
}

.rr-badge--award,
.rr-badge--competitive {
    background-color: var(--rr-yellow);
    color: #101010;
    border-color: var(--rr-yellow);
}

/* Avvisi */
.rr-alert {
    margin: 2rem;
    padding: .9rem 1.2rem;
    border-radius: var(--rr-radius);
    background-color: var(--rr-yellow-soft);
    border: 1px solid var(--rr-yellow-line);
    color: var(--rr-yellow);
    font-size: .9rem;
}

.rr-alert--danger {
    margin: 0 0 1.2rem;
    background-color: rgba(255, 90, 90, .1);
    border-color: rgba(255, 90, 90, .45);
    color: var(--rr-danger);
}

.rr-alert__link {
    margin-left: .5rem;
    text-decoration: underline;
    font-weight: 700;
}

/* Tabelle della classifica */
.rr-table-wrap {
    overflow-x: auto;
}

.rr-table {
    margin-bottom: 0;
    min-width: 640px;
}

.rr-table__center {
    text-align: center;
}

.rr-table__pos {
    width: 70px;
    text-align: center;
}

.rr-table__row--podium {
    background-color: rgba(255, 210, 0, .05);
}

.rr-pos {
    display: inline-block;
    min-width: 1.8rem;
    font-weight: 800;
    color: var(--rr-muted);
}

.rr-action {
    display: inline-block;
    padding: .2rem .4rem;
    color: var(--rr-muted);
}

.rr-action:hover {
    color: var(--rr-yellow);
}

.rr-action--danger:hover {
    color: var(--rr-danger);
}

/* Corse conteggiate */
.rr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.rr-chip {
    display: inline-block;
    padding: .35rem .75rem;
    border-radius: 999px;
    background-color: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
    color: var(--rr-text-soft);
    font-size: .82rem;
}

.rr-chip:hover {
    border-color: var(--rr-yellow);
    color: var(--rr-yellow);
}

.rr-chip--competitive {
    border-style: dashed;
}

/* Riquadri con i numeri */
.rr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.rr-stat {
    flex: 1 1 130px;
    background-color: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: .9rem;
    text-align: center;
}

.rr-stat__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rr-yellow);
    line-height: 1.1;
}

.rr-stat__label {
    display: block;
    font-size: .78rem;
    color: var(--rr-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rr-stat--warn .rr-stat__value {
    color: var(--rr-danger);
}

.rr-stat--new .rr-stat__value {
    color: #9db6ff;
}

/* Form di caricamento e revisione */
.rr-form__actions {
    margin-top: 1.5rem;
    display: flex;
    gap: .8rem;
    align-items: center;
}

.rr-check {
    padding-top: 1.9rem;
}

.rr-check--danger {
    padding-top: 0;
    margin-bottom: 1rem;
    color: var(--rr-danger);
}

.rr-fallback {
    margin-top: 1.2rem;
}

.rr-fallback__toggle {
    font-size: .88rem;
    color: var(--rr-muted);
}

.rr-fallback__toggle:hover {
    color: var(--rr-yellow);
}

.rr-fallback__body {
    margin-top: .8rem;
    padding: 1rem;
    background-color: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
}

.rr-table--review td {
    padding: .5rem .4rem;
}

.rr-table--review .form-control {
    font-size: .85rem;
    padding: .3rem .5rem;
    height: auto;
}

.rr-review__line {
    font-weight: 700;
    display: block;
    color: #ffffff;
}

.rr-review__dob {
    color: var(--rr-muted);
    font-size: .8rem;
    margin-right: .4rem;
}

.rr-review__warning {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--rr-yellow);
}

.rr-row--new {
    background-color: rgba(120, 160, 255, .05);
}

.rr-row--warn {
    background-color: rgba(255, 210, 0, .06);
}

.rr-select--missing {
    border-color: var(--rr-danger);
}

.rr-select--sex,
.rr-select--kind {
    min-width: 70px;
}

.rr-price-field {
    max-width: 80px;
    text-align: right;
}

.rr-empty {
    text-align: center;
}

/* --- 6. Responsive ------------------------------------------------------- */
@media (max-width: 767px) {
    .card-shadow,
    .rr-section,
    .rr-hero,
    .rr-alert {
        margin: 1rem;
        padding: 1rem;
    }

    .rr-row {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .rr-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .rr-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .rr-select {
        min-width: 0;
        width: 100%;
    }

    .rr-hero__title {
        font-size: 1.45rem;
    }

    .rr-podium__card {
        flex-basis: 100%;
    }
}