/* Theme Variables - Light/Dark Mode Support */
/* Uses Bootstrap 5.3's data-bs-theme attribute */

:root, [data-bs-theme="light"] {
    /* ============================================
       BRANDING - TYPOGRAPHY (customizable via admin)
       ============================================ */
    --branding-font-heading: 'Montserrat', sans-serif;
    --branding-font-body: 'Poppins', sans-serif;

    /* ============================================
       BRANDING - PRIMARY COLORS (customizable via admin)
       Default: MiCamp Red #BE2031, Yellow #FFD720
       ============================================ */
    --branding-primary: #BE2031;
    --branding-secondary: #FFD720;
    --branding-neutral: #1B1B1B;

    /* ============================================
       BOOTSTRAP COLOR OVERRIDES
       Maps Bootstrap's color classes to our branding
       - primary → branding red
       - danger → black (since red is primary)
       - info → branding yellow/secondary
       - warning → lighter black/gray
       ============================================ */
    --bs-primary: #BE2031;
    --bs-primary-rgb: 190, 32, 49;
    --bs-danger: #1B1B1B;
    --bs-danger-rgb: 27, 27, 27;
    --bs-info: #FFD720;
    --bs-info-rgb: 255, 215, 32;
    --bs-warning: #4B4B4B;
    --bs-warning-rgb: 75, 75, 75;

    /* Button-specific overrides for better contrast */
    --bs-btn-color: #ffffff;
    --bs-link-color: #BE2031;
    --bs-link-hover-color: #8B1623;

    /* ============================================
       BRANDING - BANNER GRADIENT (customizable via admin)
       ============================================ */
    --branding-banner-gradient: linear-gradient(135deg, #BE2031 0%, #8B1623 100%);
    --branding-banner-gradient-hover: linear-gradient(135deg, #A51B2B 0%, #7A131F 100%);

    /* ============================================
       BRANDING - PORTAL GRADIENTS (customizable via admin)
       ============================================ */
    --branding-portal-agent: linear-gradient(180deg, #BE2031 0%, #8B1623 100%);
    --branding-portal-agent-shadow: rgba(190, 32, 49, 0.25);
    --branding-portal-underwriting: linear-gradient(180deg, #f093fb 0%, #f5576c 100%);
    --branding-portal-underwriting-shadow: rgba(240, 147, 251, 0.25);
    --branding-portal-merchant: linear-gradient(180deg, #11998e 0%, #38ef7d 100%);
    --branding-portal-merchant-shadow: rgba(17, 153, 142, 0.25);
    --branding-portal-finance: linear-gradient(180deg, #1b3c59 0%, #4f6fa5 100%);
    --branding-portal-finance-shadow: rgba(27, 60, 89, 0.25);

    /* ============================================
       BRANDING - SIDEBAR (customizable via admin)
       ============================================ */
    --branding-sidebar-bg: #1B1B1B;
    --branding-sidebar-text: #ffffff;
    --branding-sidebar-active-color: #BE2031;
    --branding-sidebar-active: linear-gradient(180deg, #BE2031 0%, #8B1623 100%);
    --branding-sidebar-active-shadow: rgba(190, 32, 49, 0.25);

    /* ============================================
       BRANDING - TOP BAR (customizable via admin)
       ============================================ */
    --branding-topbar-bg: #ffffff;
    --branding-topbar-text: #1f2937;
    --branding-topbar-active: #BE2031;

    /* ============================================
       PRIMARY BRAND COLORS (legacy - for backward compatibility)
       ============================================ */
    --theme-primary: #BE2031;
    --theme-primary-dark: #8B1623;
    --theme-primary-light: #E84855;
    --theme-primary-gradient: linear-gradient(180deg, #BE2031 0%, #8B1623 100%);
    --theme-primary-gradient-hover: linear-gradient(180deg, #A51B2B 0%, #7A131F 100%);

    /* Default active sidebar gradient (uses branding) */
    --theme-sidebar-active: var(--branding-sidebar-active);
    --theme-sidebar-active-shadow: var(--branding-sidebar-active-shadow);

    /* ============================================
       TEXT COLORS
       ============================================ */
    --theme-text-primary: #1f2937;
    --theme-text-secondary: #6b7280;
    --theme-text-muted: #9ca3af;
    --theme-text-inverse: #ffffff;
    --theme-text-link: #667eea;
    --theme-text-link-hover: #5b73e0;

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --theme-bg-body: #f8f9fa;
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f9fafb;
    --theme-bg-tertiary: #f3f4f6;
    --theme-bg-sidebar: rgba(0, 0, 0, 0.05);
    --theme-bg-hover: rgba(0, 0, 0, 0.06);
    --theme-bg-card: #ffffff;
    --theme-bg-input: #ffffff;
    --theme-bg-dropdown: #ffffff;
    --theme-bg-modal: #ffffff;
    --theme-bg-table-header: #f8f9fa;
    --theme-bg-table-hover: #f8f9fa;
    --theme-bg-table-stripe: #f9fafb;

    /* ============================================
       BORDER COLORS
       ============================================ */
    --theme-border-color: #dee2e6;
    --theme-border-light: #e5e7eb;
    --theme-border-dark: #ced4da;
    --theme-border-input: #ced4da;
    --theme-border-input-focus: #667eea;

    /* ============================================
       STATUS COLORS
       ============================================ */
    --theme-success: #198754;
    --theme-success-bg: #d1e7dd;
    --theme-success-text: #0f5132;
    --theme-warning: #ffc107;
    --theme-warning-bg: #fff3cd;
    --theme-warning-text: #664d03;
    --theme-danger: #dc3545;
    --theme-danger-bg: #f8d7da;
    --theme-danger-text: #842029;
    --theme-info: #0dcaf0;
    --theme-info-bg: #cff4fc;
    --theme-info-text: #055160;

    /* ============================================
       SHADOWS
       ============================================ */
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --theme-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --theme-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.08);
    --theme-shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.12);
    --theme-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ============================================
       PORTAL-SPECIFIC GRADIENTS (uses branding variables)
       ============================================ */
    --theme-portal-agent: var(--branding-portal-agent);
    --theme-portal-agent-shadow: var(--branding-portal-agent-shadow);
    --theme-portal-underwriting: var(--branding-portal-underwriting);
    --theme-portal-underwriting-shadow: var(--branding-portal-underwriting-shadow);
    --theme-portal-merchant: var(--branding-portal-merchant);
    --theme-portal-merchant-shadow: var(--branding-portal-merchant-shadow);
    --theme-portal-finance: var(--branding-portal-finance);
    --theme-portal-finance-shadow: var(--branding-portal-finance-shadow);

    /* ============================================
       SCROLLBAR COLORS
       ============================================ */
    --theme-scrollbar-track: transparent;
    --theme-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --theme-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);

    /* ============================================
       MISC
       ============================================ */
    --theme-overlay: rgba(0, 0, 0, 0.5);
    --theme-disabled-opacity: 0.65;
    --theme-loading-bg: rgba(255, 255, 255, 0.8);
}

/* ================================================
   DARK THEME
   ================================================ */
[data-bs-theme="dark"] {
    /* ============================================
       BRANDING - DARK MODE OVERRIDES (customizable via admin)
       ============================================ */
    --branding-primary: #E84855;
    --branding-secondary: #FFE066;
    --branding-neutral: #f3f4f6;
    --branding-banner-gradient: linear-gradient(135deg, #E84855 0%, #B31B2C 100%);
    --branding-banner-gradient-hover: linear-gradient(135deg, #F05A66 0%, #C42233 100%);
    --branding-sidebar-bg: #111111;
    --branding-sidebar-text: #f3f4f6;
    --branding-sidebar-active-color: #E84855;
    --branding-sidebar-active: linear-gradient(180deg, #E84855 0%, #B31B2C 100%);
    --branding-sidebar-active-shadow: rgba(232, 72, 85, 0.3);

    /* Top Bar - Dark Mode */
    --branding-topbar-bg: #1f2937;
    --branding-topbar-text: #f3f4f6;
    --branding-topbar-active: #E84855;

    /* ============================================
       BOOTSTRAP COLOR OVERRIDES (DARK MODE)
       ============================================ */
    --bs-primary: #E84855;
    --bs-primary-rgb: 232, 72, 85;
    --bs-danger: #f3f4f6;
    --bs-danger-rgb: 243, 244, 246;
    --bs-info: #FFE066;
    --bs-info-rgb: 255, 224, 102;
    --bs-warning: #9ca3af;
    --bs-warning-rgb: 156, 163, 175;
    --bs-link-color: #E84855;
    --bs-link-hover-color: #F05A66;

    /* ============================================
       PRIMARY BRAND COLORS (adjusted for dark)
       ============================================ */
    --theme-primary: #E84855;
    --theme-primary-dark: #B31B2C;
    --theme-primary-light: #F05A66;
    --theme-primary-gradient: linear-gradient(180deg, #E84855 0%, #B31B2C 100%);
    --theme-primary-gradient-hover: linear-gradient(180deg, #F05A66 0%, #C42233 100%);

    /* Default active sidebar gradient (uses branding) */
    --theme-sidebar-active: var(--branding-sidebar-active);
    --theme-sidebar-active-shadow: var(--branding-sidebar-active-shadow);

    /* ============================================
       TEXT COLORS
       ============================================ */
    --theme-text-primary: #f3f4f6;
    --theme-text-secondary: #d1d5db;
    --theme-text-muted: #9ca3af;
    --theme-text-inverse: #1f2937;
    --theme-text-link: #818cf8;
    --theme-text-link-hover: #a5b4fc;

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --theme-bg-body: #111827;
    --theme-bg-primary: #1f2937;
    --theme-bg-secondary: #111827;
    --theme-bg-tertiary: #374151;
    --theme-bg-sidebar: rgba(255, 255, 255, 0.05);
    --theme-bg-hover: rgba(255, 255, 255, 0.08);
    --theme-bg-card: #1f2937;
    --theme-bg-input: #374151;
    --theme-bg-dropdown: #1f2937;
    --theme-bg-modal: #1f2937;
    --theme-bg-table-header: #374151;
    --theme-bg-table-hover: #374151;
    --theme-bg-table-stripe: #293548;

    /* ============================================
       BORDER COLORS
       ============================================ */
    --theme-border-color: #374151;
    --theme-border-light: #4b5563;
    --theme-border-dark: #6b7280;
    --theme-border-input: #4b5563;
    --theme-border-input-focus: #818cf8;

    /* ============================================
       STATUS COLORS (brighter for dark backgrounds)
       ============================================ */
    --theme-success: #34d399;
    --theme-success-bg: #064e3b;
    --theme-success-text: #6ee7b7;
    --theme-warning: #fbbf24;
    --theme-warning-bg: #78350f;
    --theme-warning-text: #fcd34d;
    --theme-danger: #f87171;
    --theme-danger-bg: #7f1d1d;
    --theme-danger-text: #fca5a5;
    --theme-info: #60a5fa;
    --theme-info-bg: #1e3a5f;
    --theme-info-text: #93c5fd;

    /* ============================================
       SHADOWS (more prominent in dark mode)
       ============================================ */
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --theme-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --theme-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3);
    --theme-shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    --theme-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* ============================================
       BRANDING - PORTAL GRADIENTS FOR DARK MODE
       ============================================ */
    --branding-portal-agent: linear-gradient(180deg, #E84855 0%, #B31B2C 100%);
    --branding-portal-agent-shadow: rgba(232, 72, 85, 0.3);
    --branding-portal-underwriting: linear-gradient(180deg, #f9a8d4 0%, #fb7185 100%);
    --branding-portal-underwriting-shadow: rgba(249, 168, 212, 0.3);
    --branding-portal-merchant: linear-gradient(180deg, #2dd4bf 0%, #4ade80 100%);
    --branding-portal-merchant-shadow: rgba(45, 212, 191, 0.3);
    --branding-portal-finance: linear-gradient(180deg, #60a5fa 0%, #818cf8 100%);
    --branding-portal-finance-shadow: rgba(96, 165, 250, 0.3);

    /* ============================================
       PORTAL-SPECIFIC GRADIENTS (uses branding - dark mode)
       ============================================ */
    --theme-portal-agent: var(--branding-portal-agent);
    --theme-portal-agent-shadow: var(--branding-portal-agent-shadow);
    --theme-portal-underwriting: var(--branding-portal-underwriting);
    --theme-portal-underwriting-shadow: var(--branding-portal-underwriting-shadow);
    --theme-portal-merchant: var(--branding-portal-merchant);
    --theme-portal-merchant-shadow: var(--branding-portal-merchant-shadow);
    --theme-portal-finance: var(--branding-portal-finance);
    --theme-portal-finance-shadow: var(--branding-portal-finance-shadow);

    /* ============================================
       SCROLLBAR COLORS
       ============================================ */
    --theme-scrollbar-track: transparent;
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

    /* ============================================
       MISC
       ============================================ */
    --theme-overlay: rgba(0, 0, 0, 0.7);
    --theme-disabled-opacity: 0.5;
    --theme-loading-bg: rgba(31, 41, 55, 0.8);
}