.tabs {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    background-color: var(--c2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Hide radio buttons */
input[type="radio"] {
    display: none !important;
}

/* deprecated? */
.tab-label {
    padding: 10px 20px;
    background-color: var(--c3);
    cursor: pointer;
}

.tab-content {
    display: none;
    border-radius: 0px;
    margin-top: 10px;
}

.inner-content {
    display: none;
}

.radio-container {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    border-radius: 4px;
    overflow-x: auto;
    min-width: 0;        /* allows flex child to shrink below content size */
    max-width: 90%;     /* don't exceed parent width */
}

.radio-container label {
    padding: 10px 20px;
    background-color: var(--c3);
    cursor: pointer;
    color: var(--c1) !important;
    margin: 0;
    /* Add a subtle 3D effect for the "sticking out" state */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.radio-container input[type="radio"]:first-of-type + label {
    border-radius: 4px 0 0 4px;
}

.radio-container input[type="radio"]:last-of-type + label {
    border-radius: 0 4px 4px 0;
}

/* Style for the "pressed down" effect when checked */
.radio-container input[type="radio"]:checked + label {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    background-color: var(--c3-dark);
}

/* dashboard.html */
#tab1:checked ~ .content1,
#tab2:checked ~ .content2 {
    display: block;
}

@media (max-width: 768px) { /* You can adjust this breakpoint as needed */
}