/* Path: public/css/styles.css */
    /* Do not delete this comment */
    
    /* Light Theme Variables */
    :root[data-theme="light"] {
        /* Main brand colors */
        --primary-purple: #6852ed;
        --primary-purple-dark: #5a46d8;
        --primary-green: #52ed68;
        --primary-green-dark: #40c954;
        
        /* Background colors */
        --bg-gradient-start: #f3f1fe;
        --bg-gradient-end: #e8fcea;
        --bg-white: #ffffff;
        --bg-light: #f8f9fa;
        --bg-sidebar: #ffffff;
        
        /* Text colors */
        --text-dark: #000000;
        --text-secondary: #6c757d;
        --active-menu-text: #000000;
        
        /* Border colors */
        --border-light: #e9ecef;
        
        /* Shadow colors */
        --shadow-purple: rgba(104, 82, 237, 0.15);
        --shadow-purple-light: rgba(104, 82, 237, 0.05);
        --shadow-green: rgba(82, 237, 104, 0.2);
    }
    
    /* Dark Theme Variables */
    :root[data-theme="dark"] {
        /* Main brand colors - keeping brand colors similar */
        --primary-purple: #6852ed;
        --primary-purple-dark: #5a46d8;
        --primary-green: #52ed68;
        --primary-green-dark: #40c954;
        
        /* Background colors */
        --bg-gradient-start: #1a1a1a;
        --bg-gradient-end: #2d2d2d;
        --bg-white: #2d2d2d;
        --bg-light: #1a1a1a;
        --bg-sidebar: #2d2d2d;
        
        /* Text colors */
        --text-dark: #ffffff;
        --text-secondary: #a0a0a0;
        --active-menu-text: #2d2d2d;
        
        /* Border colors */
        --border-light: #404040;
        
        /* Shadow colors */
        --shadow-purple: rgba(104, 82, 237, 0.3);
        --shadow-purple-light: rgba(0, 0, 0, 0.2);
        --shadow-green: rgba(82, 237, 104, 0.3);
    }
    
    /* Theme Switcher Styles */
    .theme-toggle-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
    }
    
    .theme-toggle-button:hover {
        background-color: var(--bg-light);
    }
    
    .theme-toggle-icon {
        font-size: 1.5rem;
        color: var(--text-secondary);
        transition: all 0.3s ease;
    }
    
    .theme-toggle-button:hover .theme-toggle-icon {
        color: var(--primary-purple);
    }
    
    /* Global Styles */
    body {
        color: var(--text-dark);
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Login Page Styles */
    .login-page {
        background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%) !important;
    }
    
    .login-box {
        margin-top: -50px !important;
    }
    
    .btn-primary {
        background-color: var(--primary-purple) !important;
        border-color: var(--primary-purple) !important;
        box-shadow: 0 2px 4px var(--shadow-purple) !important;
        transition: all 0.3s ease !important;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-purple-dark) !important;
        border-color: var(--primary-purple-dark) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px var(--shadow-purple) !important;
    }
    
    .login-card {
        border: none !important;
        box-shadow: 0 0 30px var(--shadow-purple-light) !important;
        border-radius: 15px !important;
    }
    
    .login-input {
        border-radius: 8px !important;
        border: 2px solid var(--border-light) !important;
        padding: 12px !important;
        transition: all 0.3s ease !important;
    }
    
    .login-input:focus {
        border-color: var(--primary-purple) !important;
        box-shadow: none !important;
    }
    
    .login-box-msg {
        color: var(--text-dark) !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
    }
    
    /* Dark Theme Styles for Login Page */
    :root[data-theme="dark"] .login-page {
        background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%) !important;
    }
    
    :root[data-theme="dark"] .login-box {
        background-color: var(--bg-white) !important;
        box-shadow: 0 0 30px var(--shadow-purple-light) !important;
    }
    
    :root[data-theme="dark"] .login-card-body {
        background-color: var(--bg-light) !important;
        color: var(--text-dark) !important;
    }
    
    :root[data-theme="dark"] .btn-primary {
        background-color: var(--primary-purple) !important;
        border-color: var(--primary-purple) !important;
        box-shadow: 0 2px 4px var(--shadow-purple) !important;
    }
    
    :root[data-theme="dark"] .btn-primary:hover {
        background-color: var(--primary-purple-dark) !important;
        border-color: var(--primary-purple-dark) !important;
    }
    
    :root[data-theme="dark"] .login-input {
        background-color: var(--bg-white) !important;
        border-color: var(--border-light) !important;
        color: var(--text-dark) !important;
    }
    
    :root[data-theme="dark"] .login-input:focus {
        border-color: var(--primary-purple) !important;
    }
    
    /* Additional Styles for Other Modules */
    .main-sidebar {
        background-color: var(--bg-sidebar) !important;
        box-shadow: 0 0 20px var(--shadow-purple-light) !important;
    }
    
    .main-sidebar .sidebar {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    .nav-sidebar {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    :root[data-theme="light"] .main-sidebar {
        background-color: #edfff2 !important;
    }
    
    .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
        background: linear-gradient(45deg, var(--primary-green), var(--primary-green-dark)) !important;
        color: var(--active-menu-text) !important;
        box-shadow: 0 2px 4px var(--shadow-green) !important;
        border-radius: 8px !important;
        margin: 0 8px !important;
    }
    
    .nav-sidebar > .nav-item:hover > .nav-link {
        background-color: var(--bg-gradient-start) !important;
        color: var(--primary-purple) !important;
        border-radius: 8px !important;
        margin: 0 8px !important;
    }
    
    :root[data-theme="light"] .nav-treeview > .nav-item > .nav-link:hover,
    :root[data-theme="light"] .nav-treeview > .nav-item > .nav-link:focus,
    :root[data-theme="light"] .nav-treeview > .nav-item > .nav-link.active {
        background-color: #abffc2 !important;
    }
    
    .sidebar a {
        color: var(--text-dark) !important;
        font-weight: 500 !important;
    }
    
    .brand-link {
        border-bottom: 1px solid var(--border-light) !important;
        padding: 8px 20px !important;
        height: 57px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .brand-text {
        display: none !important;
    }
    
    .user-panel {
        border-bottom: 1px solid var(--border-light) !important;
        padding: 20px !important;
    }
    
    .content-wrapper {
        background-color: var(--bg-light) !important;
    }
    
    .card {
        background-color: var(--bg-white) !important;
        border: none !important;
        box-shadow: 0 0 20px var(--shadow-purple-light) !important;
        border-radius: 12px !important;
    }
    
    .card-header {
        background-color: transparent !important;
        border-bottom: 1px solid var(--border-light) !important;
        padding: 20px !important;
    }
    
    .main-header {
        background-color: var(--bg-white) !important;
        border: none !important;
        box-shadow: 0 2px 4px var(--shadow-purple-light) !important;
    }
    
    .nav-icon {
        color: var(--text-secondary) !important;
    }
    
    .nav-link.active .nav-icon {
        color: var(--active-menu-text) !important;
    }
    
    .nav-treeview > .nav-item > .nav-link {
        padding-left: 25px !important;
    }
    
    .main-footer {
        border-top: 1px solid var(--border-light) !important;
        background-color: var(--bg-white) !important;
        color: var(--text-dark) !important;
        padding: 20px !important;
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
        color: var(--text-dark) !important;
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
        color: var(--primary-purple) !important;
    }
    
    :root[data-theme="dark"] .navbar-light {
        background-color: var(--bg-white) !important;
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-brand {
        color: var(--text-dark) !important;
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-toggler-icon {
        filter: invert(1);
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-nav .nav-link .fas.fa-sign-out-alt {
        color: var(--text-dark) !important;
    }
    
    :root[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover .fas {
        color: var(--primary-purple) !important;
    }
    
    .nav-link {
        transition: all 0.3s ease !important;
    }
    
    .content-header h1 {
        font-weight: 600 !important;
        color: var(--text-dark) !important;
    }
    
    .nav-sidebar .nav-link p {
        font-size: 0.95rem !important;
    }
    
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--bg-light);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--primary-purple);
        border-radius: 4px;
    }
    
    .btn-google {
        background-color: #dd4b39;
        color: white;
    }
    
    .btn-facebook {
        background-color: #3b5998;
        color: white;
    }
    
    .social-auth-links .btn {
        margin-bottom: 10px;
    }
    
    .input-group-text {
        border: none !important;
        background-color: transparent !important;
    }