/* Portal settings page (js/portal/pages/settings.js): house style, wizard link, company details, password, 2FA and users. */

.settings {
    max-width: 60rem;
}

.settings-hint {
    margin: 0;
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.settings-text {
    margin: 0 0 0.75rem;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.settings-subtitle {
    margin: 0;
    color: var(--color-title);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
}

.settings-narrow {
    max-width: 26rem;
}

.settings-actions--start {
    justify-content: flex-start;
}

.settings-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-section-head .section__title {
    margin: 0;
}

/* ---------- House style ---------- */

.settings-branding {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.settings-image {
    display: grid;
    align-content: start;
    gap: 0.6rem;
}

.settings-image__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    padding: 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-align: center;
}

.settings-image__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.settings-image__preview--favicon .settings-image__img {
    width: 3rem;
    height: 3rem;
}

.settings-image__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-upload {
    position: relative;
}

.settings-upload:focus-within {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.settings-upload.is-busy {
    opacity: 0.6;
    cursor: progress;
}

.settings-colors {
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

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

.settings-color__picker {
    flex-shrink: 0;
    width: 3.25rem;
    height: 2.75rem;
    padding: 0.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
}

.settings-color__picker:disabled {
    cursor: not-allowed;
}

.settings-color__picker:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.settings-color__hex {
    max-width: 8.5rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.settings-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.settings-preview__button {
    cursor: default;
    pointer-events: none;
}

/* ---------- Wizard link ---------- */

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

.settings-link[hidden] {
    display: none;
}

.settings-link__url {
    flex: 1 1 18rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9rem;
}

.settings-link .btn {
    text-decoration: none;
}

.settings-link__note {
    margin-top: 0.6rem;
}

/* ---------- Company details: editable lists ---------- */

.settings-list {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-list legend {
    margin-bottom: 0.5rem;
    padding: 0;
}

.settings-list__rows {
    display: grid;
    gap: 0.5rem;
}

.settings-list__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.settings-list__row .input {
    flex: 1;
    min-width: 0;
}

.settings-list__remove {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-light);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.settings-list__remove:hover {
    border-color: var(--color-danger-line);
    color: var(--color-danger);
}

.settings-list__remove:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.settings-list__add {
    justify-self: start;
    font-size: 0.875rem;
}

/* ---------- Two-factor authentication ---------- */

.settings-2fa__status {
    margin: 0 0 0.75rem;
}

.settings-2fa__qr {
    display: block;
    width: 12.5rem;
    max-width: 100%;
    height: auto;
    margin: 0 0 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    image-rendering: pixelated;
}

.settings-2fa__secret {
    display: inline-block;
    max-width: 100%;
    margin: 0.35rem 0 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    user-select: all;
}

/* ---------- Users ---------- */

.settings-users__email {
    overflow-wrap: anywhere;
}

/* ---------- Phone width ---------- */

@media (max-width: 36rem) {
    .settings .card {
        padding: 1.1rem;
    }

    .settings-link .btn {
        flex: 1 1 auto;
    }

    .settings-color__hex {
        max-width: none;
    }

    .settings .form-actions .btn {
        flex: 1 1 auto;
    }
}