/* =======================================================
   GENERAL
   ======================================================= */

body {

    background: #edf2f7;

}

#pageTitle {

    margin-bottom: 30px;

}

#pageTitle h1 {

    font-size: 2rem;
    margin-bottom: .2rem;

}

#pageTitle .subtitle {

    color: #666;
    font-size: .95rem;
    line-height: 15px;
    margin-top: 5px;
}

/* =======================================================
   CARDS
   ======================================================= */

.card {

    border: 0;

    border-radius: 10px;

    overflow: hidden;

    background: white;

    box-shadow: 0 4px 14px rgba(0,0,0,.08);

    transition: .2s;

}

.card:hover {

    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.card-header {

    background: linear-gradient(90deg,#2d5f9a,#4d82bf);

    color: white;

    font-size: 1.25rem;

    font-weight: 600;

    padding: .9rem 1.1rem;

}

.card-body {

    background: white;

    padding: .85rem 1rem;

}

/* =======================================================
   TUNES
   ======================================================= */

.tune {

    padding-top: .20rem;
    padding-bottom: .55rem;

    margin-bottom: 0rem;

    border-bottom: 1px solid #ececec;

}

.tune:last-child {

    border-bottom: none;

}

.tune-title {

    font-size: 1.15rem;

    font-weight: 700;

    line-height: 1.2;

    color: #1d4f87;

    border-left: 4px solid #2d5f9a;

    padding-left: .45rem;

    margin-bottom: .25rem;

}

/* =======================================================
   BADGES
   ======================================================= */

.badge {

    font-size: .74rem;

    font-weight: 500;

    margin-right: 4px;

    margin-top: 1px;

    margin-bottom: 1px;

    padding: .32em .58em;

}

span.animated {

    color: #282a15;
}

/* =======================================================
   LINKS
   ======================================================= */

.tune a {

    text-decoration: none;

}

.tune a:hover {

    text-decoration: underline;

}

/* =======================================================
   PAGE HEADER
   ======================================================= */

.page-header {

    margin-bottom: 30px;

    padding-bottom: 5px;

    border-bottom: 3px solid #2d5f9a;

}

.page-header .title {

    font-size: 2.2rem;

    font-weight: 700;

    color: #2d5f9a;

    line-height: 1;

}

.page-header .subtitle {

    margin-top: 0px;

    color: #666;

    font-size: .95rem;

}

.header-separator {

    margin: 6px 0 5px 0;

    border-top: 1px solid #000;

}

.legend {

    font-size: .90rem;

    color: #555;

    line-height: 1.8;

}

.legend-title {

    font-weight: 600;

    color: #2d5f9a;

    margin-bottom: 0px;

}

.tune-link {
    color: #245a8d;
    text-decoration: none;
}

.tune-link:hover {
    color: #4f8fc4;
    text-decoration: underline!important;
}

/* =======================================================
   ACCORDION
   ======================================================= */

.tuneslist-card-header {
    position: relative;
    padding-right: 70px;
}

.tuneslist-toggle {
    position: absolute;
    right: 12px;
    top: 5px;

    color: white;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.tuneslist-toggle:hover {

    color: white;

    text-decoration: underline;

}

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

#tunesContainer {
    margin-top: -10px;
}

#tunesContainer > .row {

    align-items: flex-start;

}

#tunesContainer .card {

    height: auto;

}

/*======================================================
  CONTROLLI GLOBALI ACCORDION
======================================================*/


.tuneslist-global-controls {
    position: fixed;
    right: 10px;
    bottom: 4px;
    z-index: 1000;

    display: flex;
    gap: 8px;
}


.tuneslist-global-toggle {
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2d5f9a;
    color:white;

    border-radius:50%;

    box-shadow:0 3px 10px rgba(0,0,0,.25);

    text-decoration:none;

    transition:.2s;
}


.tuneslist-global-toggle:hover {
    color:white;
    box-shadow:0 5px 14px rgba(0,0,0,.3);
}



/* ICONA OCCHIO */

.tuneslist-global-toggle span {
    display:block;

    width:36px;
    height:36px;

    background-image:url("eyes.png");
    background-repeat:no-repeat;
    background-size:68px 36px;
}


/* MOSTRA */

.tuneslist-eye-show span {
    background-position:left center;
}


/* NASCONDI */

.tuneslist-eye-hide span {
    background-position:right center;
}

/* =======================================================
   FILTER
   ======================================================= */

.tuneslist-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: .48rem .9rem;
    border-radius: 7px;
    border: 1px solid #2d5f9a;
    background: #2d5f9a;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: .2s;
}

.tuneslist-filter-button:hover {
    background: #24507f;
    color: white;
    text-decoration: none;
}

.tuneslist-filter-button.filter-active {
    background: #198754;
    border-color: #198754;
}

.tuneslist-filter-button.filter-active:hover {
    background: #157347;
}

.tuneslist-filter-button .bi {
    font-size: 1.05rem;
}

#tunesFilterModal .form-label {
    font-weight: 600;
}

#tunesFilterModal .filter-section {
    padding-bottom: .9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

#tunesFilterModal .filter-section:last-of-type {
    border-bottom: 0;
}

#tunesFilterTitleError {
    display: none;
}

/* =======================================================
   HEADER - COMPACT SU SCHERMI PICCOLI
   ======================================================= */

@media (max-width: 576px) {

    #pageTitle {
        margin-bottom: 16px;
    }

    .page-header {
        margin-bottom: 16px;
        padding-bottom: 3px;
    }

    .page-header .title {
        font-size: 1.75rem;
        line-height: 1.05;
    }

    .page-header .subtitle {
        font-size: .85rem;
        line-height: 14px;
    }

    .header-separator {
        margin: 4px 0 3px 0;
    }

    .legend {
        font-size: .80rem;
        line-height: 1.45;
    }

    .legend-title {
        line-height: 1.3;
    }

    .legend-note {
        margin-top: .35rem !important;
        line-height: 14px !important;
    }

    .tuneslist-filter-button {
        margin-top: 6px;
        padding: .38rem .7rem;
        font-size: .9rem;
    }

}