/**
 * EchoAccountDetails Component Styles
 * Uses v2-* portal design tokens. Shared across client app and admin shell.
 * Prefix: acct-
 */

/* --- Address autocomplete dropdown override for v2 theme --- */
.acct-root .address-autocomplete-dropdown {
    background: var(--v2-bg-elevated) !important;
    border: 1px solid var(--v2-border) !important;
    box-shadow: var(--v2-shadow-modal) !important;
}
.acct-root .address-autocomplete-item {
    border-bottom-color: var(--v2-border) !important;
}
.acct-root .address-autocomplete-item > div:first-child {
    color: var(--v2-fg) !important;
}
.acct-root .address-autocomplete-item > div:last-child {
    color: var(--v2-fg-muted) !important;
}
.acct-root .address-autocomplete-item:hover,
.acct-root .address-autocomplete-item.selected {
    background: var(--v2-surface) !important;
}

/* --- Admin: System ID code block --- */
.acct-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--v2-text-xs);
    background: var(--v2-surface);
    padding: 3px 8px;
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border);
    user-select: all;
}

/* --- Admin: Status select --- */
.acct-status-select {
    padding: 6px 12px;
    font-size: var(--v2-text-sm);
    font-weight: 500;
    border-radius: var(--v2-radius-md);
    border: 1px solid var(--v2-border);
    background: var(--v2-surface);
    color: var(--v2-fg);
    cursor: pointer;
}
.acct-status-select:focus {
    outline: 2px solid var(--v2-accent);
    outline-offset: 1px;
}

/* --- Admin: Danger zone --- */
.acct-danger-card {
    border-color: var(--v2-error) !important;
}
.acct-danger-title {
    color: var(--v2-error) !important;
}

/* --- Call Forwarding Verification card --- */
.verification-listening-countdown {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
    margin-bottom: var(--v2-space-3);
}

.verification-listening-off {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
}

.verification-codes-panel {
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-bg-inset);
    padding: var(--v2-space-3);
}

.verification-codes-empty {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
    padding: var(--v2-space-2) var(--v2-space-1);
}

.verification-codes-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
}

.verification-code-row {
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-bg-surface);
    padding: var(--v2-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-1);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.verification-code-row:hover {
    background: var(--v2-bg-elevated);
    border-color: var(--v2-border-strong, var(--v2-border));
}

.verification-code-row:focus-visible {
    outline: 2px solid var(--v2-accent, var(--v2-fg));
    outline-offset: 2px;
}

.verification-code-body {
    font-family: var(--v2-font-mono);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
    white-space: pre-wrap;
    word-break: break-word;
}

.verification-code-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-space-1);
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
}