/* WhatsApp Dashboard Module */
.wa-dashboard-page {
    --wa-ink: #1d2a3a;
    --wa-muted: #607085;
    --wa-accent: #0ea271;
    --wa-accent-soft: rgba(14, 162, 113, 0.15);
    --wa-sky: #06b6d4;
    --wa-orange: #f59e0b;
    --wa-red: #ef4444;
    --wa-slate: #e9f1ef;
    padding: 1.2rem;
    background:
        radial-gradient(circle at 8% -5%, rgba(6, 182, 212, 0.10), transparent 32%),
        radial-gradient(circle at 90% 0%, rgba(14, 162, 113, 0.10), transparent 36%),
        #f7fbfa;
    border-radius: 1rem;
}

.wa-title { color: var(--wa-ink); }
.wa-subtitle { color: var(--wa-muted); }
.wa-card { border: 1px solid rgba(18, 64, 88, 0.10); border-radius: 0.9rem; background: #ffffff; box-shadow: 0 12px 28px rgba(18, 52, 77, 0.05); }
.wa-card .card-header { border-bottom: 1px solid rgba(18, 64, 88, 0.08); background: linear-gradient(180deg, rgba(14, 162, 113, 0.06), rgba(255, 255, 255, 0)); }
.wa-kpi { border-radius: 0.8rem; border: 1px solid rgba(18, 64, 88, 0.10); background: #fbfefd; height: 100%; padding: 0.9rem; }
.wa-kpi-label { color: var(--wa-muted); font-size: 0.82rem; }
.wa-kpi-value { color: var(--wa-ink); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; }
.wa-kpi-delta { font-size: 0.78rem; font-weight: 600; }
.wa-kpi-delta.up { color: #0f9f69; }
.wa-kpi-delta.down { color: var(--wa-red); }
.wa-chart-wrap { border: 1px solid #d8e8e4; border-radius: 0.75rem; padding: 0.85rem; background: #fcfffe; }
.wa-trend-svg { width: 100%; height: 220px; display: block; }
.wa-trend-line-delivered { fill: none; stroke: var(--wa-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wa-trend-line-read { fill: none; stroke: var(--wa-sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wa-trend-line-failed { fill: none; stroke: var(--wa-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 6; }
.wa-progress { height: 0.9rem; background-color: #e6eeeb; border-radius: 999px; overflow: hidden; }
.wa-progress > span { display: block; height: 100%; border-radius: 999px; }
.wa-pill { border-radius: 999px; border: 1px solid rgba(15, 66, 96, 0.18); background: #f2f8f6; color: #2f4f64; padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.wa-table thead th { font-size: 0.79rem; color: #52687a; text-transform: uppercase; letter-spacing: 0.3px; }

/* Dark Mode */
html.dark-theme .wa-dashboard-page {
    --wa-ink: #e2e8f0;
    --wa-muted: #94a3b8;
    --wa-accent: #10b981;
    --wa-accent-soft: rgba(16, 185, 129, 0.15);
    --wa-sky: #06b6d4;
    background:
        radial-gradient(circle at 8% -5%, rgba(6, 182, 212, 0.12), transparent 32%),
        radial-gradient(circle at 90% 0%, rgba(14, 162, 113, 0.12), transparent 36%),
        #0d1419;
}
html.dark-theme .wa-title { color: #e2e8f0; }
html.dark-theme .wa-subtitle { color: #94a3b8; }
html.dark-theme .wa-card { background: #1a2627; border-color: rgba(14, 162, 113, 0.15); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
html.dark-theme .wa-card .card-header { background: linear-gradient(180deg, rgba(14, 162, 113, 0.1), transparent); border-color: rgba(14, 162, 113, 0.15); }
html.dark-theme .wa-kpi { background: #0d1a15; border-color: rgba(14, 162, 113, 0.25); }
html.dark-theme .wa-kpi-value { color: #6ee7b7; }
html.dark-theme .wa-chart-wrap { background: #0d1a15; border-color: rgba(14, 162, 113, 0.2); }
html.dark-theme .wa-pill { background: rgba(14, 162, 113, 0.15); color: #a7f3d0; border-color: rgba(14, 162, 113, 0.3); }
html.dark-theme .wa-table thead th { color: #cbd5e1; background: #0d1a15; }