/*
 * Settings screen (PLAN.md §7.5.3): grouped sections in AlisQI panel (.capsule) styling, labels above full-width
 * inputs, inline field errors. Inline error text has no main-app equivalent (the main app marks fields .invalid and
 * shows a toast); see docs/styling-inventory.md.
 */

.settings {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
    padding-bottom: var(--spacing-large);
}

/* First-run setup: only the connection section (and the welcome) are shown. */
.settings--setup .settings-section--app {
    display: none;
}

.settings__welcome p {
    margin: 0;
    color: var(--capture-color-text-secondary);
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.settings .settings-section__title {
    margin: 0;
    color: var(--capture-color-text-secondary);
    font-size: var(--size-small);
    font-weight: var(--fontweight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium-large);
    width: 100%;
    margin: 0;
    padding: var(--spacing-medium-large);
}

.settings-note {
    display: flex;
    gap: var(--spacing-small);
    align-items: flex-start;
    margin: 0;
    color: var(--capture-color-text-secondary);
}

.settings-note .icon {
    margin-top: 0.2em;
    color: rgb(var(--icon));
}

.settings-note--warning .icon {
    color: rgb(var(--icon-warning));
}

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

/* Setup step after connecting: choose forms. Success border and icon; the main app's --background-success stays light in dark mode, so no fill. */
.settings-next {
    display: flex;
    gap: var(--spacing-small);
    align-items: flex-start;
    padding: var(--spacing-medium);
    border: 1px solid rgb(var(--border-success-hard));
    border-radius: var(--border-radius-small);
    outline: none;
}

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

.settings-next .icon {
    margin-top: 0.2em;
    color: rgb(var(--icon-success));
}

.settings-next__title {
    margin: 0 0 var(--spacing-extra-small);
    color: var(--capture-color-text);
    font-weight: var(--fontweight-semibold);
}

.settings__danger {
    color: rgb(var(--textcolor-error));
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    margin: 0;
}

.settings-list > div,
.connection-card__details > div {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-medium);
}

.settings-list dt,
.connection-card__details dt {
    color: var(--capture-color-text-secondary);
}

.settings-list dd,
.connection-card__details dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Advanced (collapsed) */
.settings-advanced > summary {
    display: flex;
    align-items: center;
    min-height: var(--capture-tap-target);
    color: var(--capture-color-link);
    cursor: pointer;
}

.settings-advanced[open] > summary {
    margin-bottom: var(--spacing-small);
}

/* Fields ----------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-extra-small);
}

.settings .field__label {
    display: block; /* styles.css makes every label a flex row */
    color: var(--capture-color-text);
    font-weight: var(--fontweight-semibold);
    cursor: default;
}

/* Input with a suffix (".alisqi.com") or buttons inside the same box. */
.field__adorned {
    display: flex;
    align-items: stretch;
    border: 1px solid rgb(var(--border-input));
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-input));
}

.field__adorned:focus-within {
    outline: solid medium rgb(var(--focus-input));
}

.field__adorned:has(input.invalid) {
    border-color: rgb(var(--border-error-hard));
    box-shadow: 4px 0 0 0 rgb(var(--border-error-hard)) inset; /* the main app's invalid inset bar */
}

.field__adorned > input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.field__adorned > input:focus {
    outline: none;
}

.field__suffix {
    display: flex;
    align-items: center;
    padding-right: var(--spacing-medium);
    color: var(--capture-color-text-secondary);
    font-size: var(--capture-font-size-input);
    user-select: none;
    -webkit-user-select: none;
}

.field__adornment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--capture-tap-target);
    border: 0;
    background: none;
    color: rgb(var(--icon));
    font-size: 18px;
    cursor: pointer;
}

.field__adornment-btn .icon {
    cursor: inherit;
}

.field__adornment-btn:active {
    opacity: 0.6;
}

.field__adornment-btn[hidden] {
    display: none;
}

.field--locked .field__adorned {
    background: rgb(var(--background-input-disabled));
}

.field__help {
    margin: 0;
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
    min-height: 1.5em;
}

.field__help:empty {
    min-height: 0;
}

.field__error {
    margin: 0;
    color: rgb(var(--textcolor-error));
    font-size: var(--size-base);
}

.field__error p {
    margin: 0;
}

.field__error[hidden] {
    display: none;
}

/* Copyable value (webhook URL/secret, outbound IPs) */
.copy-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    margin-top: var(--spacing-extra-small);
}

.copy-row[hidden] {
    display: none;
}

.copy-row code {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-small);
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-labelbadge));
    color: var(--capture-color-text);
    font-family: 'Roboto Mono', monospace;
    font-size: var(--size-small);
    overflow-wrap: anywhere;
    user-select: all;
}

.btn--copied .icon:before {
    content: '\f00c'; /* checkmark while "copied" */
}

/* Connection form and card ------------------------------------------------- */

.connection-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium-large);
}

.connection-form[hidden],
.connection-card[hidden] {
    display: none;
}

.connection-form__actions,
.connection-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-small);
}

.btn__spinner {
    width: 16px;
    height: 16px;
    margin-right: var(--spacing-small);
}

.btn__spinner[hidden] {
    display: none;
}

.connection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.connection-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
}

.connection-card__tenant {
    font-size: var(--size-subtitle);
    font-weight: var(--fontweight-semibold);
    overflow-wrap: anywhere;
}

.connection-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    margin: 0;
}

/* Status chip on the main app's .labelbadge, with signal colours. */
.status-chip--ok {
    background: rgb(var(--background-success));
    color: rgb(var(--textcolor-success));
}

.status-chip--invalid {
    background: rgb(var(--background-warning));
    color: rgb(var(--textcolor-warning));
}

.status-chip--unverified {
    background: rgb(var(--background-labelbadge));
    color: var(--capture-color-text-secondary);
}

/* Skeleton loader (no full-screen spinners, PLAN.md §11.2) */
.skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

.skeleton[hidden] {
    display: none;
}

.skeleton__line {
    display: block;
    height: 1em;
    border-radius: var(--border-radius-extra-small);
    background: rgb(var(--background-labelbadge));
    animation: capture-skeleton 1.2s ease-in-out infinite alternate;
}

.skeleton__line--short {
    width: 60%;
}

@keyframes capture-skeleton {
    to {
        opacity: 0.5;
    }
}

.settings-panel > .btn {
    align-self: flex-start;
}

.settings-toggle {
    align-items: flex-start;
}

.settings-toggle > span {
    display: flex;
    flex-direction: column;
}

.settings-toggle__title {
    font-weight: var(--fontweight-semibold);
}

.settings-toggle__help {
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

/* Notifications (PLAN.md §12.2): per-form topics under the master switch */
.push-topics {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-extra-small);
    margin: var(--spacing-small) 0;
}

.push-topics[hidden] {
    display: none;
}

.push-topics__title {
    margin: 0;
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
    font-weight: var(--fontweight-semibold);
}

/* Link-style button to another screen (Settings → Forms → Manage forms) */
.settings-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-small);
    min-height: var(--capture-tap-target);
    text-decoration: none;
}