/* ==========================================
   Hub Settings — Central de Configurações
   Tokens: var(--hub-*) como fonte da verdade
   ========================================== */

/* --- .hub-settings-sidebar / .beto-settings-sidebar --- */
.hub-settings-sidebar,
.beto-settings-sidebar {
    width: 240px;
    border-right: 1px solid var(--hub-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-s) var(--space-s) var(--space-s) 0;
    flex-shrink: 0;
    overflow-y: auto;
}

/* --- .hub-settings-content / .beto-settings-content --- */
.hub-settings-content,
.beto-settings-content {
    flex: 1;
    padding-left: var(--space-m);
    overflow-y: auto;
    min-height: 0;
}

/* Layout sidebar: abas à esquerda, conteúdo à direita */
.beto-settings-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}
[data-settings-modal] .hub-modal__panel {
    height: min(560px, calc(100vh - 120px));
}

[data-settings-modal] .hub-modal__body--sidebar {
    height: 100%;
    overflow: hidden;
}

/* --- .hub-settings-tab / .beto-settings-tab (Abas de Configuração) --- */
/* Consolidado com .hub-tab / .beto-tab do Design System */
.hub-settings-tab,
.beto-settings-tab {
    background: transparent;
    border: none;
    color: var(--hub-text-muted);
    text-align: left;
    padding: 8px var(--space-s);
    cursor: pointer;
    border-radius: var(--hub-radius);
    transition: background 0.2s, color 0.2s;
    font-size: var(--hub-text-label);
    font-weight: var(--hub-weight-medium);
    margin-bottom: 2px;
}

.hub-settings-tab:hover,
.beto-settings-tab:hover {
    background: var(--hub-surface-hover);
    color: var(--hub-text);
}

.hub-settings-tab.active,
.beto-settings-tab.active,
.hub-settings-tab.is-active,
.beto-settings-tab.is-active {
    background: rgba(203, 123, 55, 0.12);
    color: var(--hub-primary);
    font-weight: var(--hub-weight-semibold);
}

/* --- .hub-settings-section / .beto-settings-section --- */
.hub-settings-section h3,
.beto-settings-section h3 {
    margin: 0 0 var(--space-s);
    color: var(--hub-text);
    font-size: var(--hub-text-heading);
    font-weight: var(--hub-weight-semibold);
}

.hub-settings-section h4,
.beto-settings-section h4 {
    margin: 0 0 var(--space-xs);
    color: var(--hub-text);
    font-size: var(--hub-text-body);
    font-weight: var(--hub-weight-semibold);
}

.hub-settings-section p,
.beto-settings-section p {
    margin: 0 0 var(--space-s);
    color: var(--hub-text-muted);
    font-size: var(--hub-text-table);
    line-height: var(--hub-leading-normal);
}

.hub-settings-section .beto-button,
.hub-settings-section .hub-button {
    width: 100%;
    justify-content: flex-start;
    margin-top: 0;
}

.hub-settings-section dl {
    display: grid;
    gap: var(--space-s);
    margin: 0;
}

.hub-settings-section dl > div {
    padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--hub-border);
}

.hub-settings-section dl > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hub-settings-section dt {
    margin-bottom: 2px;
}

.hub-settings-section dd {
    margin: 0;
    font-size: var(--hub-text-label);
    color: var(--hub-text-muted);
}

/* --- Mesclagem de Registros --- */
.hub-settings-merge__divider,
.beto-settings-merge__divider {
    padding: var(--space-s) 0;
    border-top: 1px solid var(--hub-border);
}

.hub-settings-merge__title,
.beto-settings-merge__title {
    margin: 0 0 var(--space-xs);
    color: var(--hub-text);
    font-size: var(--hub-text-body);
    font-weight: var(--hub-weight-semibold);
}

.hub-settings-merge__desc,
.beto-settings-merge__desc {
    margin: 0 0 var(--space-s);
    color: var(--hub-text-muted);
    font-size: var(--hub-text-label);
    line-height: var(--hub-leading-normal);
}

.hub-settings-merge__results,
.beto-settings-merge__results {
    margin-top: var(--space-xs);
    font-size: var(--hub-text-table);
    color: var(--hub-text-muted);
}