/* Theme Variables - Light & Dark Mode Support */

:root {
    --primary-color: #696cff;
    --bs-primary: #696cff;
}

/* Light Theme (Default) */
.light-style,
[data-theme="light"] {
    --body-bg: #f5f5f9;
    --body-color: #697a8d;
    --headings-color: #566a7f;
    --card-bg: #ffffff;
    --card-border: #d9dee3;
    --border-color: #d9dee3;
    --text-muted: #a1acb8;
    --hover-bg: #f8f9fa;
    --input-bg: #ffffff;
    --input-border: #d9dee3;
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
}

.light-style body,
[data-theme="light"] body {
    background-color: var(--body-bg) !important;
    color: var(--body-color) !important;
}

.light-style .card,
[data-theme="light"] .card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

.light-style .sidebar-menu,
[data-theme="light"] .sidebar-menu {
    background-color: rgba(240, 240, 242, 0.7) !important;
    border-right-color: var(--border-color) !important;
}

.light-style .dashboard-navbar,
[data-theme="light"] .dashboard-navbar {
    background-color: rgba(250, 250, 250, 0.7) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Dark Theme */
.dark-style,
[data-theme="dark"] {
    --body-bg: #232333;
    --body-color: #a5a8b4;
    --headings-color: #c7c9d0;
    --card-bg: #2b2c40;
    --card-border: #3d3e56;
    --border-color: #3d3e56;
    --text-muted: #7a7e8a;
    --hover-bg: #3d3e56;
    --input-bg: #2b2c40;
    --input-border: #3d3e56;
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.7);
}

.dark-style body,
[data-theme="dark"] body {
    background-color: var(--body-bg) !important;
    color: var(--body-color) !important;
}

.dark-style .card,
[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--body-color) !important;
}

.dark-style .sidebar-menu,
[data-theme="dark"] .sidebar-menu {
    background-color: #2b2c40 !important;
    border-right-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

.dark-style .dashboard-navbar,
[data-theme="dark"] .dashboard-navbar {
    background-color: #2b2c40 !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

.dark-style .menu-link,
[data-theme="dark"] .menu-link {
    color: var(--body-color) !important;
}

.dark-style .menu-link:hover,
[data-theme="dark"] .menu-link:hover {
    background-color: var(--hover-bg) !important;
}

.dark-style .menu-link.active,
[data-theme="dark"] .menu-link.active {
    background-color: var(--hover-bg) !important;
    color: var(--primary-color) !important;
}

.dark-style h1, .dark-style h2, .dark-style h3, 
.dark-style h4, .dark-style h5, .dark-style h6,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--headings-color) !important;
}

.dark-style .form-control,
[data-theme="dark"] .form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--body-color) !important;
}

.dark-style .form-control:focus,
[data-theme="dark"] .form-control:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--body-color) !important;
}

.dark-style .table,
[data-theme="dark"] .table {
    color: var(--body-color) !important;
}

.dark-style .table th,
[data-theme="dark"] .table th {
    color: var(--headings-color) !important;
    border-color: var(--border-color) !important;
}

.dark-style .table td,
[data-theme="dark"] .table td {
    border-color: var(--border-color) !important;
}

.dark-style .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

.dark-style .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--hover-bg) !important;
}

.dark-style .text-muted,
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

.dark-style .border,
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

/* Backdrop overlay for dark mode */
.dark-style::before,
[data-theme="dark"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--body-bg);
    z-index: -1;
}

/* User wrapper in sidebar */
.dark-style .user-wrapper,
[data-theme="dark"] .user-wrapper {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--border-color) !important;
}

/* Dropdown menu */
.dark-style .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-style .dropdown-item,
[data-theme="dark"] .dropdown-item {
    color: var(--body-color) !important;
}

.dark-style .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--hover-bg) !important;
}

/* Modal */
.dark-style .modal-content,
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

.dark-style .modal-header,
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color) !important;
}

.dark-style .modal-footer,
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color) !important;
}

/* Smooth transitions */
body, .card, .sidebar-menu, .dashboard-navbar, 
.form-control, .btn, .dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}