/* AIDiveForge Account UI Styles */

/* =========================================================================
   2FA Status Cards
   ========================================================================= */

.adf-account-status {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--adf-neutral-wash-10, #eee);
    background: var(--adf-surface-inset, #f9f9f9);
}

.adf-account-status__icon {
    font-size: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: bold;
}

.adf-account-status--enabled .adf-account-status__icon {
    background: var(--adf-state-success-wash-08, rgba(46, 168, 78, 0.08));
    color: var(--adf-state-success, #2ea84e);
}

.adf-account-status--disabled .adf-account-status__icon {
    background: var(--adf-neutral-wash-10, #eee);
    color: var(--adf-text-muted, #666);
}

.adf-account-status__text {
    flex: 1;
}

.adf-account-status__text strong {
    display: block;
    margin-bottom: 4px;
}

.adf-account-status__text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--adf-text-muted, #666);
}

.adf-account-status__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =========================================================================
   OAuth Connections List
   ========================================================================= */

.adf-oauth-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adf-oauth-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--adf-neutral-wash-08, #ddd);
    background: var(--adf-surface-flat, #fafafa);
}

.adf-oauth-item__info {
    flex: 1;
}

.adf-oauth-item__info strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.adf-oauth-item__info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--adf-text-muted, #666);
}

.adf-oauth-item__date {
    display: block;
    font-size: 0.75rem;
    color: var(--adf-text-muted, #666);
    margin-top: 4px;
}

/* =========================================================================
   Account Buttons — paint moved to adf-buttons.css.
   .adf-account-btn (and --primary / --secondary / --danger) is now a
   legacy alias for the canonical .adf-btn / .adf-btn--{variant} rules,
   so every dashboard button shares the same look and motion as the
   rest of the site. The class names are kept on call sites to avoid
   churning JS hookpoints. See adf-buttons.css "Legacy aliases" block.
   ========================================================================= */

/* =========================================================================
   Tables (Sessions & Login History)
   ========================================================================= */

.adf-sessions-table,
.adf-history-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9rem;
}

.adf-sessions-table th,
.adf-history-table th {
    background: var(--adf-neutral-wash-08, #eee);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--adf-neutral-wash-12, #ddd);
}

.adf-sessions-table td,
.adf-history-table td {
    padding: 12px;
    border-bottom: 1px solid var(--adf-neutral-wash-08, #eee);
}

.adf-sessions-table tr:hover,
.adf-history-table tr:hover {
    background: var(--adf-surface-inset, #f9f9f9);
}

.adf-history-table tr.is-success {
    color: var(--adf-state-success, #2ea84e);
}

.adf-history-table tr.is-failed {
    color: var(--adf-state-error, #dc3545);
}

.adf-history-table code {
    font-size: 0.8rem;
    background: var(--adf-neutral-wash-08, #eee);
    padding: 2px 4px;
    border-radius: 2px;
    font-family: monospace;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 768px) {
    .adf-account-status {
        flex-direction: column;
    }

    .adf-account-status__actions {
        justify-content: flex-start;
    }

    .adf-oauth-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .adf-account-btn {
        width: 100%;
    }

    .adf-sessions-table,
    .adf-history-table {
        font-size: 0.8rem;
    }

    .adf-sessions-table td,
    .adf-history-table td,
    .adf-sessions-table th,
    .adf-history-table th {
        padding: 8px;
    }
}

/* =========================================================================
   Profile view-mode (read-only display)
   ========================================================================= */

.adf-account-profile__view {
    margin: 0 0 1.25rem;
    padding: 0;
    border-top: 1px solid var(--adf-neutral-wash-08, #eee);
}

.adf-account-profile__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--adf-neutral-wash-08, #eee);
}

.adf-account-profile__term {
    margin: 0;
    font-weight: 600;
    color: var(--adf-text-muted, #666);
    font-size: 0.9rem;
}

.adf-account-profile__desc {
    margin: 0;
    color: var(--adf-text, inherit);
    word-break: break-word;
}

.adf-account-profile__empty {
    color: var(--adf-text-subtle, #999);
    font-style: italic;
}

.adf-account-form__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}

/* Anchors styled as buttons need text-decoration removed. */
a.adf-account-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .adf-account-profile__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}