/* ===== CONFIGURAÇÕES DA APLICAÇÃO (/configuracoes/aplicacao) =====
   Mesma linguagem do Meu Perfil (profile.css): cartões com borda e sombra leve, rótulos pequenos em caixa-alta.
   Navegação por seção à esquerda e, em cada seção, linhas com o que o ajuste faz à esquerda e o controle à
   direita. As cores saem das variáveis do MudBlazor, então a tela acompanha o tema da casa sem regra por tema. */

.settings-page {
    --settings-radius: 22px;
    --settings-radius-sm: 14px;
    --settings-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
}

.settings-radius {
    border-radius: var(--settings-radius, 22px);
}

.settings-eyebrow {
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ===== CABEÇALHO ===== */

.settings-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--settings-shadow);
}

.settings-header__identity {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.settings-header__icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 22%;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

.settings-header__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.settings-header__name {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.settings-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    margin: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius-sm);
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
}

.settings-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem 1.25rem;
}

    .settings-stat + .settings-stat {
        border-left: 1px solid var(--mud-palette-lines-default);
    }

    .settings-stat dt {
        color: var(--mud-palette-text-secondary);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .settings-stat dd {
        margin: 0;
        color: var(--mud-palette-text-primary);
        font-size: 1rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.settings-stat__of {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== GRADE ===== */

.settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

/* ===== NAVEGAÇÃO POR SEÇÃO ===== */

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--settings-shadow);
}

@media (min-width: 960px) {
    .settings-nav {
        position: sticky;
        top: 80px;
    }
}

.settings-nav__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: var(--settings-radius-sm);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .settings-nav__item:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.06);
        color: var(--mud-palette-text-primary);
    }

    .settings-nav__item.is-active {
        background: rgba(var(--mud-palette-primary-rgb), 0.1);
        color: var(--mud-palette-primary);
    }

    .settings-nav__item:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

.settings-nav__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.settings-nav__label {
    color: var(--mud-palette-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

.settings-nav__item.is-active .settings-nav__label {
    color: var(--mud-palette-primary);
}

.settings-nav__hint {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-nav__badge {
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .settings-nav__badge.is-muted {
        background: var(--mud-palette-action-disabled-background);
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

/* ===== PAINEL DA SEÇÃO ===== */

.settings-main {
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--settings-shadow);
}

.settings-panel {
    padding: 1.75rem 2rem 0.5rem;
}

.settings-section-head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .settings-section-head h2 {
        margin: 0;
        color: var(--mud-palette-text-primary);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .settings-section-head p {
        margin: 0.3rem 0 0;
        color: var(--mud-palette-text-secondary);
        font-size: 0.9rem;
        max-width: 62ch;
    }

/* Linha de ajuste: o que ele faz à esquerda, o controle à direita. */
.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    align-items: center;
    gap: 0.75rem 2rem;
    padding: 1.35rem 0;
}

    .settings-row + .settings-row {
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .settings-row.is-stacked {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

.settings-row__label h3 {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.97rem;
    font-weight: 600;
}

.settings-row__label p {
    margin: 0.25rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.settings-row__label .settings-row__note {
    color: var(--mud-palette-text-disabled);
    font-size: 0.8rem;
}

.settings-row__control {
    min-width: 0;
}

    .settings-row__control.is-end {
        display: flex;
        justify-content: flex-end;
    }

    /* O MudBlazor põe margem no topo dos campos densos; aqui ela desalinha o campo do texto ao lado. */
    .settings-row__control .mud-input-control {
        margin-top: 0;
    }

.settings-switch {
    margin: 0;
}

    .settings-switch.mud-input-control {
        margin-top: 0;
    }

/* ===== ÍCONE DO APP ===== */

.app-icon-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.app-icon-editor__previews {
    display: flex;
    gap: 1rem;
}

.app-icon-editor__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

    .app-icon-editor__preview img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border: 1px solid var(--mud-palette-lines-default);
    }

        .app-icon-editor__preview img.is-rounded {
            border-radius: 22%;
        }

        .app-icon-editor__preview img.is-circle {
            border-radius: 50%;
        }

    .app-icon-editor__preview figcaption {
        color: var(--mud-palette-text-secondary);
        font-size: 0.75rem;
    }

.app-icon-editor__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ===== TEMAS ===== */

.settings-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 1rem;
    padding: 1.5rem 0 1.35rem;
}

.settings-theme {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius-sm);
    background: var(--mud-palette-surface);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .settings-theme:hover {
        border-color: rgba(var(--mud-palette-primary-rgb), 0.5);
        transform: translateY(-2px);
    }

    .settings-theme.is-selected {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px var(--mud-palette-primary);
    }

    .settings-theme:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

/* Miniatura de uma tela com as cores do tema: barra do topo, fundo e um cartão com texto e botão. */
.settings-theme__preview {
    display: flex;
    flex-direction: column;
    height: 104px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.settings-theme__bar {
    flex: 0 0 18px;
}

.settings-theme__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 14px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.settings-theme__line {
    height: 6px;
    width: 80%;
    border-radius: 3px;
    opacity: 0.35;
}

    .settings-theme__line.is-short {
        width: 50%;
    }

.settings-theme__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.settings-theme__button {
    width: 38px;
    height: 12px;
    border-radius: 4px;
}

.settings-theme__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.settings-theme__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
}

.settings-theme__name {
    color: var(--mud-palette-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

.settings-theme__mode {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.settings-theme__check {
    color: var(--mud-palette-primary);
}

/* ===== MÓDULOS ===== */

.settings-modules {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 1.5rem 0 1.35rem;
    list-style: none;
}

.settings-module {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .settings-module.is-on {
        border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
        background: rgba(var(--mud-palette-primary-rgb), 0.025);
    }

.settings-module__main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
}

.settings-module__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-module.is-on .settings-module__icon {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

.settings-module__text,
.settings-suboption__text,
.settings-choice__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.settings-module__name {
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.settings-module__description,
.settings-suboption__description,
.settings-choice__description {
    color: var(--mud-palette-text-secondary);
    font-size: 0.83rem;
    line-height: 1.45;
}

/* Ajuste que só existe com o módulo ligado: fica dentro do cartão, recuado sob o nome do módulo. */
.settings-suboption {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 1rem;
    padding: 0.8rem 0 0.85rem calc(38px + 0.9rem);
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.settings-suboption__name {
    color: var(--mud-palette-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

/* ===== ESCOLHA ENTRE OPÇÕES (impressão) ===== */

.settings-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.settings-choice {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--settings-radius-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .settings-choice:hover {
        border-color: rgba(var(--mud-palette-primary-rgb), 0.5);
    }

    .settings-choice.is-selected {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), 0.05);
    }

    .settings-choice:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.settings-choice__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary);
}

.settings-choice__name {
    color: var(--mud-palette-text-primary);
    font-size: 0.93rem;
    font-weight: 600;
}

.settings-choice__radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 50%;
    transition: border-color 0.15s ease, border-width 0.15s ease;
}

.settings-choice.is-selected .settings-choice__radio {
    border: 5px solid var(--mud-palette-primary);
}

/* ===== ESTADO VAZIO ===== */

.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 1.35rem;
    padding: 2.25rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--settings-radius-sm);
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

    .settings-empty .mud-icon-root {
        width: 3rem;
        height: 3rem;
        padding: 0.7rem;
        border-radius: 50%;
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
        color: var(--mud-palette-primary);
    }

    .settings-empty p {
        margin: 0;
        font-size: 0.92rem;
    }

/* ===== BARRA DE SALVAR ===== */

/* Presa ao pé da tela enquanto a seção rola, para o Salvar não sumir em seção comprida. */
.settings-savebar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 2rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 var(--settings-radius) var(--settings-radius);
    background: var(--mud-palette-surface);
}

.settings-savebar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.87rem;
}

.settings-savebar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.settings-savebar.is-dirty .settings-savebar__status {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.settings-savebar.is-dirty .settings-savebar__dot {
    background: var(--mud-palette-warning);
}

.settings-savebar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 1279.98px) {
    .settings-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .settings-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .settings-row__control.is-end {
        justify-content: flex-start;
    }
}

@media (max-width: 959.98px) {
    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Vira uma faixa de abas que rola na horizontal, como as abas do perfil. */
    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .settings-nav::-webkit-scrollbar {
            display: none;
        }

    .settings-nav__item {
        flex: 0 0 auto;
        width: auto;
        gap: 0.5rem;
        padding: 0.55rem 0.85rem;
    }

    .settings-nav__hint {
        display: none;
    }

    .settings-row {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
        align-items: center;
    }
}

@media (max-width: 719.98px) {
    .settings-header {
        padding: 1.15rem;
    }

    .settings-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .settings-stat {
        padding: 0.65rem 0.8rem;
    }

        .settings-stat dd {
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .settings-panel {
        padding: 1.25rem 1.1rem 0.25rem;
    }

    .settings-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .settings-savebar {
        padding: 0.75rem 1.1rem;
    }

    .settings-suboption {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-nav__item,
    .settings-theme,
    .settings-module,
    .settings-module__icon,
    .settings-choice,
    .settings-choice__radio {
        transition: none;
    }

    .settings-theme:hover {
        transform: none;
    }
}