/**
 * Scenario Card Components - Variant B Pattern
 * Based on: docs/new-styleguide/card-plugin-compatibility.html
 */

/* Card Container */
.scenario-card {
    background: #fff;
    border: 2px solid var(--neutral-800, #1e293b);
    border-radius: 16px;
    overflow: hidden;
}


/* Sidebar Card - matches Scenario Card exactly
   Scoped to .wpagent-sidebar for specificity > generic reset */
.wpagent-sidebar .sidebar-card,
.sidebar-card.variant-b {
    background: #fff;
    border: 2px solid var(--neutral-800, #1e293b);
    border-radius: 16px;
    overflow: hidden;
}


/* Card Header */
.scenario-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    /* 20px 24px */
    border-bottom: 1px solid var(--neutral-200, #e2e8f0);
}

.scenario-card-header-left {
    display: flex;
    gap: 0.875rem;
    /* 14px */
    align-items: flex-start;
}

.scenario-card-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-600, #7c3aed);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.scenario-card-icon svg {
    width: 22px;
    height: 22px;
}

.scenario-card-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    color: var(--neutral-800, #1e293b);
    margin-bottom: 0.125rem;
    /* 2px */
}

.scenario-card-subtitle {
    font-size: 0.8125rem;
    /* 13px */
    color: var(--neutral-500, #64748b);
}

/* Confidence Badge */
.scenario-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    padding: 0.375rem 0.75rem;
    /* 6px 12px */
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 8px;
    border: 1.5px solid;
}

.scenario-confidence-high {
    background: var(--success-50, #f0fdf4);
    border-color: var(--success-500, #22c55e);
    color: var(--success-700, #15803d);
}

.scenario-confidence-medium {
    background: var(--warning-50, #fffbeb);
    border-color: var(--warning-500, #f59e0b);
    color: var(--warning-700, #b45309);
}

.scenario-confidence-low {
    background: var(--error-50, #fef2f2);
    border-color: var(--error-500, #ef4444);
    color: var(--error-700, #b91c1c);
}

/* Status Grid (Verdict Cards) */
.scenario-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--neutral-200, #e2e8f0);
    border-bottom: 1px solid var(--neutral-200, #e2e8f0);
}

.scenario-status-card {
    padding: 1rem 1.25rem;
    /* 16px 20px */
    background: #fff;
}

.scenario-status-card-safe {
    background: var(--success-50, #f0fdf4);
}

.scenario-status-card-warning {
    background: var(--warning-50, #fffbeb);
}

.scenario-status-card-avoid {
    background: var(--error-50, #fef2f2);
}

.scenario-status-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    margin-bottom: 0.5rem;
    /* 8px */
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 600;
}

.scenario-status-header svg {
    width: 14px;
    height: 14px;
}

.scenario-status-safe .scenario-status-header {
    color: var(--success-700, #15803d);
}

.scenario-status-warning .scenario-status-header {
    color: var(--warning-700, #b45309);
}

.scenario-status-avoid .scenario-status-header {
    color: var(--error-700, #b91c1c);
}

.scenario-status-text {
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.5;
    color: var(--neutral-600, #475569);
}

/* Table Section */
.scenario-table-section {
    padding: 1.25rem 1.5rem;
    /* 20px 24px */
}

.scenario-table-header {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    gap: 1rem;
    /* 16px */
    padding-bottom: 0.625rem;
    /* 10px */
    border-bottom: 2px solid var(--neutral-800, #1e293b);
    margin-bottom: 0.5rem;
    /* 8px */
}

.scenario-table-header span {
    font-size: 0.625rem;
    /* 10px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-500, #64748b);
}

.scenario-table-row {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    gap: 1rem;
    /* 16px */
    padding: 0.625rem 0;
    /* 10px 0 */
    border-bottom: 1px solid var(--neutral-200, #e2e8f0);
    align-items: center;
}

.scenario-table-row:last-child {
    border-bottom: none;
}

.scenario-plugin-name {
    font-weight: 600;
    color: var(--neutral-800, #1e293b);
    font-size: 0.875rem;
    /* 14px */
}

.scenario-plugin-note {
    font-size: 0.8125rem;
    /* 13px */
    color: var(--neutral-500, #64748b);
}

/* Status Badge (in table) */
.scenario-status-badge {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    /* 4px 10px */
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 600;
    border-radius: 6px;
}

.scenario-status-compatible {
    background: var(--success-100, #dcfce7);
    color: var(--success-700, #15803d);
}

.scenario-status-partial {
    background: var(--warning-100, #fef3c7);
    color: var(--warning-700, #b45309);
}

.scenario-status-incompatible {
    background: var(--error-100, #fee2e2);
    color: var(--error-700, #b91c1c);
}

/* Recommendation Box */
.scenario-recommendation {
    margin: 0 1.5rem 1.5rem;
    /* 0 24px 24px */
    padding: 1rem 1.25rem;
    /* 16px 20px */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(124, 58, 237, 0.05));
    border: 2px solid var(--neutral-800, #1e293b);
    border-radius: 12px;
}

.scenario-recommendation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
    margin-bottom: 0.375rem;
    /* 6px */
}

.scenario-recommendation-header svg {
    width: 18px;
    height: 18px;
    color: var(--primary-600, #7c3aed);
}

.scenario-recommendation-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 700;
    color: var(--primary-700, #6d28d9);
}

.scenario-recommendation-text {
    font-size: 0.8125rem;
    color: var(--neutral-600, #475569);
}

/* Metrics Grid Section - Wrapper only */
.scenario-metrics-section {
    padding: 1.25rem 1.5rem;
    /* 20px 24px - section padding from styleguide */
}

.metric-card {
    text-align: center;
    padding: 1rem;
    /* 16px */
    background: #fff;
    border-radius: 8px;
    border: 2px solid var(--neutral-800, #1e293b);
    /* Dark border */
}

.metric-card__value {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    margin-bottom: 0.25rem;
    /* 4px */
}

.metric-card__label {
    font-size: 0.75rem;
    /* 12px */
    color: var(--neutral-500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    /* 4px */
}

.metric-card__benchmark {
    font-size: 0.625rem;
    /* 10px */
    color: var(--neutral-400, #94a3b8);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .scenario-status-grid {
        grid-template-columns: 1fr;
    }

    .scenario-table-header,
    .scenario-table-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .scenario-table-header span:not(:first-child) {
        display: none;
    }

    .scenario-table-row {
        padding: 0.75rem 0;
    }

    .scenario-plugin-name {
        margin-bottom: 0.25rem;
    }
}

/* =========================================
   Dark Mode Variant (Performance Section)
   ========================================= */
.scenario-card.dark-mode {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-color: #334155;
    color: #f8fafc;
}

.scenario-card.dark-mode .scenario-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.scenario-card.dark-mode .scenario-card-title {
    color: #fff;
}

.scenario-card.dark-mode .scenario-card-subtitle {
    color: #94a3b8;
}

.scenario-card.dark-mode .scenario-confidence-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Status Grid Dark */
.scenario-card.dark-mode .scenario-status-grid {
    background: #334155;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.scenario-card.dark-mode .scenario-status-card {
    background: #1e293b;
}

.scenario-card.dark-mode .scenario-status-header {
    color: #cbd5e1;
}

.scenario-card.dark-mode .scenario-status-text {
    color: #94a3b8;
}

.scenario-card.dark-mode .scenario-status-card-safe {
    background: rgba(34, 197, 94, 0.1);
}

.scenario-card.dark-mode .scenario-status-safe .scenario-status-header {
    color: #4ade80;
}

.scenario-card.dark-mode .scenario-status-card-warning {
    background: rgba(245, 158, 11, 0.1);
}

.scenario-card.dark-mode .scenario-status-warning .scenario-status-header {
    color: #fbbf24;
}

.scenario-card.dark-mode .scenario-status-card-avoid {
    background: rgba(239, 68, 68, 0.1);
}

.scenario-card.dark-mode .scenario-status-avoid .scenario-status-header {
    color: #f87171;
}

/* Inner Components Dark */
.scenario-card.dark-mode .metric-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.scenario-card.dark-mode .metric-card__value {
    color: #fff;
}

.scenario-card.dark-mode .metric-card__label {
    color: #94a3b8;
}

.scenario-card.dark-mode .metric-card__benchmark {
    color: #64748b;
}

.scenario-card.dark-mode .performance-summary {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(49, 46, 129, 0.3));
    border-color: rgba(59, 130, 246, 0.2);
    margin: 1.5rem;
    border-radius: 12px;
}

.scenario-card.dark-mode .quotes-section .bg-gray-100 {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.scenario-card.dark-mode .scenario-recommendation {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05));
    border-color: #4c1d95;
}

.scenario-card.dark-mode .scenario-recommendation-title {
    color: #c4b5fd;
}

.scenario-card.dark-mode .scenario-recommendation-text {
    color: #cbd5e1;
}

.scenario-card.dark-mode .scenario-recommendation-text strong {
    color: #fff;
}

.scenario-card.dark-mode .border-neutral-200\/50 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Utility Color Overrides for Dark Mode */
.scenario-card.dark-mode .text-green-600 {
    color: #4ade80;
}

.scenario-card.dark-mode .text-amber-600 {
    color: #fbbf24;
}

.scenario-card.dark-mode .text-red-600 {
    color: #f87171;
}

.scenario-card.dark-mode .text-blue-600 {
    color: #60a5fa;
}

.scenario-card.dark-mode .text-gray-900 {
    color: #f8fafc;
}

.scenario-card.dark-mode .text-gray-700 {
    color: #cbd5e1;
}

.scenario-card.dark-mode .text-gray-600 {
    color: #94a3b8;
}

.scenario-card.dark-mode .text-neutral-600,
.scenario-card.dark-mode .scenario-recommendation-text,
.scenario-card.dark-mode .scenario-recommendation-text p {
    color: #e2e8f0 !important;
}

/* Fix contrast for alternatives */

.scenario-card.dark-mode .text-gray-500 {
    color: #64748b;
}

.scenario-card.dark-mode .text-gray-400 {
    color: #475569;
}

.scenario-card.dark-mode .text-primary-500 {
    color: #a78bfa;
}