/* Shared admin settings rows and shift-colour select controls. */

.admin-settings-grid {
    --admin-setting-card-width: 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--admin-setting-card-width)), var(--admin-setting-card-width)));
    gap: 0.85rem;
    justify-content: start;
}

@media (min-width: 1400px) {
    .admin-settings-grid {
        grid-template-columns: repeat(4, var(--admin-setting-card-width));
    }
}

.app-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}

.app-toggle-button:focus-within {
    outline: 0.2rem solid var(--bs-focus-ring-color);
    outline-offset: 0.15rem;
}

.app-toggle-button-input:disabled + * {
    pointer-events: none;
}

.admin-setting-row {
    display: flex;
    min-height: 100%;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--app-border-alpha-70);
    border-radius: 0.75rem;
    background: var(--app-white-alpha-015);
}

.admin-setting-row-copy {
    min-width: 0;
}

.admin-setting-row-control {
    flex: 0 0 auto;
}

.admin-shift-colour-select {
    --roster-shift-type-palette-1: var(--roster-shift-type-palette-1-soft);
    --roster-shift-type-palette-2: var(--roster-shift-type-palette-2-soft);
    --roster-shift-type-palette-3: var(--roster-shift-type-palette-3-soft);
    --roster-shift-type-palette-4: var(--roster-shift-type-palette-4-soft);
    --roster-shift-type-palette-5: var(--roster-shift-type-palette-5-soft);
    --roster-shift-type-palette-6: var(--roster-shift-type-palette-6-soft);
    --roster-shift-type-palette-7: var(--roster-shift-type-palette-7-soft);
    --roster-shift-type-palette-8: var(--roster-shift-type-palette-8-soft);
    --roster-shift-type-palette-9: var(--roster-shift-type-palette-9-soft);
    --roster-shift-type-palette-10: var(--roster-shift-type-palette-10-soft);
    font-weight: 700;
}

.admin-shift-colour-select[data-roster-shift-colour^="palette-"] {
    box-shadow: inset 0 0 0 3px var(--roster-shift-type-colour);
}

.admin-shift-colour-select option {
    background-color: var(--app-surface);
    color: var(--app-text);
}

.admin-shift-colour-select option[data-roster-shift-colour="palette-1"] { background-color: var(--roster-shift-type-palette-1-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-2"] { background-color: var(--roster-shift-type-palette-2-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-3"] { background-color: var(--roster-shift-type-palette-3-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-4"] { background-color: var(--roster-shift-type-palette-4-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-5"] { background-color: var(--roster-shift-type-palette-5-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-6"] { background-color: var(--roster-shift-type-palette-6-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-7"] { background-color: var(--roster-shift-type-palette-7-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-8"] { background-color: var(--roster-shift-type-palette-8-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-9"] { background-color: var(--roster-shift-type-palette-9-option-bg); }
.admin-shift-colour-select option[data-roster-shift-colour="palette-10"] { background-color: var(--roster-shift-type-palette-10-option-bg); }