/* -------------------------------------------------------
   SocialMediaManager - Theme overrides
   Applies extra styling for Bootstrap 5 data-bs-theme
   ------------------------------------------------------- */

/* ===== LIGHT defaults (optional) ===== */
:root[data-bs-theme="light"] {
    --smm-bg: #f6f9ff;
    --smm-surface: rgba(255,255,255,.96);
    --smm-surface-2: rgba(255,255,255,.95);
    --smm-border: rgba(0,0,0,.06);
    --smm-text: rgba(0,0,0,.88);
    --smm-muted: rgba(0,0,0,.58);
}

    /* Ensure body background follows theme */
    :root[data-bs-theme="light"] body {
        background: var(--smm-bg);
        color: var(--smm-text);
    }

/* ===== DARK THEME (not too black) ===== */
:root[data-bs-theme="dark"] {
    /* Slate-ish background (lighter than pure black) */
    --smm-bg: #0b1220; /* page background */
    --smm-bg-2: #0e172a; /* deeper layer for gradients */
    --smm-surface: #121c30; /* cards */
    --smm-surface-2: #16233a; /* elevated cards */
    --smm-border: rgba(255,255,255,.10);
    --smm-text: rgba(255,255,255,.90);
    --smm-muted: rgba(255,255,255,.62);
}

    /* Make the ENTIRE page dark */
    :root[data-bs-theme="dark"] body {
        background: var(--smm-bg) !important;
        color: var(--smm-text) !important;
    }

    /* If Bootstrap sets background via utilities, force main container background transparent */
    :root[data-bs-theme="dark"] .container,
    :root[data-bs-theme="dark"] main {
        background: transparent !important;
    }

    /* ===== Dashboard wrapper (.dash-bg) =====
   Your Admin/Index.cshtml uses .dash-bg wrapper.
   In dark mode, we replace light gradient with a dark one.
*/
    :root[data-bs-theme="dark"] .dash-bg {
        background-color: var(--smm-bg) !important;
        background-image: radial-gradient(1000px 520px at 15% -10%, rgba(13,110,253,.22), transparent 60%), radial-gradient(900px 420px at 95% 0%, rgba(25,135,84,.18), transparent 55%), radial-gradient(900px 420px at 80% 95%, rgba(13,202,240,.14), transparent 55%);
    }

    /* ===== Common card surfaces used by your dashboard ===== */
    :root[data-bs-theme="dark"] .soft-card,
    :root[data-bs-theme="dark"] .stat-card,
    :root[data-bs-theme="dark"] .module-card,
    :root[data-bs-theme="dark"] .analytics-banner,
    :root[data-bs-theme="dark"] .card {
        background: var(--smm-surface) !important;
        border-color: var(--smm-border) !important;
        color: var(--smm-text) !important;
    }

    /* Slightly elevate “hero” is already blue; keep as-is but improve shadow in dark */
    :root[data-bs-theme="dark"] .hero-card {
        box-shadow: 0 .7rem 1.8rem rgba(0,0,0,.35) !important;
    }

    /* Headings + small muted text */
    :root[data-bs-theme="dark"] .text-muted,
    :root[data-bs-theme="dark"] .stat-sub,
    :root[data-bs-theme="dark"] .banner-subtitle {
        color: var(--smm-muted) !important;
    }

    /* Table styling on dark */
    :root[data-bs-theme="dark"] .table {
        color: var(--smm-text) !important;
    }

        :root[data-bs-theme="dark"] .table thead th {
            color: rgba(255,255,255,.65) !important;
            border-color: rgba(255,255,255,.10) !important;
        }

        :root[data-bs-theme="dark"] .table tbody td {
            border-color: rgba(255,255,255,.10) !important;
        }

    /* Empty state */
    :root[data-bs-theme="dark"] .empty-state {
        background: rgba(13,110,253,.10) !important;
        border-color: rgba(13,110,253,.28) !important;
    }

    /* Mini progress base track */
    :root[data-bs-theme="dark"] .mini-progress {
        background: rgba(255,255,255,.10) !important;
    }

    /* Spark background slightly brighter */
    :root[data-bs-theme="dark"] .spark {
        background: linear-gradient(to right, rgba(13,110,253,.20), rgba(13,110,253,.06)), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px) !important;
    }

    /* Metric chips in analytics */
    :root[data-bs-theme="dark"] .metric-chip {
        background: var(--smm-surface-2) !important;
        border-color: rgba(255,255,255,.12) !important;
        color: var(--smm-text) !important;
    }

    /* Buttons: keep Bootstrap, but make outline-secondary visible on dark */
    :root[data-bs-theme="dark"] .btn-outline-secondary {
        color: rgba(255,255,255,.78) !important;
        border-color: rgba(255,255,255,.22) !important;
    }

        :root[data-bs-theme="dark"] .btn-outline-secondary:hover {
            background: rgba(255,255,255,.10) !important;
        }

    /* Badges: improve contrast */
    :root[data-bs-theme="dark"] .badge.bg-primary-subtle,
    :root[data-bs-theme="dark"] .badge.bg-secondary-subtle,
    :root[data-bs-theme="dark"] .badge.bg-warning-subtle,
    :root[data-bs-theme="dark"] .badge.bg-success-subtle,
    :root[data-bs-theme="dark"] .badge.bg-info-subtle {
        background: rgba(255,255,255,.10) !important;
        color: rgba(255,255,255,.85) !important;
        border: 1px solid rgba(255,255,255,.12);
    }

    /* Links visible on dark */
    :root[data-bs-theme="dark"] a {
        color: rgba(147,197,253,.95);
    }

        :root[data-bs-theme="dark"] a:hover {
            color: rgba(191,219,254,.95);
        }