/* Removed @import rules. Ensure base.css, header.css, dialog.css, and footer.css are linked in the HTML where needed. */

body {
    overflow-y: scroll;
}

the-settings {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0 1rem;
    gap: 1rem;
}

the-settings h1 {
    color: var(--primary-color);
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
}

/* --- Consolidated Settings Content Block Styles --- */
the-settings div.backup-domains,
the-settings ui-settings {
    width: 100%;
    max-width: 60rem;
    border: 1px solid rgba(var(--primary-rgb), .5);
    background: rgba(0, 0, 0, .75);
    border-radius: .25rem;
    /* backdrop-filter: blur(1rem); */
    box-shadow: 0px .25rem 1rem 0 rgb(0 0 0 / 50%), inset 0 0 2rem 0 rgba(var(--primary-rgb), calc(var(--glow-intensity) / 3));
    display: flex; /* Added from ui-settings */
    flex-direction: column; /* Added from ui-settings */
    flex-wrap: nowrap; /* Added from ui-settings */
}

the-settings div.backup-domains {
    /* Specific styles for backup-domains */
    flex: 0 0 auto;
    align-items: stretch;
    justify-content: stretch;
    gap: 1rem;
    padding: 1rem;
}

the-settings ui-settings {
     /* Specific styles for ui-settings */
    /* No flex-basis needed? */
    /* align-items, justify-content not specified */
    /* gap not specified */
    /* padding not specified */
}
/* --- End Consolidated Settings Content Block Styles --- */


the-settings div.backup-domains h1 {
    font-size: 1rem;
}
the-settings div.backup-domains p {
    font-size: .8rem;
    padding: 0;
    margin: 0;
    color: var(--input-color);
    line-height: 1rem;
}
the-settings div.backup-domains a {
    font-size: 1rem;
    color: var(--secondary-color);
    text-decoration: none;
}

the-settings > button {
    cursor: pointer;
    padding: .5rem;
    outline: none;
    border: .15rem solid var(--primary-color);
    border-radius: .45rem;
    perspective: 1.5rem;
    font-weight: 800;
    box-shadow: inset 0 0 .5em 0 rgba(var(--primary-rgb), var(--glow-intensity)), 0 0 .5em 0 rgba(var(--primary-rgb), var(--glow-intensity));
    text-decoration: none;
    text-transform: none;
    font-size: 1rem;
    align-self: stretch;
    text-align: center;
    background: var(--primary-color);
    color: var(--input-color);
    text-shadow: 0 .5rem 1.5rem rgba(var(--input-rgb), calc(var(--glow-intensity) / 2));
}

the-settings > button.sign-out {
    align-self: center;
    margin: 4rem 0;
}

the-settings > button.sign-out {
    background: #f73535;
    border: .15rem solid #f73535;
    box-shadow: 0 0 .5em 0 rgb(247, 53, 53, calc(var(--glow-intensity) / 2));
}

/* Base styles applied above */
/* the-settings ui-settings { ... } */


the-settings ui-settings form {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1rem;
    gap: 1rem;
}

the-settings ui-settings form div.divider {
    flex: 0 0 1px;
    background-color: rgba(var(--primary-rgb), .25);
    align-self: stretch;
    margin: 0;
}

the-settings ui-settings form div.half {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: stretch;
    padding: 0;
    gap: 1rem;
}

the-settings ui-settings form div.half fieldset{
    flex: 0 0 calc(50% - .5rem);
}

the-settings ui-settings form span {
    flex: 0 0 auto;
    color: var(--primary-color);
}

the-settings ui-settings form fieldset {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    border: none;
    padding: 0;
    margin: 0;
    outline: 0;
}
the-settings ui-settings form fieldset label {
    flex: 0 0 auto;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--secondary-color);
    cursor: pointer;
    text-shadow: 0 .5rem 1.5rem rgba(var(--secondary-rgb), var(--glow-intensity));
    margin-bottom: .5rem;
}

the-settings ui-settings form fieldset select {
    min-width: 0;
    color: var(--input-color);
    background: #000000;
    border: 1px solid var(--primary-color);
    border-radius: .25rem;
    padding: .25rem;
    font-size: 1rem;
    outline: none;
    text-align: center;
    box-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
}

the-settings ui-settings form fieldset input {
    flex: 0 0 auto;
    width: 14rem;
    color: var(--input-color);
    background: #000000;
    border: 1px solid var(--primary-color);
    border-radius: .25rem;
    padding: .25rem;
    font-size: 1rem;
    outline: none;
    resize: none;
    /* width: 14rem; Removed as it's likely redundant with base.css */
}

the-settings ui-settings form fieldset input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 14rem;
    height: 1.5rem;
    background: rgba(0, 0, 0, 0);
    border: 1px solid rgba(var(--primary-rgb), .5);
    outline: none;
    padding: 0;
    margin: 0;
    position: relative;
}

the-settings ui-settings form fieldset input[type='range']::after {
    position: absolute;
    top: -1.5rem;
    right: 0;
    color: var(--primary-color);
    content: attr(data-value);
}

the-settings ui-settings form fieldset input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primary-color);
    box-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
    border-radius: .25rem;
    cursor: pointer;
}

the-settings ui-settings form fieldset input[type='range']::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primary-color);
    box-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
    border-radius: .25rem;
    cursor: pointer;
}

the-settings ui-settings form fieldset input[type="color"] {
    width: 100%;
    height: 2rem;
    outline: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    /* box-shadow: 0px .25rem 1rem 0 rgb(0 0 0 / 50%); */
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    align-self: stretch;
}
the-settings ui-settings form fieldset input[type="color"].primary {
    box-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
}
the-settings ui-settings form fieldset input[type="color"].secondary {
    box-shadow: 0 .5rem 1.5rem rgba(var(--secondary-rgb), calc(var(--glow-intensity) / 5));
}
the-settings ui-settings form fieldset input[type="color"].input {
    box-shadow: 0 .5rem 1.5rem rgba(var(--input-rgb), calc(var(--glow-intensity) / 5));
}
the-settings ui-settings form fieldset input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    margin: 0;
}

the-settings ui-settings form fieldset input[type="color"]::-webkit-color-swatch,
the-settings ui-settings form fieldset input[type="color"]::-moz-color-swatch {
    border-radius: 0;
}

the-settings ui-settings form fieldset input[type="color"]:focus {
    border-radius: 0;
    outline: none;
}

the-settings ui-settings form fieldset input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

the-settings ui-settings form fieldset input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 0;
}

the-settings ui-settings form fieldset input[type="color"]::-moz-color-swatch,
the-settings ui-settings form fieldset input[type="color"]::-moz-focus-inner {
    border: 0;
}

the-settings ui-settings form fieldset input[type="color"]::-moz-focus-inner {
    padding: 0;
}

/* Removed redundant input[type=color] styles, assuming they are covered by base.css */


/* --- Consolidated Settings Primary Button Styles --- */
the-settings ui-settings form fieldset button,
the-settings ui-settings form .buttons button.ok {
    background: rgba(0, 0, 0, 0);
    outline: none;
    cursor: pointer;
    font-weight: 800;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: .25rem;
    text-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
    box-shadow: 0 .5rem 1.5rem rgba(var(--primary-rgb), calc(var(--glow-intensity) / 5));
    padding: .25rem .75rem;
    text-transform: uppercase;
    font-size: 1rem;
}

the-settings ui-settings form fieldset button {
    /* Specific style */
    align-self: center;
}
/* --- End Consolidated Settings Primary Button Styles --- */


the-settings ui-settings form .buttons {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 1rem;
}

the-settings ui-settings form .buttons button.cancel {
    border: none;
    background: rgba(0, 0, 0, 0);
    outline: none;
    cursor: pointer;
    font-weight: 400;
    color: var(--secondary-color);
    text-transform: uppercase;
    text-shadow: 0 .5rem 1.5rem rgba(var(--secondary-rgb), calc(var(--glow-intensity) / 5));
}

/* Base styles applied above */
/* the-settings ui-settings form .buttons button.ok { ... } */


/*********** MEDIA QUERIES START HERE ***********/
@media only screen and (max-width: 720px) {

    the-settings {
        margin: 0 .5rem;
        gap: .5rem;
    }

    the-settings div.backup-domains {
        gap: .5rem;
        padding: .5rem;
    }

    the-settings ui-settings form div.half fieldset {
        flex: 0 0 100%;
    }

}
/*********** MEDIA QUERIES END HERE ***********/