#sites-intro,
.sites-intro,
#routes-note {
    text-align: center;
}

#sites-controls,
.sites-controls {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 !important;
    border: 2px solid var(--primary-color, #F9BB01);
    border-radius: 14px;
    background-color: var(--panel-bg-color, #012136);
    box-sizing: border-box;
    padding: 1.15rem 1.4rem;
}

#routes-table, #submitted-routes-table {
    width: 90%;
    margin: auto;
    border: solid var(--primary-color) 2px;
    background-color: var(--panel-accent);
    border-radius: 1em;
    overflow: hidden;
    border-collapse: collapse;
    font-weight: bold;
}

th {
    background-color: #001727;
    padding: 0.5em;
    color: #ffffff;
}

html.theme-dark th {
    background-color: #012136;
    color: #ffe494;
}

td {
    padding: 0.5em;
    text-align: center;
}

.for-most {
    background-color: #00897b; 
    padding: 0.4em 0.8em;
    color: #ffffff; 
    border-radius: 0.5em;
    font-weight: 700;
}

.for-many {
    background-color: #0072b2; 
    padding: 0.4em 0.8em;
    color: #ffffff;
    border-radius: 0.5em;
    font-weight: 700;
}

.for-some {
    background-color: #d97706; 
    padding: 0.4em 0.8em;
    color: #ffffff;
    border-radius: 0.5em;
    font-weight: 700;
}

.for-few-suggested {
    background-color: #7b1fa2; 
    padding: 0.4em 0.8em;
    color: #ffffff;
    border: solid #581c87 1px;
    border-radius: 0.5em;
    font-weight: 700;
}

.for-few-required {
    background-color: #d55e00; 
    padding: 0.4em 0.8em;
    color: #ffffff; 
    border-radius: 0.5em;
    font-weight: 700;
}

.for-very-few {
    background-color: #991b1b; 
    padding: 0.4em 0.8em;
    color: #ffffff;
    border-radius: 0.5em;
    font-weight: 700;
}

.fav-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s ease;
}
.fav-btn:hover {
    transform: scale(1.2);
    background: none;
}

@media (max-width: 768px) {
    #sites-controls {
        width: 100% !important;
        margin: 0.75rem auto !important;
        padding: 0.75rem !important;
        box-sizing: border-box;
    }

    #routes-table, #submitted-routes-table {
        width: 100% !important;
        min-width: 650px;
    }

    th, td {
        padding: 0.5rem 0.35rem;
    }
}