:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #f8f8f8;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --border-color: #e0e0e0;
    --border-light: #dddddd;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --link-color: #007bff;
    --link-hover: #0056b3;
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #333333;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --border-color: #404040;
    --border-light: #4a4a4a;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --link-color: #4da6ff;
    --link-hover: #66b3ff;
}

.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.dark-mode-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.dark-mode-toggle .toggle-track {
    width: 50px;
    height: 24px;
    background-color: var(--bg-secondary);
    border-radius: 15px;
    position: relative;
    transition: background-color 0.3s ease;
}

.dark-mode-toggle .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle .toggle-thumb::before {
    content: '☀️';
    font-size: 12px;
}

[data-theme="dark"] .dark-mode-toggle .toggle-track {
    background-color: #4a4a4a;
}

[data-theme="dark"] .dark-mode-toggle .toggle-thumb {
    transform: translateX(26px);
    background-color: #2d2d2d;
}

[data-theme="dark"] .dark-mode-toggle .toggle-thumb::before {
    content: '🌙';
}

/* Apply dark mode styles to existing elements */
body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ed-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.ed-element.ed-header {
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

.ed-element.ed-header h1,
.ed-element.ed-header h2,
.ed-element.ed-header h3,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

.ed-element.ed-menu {
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-light) !important;
}

.ed-element.ed-menu a,
.menu-wrapper a {
    color: var(--text-primary) !important;
}

.ed-element.ed-menu a:hover,
.menu-wrapper a:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--link-hover) !important;
}

/* Content sections */
.ed-element {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.ed-element.ed-container-content {
    background-color: var(--bg-primary) !important;
}

/* Forms and inputs */
input, textarea, select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input:focus, textarea:focus, select:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--link-color) !important;
    outline-color: var(--link-color) !important;
}

/* Buttons */
button, .button, .btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

button:hover, .button:hover, .btn:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--link-color) !important;
}

/* Links */
a {
    color: var(--link-color) !important;
}

a:hover {
    color: var(--link-hover) !important;
}

/* Tables */
table {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

tr:hover td {
    background-color: var(--bg-secondary) !important;
}

/* Cards and panels */
.card, .panel, .box {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Footer */
.ed-element.ed-footer,
footer {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Modal */
.modal-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color) !important;
}

/* Scrollbar styling for webkit browsers */
[data-theme="dark"] ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #4a4a4a;
}

/* Calendar specific styles */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--border-color) !important;
}

.fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}

.fc-day {
    background-color: var(--bg-primary) !important;
}

.fc-day-today {
    background-color: var(--bg-secondary) !important;
}

.fc-event {
    background-color: var(--link-color) !important;
    border-color: var(--link-color) !important;
}

/* Image overlay for better visibility in dark mode */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Code blocks */
pre, code {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Tooltips */
.tooltip {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Badges */
.badge {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Alerts */
.alert {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}