/* ═══════════════════════════════════════════════════════════════════════════
   ArxAI — Light Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════
   Ensures all components render properly when data-theme="light" is set.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Body & Root ── */
[data-theme="light"] body {
    --bg-root: #f0f4ff;
    --bg-primary: #ffffff;
    --bg-secondary: #f7f9ff;
    --bg-tertiary: #eef2fc;
    --bg-elevated: #ffffff;
    --bg-hover: #e8edfa;
    --bg-active: #dde4f6;

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;

    --border-subtle: rgba(79, 105, 176, 0.12);
    --border-color: rgba(79, 105, 176, 0.18);
    --border-strong: rgba(51, 94, 191, 0.28);
    --border-focus: #5b3fd9;

    --brand-primary: #5b3fd9;
    --brand-primary-hover: #6d51e8;
    --brand-primary-muted: rgba(91, 63, 217, 0.08);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.10);
    --shadow-glow: 0 0 20px rgba(91, 63, 217, 0.12);

    background: linear-gradient(160deg, #f0f4ff 0%, #e8edfc 40%, #f0f4ff 100%) !important;
    color: var(--text-primary);
}

/* ── Particles: show in light mode with reduced opacity ── */
[data-theme="light"] .particles-canvas {
    opacity: 0.5 !important;
}

/* ── Sidebar ── */
[data-theme="light"] .app-sidebar,
[data-theme="light"] .sidebar,
[data-theme="light"] .admin-sidebar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(79, 105, 176, 0.14) !important;
    box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(12px);
}

[data-theme="light"] .sidebar-brand {
    border-bottom-color: rgba(79, 105, 176, 0.10);
}

[data-theme="light"] .sidebar-link {
    color: #374151;
}

[data-theme="light"] .sidebar-link:hover {
    background: #eef2fa !important;
    color: #111827;
}

[data-theme="light"] .sidebar-link.active {
    background: rgba(91, 63, 217, 0.08);
    color: #5b3fd9;
    border-left: 3px solid #5b3fd9;
    padding-left: 9px;
}

[data-theme="light"] .sidebar-brand-name {
    color: #111827;
}

[data-theme="light"] .sidebar-user {
    background: #f3f5fb !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] .sidebar-user-name {
    color: #111827;
}

[data-theme="light"] .sidebar-user-credits {
    color: #6b7280;
}

[data-theme="light"] .sidebar-section-title {
    color: #9ca3af;
}

[data-theme="light"] .sidebar-brand-version {
    background: #eef2fc;
    color: #6b7280;
}

/* ── Sidebar tools ── */
[data-theme="light"] .sidebar-tools {
    border-top-color: rgba(79, 105, 176, 0.10);
}

[data-theme="light"] .app-tool-btn {
    background: #eef2fc;
    color: #374151;
    border-color: rgba(79, 105, 176, 0.12);
}

[data-theme="light"] .app-tool-btn:hover {
    background: #dde4f6;
}

/* ── Page Header ── */
[data-theme="light"] .page-header {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(8px);
}

[data-theme="light"] .page-header::before {
    display: none !important;
}

[data-theme="light"] .page-title {
    color: #111827;
}

[data-theme="light"] .page-subtitle {
    color: #6b7280;
}

/* ── Cards ── */
[data-theme="light"] .card,
[data-theme="light"] .admin-section,
[data-theme="light"] .admin-filters-card,
[data-theme="light"] .admin-config-item,
[data-theme="light"] .admin-detail-field,
[data-theme="light"] .branding-preview-item,
[data-theme="light"] .admin-alert-item,
[data-theme="light"] .admin-activity-item,
[data-theme="light"] .admin-empty-state,
[data-theme="light"] .diag-result-box {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #111827;
    backdrop-filter: blur(6px);
}

/* ── Admin KPI Cards ── */
[data-theme="light"] .admin-kpi-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-top: 2px solid rgba(91, 63, 217, 0.18) !important;
}

/* ── Quick Cards, Template Cards, Library Cards ── */
[data-theme="light"] .quick-card,
[data-theme="light"] .template-card,
[data-theme="light"] .library-card {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #111827;
    backdrop-filter: blur(6px);
}

[data-theme="light"] .quick-card:hover,
[data-theme="light"] .template-card:hover,
[data-theme="light"] .library-card:hover {
    box-shadow: 0 4px 16px rgba(91, 63, 217, 0.10) !important;
    border-color: rgba(91, 63, 217, 0.18) !important;
}

/* ── Form Inputs ── */
[data-theme="light"] .form-input,
[data-theme="light"] select.form-input,
[data-theme="light"] textarea.form-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="search"],
[data-theme="light"] .admin-filter-input,
[data-theme="light"] .admin-inline-select {
    background: #f7f9ff !important;
    color: #111827 !important;
    border-color: rgba(79, 105, 176, 0.20) !important;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .admin-filter-input:focus,
[data-theme="light"] .admin-inline-select:focus {
    border-color: #5b3fd9 !important;
    box-shadow: 0 0 0 3px rgba(91, 63, 217, 0.10) !important;
}

[data-theme="light"] .form-input::placeholder {
    color: #9ca3af !important;
}

/* ── Buttons ── */
[data-theme="light"] .btn-primary {
    background: #5b3fd9;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(91, 63, 217, 0.20) !important;
}

[data-theme="light"] .btn-primary:hover:not(:disabled) {
    background: #6d51e8;
    box-shadow: 0 4px 16px rgba(91, 63, 217, 0.30) !important;
}

[data-theme="light"] .btn-secondary {
    background: #f3f5fb;
    color: #374151;
    border-color: rgba(79, 105, 176, 0.18);
}

[data-theme="light"] .btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: #374151;
}

[data-theme="light"] .btn-ghost:hover {
    background: #eef2fa !important;
}

/* ── Tables ── */
[data-theme="light"] .admin-table tbody tr,
[data-theme="light"] .data-table tbody tr {
    background: #ffffff !important;
    box-shadow: none !important;
}

[data-theme="light"] .admin-table tbody tr:hover,
[data-theme="light"] .data-table tbody tr:hover {
    background: #f3f5fb !important;
    box-shadow: none !important;
}

[data-theme="light"] thead th {
    background: #f3f5fb;
    color: #6b7280;
    border-bottom-color: rgba(79, 105, 176, 0.14);
}

[data-theme="light"] tbody td {
    color: #374151;
    border-bottom-color: rgba(79, 105, 176, 0.08);
}

/* ── Studio Feature Sidebar ── */
[data-theme="light"] .studio-feature-sidebar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .studio-feature-item {
    background: #f7f9ff !important;
    border-color: rgba(79, 105, 176, 0.10) !important;
    color: #374151;
}

[data-theme="light"] .studio-feature-item:hover {
    background: #eef2fa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .studio-feature-item.active {
    background: rgba(91, 63, 217, 0.06) !important;
    border-color: rgba(91, 63, 217, 0.20) !important;
    color: #5b3fd9;
}

[data-theme="light"] .studio-feature-context {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
}

/* ── Studio Panels ── */
[data-theme="light"] .studio-panel,
[data-theme="light"] .studio-step,
[data-theme="light"] .studio-result-card,
[data-theme="light"] .studio-preview-main,
[data-theme="light"] .studio-progress-card,
[data-theme="light"] .studio-editor-wrap {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #111827;
    backdrop-filter: blur(6px);
}

/* ── Studio Input / Prompt ── */
[data-theme="light"] .studio-input,
[data-theme="light"] .studio-prompt-textarea,
[data-theme="light"] .studio-panel-wrap textarea,
[data-theme="light"] .studio-panel-wrap input {
    background: #f7f9ff !important;
    color: #111827 !important;
    border-color: rgba(79, 105, 176, 0.18) !important;
}

/* ── Billing / Sales ── */
[data-theme="light"] .sales-hero,
[data-theme="light"] .sales-hero-panel,
[data-theme="light"] .billing-package,
[data-theme="light"] .billing-balance-card {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #111827;
    backdrop-filter: blur(6px);
}

/* ── Stats Cards ── */
[data-theme="light"] .stat-card {
    color: #111827;
}

[data-theme="light"] .stat-value {
    color: #111827;
}

[data-theme="light"] .stat-label {
    color: #6b7280;
}

/* ── Mobile Header ── */
[data-theme="light"] .app-mobile-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(79, 105, 176, 0.12) !important;
    backdrop-filter: blur(12px);
}

/* ══════════════════════════════════════════════════════════════
   NEON BORDERS: Replace rainbow with smooth gradient borders
   Softer indigo→teal gradient, thicker (2px), no glow/animation
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --neon-card-bg: rgba(255, 255, 255, 0.96);
    --neon-card-border: rgba(79, 105, 176, 0.14);
    --neon-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --neon-nav-bg: rgba(248, 249, 253, 0.95);
    --neon-nav-border: rgba(79, 105, 176, 0.14);
    --neon-input-bg: rgba(247, 249, 255, 0.95);
    --neon-result-bg: rgba(247, 249, 255, 0.92);
    --neon-result-border: rgba(79, 105, 176, 0.12);
    --neon-tab-bg: rgba(238, 242, 252, 0.90);
    --neon-media-bg: rgba(247, 249, 255, 0.95);
    --neon-accent: #5b3fd9;
    --neon-accent-soft: rgba(91, 63, 217, 0.08);

    /* Smooth pastel gradient for borders — not rainbow, not animated */
    --admin-rainbow-7: linear-gradient(
        135deg,
        rgba(91, 63, 217, 0.25) 0%,
        rgba(59, 130, 246, 0.20) 25%,
        rgba(6, 182, 212, 0.18) 50%,
        rgba(59, 130, 246, 0.20) 75%,
        rgba(91, 63, 217, 0.25) 100%
    );
    --admin-neon-pink-1: transparent;
    --admin-neon-pink-2: transparent;
    --admin-neon-pink-3: transparent;
}

/* Override ALL ::after neon pseudo-elements to be smooth gradient borders */
[data-theme="light"] .page-header::after,
[data-theme="light"] .card::after,
[data-theme="light"] .admin-section::after,
[data-theme="light"] .admin-filters-card::after,
[data-theme="light"] .admin-config-item::after,
[data-theme="light"] .admin-detail-field::after,
[data-theme="light"] .branding-preview-item::after,
[data-theme="light"] .admin-alert-item::after,
[data-theme="light"] .admin-activity-item::after,
[data-theme="light"] .admin-empty-state::after,
[data-theme="light"] .diag-result-box::after,
[data-theme="light"] .sidebar-user::after,
[data-theme="light"] .admin-detail-content::after,
[data-theme="light"] .quick-card::after,
[data-theme="light"] .template-card::after,
[data-theme="light"] .sales-hero::after,
[data-theme="light"] .sales-hero-panel::after,
[data-theme="light"] .billing-package::after,
[data-theme="light"] .billing-balance-card::after,
[data-theme="light"] .library-card::after,
[data-theme="light"] .studio-panel::after,
[data-theme="light"] .studio-step::after,
[data-theme="light"] .studio-result-card::after,
[data-theme="light"] .studio-preview-main::after,
[data-theme="light"] .studio-progress-card::after,
[data-theme="light"] .studio-editor-wrap::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px !important;
    background: var(--admin-rainbow-7) !important;
    background-size: 100% 100% !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    animation: none !important;
    z-index: 2;
}

/* Sidebar & feature sidebar borders */
[data-theme="light"] .app-sidebar::after,
[data-theme="light"] .sidebar::after,
[data-theme="light"] .admin-sidebar::after,
[data-theme="light"] .studio-feature-sidebar::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px !important;
    background: linear-gradient(
        180deg,
        rgba(91, 63, 217, 0.22) 0%,
        rgba(59, 130, 246, 0.15) 50%,
        rgba(6, 182, 212, 0.12) 100%
    ) !important;
    background-size: 100% 100% !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    animation: none !important;
    z-index: 2;
}

/* Active feature & KPI — keep clean */
[data-theme="light"] .studio-feature-item.active::after {
    content: none !important;
    display: none !important;
}

[data-theme="light"] .admin-kpi-card::before {
    content: none !important;
    display: none !important;
}

/* ── Modals / Overlays ── */
[data-theme="light"] .modal,
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(79, 105, 176, 0.14) !important;
}

/* ── Feed ── */
[data-theme="light"] .feed-post-card,
[data-theme="light"] .feed-comment-card,
[data-theme="light"] .feed-sidebar-card {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    color: #111827;
}

/* ── Settings ── */
[data-theme="light"] .settings-card,
[data-theme="light"] .referral-card,
[data-theme="light"] .user-card {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
    color: #111827;
}

/* ── Toast ── */
[data-theme="light"] .toast {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
}

/* ── Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f0f4ff;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c5cee0;
    border-radius: 10px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ── Body pseudo-elements: hide in light mode ── */
[data-theme="light"] body::before,
[data-theme="light"] body::after,
[data-theme="light"] .app-layout::after {
    display: none !important;
}

/* ── General text color overrides ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #111827;
}

[data-theme="light"] p {
    color: #374151;
}

[data-theme="light"] .empty-state-title {
    color: #111827;
}

[data-theme="light"] .empty-state-desc {
    color: #6b7280;
}

/* ── Admin Layout specific ── */
[data-theme="light"] .admin-detail-content {
    background: rgba(255, 255, 255, 0.90) !important;
    border-color: rgba(79, 105, 176, 0.12) !important;
}