/* 🌞 Light Mode (Default) */
:root {
    /* General Colors */
    --primary-color: #00b7ff;              /* Bright light blue from logo */
    --secondary-color: #00b7ff;           /* Matching bright light blue */
    --background-color: #f7f8fa;          /* Light gray background */
    --neutral-text-color: #1f2937;        /* Neutral dark text */

    /* Headers and Inputs */
    --header-text-color: #000000;         /* Header text color (bright light blue) */
    --input-border-color: #cbd5e1;        /* Input field border */
    --input-bg: #ffffff;                  /* Input field background */

    /* Cards and Shadows */
    --card-bg: #ffffff;                   /* Card background */
    --card-shadow-color: rgba(0, 0, 0, 0.1); /* Card shadow */
    --card-hover-shadow-color: rgba(0, 0, 0, 0.15); /* Card hover shadow */
    --card-header-text-color: #00b7ff;    /* Card header text color (bright light blue) */

    /* Tables */
    --table-header-bg: #00b7ff;           /* Table header background */
    --table-header-text: #ffffff;         /* Table header text */
    --table-border-color: #ddd;           /* Table border color */
    --table-row-bg-even: #f9f9f9;         /* Even row background */
    --table-row-bg-odd: #ffffff;          /* Odd row background */
    --table-row-hover-bg: #f1f1f1;        /* Hovered row background */

    /* Button Colors */
    --button-text-color: #ffffff;
    --button-bg-color: #00b7ff;
    --button-hover-bg-color: #0095d1;

    /* Login Page Colors */
    --login-bg-gradient: linear-gradient(135deg, #3498db, #2c3e50);
    --input-border-color: #ccc;
    --input-bg: #ffffff;
    --error-text-color: red;

    /* Sidebar Colors */
    --sidebar-bg: #fcfcfe;
    --sidebar-text-color: #1f2937;
    --sidebar-shadow-color: rgba(0, 0, 0, 0.1);
    --sidebar-title-color: #1f2024;
    --sidebar-link-color: #6b7280;
    --sidebar-link-hover-bg: #e5e7eb;
    --sidebar-link-hover-text: #00b7ff;
    --sidebar-link-active-bg: #d1d5db;
    --sidebar-icon-color: #6b7280;
    --sidebar-user-info-bg: #e5e7eb;
    --sidebar-user-text-color: #1f2024;
    --sidebar-button-bg: #ffffff;
    --sidebar-button-hover-bg: #cbd5e1;
    --sidebar-button-text-color: #6b7280;

    /* Toggle Switch Colors */
    --toggle-off-bg: #cbd5e1; /* Light gray for off state */
    --toggle-on-bg: #00b7ff;              /* Bright light blue for on state */
    --button-text-color: #ffffff; /* White for toggle knob */

    /* Danger Colors for Delete Button */
    --danger-bg-color: #dc3545; /* Red */
    --danger-hover-bg-color: #c82333; /* Darker Red */

    /* Dropdown Colors */
    --dropdown-bg: var(--card-bg);
    --dropdown-text: var(--neutral-text-color);
    --dropdown-hover-bg: #f5f5f5;  /* Light gray hover background */
    --dropdown-border: #e0e0e0;    /* Light border color */

    /* Add these if they don't exist */
    --background-light: #ffffff;
    --background-white: #ffffff;
    --background-secondary: #f8f9fa;
    --background-lighter: #fafbfc;
    --background-hover: #f5f5f5;
    --border-color: #e0e0e0;
    --text-primary: #000000;  /* Black for hover state */
    --text-muted: #666666;  /* A lighter gray for the text */
    /* Add RGB version of primary color for opacity */
    --primary-color-rgb: 0, 183, 255;

    /* Danger Colors */
    --danger-color: #dc3545;          /* Base red */
    --danger-dark: #bb2d3b;           /* Darker red for hover */
    --danger-light: #f8d7da;          /* Light red for backgrounds */
    --danger-text: #ffffff;           /* White text for danger buttons */

    /* Status Colors */
    --info-light: rgba(85, 169, 255, 0.1);
    --info-dark: #2186ff;
    --success-light: rgba(75, 210, 143, 0.1);
    --success-dark: #22c55e;
    --warning-light: rgba(255, 171, 64, 0.1);
    --warning-dark: #f59e0b;
    --neutral-light: rgba(148, 163, 184, 0.1);
    --neutral-dark: #64748b;

    /* Add these if they don't exist */
    --primary-color: #00b7ff;
    --primary-color-rgb: 0, 183, 255;
    --primary-color-dark: #0095d1;
    --text-secondary: #5f6368;
    --error-color: #d93025;
    
    /* Search-specific colors */
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --bg-hover: #f5f5f5;
    --border-light: #e9ecef;
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    /* Notification Colors */
    --notification-bg: #ffffff;
    --notification-border: #e0e0e0;
    --notification-text: #1f2937;
    --notification-info-bg: rgba(var(--primary-color-rgb), 0.1);
    --notification-info-border: var(--primary-color);
    --notification-success-bg: rgba(34, 197, 94, 0.1);
    --notification-success-border: #22c55e;
    --notification-error-bg: rgba(220, 53, 69, 0.1);
    --notification-error-border: #dc3545;
    --notification-shadow: rgba(0, 0, 0, 0.1);

    /* Success Colors */
    --success-bg-color: #d4edda;
    --success-text-color: #155724;
    --success-border-color: #c3e6cb;
    
    /* Error Colors */
    --error-bg-color: #f8d7da;
    --error-text-color: #721c24;
    --error-border-color: #f5c6cb;

    /* User Management Colors */
    --card-bg-color: #ffffff;
    --input-bg-color: #ffffff;
    --primary-blue: #00b7ff;
    --primary-blue-light: rgba(0, 183, 255, 0.2);
    --success-green: #22c55e;
    --success-green-dark: #16a34a;
    --success-green-light: rgba(34, 197, 94, 0.1);
    --warning-orange: #f59e0b;
    --warning-orange-dark: #d97706;
    --danger-red: #dc3545;
    --danger-red-dark: #bb2d3b;
    --danger-red-light: rgba(220, 53, 69, 0.1);
    --neutral-gray: #6b7280;

    /* Mobile-specific colors */
    --mobile-card-bg: #ffffff;
    --mobile-card-shadow: rgba(0, 0, 0, 0.08);
    --mobile-card-hover-shadow: rgba(0, 0, 0, 0.12);
    --mobile-touch-feedback: rgba(0, 183, 255, 0.1);
    --mobile-button-active: rgba(0, 183, 255, 0.2);
    --mobile-text-primary: #1f2937;
    --mobile-text-secondary: #6b7280;
    --mobile-text-muted: #9ca3af;
    --mobile-border-light: #e5e7eb;
    --mobile-border-medium: #d1d5db;
    --mobile-success-bg: rgba(34, 197, 94, 0.1);
    --mobile-error-bg: rgba(239, 68, 68, 0.1);
    --mobile-warning-bg: rgba(245, 158, 11, 0.1);
    --mobile-info-bg: rgba(59, 130, 246, 0.1);
}


/*  Dark Mode */
.dark-mode,
html.dark-mode body {
    /* General Colors */
    --primary-color: #90caf9;              /* Light blue */
    --secondary-color: #2196F3;            /* Bright blue */
    --background-color: #121212;           /* Dark gray background */
    --neutral-text-color: #e0e0e0;         /* Neutral light text */

    /* Headers and Inputs */
    --header-text-color: #90caf9;          /* Header text color (light blue) */
    --input-border-color: #444;            /* Darker input border */
    --input-bg: #1e1e1e;                   /* Input field background */

    /* Cards and Shadows */
    --card-bg: #1e1e1e;                    /* Card background */
    --card-shadow-color: rgba(0, 0, 0, 0.5); /* Card shadow */
    --card-hover-shadow-color: rgba(255, 255, 255, 0.1); /* Card hover shadow */
    --card-header-text-color: #90caf9;     /* Card header text color (light blue) */

    /* Tables */
    --table-header-bg: #1e1e1e;            /* Table header background */
    --table-header-text: #90caf9;          /* Table header text */
    --table-border-color: #333;            /* Table border color */
    --table-row-bg-even: #1a1a1a;          /* Even row background */
    --table-row-bg-odd: #242424;           /* Odd row background */
    --table-row-hover-bg: #2c2c2c;         /* Hovered row background */

    /* Button Colors */
    --button-text-color: #ffffff;
    --button-bg-color: #1e88e5;
    --button-hover-bg-color: #1565c0;

    /* Login Page Colors */
    --login-bg-gradient: linear-gradient(135deg, #1c2833, #34495e);
    --input-border-color: #555;
    --input-bg: #222;
    --error-text-color: #ff4d4d;

    /* Sidebar Colors */
    --sidebar-bg: #1e1e2f;
    --sidebar-text-color: #e0e0e0;
    --sidebar-shadow-color: rgba(255, 255, 255, 0.1);
    --sidebar-title-color: #ffffff;
    --sidebar-link-color: #a0aec0;
    --sidebar-link-hover-bg: #2d2d4f;
    --sidebar-link-hover-text: #90caf9;
    --sidebar-link-active-bg: #3b3b5f;
    --sidebar-icon-color: #a0aec0;
    --sidebar-user-info-bg: #2d2d4f;
    --sidebar-user-text-color: #ffffff;
    --sidebar-button-bg: #3b3b5f;
    --sidebar-button-hover-bg: #4a4a6f;
    --sidebar-button-text-color: #e0e0e0;

    /* Updated Background Colors for Dark Mode */
    --background-light: #1e1e1e;           /* Dark background for navbar and other light areas */
    --background-white: #1e1e1e;           /* Dark background for sidebar and other white areas */
    --background-secondary: #252525;       /* Dark secondary background */
    --background-lighter: #2a2a2a;         /* Dark lighter background */
    --background-hover: #2c2c2c;           /* Dark hover background */
    --border-color: #333;               /* Dark border color */
    --text-primary: #ffffff;               /* White text for primary elements */
    --text-muted: #a0aec0;                 /* Muted text for dark mode */
    --text-secondary: #b0b0b0;             /* Secondary text for dark mode */

    /* Toggle Switch Colors - Dark Mode */
    --toggle-off-bg: #4a5568; /* Dark gray for off state */
    --toggle-on-bg: #90caf9;  /* Light blue for on state */
    --button-text-color: #ffffff; /* White for toggle knob */

    /* Dropdown Colors - Dark Mode */
    
    /* Search-specific colors - Dark Mode */
    --bg-primary: #1e1e1e;
    --bg-secondary: #252525;
    --bg-hover: #2c2c2c;
    --border-light: #333;
    --success-color: #81c784;
    --warning-color: #ffb74d;
    --info-color: #90caf9;
    --dropdown-bg: var(--card-bg);
    --dropdown-text: var(--neutral-text-color);
    --dropdown-hover-bg: #2c2c2c;  /* Dark gray hover background */
    --dropdown-border: #333;    /* Dark border color */

    /* Danger Colors - Dark Mode */
    --danger-color: #e53e3e;          /* Brighter red for dark mode */
    --danger-dark: #fc8181;           /* Darker red for hover in dark mode */
    --danger-light: #3d1a1a;          /* Dark red background for dark mode */
    --danger-text: #ffffff;           /* White text for danger buttons */

    /* Modern Sidebar Colors - Dark Mode */
    --sidebar-bg: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-active-bg: rgba(255, 255, 255, 0.1);
    --sidebar-text: #ffffff;
    --sidebar-muted: #a0a0a0;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-icon: #a0a0a0;
    --sidebar-selected: #ffffff;
    --sidebar-selected-bg: #2c2c2c;
    --sidebar-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);

    /* Notification Colors - Dark Mode */
    --notification-bg: #1e1e1e;
    --notification-border: #333;
    --notification-text: #e0e0e0;
    --notification-info-bg: rgba(144, 202, 249, 0.2);
    --notification-info-border: #90caf9;
    --notification-success-bg: rgba(129, 199, 132, 0.2);
    --notification-success-border: #81c784;
    --notification-error-bg: rgba(229, 62, 62, 0.2);
    --notification-error-border: #e53e3e;
    --notification-shadow: rgba(255, 255, 255, 0.1);

    /* Success Colors */
    --success-bg-color: #2d4a2d;
    --success-text-color: #c6f6d5;
    --success-border-color: #38a169;
    
    /* Error Colors */
    --error-bg-color: #4a2d2d;
    --error-text-color: #fed7d7;
    --error-border-color: #e53e3e;

    /* User Management Colors - Dark Mode */
    --card-bg-color: #1e1e1e;
    --input-bg-color: #2a2a2a;
    --primary-blue: #90caf9;
    --primary-blue-light: rgba(144, 202, 249, 0.3);
    --success-green: #81c784;
    --success-green-dark: #66bb6a;
    --success-green-light: rgba(129, 199, 132, 0.2);
    --warning-orange: #ffb74d;
    --warning-orange-dark: #ffa726;
    --danger-red: #e53e3e;
    --danger-red-dark: #fc8181;
    --danger-red-light: rgba(229, 62, 62, 0.2);
    --neutral-gray: #a0aec0;

    /* Mobile-specific dark mode colors */
    --mobile-card-bg: #1e1e1e;
    --mobile-card-shadow: rgba(0, 0, 0, 0.8);
    --mobile-card-hover-shadow: rgba(255, 255, 255, 0.1);
    --mobile-touch-feedback: rgba(144, 202, 249, 0.2);
    --mobile-button-active: rgba(144, 202, 249, 0.3);
    --mobile-text-primary: #e0e0e0;
    --mobile-text-secondary: #a0aec0;
    --mobile-text-muted: #6b7280;
    --mobile-border-light: #333;
    --mobile-border-medium: #444;
    --mobile-success-bg: rgba(129, 199, 132, 0.2);
    --mobile-error-bg: rgba(229, 62, 62, 0.2);
    --mobile-warning-bg: rgba(255, 183, 77, 0.2);
    --mobile-info-bg: rgba(144, 202, 249, 0.2);
}