.theme-toggle-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background-color: #f8f9fa;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.theme-toggle-btn:hover {
    background-color: #0d6efd;
    color: #fff;
    transform: rotate(20deg);
}

/* Dark mode button style */
body.dark-mode .theme-toggle-btn {
    background-color: #212529;
    color: #ffc107;
}

html[data-theme="dark"] {
    --dark-bg: #121212;
    --dark-bg-alt: #1a1a1a;
    --dark-bg-card: #1e1e1e;
    --dark-border: #2c2c2c;
    --dark-text: #cfcfcf;
    --dark-text-muted: #bbbbbb;
    --dark-text-hover: #ffffff;
    --dark-input-bg: #2a2a2a;
    --dark-input-border: #3a3a3a;
}

html[data-theme="dark"] body {
    background: var(--dark-bg);
    color: var(--dark-text);
}

html[data-theme="dark"] .header {
    background-color: var(--dark-bg-card);
    box-shadow: none;
    color: var(--dark-text);
}

html[data-theme="dark"] .sidebar {
    background-color: var(--dark-bg-alt);
    box-shadow: none;
}

html[data-theme="dark"] .sidebar-nav .nav-link {
    background: var(--dark-bg-card);
    color: var(--dark-text);
}

html[data-theme="dark"] .sidebar-nav .nav-link:hover {
    background: #2a2a2a;
    color: var(--dark-text-hover);
}

html[data-theme="dark"] .sidebar-nav .nav-link.collapsed {
    background: var(--dark-bg-alt);
    color: var(--dark-text-muted);
}

html[data-theme="dark"] .sidebar-nav .nav-content a {
    color: var(--dark-text);
}

html[data-theme="dark"] .sidebar-nav .nav-content a:hover,
html[data-theme="dark"] .sidebar-nav .nav-content a.active {
    background: #2a2a2a;
    color: var(--dark-text-hover);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--dark-bg-card);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html[data-theme="dark"] .pagetitle h1,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .logo span {
    color: #ffffff;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-bg-card);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
    --bs-table-bg: #121212;
    --bs-table-striped-bg: #1a1a1a;
    --bs-table-hover-bg: #2a2a2a;
    --bs-table-color: #ffffff;
    background-color: #121212;
    color: #ffffff;
    border-color: #1f1f1f;
}

html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.dataTable thead th {
    background-color: #1c1c1c;
    color: #ffffff;
    border-bottom: 1px solid #333333;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] table.dataTable td,
html[data-theme="dark"] table.dataTable th {
    color: #ffffff;
    border-color: #1f1f1f;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select {
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    color: #ffffff;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select:focus {
    background-color: var(--dark-input-bg);
    border-color: #4154f1;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(65, 84, 241, 0.6);
}

html[data-theme="dark"] .footer {
    background-color: #1b1b1b;
    border-top: 1px solid var(--dark-border);
    color: var(--dark-text);
}

html[data-theme="dark"] .footer .copyright,
html[data-theme="dark"] .footer .credits {
    color: var(--dark-text);
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-primary {
    color: #ffffff;
    background-color: #4154f1;
    border-color: #4154f1;
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn-primary:hover {
    background-color: #5969f3;
    border-color: #5969f3;
    color: #ffffff;
}

html[data-theme="dark"] .page-link {
    background-color: #1e1e1e;
    border-color: #2c2c2c;
    color: #ffffff;
}

html[data-theme="dark"] .page-link:hover {
    background-color: #2a2a2a;
    border-color: #2c2c2c;
    color: #ffffff;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-input-border);
    color: #ffffff;
}

/* Dropdown Menu Dark Fix */
html[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #1e1e1e;
    --bs-dropdown-color: #ffffff;
    --bs-dropdown-link-color: #ffffff;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #2a2a2a;
    --bs-dropdown-border-color: #2c2c2c;
    --bs-dropdown-divider-bg: #2c2c2c;

    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #2c2c2c;
}

/* Dropdown Items */
html[data-theme="dark"] .dropdown-item {
    color: #ffffff;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* Dropdown Header */
html[data-theme="dark"] .dropdown-header {
    color: #ffffff;
}

/* Divider */
html[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid #2c2c2c;
}

/* Profile specific (NiceAdmin override) */
html[data-theme="dark"] .header-nav .profile {
    background-color: #1e1e1e;
    border: 1px solid #2c2c2c;
}