/**
 * Wallet Up Login Customizer - Settings Page Styles (Dark Mode Enabled)
 *
 * @package WalletUp\LoginCustomizer
 * @since 2.3.8
 */

/* Diagnostics Actions Styles (Merged and Prefixed) */
.wallet-up-lc-diagnostics-actions {
    display: flex;
    flex-direction: column; /* Keep vertical stacking */
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    max-width: 250px;
    border-top: 1px solid var(--wallet-up-lc-border); /* Use border token */
}

.wallet-up-lc-diagnostics-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 8px 12px;
}

/* Health Grid Styles */
.wallet-up-lc-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.wallet-up-lc-health-item {
    display: flex;
    flex-direction: column;
    padding: 16px; /* Slightly increased padding */
    
    /* LIGHT THEME: Use tokenized background and border */
    background: var(--wallet-up-lc-bg-primary); 
    border-radius: var(--wallet-up-lc-radius);
    border: 1px solid var(--wallet-up-lc-border);
    box-shadow: var(--wallet-up-lc-shadow-sm); /* Added subtle shadow */
}

.wallet-up-lc-health-label {
    font-size: 12px;
    /* LIGHT THEME: Use subdued text color token */
    color: var(--wallet-up-lc-text-tertiary); 
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-up-lc-health-value {
    font-size: 16px; /* Slightly larger value text */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Status Colors (Mapped to Tokens or Gradients) */
.wallet-up-lc-health-value.excellent {
    /* Uses gradient effect for bold style, referencing brand tokens */
    background: linear-gradient(135deg, var(--wallet-up-lc-brand-light) 0%, var(--wallet-up-lc-brand-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800; /* Made even bolder */
}

.wallet-up-lc-health-value.good {
    color: var(--wallet-up-lc-success);
}

.wallet-up-lc-health-value.warning {
    color: var(--wallet-up-lc-warning);
}

.wallet-up-lc-health-value.error {
    color: var(--wallet-up-lc-danger);
}


/* === DARK THEME OVERRIDES === */

@media (prefers-color-scheme: dark) {
    
    .wallet-up-lc-diagnostics-actions {
        border-top: 1px solid var(--wallet-up-lc-border);
    }
    
    .wallet-up-lc-health-item {
        /* DARK THEME: Use secondary background (slightly darker card) */
        background: var(--wallet-up-lc-bg-secondary);
        border: 1px solid var(--wallet-up-lc-border);
        box-shadow: var(--wallet-up-lc-shadow-md); 
    }

    .wallet-up-lc-health-label {
        /* DARK THEME: Use tertiary text (light subdued) */
        color: var(--wallet-up-lc-text-tertiary);
    }

    /* Status Colors rely on the root colors (brand, success, warning, danger) 
       which are designed to work in both modes. No specific override needed here
       unless you want the gradient colors themselves to change. */
}