/* Dark Mode CSS Variables */
:root {
    --light-bg: #f6f9ff;
    --light-text: #444444;
    --light-heading: #012970;
    --light-card-bg: #ffffff;
    --light-border: #ebeef4;
    --light-sidebar: #fff;
    --light-header: #fff;
    --light-footer: #fff;
    --light-link: #4154f1;
    --light-link-hover: #717ff5;
    --light-input-bg: #fff;
    --light-input-border: rgba(1, 41, 112, 0.2);
    --light-dropdown-bg: #fff;
    --light-dropdown-hover: #f6f9ff;
    --light-shadow: rgba(1, 41, 112, 0.1);
    --light-table-border: #ebeef4;
    --light-card-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.dark {
    --light-bg: #121212;
    --light-text: #e0e0e0;
    --light-heading: #bb86fc;
    --light-card-bg: #1e1e1e;
    --light-border: #333;
    --light-sidebar: #1e1e1e;
    --light-header: #1e1e1e;
    --light-footer: #1e1e1e;
    --light-link: #bb86fc;
    --light-link-hover: #3700b3;
    --light-input-bg: #333;
    --light-input-border: #444;
    --light-dropdown-bg: #1e1e1e;
    --light-dropdown-hover: #333;
    --light-shadow: rgba(0, 0, 0, 0.5);
    --light-table-border: #333;
    --light-card-shadow: 0px 0 30px rgba(0, 0, 0, 0.5);
}

/* General Styles */
.dark body {
    background-color: var(--light-bg);
    color: var(--light-text);
}

/* Links */
.dark a {
    color: var(--light-link);
}

.dark a:hover {
    color: var(--light-link-hover);
}

/* Buttons */
.dark .btn-primary {
    background-color: #bb86fc;
    border-color: #bb86fc;
}

.dark .btn-primary:hover {
    background-color: #3700b3;
    border-color: #3700b3;
}

.dark .btn-secondary {
    background-color: #333;
    border-color: #444;
}

/* Inputs */
.dark input,
.dark textarea,
.dark select,
.dark .form-control {
    background-color: var(--light-input-bg);
    color: var(--light-text);
    border-color: var(--light-input-border);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #888;
}

/* Cards */
.dark .card {
    background-color: var(--light-card-bg);
    border-color: var(--light-border);
    box-shadow: var(--light-card-shadow);
}

.dark .card-header,
.dark .card-footer {
    background-color: var(--light-card-bg);
    border-color: var(--light-border);
}

/* Tables */
.dark table,
.dark .datatable-table {
    background-color: var(--light-card-bg);
    color: var(--light-text);
}

.dark th,
.dark td,
.dark .datatable-table th,
.dark .datatable-table td {
    border-color: var(--light-table-border);
}

/* Header */
.dark .header {
    background-color: var(--light-header);
    box-shadow: 0px 2px 20px var(--light-shadow);
}

.dark .toggle-sidebar-btn {
    color: var(--light-text);
}

/* Sidebar */
.dark .sidebar {
    background-color: var(--light-sidebar);
}

.dark .sidebar-nav .nav-link {
    color: var(--light-text);
}

.dark .sidebar-nav .nav-link:hover {
    background-color: var(--light-dropdown-hover);
}

.dark .sidebar-nav .nav-link.active {
    background-color: var(--light-dropdown-hover);
    color: var(--light-link);
}

/* Footer */
.dark .footer {
    background-color: var(--light-footer);
    color: var(--light-text);
}

/* Dropdown */
.dark .dropdown-menu {
    background-color: var(--light-dropdown-bg);
    box-shadow: 0 5px 30px 0 var(--light-shadow);
}

.dark .dropdown-item {
    color: var(--light-text);
}

.dark .dropdown-item:hover {
    background-color: var(--light-dropdown-hover);
}

/* Back to top button */
.dark .back-to-top {
    background-color: var(--light-link);
}

.dark .back-to-top:hover {
    background-color: var(--light-link-hover);
}