/* Dark Mode Toggle Button - Always visible */
.theme-toggle-btn {
    position: fixed;
    top: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.theme-toggle-btn:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    transform: scale(1.1) rotate(15deg);
}

.theme-toggle-btn:hover svg {
    stroke: #ffffff;
}

.theme-toggle-btn svg {
    stroke: #374151;
    transition: all 0.3s ease;
}

/* DARK MODE STYLES - Only active when body.dark-mode */
/* Body & Background */
body.dark-mode {
    background: linear-gradient(to bottom right, #1f2937, #111827) !important;
    color: #f9fafb !important;
}

body.dark-mode .bg-gradient-to-br {
    background: linear-gradient(to bottom right, #1f2937, #111827) !important;
}

/* Headers */
body.dark-mode header {
    background: rgba(31, 41, 55, 0.7) !important;
    border-color: #374151 !important;
}

/* Cards & Containers */
body.dark-mode .container,
body.dark-mode .login-container,
body.dark-mode .bg-white {
    background: #1f2937 !important;
    color: #f9fafb !important;
}

body.dark-mode .bg-white\/70,
body.dark-mode .bg-white\/60 {
    background: rgba(31, 41, 55, 0.8) !important;
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700 {
    color: #f9fafb !important;
}

body.dark-mode p,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
    color: #d1d5db !important;
}

/* Form Elements */
body.dark-mode label {
    color: #f9fafb !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode input::placeholder,
body.dark-mode select::placeholder,
body.dark-mode textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background: #374151 !important;
    border-color: #4f46e5 !important;
}

/* Tables */
body.dark-mode table {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

body.dark-mode thead {
    background: #4f46e5 !important;
}

body.dark-mode tbody {
    background: #1f2937 !important;
}

body.dark-mode tbody tr {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode tbody tr:hover {
    background: #374151 !important;
}

body.dark-mode tbody td {
    color: #f9fafb !important;
    border-color: #374151 !important;
}

body.dark-mode .overflow-x-auto {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Info Boxes */
body.dark-mode .bg-blue-50,
body.dark-mode .bg-indigo-50,
body.dark-mode .bg-yellow-50,
body.dark-mode .bg-red-50,
body.dark-mode .bg-green-50 {
    background: #374151 !important;
}

body.dark-mode .text-blue-800 {
    color: #f9fafb !important;
}

/* Upload Area */
body.dark-mode #uploadArea {
    background: rgba(55, 65, 81, 0.6) !important;
    border-color: #4b5563 !important;
}

body.dark-mode #uploadArea:hover {
    background: #374151 !important;
}

body.dark-mode #fileInfo {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #fileName,
body.dark-mode #fileSize {
    color: #f9fafb !important;
}

/* Buttons (shadows only) */
body.dark-mode button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

body.dark-mode button:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
}

/* Footer */
body.dark-mode footer {
    color: #9ca3af !important;
}

/* Image Side (Login) */
body.dark-mode .image-side {
    background: #111827 !important;
}

body.dark-mode .image-side img {
    opacity: 0.9;
}

/* Dashboard Cards Shadow */
body.dark-mode .shadow-2xl {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .shadow-xl {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Data Count & Pagination */
body.dark-mode #dataCount {
    color: #d1d5db !important;
}

body.dark-mode #pagination button {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode #pagination button:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

/* SweetAlert Dark Mode */
body.dark-mode .swal2-popup {
    background: #1f2937 !important;
    color: #f9fafb !important;
}

body.dark-mode .swal2-title {
    color: #f9fafb !important;
}

body.dark-mode .swal2-html-container {
    color: #d1d5db !important;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #111827;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4f46e5;
}

/* Dark Mode Toggle Button in Dark Mode */
body.dark-mode .theme-toggle-btn {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .theme-toggle-btn svg {
    stroke: #f9fafb;
}

/* Password Toggle */
.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6b7280;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password:hover {
    color: #4f46e5;
}

.password-wrapper input {
    padding-right: 45px;
}

body.dark-mode .toggle-password {
    color: #9ca3af;
}