/*------------------------------------------
-------1) Variabili e design tokes----------
---------------------------------------------*/


:root,
[data-bs-theme=light] {
    --blade-primary-950: #102441;
    --blade-primary-900: #183A62;
    --blade-primary-800: #174375;
    --blade-primary-700: #164E8E;
    --blade-primary-600: #1C68BA;
    --blade-primary-500: #297DCE;
    --blade-primary-400: #509AE0;
    --blade-primary-300: #8DBCEC;
    --blade-primary-200: #C2DAF5;
    --blade-primary-150: #E4EDFA;
    --blade-primary-100: #F2F7FD;
    --blade-primary-50: #F8FAFD;
    --blade-black: #212226;
    --blade-grey-950: #30333B;
    --blade-grey-900: #4A505E;
    --blade-grey-800: #596074;
    --blade-grey-700: #69748C;
    --blade-grey-600: #76839A;
    --blade-grey-500: #8796AA;
    --blade-grey-400: #9FAEBB;
    --blade-grey-300: #BEC8D2;
    --blade-grey-200: #DEE3E8;
    --blade-grey-150: #E5EBF0;
    --blade-grey-100: #F0F2F5;
    --blade-grey-50: #F5F6F7;
    --blade-grey-25: #FAFBFC;
    --blade-white: #ffffff;
    --blade-green-900: #1C4B2A;
    --blade-green-700: #237239;
    --blade-green-600: #299044;
    --blade-green-500: #35A853;
    --blade-green-300: #94E1A8;
    --blade-green-200: #C3EFCD;
    --blade-green-150: #E0F8E5;
    --blade-green-100: #F5FBF9;
    --blade-green-50: #F7FCF9;
    --blade-yellow-950: #402708;
    --blade-yellow-900: #6E4915;
    --blade-yellow-800: #815A12;
    --blade-yellow-700: #9B720D;
    --blade-yellow-600: #C39C0B;
    --blade-yellow-500: #E2C710;
    --blade-yellow-400: #F3E335;
    --blade-yellow-300: #F6EF4E;
    --blade-yellow-200: #FAFA8E;
    --blade-yellow-150: #FBFCC5;
    --blade-yellow-100: #FDFDE9;
    --blade-yellow-50: #FDFDF3;
    --blade-red-900: #6E1A08;
    --blade-red-700: #A62C1C;
    --blade-red-500: #D94734;
    --blade-red-300: #F2816B;
    --blade-red-100: #FFCABD;
    --blade-red-50: #FFEFEB;
    --blade-orange-500: #F87932;
    --blade-orange-150: #FFEBD3;
    --blade-purple-500: #A855F7;
    --blade-purple-150: #F3E8FF;
    --blade-heading-font: "Poppins", sans-serif;
    --blade-text-font: "Inter tight", sans-serif;
    --blade-btn-font: "Inter tight", sans-serif;
    --blade-border-primary: var(--bs-border-width) var(--bs-border-style) var(--blade-grey-200);
    --blade-ombra-y: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
    --blade-ombra-x: 4px 0 16px 0 rgba(0, 0, 0, 0.04);
}

/*----------------------
-------2) Base----------
------------------------*/

body {
    /* Override di blade.css (body { height: 100vh }). Su mobile 100vh e' il
       viewport "large", quello che si ha solo con le barre del browser ritratte:
       con le barre visibili il body sporge sotto la piega, il fondo di #workspace
       (il contenitore che scrolla davvero) resta irraggiungibile e il documento
       diventa trascinabile, portandosi via la topbar. 100dvh segue il viewport
       effettivamente visibile. Su desktop dvh == vh, quindi la' non cambia nulla. */
    height: 100vh; /* fallback per browser senza dvh */
    height: 100dvh;
    background-color: #fff;
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font), sans-serif;
    font-size: 14px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

b {
    font-weight: 600;
}

/* link */

a {
    color: var(--blade-primary-500);
}

.link {
    color: var(--blade-primary-500);
}


/* tipografia */

.h1,
h1 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media screen and (max-width: 768px) {
    .h1,
    h1 {
        font-size: 28px;
    }
}

.h2,
h2 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media screen and (max-width: 768px) {
    .h2,
    h2 {
        font-size: 26px;
    }
}

.h3,
h3 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0px;
}

@media screen and (max-width: 768px) {
    .h3,
    h3 {
        font-size: 24px;
    }
}

.h4,
h4 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0px;
}

@media screen and (max-width: 768px) {
    .h4,
    h4 {
        font-size: 22px;
    }
}

.h5,
h5 {
    font-family: var(--blade-heading-font);
    line-height: normal;
    font-size: 20px;
    color: var(--blade-black);
    font-style: normal;
    font-weight: 500;
    margin: 0px;
}

.h6,
h6 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0px;
}

p,
text {
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

/*---------------------------------
-------3) Layout generali----------
-----------------------------------*/

/* page body */

.pagebody {
    background-color: var(--blade-grey-25);
}

.pagebody:has(.container-colonne-turni-tabellone) {
    padding: 0px !important;
}

@media (min-width: 992px) {
    .pagebody:has(.two-columns-splitter) {
        overflow: hidden;
    }
    .two-columns-splitter {
        overflow: hidden;
    }
    .split-column-right {
        max-height: 100%;
        overflow-y: auto;
    }
}

/* navbar */

/* Etichetta di versione accanto al logo: resa da blade nel blocco `logo` della
   topbar. Nascosta qui invece di sovrascrivere quel blocco, che significherebbe
   duplicarne tutto il markup per togliere uno <span>. */
@media (max-width: 768px) {
    .project-version-label {
        display: none;
    }
    
}

/* topbar */

.pulsanti-topbar>*,
.pulsanti-topbar:hover>* {
    border-left: 1px solid var(--blade-grey-200);
}

/*--- TABELLONE ---*/

.nav-tabellone {
    padding: 32px 32px 0px 32px;
    display: none;
}

@media (max-width: 1024px) {
    .nav-tabellone {
        display: flex;
        padding: 24px 24px 0px 24px;
    }
}

.nav-tabellone .nav .nav-item a.nav-link:focus {
    color: var(--blade-primary-600);
    background-color: var(--blade-primary-100);
}

.container-colonne-turni-tabellone {
    display: flex;
    flex-direction: row-reverse;
    overflow-x: scroll;
    padding: 40px 34px;
}

@media (max-width: 768px) {
    .container-colonne-turni-tabellone {
        padding: 24px;
    }
}

.colonna-turno-tabellone {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 16px;
    padding: 0px 8px
}

@media (max-width: 768px) {
    .colonna-turno-tabellone {
        gap: 12px;
    }
}

.card-turno-tabellone {
    border: 1px solid var(--blade-grey-200);
    background: var(--blade-white);
    border-radius: 8px;
    display: flex;
    min-width: 240px;
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    transition: 0.3s ease-in-out;
}

@media (max-width: 768px) {
    .card-turno-tabellone {
        border-radius: 4px;
        padding: 12px 16px;
        gap: 12px;
    }
}

.card-turno-tabellone.dropdown-toggle:hover {
    border: 1px solid var(--blade-primary-200);
    background: var(--blade-primary-50);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    z-index: 99;
    position: relative;
}

.card-turno-tabellone.dropdown-toggle:active {
    border: 1px solid var(--blade-primary-300);
    background: var(--blade-primary-100);
    transition: 0.3s ease-in-out;
    z-index: 99;
    position: relative;
}

.card-turno-tabellone.dropdown-toggle:focus {
    z-index: 99;
    position: relative;
}

.colonna-turno-tabellone .dropdown .dropdown-menu-end.show {
    width: fit-content;
}

.squadra-1-card-tabellone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.squadra-2-card-tabellone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.squadra-stemma-icon-container {
    margin-right: 10px;
    margin-left: 10px;
}

.squadra-stemma-icon {
    object-fit: cover;
    height: 24px;
    width: 28px;
    clip-path: url(#svgClip);
}

.logo-fallback {
    transform: scale(0.35);
}

.coppa-finale {
    position: absolute;
    top: -63px;
    right: 27px;
}

.coppa-finale img {
    width: 64px;
    height: 64px;
}


/*----------------------------
-------4) Componenti----------
------------------------------*/

/*----------- TABELLE ----------*/

/* Righe tabella */

thead th {
    background-color: var(--blade-grey-150) !important;
}

tbody:not(:has(tr.ui-sortable-helper)):not(:has(.jqs-day)):not(:has(.month-day)) tr:hover,
.ui-sortable-placeholder {
    background-color: var(--blade-primary-50);
}

/*--- FORM & IMPUTS --*/

.form-label {
    margin-bottom: 8px;
    color: var(--blade-grey-600);
}

.form-control,
.form-select {
    padding: 10px 10px 10px 10px;
}

.input-group {
    gap: 12px;
}

.modal-body-form-inner .row.form-section .form-field {
    margin-top: 8px;
}

/*----------- CARDS ----------------- */

.section-card {
    background-color: var(--blade-white);
}


/*--- MODAL - Fix brutto provvisorio in attesa di sistemare i Modal @xzy ---*/

.modal-body .mx-4,
.modal-body .my-4 {
    margin: 0 !important;
}

/*--------- DROPDOWN ----------*/

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--blade-grey-50);
}

/*----------- ICONE -----------*/

.icon-container {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-container-sm {
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-container-lg {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-container-btn-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-badge-container {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.duo-icon {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4px;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    overflow: visible;
}

.duo-icon path.linea {
    fill: none;
    stroke: var(--blade-primary-500);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.duo-icon path.celeste-pieno {
    fill: var(--blade-primary-500);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.duo-icon path.bianco {
    fill: var(--blade-white);
}

.duo-icon path.celeste {
    fill: var(--blade-primary-150);
}

.icona-filtra {
    background-image: url("font-awesome-icons/filter-icon.7717ff5473c8.svg") !important;
    background-size: 15px 11px !important;
}

.icona-cerca {
    background-image: url("font-awesome-icons/search-icon.24f5293c3d5e.svg") !important;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.white-icon {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
    width: 11px;
    transition: 0.3s;
    overflow: visible;
}

.icone-blu .bi {
    margin-right: 5px;
}
/* Icone Duo / Grey Icon */
.grey-icon {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4px;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    overflow: visible;
}

.grey-icon path.linea {
    fill: none;
    stroke: var(--blade-grey-900);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grey-icon path.bianco {
    fill: var(--blade-white);
}

.grey-icon path.celeste {
    fill: transparent;
}

.grey-icon path.celeste-pieno {
    fill: var(--blade-grey-900);
}

/* icone generi */

.bi-gender-male {
    color: var(--blade-primary-500);
}

.bi-gender-female {
    color: #ff32d6;
}

/* Interazioni Icone con Pulsanti */
.btn-secondary:hover .grey-icon .linea {
    stroke: var(--blade-grey-900);
    transition: 0.3s;
}

.btn-secondary:active .grey-icon .linea {
    stroke: var(--blade-primary-500);
    transition: 0.3s;
}

.btn-link:hover .grey-icon .linea {
    stroke: var(--blade-primary-500);
    transition: 0.3s;
}

.btn.show.show:hover .grey-icon .linea {
    stroke: var(--blade-primary-500);
}

.btn.show.show:active .grey-icon path.linea {
    stroke: var(--blade-primary-500);
}

.btn.show .grey-icon .linea {
    stroke: var(--blade-primary-500);
}

.btn-secondary:hover .grey-icon .celeste-pieno {
    fill: var(--blade-grey-900);
}

.btn-secondary:active .grey-icon .celeste-pieno {
    fill: var(--blade-primary-500);
}

.btn-link:hover .grey-icon .celeste-pieno {
    fill: var(--blade-primary-500);
}

.btn.show .grey-icon path.celeste-pieno {
    fill: var(--blade-primary-500);
}

.btn.show:active .grey-icon path.celeste-pieno {
    fill: var(--blade-primary-500);
}

.btn.show:hover .grey-icon path.celeste-pieno {
    fill: var(--blade-primary-500);
}

/* Delete Icon */
.delete-icon path.linea {
    stroke: var(--blade-red-500);
}

/* Icone Badge Help */
.badge-help-1 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.badge-help-1,
.badge-help-2 {
    stroke: var(--blade-primary-600);
    stroke-width: 1.5px;
}

.badge-help-2,
.badge-help-3 {
    fill: var(--blade-primary-150);
}

/* Icone Badge Info */
.badge-info-1 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.badge-info-1,
.badge-info-2 {
    stroke: var(--blade-grey-800);
    stroke-width: 1.5px;
}

.badge-info-2,
.badge-info-3 {
    fill: var(--blade-grey-200);
}

/* Icone Badge Success */
.badge-success-1 {
    fill: var(--blade-green-100);
}

.badge-success-2 {
    fill: none;
    stroke: var(--blade-green-900);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
}

/* Icone Badge Warning */
.badge-warning-2 {
    fill: none;
    stroke: var(--blade-secondary-900);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
}

.badge-warning-1 {
    fill: var(--blade-secondary-300);
}

/* Icone Badge Alert */
.badge-alert-2 {
    fill: none;
    stroke: var(--blade-red-900);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
}

.badge-alert-1 {
    fill: var(--blade-red-100);
}

/* Colore Close Icon (Badge o Banner) */
.close-primary .linea {
    stroke: var(--blade-primary-700) !important;
    transition: 0.3s;
}

.btn-close:hover .close-primary .linea {
    stroke: var(--blade-primary-900) !important;
    transition: 0.3s;
}

.close-secondary .linea {
    stroke: var(--blade-grey-700) !important;
    transition: 0.3s;
}

.btn-close:hover .close-secondary .linea {
    stroke: var(--blade-grey-900) !important;
    transition: 0.3s;
}

.close-success .linea {
    stroke: var(--blade-green-700) !important;
    transition: 0.3s;
}

.btn-close:hover .close-success .linea {
    stroke: var(--blade-green-900) !important;
    transition: 0.3s;
}

.close-alert .linea {
    stroke: var(--blade-red-700) !important;
    transition: 0.3s;
}

.btn-close:hover .close-alert .linea {
    stroke: var(--blade-red-900) !important;
    transition: 0.3s;
}

.close-warning .linea {
    stroke: var(--blade-secondary-700) !important;
    transition: 0.3s;
}

.btn-close:hover .close-warning .linea {
    stroke: var(--blade-secondary-900) !important;
    transition: 0.3s;
}

/* Grandezze Icone */
.icon-lg {
    stroke-width: 1.5px;
    width: 14px;
}

.icon-sm {
    stroke-width: 1.3px;
    width: 12px;
}

/* Orario assistenza */
.orari-assistenza {
    font-size: 11px;
    margin: 0 0 8px 12px;
    color: var(--blade-grey-700);
}

/* Logo circolare */
.circular-logo-container {
    align-items: center;
    aspect-ratio: 1;
    background: var(--blade-white);
    border-radius: 100px;
    box-shadow: inset 0 0 0 1px var(--blade-grey-150);
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 128px;
    overflow: hidden;
}

.circular-logo {
    margin: 0px;
    max-height: 100%;
    max-width: max-content;
    object-fit: cover;
}

.circular-logo-sportlab {
    max-width: 100%;
    object-fit: contain;
    margin: auto;
    padding: 12px;
}

.circular-logo-container--torneo {
    background: var(--torneo-sfondo-logo, var(--blade-grey-150));
}


/*---------------------------------
-------?) Altro -----------------
-----------------------------------*/

.compressed-table-container:has(#table-compressor:not(:checked)) .compressed-table-10 tbody tr:nth-child(n+11) {
    display: none!important;
}
label:has(#table-compressor:not(:checked)) .table-compressor-label-compress{
    display: none!important
}
label:has(#table-compressor:checked) .table-compressor-label-extend{
    display: none!important
}

.partecipante-in-partita {
    margin-top: 5px;
    margin-left: 0px;
    --bs-gutter-x:.5rem;
}

.event-form-wrapper {
    padding:0px 2px;
}

.event-counter-icon {
    display:flex;
    /* width:80%; */
}
.event-icon {
    height:15px;
    width:15px;
}

.event-counter-icon[data-type="Gol"]{
    color:black; 
}
.event-counter-icon[data-type="Rig"]{
    color:green;
}
.event-counter-icon[data-type="Aut"]{
    color:red;
}

.goal-counter{
    display:flex;
    align-items:center;
    justify-content:space-around;
}

.delete-evento-button-container{
    padding-left:0px;
}

.delete-evento-button{
    color:red;
    align-self:center;
}
.progress {
    height: 5px;
}

.progress .progress-bar {
    border-radius: 100px;
}

.welcome-banner {
    border: none;
    background-color: var(--blade-primary-100);
    padding-bottom: 0px;
}

@media (min-width: 992px) {

    .box-grigio.mb-3.row {
        row-gap: 20px;
    }

}


/* text badge - Da eliminare la classe dall'HTML @xzy */

.disabled-text-normal {
    color: #889699 !important;
    font-family: var(--blade-text-font), sans-serif;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.disabled-text {
    color: #889699 !important;
    font-size: 10px;
    text-transform: uppercase;
    font-family: var(--blade-text-font), sans-serif;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card "Strumenti squadra": sfondo verde chiaro + pulsanti Excel verdi
   (replica lo "sfondino verdino" del vecchio sito, con i verdi del tema nuovo) */
#strumenti-card .section-card,
#strumenti-card.section,
#strumenti-card .section {
    background-color: var(--blade-green-100);
}

.btn-excel-green {
    background-color: var(--blade-green-600);
    border-color: var(--blade-green-600);
    color: #fff;
}
.btn-excel-green:hover,
.btn-excel-green:focus,
.btn-excel-green:active {
    background-color: var(--blade-green-700) !important;
    border-color: var(--blade-green-700) !important;
    color: #fff !important;
}

.w-90 {
    width: 90%;
}

/* Icona fischietto per la voce di menu "Arbitri": Bootstrap Icons non ha il whistle,
   quindi rendiamo un SVG custom come maschera tinta con currentColor (come i glifi bi). */
.bi-whistle::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("../img/whistle.dd2ef57b05c4.svg") center / contain no-repeat;
    mask: url("../img/whistle.dd2ef57b05c4.svg") center / contain no-repeat;
}

/*---------------------------------------
-------?) Pagine pubbliche --------------
-----------------------------------------*/

/* Colore del torneo */

.torneo-colore--blu {
    --torneo-accento: var(--blade-primary-600);
    --torneo-sfondo-logo: var(--blade-grey-150);
}

.torneo-colore--arancio {
    --torneo-accento: var(--blade-orange-500);
    --torneo-sfondo-logo: var(--blade-orange-150);
}

.torneo-colore--verde {
    --torneo-accento: var(--blade-green-500);
    --torneo-sfondo-logo: var(--blade-green-150);
}

.torneo-colore--viola {
    --torneo-accento: var(--blade-purple-500);
    --torneo-sfondo-logo: var(--blade-purple-150);
}

.torneo-colore--neutro {
    --torneo-accento: var(--blade-black);
    --torneo-sfondo-logo: var(--blade-grey-150);
}

/* Impaginazione a due colonne di pages/public_base.html */

.pagebody:has(.two-columns-splitter) {
    padding: 0;
}

.main-area-container:has(.two-columns-splitter) #sidebar {
    display: none !important;
}

/* Nelle pagine pubbliche lo scroll resta (colonna destra su desktop, workspace su
   mobile, tabellone in orizzontale) ma la barra non si deve vedere: si nasconde
   su tutto il sottoalbero invece che sui singoli contenitori, perché ogni pagina
   pubblica ne ha di suoi (tabellone, table-responsive delle classifiche). */
#workspace:has(.two-columns-splitter),
#workspace:has(.two-columns-splitter) * {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#workspace:has(.two-columns-splitter)::-webkit-scrollbar,
#workspace:has(.two-columns-splitter) *::-webkit-scrollbar {
    display: none;
}

.two-columns-splitter {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-inline: auto;
    max-width: 1512px;
    padding: 0 0 0 clamp(16px, 5.3vw, 80px);
    width: 100%;
}

#left-section {
    flex: 1 1 40%;
    max-width: 558px;
    padding: clamp(24px, 5vw, 80px) 0;
    width: auto;
}

#right-section {
    box-sizing: border-box;
    flex: 1 1 52%;
    min-width: 0;
    padding: clamp(24px, 5vw, 80px) 0;
    width: auto;
}

.right-section-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 704px;
    padding-right: clamp(16px, 4.2vw, 64px);
    width: 100%;
}

.split-column-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.split-column-left .circular-logo-container {
    margin-bottom: 12px;
}

.right-section-inner > .blocco-torneo-pubblico + .blocco-torneo-pubblico,
.right-section-inner > .gruppo-partite-pubbliche + .gruppo-partite-pubbliche,
.right-section-inner > .gruppo-classifica-pubblica + .gruppo-classifica-pubblica {
    margin-top: 60px;
}

@media (max-width: 991.98px) {
    /* Qui le colonne sono impilate e non c'è scroll indipendente: la scrollbar non
       deve stare a filo, quindi il padding torna simmetrico. */
    .two-columns-splitter {
        padding-right: clamp(16px, 5.3vw, 80px);
    }

    #left-section,
    #right-section {
        flex-basis: 100%;
        max-width: 100%;
        padding: 24px 0;
    }

    .right-section-inner {
        max-width: 100%;
        padding-right: 0;
    }

    .right-section-inner > .blocco-torneo-pubblico + .blocco-torneo-pubblico,
    .right-section-inner > .gruppo-partite-pubbliche + .gruppo-partite-pubbliche,
    .right-section-inner > .gruppo-classifica-pubblica + .gruppo-classifica-pubblica {
        margin-top: 24px;
    }
}

/* Tipografia della colonna sinistra */

#left-section h1 {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0;
    text-wrap: pretty;
}

#left-section > p {
    color: var(--blade-grey-900);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 445px;
    text-wrap: pretty;
}

@media (max-width: 767.98px) {
    #left-section h1 {
        font-size: 28px;
    }

    /* blade azzera padding, bordo e sfondo di ogni .section-card sotto i 768px
       (blade.css, @media max-width 767px) con !important: per le card pubbliche
       vanno riaffermati. #right-section .section-card pesa (1,1,0) contro (0,1,0),
       quindi con !important su entrambi vince questo. */
    #right-section .section-card {
        background-color: var(--blade-white) !important;
        border: 1px solid var(--blade-grey-200) !important;
        padding: 20px !important;
    }

    /* La tinta della vetrina va riaffermata qui, altrimenti la regola sopra la
       coprirebbe. */
    #right-section .card-torneo-vetrina .section-card {
        background: color-mix(in srgb, var(--torneo-accento, var(--blade-primary-600)) 4%, white) !important;
    }

    #right-section .section-card:has(.card-fase__header) {
        padding: 16px !important;
    }
}

.link-torna-indietro {
    align-items: center;
    color: var(--blade-primary-500);
    display: inline-flex;
    font-family: var(--blade-text-font);
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    width: fit-content;
}

.link-torna-indietro:hover {
    color: var(--blade-primary-800);
    text-decoration: underline;
}

.torneo-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.torneo-meta__chip {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--blade-grey-900);
    display: inline-flex;
    font-size: 14px;
    font-weight: 400;
    gap: 6px;
    line-height: 1.5;
    padding: 0;
}

.torneo-meta__chip i {
    color: var(--torneo-accento, var(--blade-primary-600));
    font-size: 14px;
    line-height: 1;
}

.titolo-sezione-pubblica {
    color: var(--blade-black);
    font-family: var(--blade-heading-font);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0;
}

/* .section di blade ha min-width: fit-content, quindi le card non potevano
   restringersi sotto la larghezza del loro contenuto su una riga: sotto i 768px
   spingevano in fuori tutta la pagina, e paragrafi e tabelle finivano tagliati. */
#right-section .section {
    min-width: 0;
}

#right-section .section-card {
    border-radius: 16px;
    box-shadow: var(--blade-ombra-y);
    padding: 24px 23px;
}

.blocco-torneo-pubblico {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-torneo__header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}

.card-torneo__header .title-section {
    display: flex;
    /*flex: 1 1 254px;*/
    flex-direction: column;
    gap: 16px;
    width: auto;
}

.card-torneo__artwork {
    align-items: center;
    background: var(--torneo-sfondo-logo, var(--blade-grey-150));
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 244px;
    height: 160px;
    justify-content: center;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}

.card-torneo__artwork .squadra-stemma-icon {
    clip-path: none;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

/* Sotto md l'header della card va a capo e il riquadro finisce da solo sulla sua
   riga: con justify-content:space-between resterebbe a sinistra, quindi va
   centrato. Questa media query deve stare DOPO la regola base qui sopra, altrimenti
   `flex: 0 0 244px` (stessa specificità, dichiarato più in basso) la vincerebbe. */
@media (max-width: 767.98px) {
    .card-torneo__artwork {
        margin-inline: auto;
    }
}

.card-torneo__azioni {
    display: flex;
    /*flex-wrap: wrap;*/
    gap: 20px;
}

.card-azione-pubblica {
    background: var(--blade-white);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--blade-grey-200), var(--blade-ombra-y);
    box-sizing: border-box;
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    min-width: fit-content;
    padding: 24px;
}

@media (max-width: 767.98px) {

    .card-torneo__header {
        flex-wrap: nowrap;
        gap: 20px;
        justify-content: left;
        flex-flow: column-reverse;
    }

    .card-torneo__artwork {
        flex: 0 0 160px;
        /* height: 124px; */
        justify-content: center;
        margin: 0px;
        width: 100%;
        max-width: 100%;
    }
    
    .title-section {
        padding-left: 4px;
    }

    .card-azione-pubblica {
        padding: 20px;
    }

    .card-torneo__azioni {
        gap: 16px;
    }

    i.bi.bi-arrow-right {
        display: none;
    }

    .blocco-torneo-pubblico {
        gap: 16px;
    }
}

.card-azione-pubblica__icona {
    align-items: center;
    align-self: flex-start;
    border-radius: 10px;
    color: var(--torneo-accento, var(--blade-primary-600));
    display: inline-flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    width: 48px;
}

.card-azione-pubblica__label {
    color: var(--blade-black);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

/* margin-top:auto incolla il pulsante in fondo alla card (space-between del mockup) */
.card-azione-pubblica .btn {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: auto;
}

/* Il pulsante prende il colore del torneo passando dalle variabili Bootstrap che
   blade usa già per i .btn, non sovrascrivendo background e color a mano. */
.card-azione-pubblica .btn-primary {
    --bs-btn-bg: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-border-color: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-color: var(--blade-white);
    --bs-btn-hover-bg: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-hover-border-color: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-hover-color: var(--blade-white);
    --bs-btn-active-bg: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-active-border-color: var(--torneo-accento, var(--blade-primary-600));
    --bs-btn-active-color: var(--blade-white);
    width: fit-content;
}

@media screen and (max-width:768px) {
    .card-azione-pubblica .btn-primary {
        padding: 8px 12px;
    }
}

/* Torneo in vetrina (SuperTorneo.in_evidenza): stessa anatomia, tinta d'accento */

.card-torneo-vetrina .section-card {
    background: color-mix(in srgb, var(--torneo-accento, var(--blade-primary-600)) 4%, white);
}

.badge-torneo-evidenza {
    background: var(--torneo-accento, var(--blade-primary-600));
    border-radius: 100px;
    color: var(--blade-white);
    font-family: var(--blade-text-font);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}

/* Elenco fasi: righe basse, icona di genere, pill di stato, CTA a destra */

#right-section .section-card:has(.card-fase__header) {
    padding: 16px;
}

.card-fase__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.card-fase__header .title-section {
    flex: 1 1 200px;
    width: auto;
}

.card-fase__header .subtitle-container {
    margin-bottom: 0;
}

.card-fase__header h5 {
    align-items: center;
    color: var(--blade-black);
    display: flex;
    font-family: var(--blade-text-font);
    font-size: 16px;
    font-weight: 500;
    gap: 8px;
    line-height: 1.6;
    margin: 0;
}

.card-fase__header .bi-gender-male {
    color: var(--blade-primary-600);
}

.card-fase__header .bi-gender-female {
    color: var(--blade-purple-500);
}

.card-fase__header .bi-gender-ambiguous {
    color: var(--blade-grey-600);
}

.card-fase__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-torneo-concluso,
.badge-fase-stato {
    background: var(--blade-grey-150);
    border-radius: 4px;
    color: var(--blade-grey-700);
    font-family: var(--blade-text-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    padding: 5px 8px;
    text-transform: uppercase;
}

/* Partite: una colonna centrata per girone, card con chip e punteggio al centro */

.gruppo-partite-pubbliche {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-inline: auto;
    max-width: 485px;
    width: 100%;
}

.card-partita-pubblica {
    align-items: center;
    background: var(--blade-white);
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--blade-grey-150);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px;
    width: 100%;
}

.card-partita-pubblica__chip {
    align-items: center;
    align-self: center;
    background: var(--blade-primary-100);
    border-radius: 100px;
    color: var(--blade-primary-700);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    justify-content: center;
    line-height: 1.5;
    padding: 3px 10px;
}

/* Separatore fra data, ora e campo: un pallino da 3px, senza markup aggiuntivo */
.card-partita-pubblica__chip span + span::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 3px;
    margin-right: 8px;
    vertical-align: middle;
    width: 3px;
}

.card-partita-pubblica__corpo {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 64px 1fr;
    width: 100%;
}

.card-partita-pubblica__squadra {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.card-partita-pubblica__squadra .squadra-stemma-icon {
    height: 25px;
    width: 20px;
}

/* width:100% e non solo max-width: dentro una colonna flex centrata lo span si
   dimensionerebbe sul contenuto e con nowrap sborderebbe invece di ellissarsi. */
.card-partita-pubblica__nome {
    color: var(--blade-grey-900);
    font-family: var(--blade-text-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.card-partita-pubblica__nome--vincente {
    color: var(--blade-grey-950);
    font-weight: 500;
}

.card-partita-pubblica__punteggio {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.card-partita-pubblica__risultato {
    color: var(--blade-grey-950);
    font-family: var(--blade-text-font);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.card-partita-pubblica__risultato--vuoto {
    color: var(--blade-grey-400);
}

.card-partita-pubblica__stato {
    color: var(--blade-grey-500);
    font-size: 12px;
    line-height: 1.5;
}

.card-partita-pubblica__stato--live {
    color: var(--blade-red-500);
    font-weight: 600;
}

/* Classifiche: si usa la tabella dell'area riservata così com'è. Qui restano solo
   le due cose che servono perché vive in una colonna vincolata invece che a piena
   larghezza: la spaziatura fra i gironi e lo scroll orizzontale, che blade
   disattiva sovrascrivendo l'overflow-x di Bootstrap con overflow:visible. */

.gruppo-classifica-pubblica {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gruppo-classifica-pubblica .table-responsive {
    overflow-x: auto;
}

/* blade dà alle th `white-space: nowrap` + ellissi: in una colonna stretta
   "ULTIME PARTITE" veniva troncata. Lasciandola andare a capo la colonna si
   dimensiona sui pallini invece che sull'intestazione. */
@media (max-width: 767.98px) {
    .gruppo-classifica-pubblica thead th {
        white-space: normal;
    }
}

/* Tabellone pubblico: stesso template dell'area riservata, in sola lettura */

.split-column-right .container-colonne-turni-tabellone {
    padding: 0;
}

/* Non è cliccabile: niente affordance da dropdown */
.split-column-right .card-turno-tabellone:not(.dropdown-toggle) {
    cursor: default;
}

.split-column-right .card-turno-tabellone {
    min-height: 114px;
}

/* Le colonne sono rese in ordine inverso (schema reversed in tabellone.html),
   quindi l'ultima nel DOM è il primo turno: è quella col fondo grigio. */
.split-column-right .colonna-turno-tabellone:last-child .card-turno-tabellone {
    background: var(--blade-grey-50);
}