/**
 * CENTRALIZED THEME SYSTEM FOR 3 ELEMENTS CRM
 *
 * This file is the single source of truth for all color theming across the entire application.
 * All 29 HTML pages link to this file instead of duplicating CSS variables.
 *
 * Theme customization is managed through settings.html, which can override these variables
 * by injecting custom values into localStorage that are applied by theme-manager.js
 *
 * DO NOT EDIT COLORS IN INDIVIDUAL HTML FILES - Edit them here or via settings.html
 */

/* ========================================
   LIGHT MODE (Default Theme)
   Green Nature Theme - Refined for better contrast
   ======================================== */
:root {
    /* Background gradients - Light green nature theme */
    --bg-gradient-1: #e8f5e0;              /* Lightest green */
    --bg-gradient-2: #f0f9ed;              /* Very light green */
    --bg-gradient-3: #e8f5e0;              /* Light green (repeated for compatibility) */
    --bg-gradient-4: #f0f9ed;              /* Very light green (repeated) */
    --bg-gradient-5: #f0f9ed;              /* Very light green (repeated) */
    --mist-color: rgba(255, 255, 255, 0.4); /* Overlay mist effect */

    /* Container and card backgrounds */
    --container-bg: rgba(255, 255, 255, 0.95);  /* White nav with slight transparency */
    --container-shadow: rgba(57, 84, 44, 0.15);  /* Green-tinted shadow */
    --section-bg: #f0f9ed;                      /* Light green section background */
    --card-bg: #f5f5f5;                         /* Light gray cards (NOT white - better contrast) */
    --body-bg: linear-gradient(135deg, #e8f5e0 0%, #f0f9ed 100%); /* Green gradient body */
    --white: #f5f5f5;                           /* Light gray for elements (matches cards) */

    /* Typography colors - Dark greens for readability */
    --heading-color: #293325;              /* Very dark green - Main headings */
    --text-color: #39542C;                 /* Dark olive green - Body text */
    --label-color: #39542C;                /* Dark olive green - Form labels */
    --input-text: #293325;                 /* Very dark green - Input text */
    --body-text: #293325;                  /* Very dark green - Body text */

    /* Form input styling */
    --input-bg: #ffffff;                   /* White input backgrounds */
    --input-border: #9dcc7a;               /* Light green borders */

    /* Accent and action colors - Medium to dark greens */
    --accent-color: #48872B;               /* Medium green - Primary accent */
    --accent-hover: #39542C;               /* Dark green - Hover state */
    --primary-btn: #48872B;                /* Medium green - Primary buttons */
    --primary-btn-hover: #39542C;          /* Dark green - Button hover */
    --success-color: #4CBB17;              /* Kelly green - Success states */
    --error-color: #cc4b17;                /* Red-brown - Error states */

    /* Theme toggle button */
    --theme-toggle-bg: #48872B;            /* Medium green - Theme toggle */
    --theme-toggle-border: #39542C;        /* Dark green - Theme toggle border */

    /* Navigation styling */
    --nav-text: #293325;                   /* Very dark green - Nav text */
    --nav-hover-bg: rgba(72, 135, 43, 0.1);     /* Light green tint - Nav hover */
    --nav-active-bg: rgba(72, 135, 43, 0.2);    /* Green tint - Nav active */
    --nav-gradient-1: #667eea;             /* Purple - Nav gradient (legacy support) */
    --nav-gradient-2: #764ba2;             /* Darker purple - Nav gradient (legacy) */
    --nav-btn-bg: #48872B;                 /* Medium green - Nav button */
    --nav-btn-border: #48872B;             /* Medium green - Nav button border */
    --nav-btn-hover-bg: #39542C;           /* Dark green - Nav button hover */
    --nav-btn-hover-border: #39542C;       /* Dark green - Nav button hover border */
    --nav-tab-text: #39542C;               /* Dark olive green - Tab text */
    --nav-tab-hover-bg: rgba(72, 135, 43, 0.1);  /* Light green - Tab hover */
    --nav-tab-active-bg: rgba(72, 135, 43, 0.15); /* Green - Tab active */

    /* Dropdown menus */
    --dropdown-bg: rgba(255, 255, 255, 0.98);   /* White - Dropdown */
    --dropdown-text: #293325;              /* Very dark green - Dropdown text */
    --dropdown-hover: rgba(72, 135, 43, 0.1);   /* Light green - Dropdown hover */

    /* Footer styling */
    --footer-border: #9dcc7a;              /* Light green - Footer border */
    --footer-text: #39542C;                /* Dark olive green - Footer text */

    /* Alert and notification colors */
    --warning-bg: rgba(232, 163, 23, 0.15);     /* Light orange - Warning background */
    --warning-border: #e8a317;             /* Orange - Warning border */
    --warning-text: #8d6214;               /* Dark orange - Warning text */
    --info-bg: rgba(76, 187, 23, 0.1);     /* Light green - Info background */
    --info-border: #4CBB17;                /* Kelly green - Info border */
    --toast-bg: white;                     /* White - Toast notification background */

    /* Calendar-specific (for scheduler pages) */
    --calendar-bg: #f5f5f5;                /* Light gray - Calendar background (matches cards) */
    --calendar-border: #9dcc7a;            /* Light green - Calendar borders */
    --calendar-header-bg: #f0f9ed;         /* Very light green - Calendar header */
    --calendar-day-text: #39542C;          /* Dark olive green - Day text */
    --calendar-weekend-bg: #e8f5e0;        /* Light green - Weekend cells */

    /* Modal and overlay */
    --modal-overlay: rgba(41, 51, 37, 0.7);   /* Dark green-tinted overlay */
    --modal-bg: #ffffff;                   /* White modal background */

    /* Table styling */
    --table-header-bg: #f0f9ed;            /* Light green - Table headers */
    --table-border: #9dcc7a;               /* Light green - Table borders */
    --table-hover: rgba(72, 135, 43, 0.05); /* Very light green - Table row hover */

    /* Badge and status colors */
    --badge-bg: #e8f5e0;                   /* Light green - Badge background */
    --badge-text: #39542C;                 /* Dark olive green - Badge text */
    --status-active: #4CBB17;              /* Kelly green - Active status */
    --status-inactive: #39542C;            /* Dark olive green - Inactive status */
    --status-pending: #e8a317;             /* Orange - Pending status */
}

/* ========================================
   DARK MODE
   Warm Brown/Orange Theme - Refined for better contrast
   ======================================== */
body.dark-mode {
    /* Background gradients - Warm brown tones */
    --bg-gradient-1: #5a4020;              /* Darkest - Rich brown */
    --bg-gradient-2: #4a3518;              /* Dark - Deep brown */
    --bg-gradient-3: #5a4020;              /* Rich brown (repeated for compatibility) */
    --bg-gradient-4: #4a3518;              /* Deep brown (repeated) */
    --bg-gradient-5: #4a3518;              /* Deep brown (repeated) */
    --mist-color: rgba(0, 0, 0, 0.3);      /* Dark mist overlay */

    /* Container and card backgrounds */
    --container-bg: rgba(200, 130, 70, 0.93);   /* Lighter warm brown nav - stands out */
    --container-shadow: rgba(0, 0, 0, 0.6);     /* Deep shadow for depth */
    --section-bg: rgba(110, 75, 50, 0.9);       /* Medium-dark sections */
    --card-bg: #6b5d4f;                         /* Lighter, less saturated brown cards (NOT white!) */
    --body-bg: linear-gradient(135deg, #5a4020 0%, #4a3518 100%); /* Warm brown gradient body */
    --white: #6b5d4f;                           /* Match card background (no white in dark mode) */

    /* Typography colors - Cream and light warm tones */
    --heading-color: #FDFBD4;              /* Light cream - Main headings */
    --text-color: #f5f3d0;                 /* Cream - Body text */
    --label-color: #FDFBD4;                /* Light cream - Form labels */
    --input-text: #FDFBD4;                 /* Light cream - Input text */
    --body-text: #FDFBD4;                  /* Light cream - Body text */

    /* Form input styling */
    --input-bg: rgba(130, 94, 52, 0.6);    /* Medium brown - Input backgrounds */
    --input-border: #a06428;               /* Orange-brown - Input borders */

    /* Accent and action colors - Orange theme */
    --accent-color: #D47E30;               /* Orange - Primary accent */
    --accent-hover: #e08a45;               /* Brighter orange - Hover state */
    --primary-btn: #D47E30;                /* Orange - Primary buttons */
    --primary-btn-hover: #e08a45;          /* Brighter orange - Button hover */
    --success-color: #D47E30;              /* Orange - Success states */
    --error-color: #ff6b45;                /* Bright orange-red - Error states */

    /* Theme toggle button */
    --theme-toggle-bg: #D47E30;            /* Orange - Theme toggle */
    --theme-toggle-border: #e08a45;        /* Bright orange - Theme toggle border */

    /* Navigation styling - IMPORTANT: Dark browns for contrast against warm nav */
    --nav-text: #FDFBD4;                   /* Light cream - Nav text */
    --nav-hover-bg: rgba(90, 64, 32, 0.6); /* Dark brown - Nav hover (not orange!) */
    --nav-active-bg: rgba(74, 53, 24, 0.8); /* Darker brown - Nav active (not orange!) */
    --nav-gradient-1: #2a2520;             /* Dark brown - Nav gradient (legacy) */
    --nav-gradient-2: #3e2723;             /* Darker brown - Nav gradient (legacy) */
    --nav-btn-bg: #D47E30;                 /* Orange - Nav button */
    --nav-btn-border: #D47E30;             /* Orange - Nav button border */
    --nav-btn-hover-bg: #e08a45;           /* Bright orange - Nav button hover */
    --nav-btn-hover-border: #e08a45;       /* Bright orange - Nav button hover border */
    --nav-tab-text: #FDFBD4;               /* Light cream - Tab text */
    --nav-tab-hover-bg: rgba(90, 64, 32, 0.6);  /* Dark brown - Tab hover */
    --nav-tab-active-bg: rgba(74, 53, 24, 0.8); /* Darker brown - Tab active */

    /* Dropdown menus */
    --dropdown-bg: rgba(141, 90, 43, 0.98);     /* Medium brown - Dropdown */
    --dropdown-text: #FDFBD4;              /* Light cream - Dropdown text */
    --dropdown-hover: rgba(212, 126, 48, 0.2);  /* Orange - Dropdown hover */

    /* Footer styling */
    --footer-border: #a06428;              /* Orange-brown - Footer border */
    --footer-text: #f5f3d0;                /* Cream - Footer text */

    /* Alert and notification colors */
    --warning-bg: rgba(224, 138, 69, 0.2);      /* Light orange - Warning background */
    --warning-border: #e08a45;             /* Bright orange - Warning border */
    --warning-text: #FDFBD4;               /* Light cream - Warning text */
    --info-bg: rgba(212, 126, 48, 0.15);   /* Light orange - Info background */
    --info-border: #D47E30;                /* Orange - Info border */
    --toast-bg: #8D5A2B;                   /* Medium brown - Toast background */

    /* Calendar-specific */
    --calendar-bg: #6b5d4f;                /* Match card background - lighter brown */
    --calendar-border: #a06428;            /* Orange-brown - Calendar borders */
    --calendar-header-bg: rgba(122, 81, 40, 0.8); /* Medium brown - Calendar header */
    --calendar-day-text: #f5f3d0;          /* Cream - Day text */
    --calendar-weekend-bg: rgba(110, 75, 50, 0.5); /* Medium brown - Weekend cells */

    /* Modal and overlay */
    --modal-overlay: rgba(0, 0, 0, 0.8);   /* Dark overlay */
    --modal-bg: #8D5A2B;                   /* Medium brown - Modal background */

    /* Table styling */
    --table-header-bg: rgba(122, 81, 40, 0.8);  /* Medium brown - Table headers */
    --table-border: #a06428;               /* Orange-brown - Table borders */
    --table-hover: rgba(212, 126, 48, 0.1); /* Light orange - Table row hover */

    /* Badge and status colors */
    --badge-bg: rgba(212, 126, 48, 0.2);   /* Translucent orange - Badge */
    --badge-text: #FDFBD4;                 /* Light cream - Badge text */
    --status-active: #D47E30;              /* Orange - Active status */
    --status-inactive: #a06428;            /* Orange-brown - Inactive status */
    --status-pending: #e08a45;             /* Bright orange - Pending status */
}

/* ========================================
   THEME TOGGLE BUTTON
   Fixed position toggle for all pages
   ======================================== */
.theme-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--theme-toggle-bg);
    border: 2px solid var(--theme-toggle-border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--container-shadow);
    z-index: 1001;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--container-shadow);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Mobile adjustments for theme toggle */
@media (max-width: 768px) {
    .theme-toggle {
        top: 70px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* ========================================
   SMOOTH TRANSITIONS
   All theme-related properties transition smoothly
   ======================================== */
* {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Prevent transitions on page load */
body.preload * {
    transition: none !important;
}

/* ========================================
   ACCESSIBILITY
   High contrast mode support
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --container-shadow: rgba(0, 0, 0, 0.3);
        --input-border: #000000;
        --accent-color: #2d5016;
    }

    body.dark-mode {
        --container-shadow: rgba(0, 0, 0, 0.8);
        --input-border: #ffffff;
        --text-color: #ffffff;
    }
}

/* ========================================
   PRINT STYLES
   Light theme forced for printing
   ======================================== */
@media print {
    body.dark-mode {
        /* Override dark mode for printing - use light theme */
        --bg-gradient-1: #4a5568;
        --bg-gradient-5: #d4dde8;
        --container-bg: rgba(245, 240, 230, 0.95);
        --heading-color: #3e2723;
        --text-color: #5d4037;
        --body-bg: #ffffff;
    }

    .theme-toggle {
        display: none !important;
    }
}