/* Theme Switcher Styles - Apply to entire application */

/* Color scheme for native form controls */
html {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}

/* Dark theme (default) */
body,
.theme-bg {
    background-color: #0b1220;
}

.theme-text {
    color: #e6eef8;
}

/* Light theme */
[data-theme="light"] body,
[data-theme="light"] .theme-bg {
    background-color: #f9fafb;
}

[data-theme="light"] .theme-text {
    color: #1f2937;
}

#sidebar button.text-gray-400:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Light Mode - Icons turn black on hover */
[data-theme="light"] header button.text-gray-400,
[data-theme="light"] #sidebar button.text-gray-400 {
    color: #6b7280 !important;
    /* Default gray */
}

[data-theme="light"] header button.text-gray-400:hover,
[data-theme="light"] #sidebar button.text-gray-400:hover {
    color: #000000 !important;
    /* Darker on hover */
    background-color: rgba(0, 0, 0, 0.05) !important;
    /* Subtle dark background */
}

/* Fix disappearing buttons - remove opacity changes */
button {
    opacity: 1 !important;
}

button:hover {
    opacity: 1 !important;
}

/* Cards and glass effects */
.glass,
.card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .glass,
[data-theme="light"] .card {
    background: #ffffff;
    border-color: #e5e7eb;
}

/* Text colors */
.text-gray-400 {
    color: #9ca3af;
}

[data-theme="light"] .text-gray-400 {
    color: #374151 !important;
    /* gray-700 for better contrast */
}

.text-gray-100 {
    color: #e6eef8;
}

[data-theme="light"] .text-gray-100 {
    color: #111827 !important;
    /* gray-900 */
}

/* Borders */
.border-gray-800 {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .border-gray-800 {
    border-color: #d1d5db !important;
    /* gray-300 */
}

/* Nav items */
.nav-item {
    color: #9ca3af;
}

[data-theme="light"] .nav-item {
    color: #4b5563 !important;
    /* gray-600 */
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e6eef8;
}

[data-theme="light"] .nav-item:hover {
    background: #f3f4f6;
    color: #111827 !important;
    /* gray-900 */
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.08));
    color: #6366f1;
}

[data-theme="light"] .nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
    color: #4f46e5 !important;
    /* indigo-600 */
}

/* Home button in breadcrumbs - dark text in light mode */
[data-theme="light"] a[href="/"] {
    color: #111827 !important;
}

[data-theme="light"] a[href="/"]:hover {
    color: #000000 !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e6eef8;
}

[data-theme="light"] .btn-outline {
    background: transparent;
    border-color: #9ca3af;
    /* gray-400 */
    color: #1f2937;
    /* gray-800 */
}

/* Custom dropdown text visibility in light mode */
[data-theme="light"] .custom-dropdown-selected {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

[data-theme="light"] .custom-dropdown-option {
    color: #1f2937 !important;
    background: #ffffff;
}

[data-theme="light"] .custom-dropdown-option:hover {
    background: #f3f4f6 !important;
    color: #000000 !important;
}

[data-theme="light"] .custom-dropdown-option.selected {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important;
    color: #000000 !important;
}

[data-theme="light"] .custom-dropdown-options {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}

/* SVG icons - prevent disappearing */
svg {
    opacity: 1 !important;
}

/* Main content area */
main {
    background-color: transparent;
}

/* Sidebar and Topnav backgrounds - theme aware */
aside#sidebar {
    background-color: #0b1220 !important;
    border-color: transparent !important;
}

[data-theme="light"] aside#sidebar {
    background-color: #f9fafb !important;
    border-color: transparent !important;
}

header {
    background-color: #0b1220 !important;
    border-color: transparent !important;
}

[data-theme="light"] header {
    background-color: #f9fafb !important;
    border-color: transparent !important;
}

/* Sidebar footer section */
.sidebar-footer {
    background-color: #0b1220 !important;
    border-color: transparent !important;
}

[data-theme="light"] .sidebar-footer {
    background-color: #f9fafb !important;
    border-color: transparent !important;
}

/* White text in dark mode, dark text in light mode */
[data-theme="light"] header,
[data-theme="light"] aside#sidebar {
    color: #1f2937 !important;
}

[data-theme="light"] aside#sidebar .text-white {
    color: #1f2937 !important;
}

[data-theme="light"] header .text-white {
    color: #1f2937 !important;
}

/* Logo text visibility in light mode */
[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, #4f46e5, #db2777);
    /* Slightly darker gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Text colors in sidebar for light mode */
[data-theme="light"] aside#sidebar .text-sm {
    color: #374151 !important;
}

[data-theme="light"] aside#sidebar .text-xs {
    color: #4b5563 !important;
}

/* Notification dropdown in light mode */
[data-theme="light"] .glass {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Search input in light mode */
[data-theme="light"] header input {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

[data-theme="light"] header input::placeholder {
    color: #6b7280 !important;
}

/* Hover states for light mode */
[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Additional background colors for light mode */
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-900 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .bg-gray-800\/50,
[data-theme="light"] .bg-gray-800\/70 {
    background-color: #f3f4f6 !important;
}

/* Text colors for light mode - comprehensive overrides */
[data-theme="light"] .text-gray-300 {
    color: #374151 !important;
    /* gray-700 */
}

[data-theme="light"] .text-gray-400 {
    color: #4b5563 !important;
    /* gray-600 */
}

[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
    /* gray-500 is fine, or go darker: #4b5563 */
}

[data-theme="light"] .text-gray-600 {
    color: #1f2937 !important;
    /* gray-800 */
}

/* Specific color overrides for light mode (e.g. badges, status text) */
[data-theme="light"] .text-red-300 {
    color: #b91c1c !important;
    /* red-700 */
}

[data-theme="light"] .text-blue-300 {
    color: #1d4ed8 !important;
    /* blue-700 */
}

[data-theme="light"] .text-green-300 {
    color: #047857 !important;
    /* green-700 */
}

[data-theme="light"] .text-pink-300 {
    color: #be185d !important;
    /* pink-700 */
}

[data-theme="light"] .text-purple-300 {
    color: #7e22ce !important;
    /* purple-700 */
}

[data-theme="light"] .text-yellow-300 {
    color: #b45309 !important;
    /* amber-700 */
}

[data-theme="light"] .text-indigo-300 {
    color: #4338ca !important;
    /* indigo-700 */
}

/* Border colors for light mode */
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-800 {
    border-color: #e5e7eb !important;
}

/* Divider in light mode */
[data-theme="light"] .divider,
[data-theme="light"] .divide-gray-800>* {
    border-color: #e5e7eb !important;
}

/* Modal and alert backgrounds */
[data-theme="light"] .bg-black {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure all white text becomes dark in light mode */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] p {
    color: inherit !important;
}

/* Stats and metric cards */
[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Make sure the user profile section has proper colors */
[data-theme="light"] aside#sidebar .flex.items-center.gap-3 .text-sm {
    color: #1f2937 !important;
}

/* Logout button in light mode */
[data-theme="light"] .btn-outline {
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

[data-theme="light"] .btn-outline:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* Badge colors - maintain visibility in light mode */
[data-theme="light"] .badge {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb;
}

/* Badge colors: Light Background + Dark Text (Inverted from Dark Mode) */
[data-theme="light"] .badge-success {
    background: #ecfdf5 !important;
    /* emerald-50 */
    color: #047857 !important;
    /* emerald-700 */
    border: 1px solid #6ee7b7;
}

[data-theme="light"] .badge-warning {
    background: #fffbeb !important;
    /* amber-50 */
    color: #b45309 !important;
    /* amber-700 */
    border: 1px solid #fcd34d;
}

[data-theme="light"] .badge-danger {
    background: #fef2f2 !important;
    /* red-50 */
    color: #b91c1c !important;
    /* red-700 */
    border: 1px solid #fca5a5;
}

[data-theme="light"] .badge-info {
    background: #eff6ff !important;
    /* blue-50 */
    color: #1d4ed8 !important;
    /* blue-700 */
    border: 1px solid #93c5fd;
}

/* Breadcrumb colors in light theme */
[data-theme="light"] .breadcrumb-item {
    color: #374151 !important;
    /* gray-700 */
    font-weight: 600;
}

[data-theme="light"] .breadcrumb-container svg {
    color: #6b7280 !important;
}

/* Welcome card background in light theme */
[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] {
    background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%) !important;
    border: 1px solid #fbcfe8;
}

/* Welcome card text colors in light theme */
[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .text-white,
[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] h2,
[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] p {
    color: #1f2937 !important;
    /* dark gray text */
}

[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .text-white\/80,
[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .text-white\/70 {
    color: #4b5563 !important;
    /* medium gray text */
}

[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .text-green-300 {
    color: #047857 !important;
    /* green-700 */
}

[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .bg-white\/20 {
    background-color: rgba(236, 72, 153, 0.1) !important;
    /* pink background instead of white */
}

[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .bg-green-500\/30 {
    background-color: #d1fae5 !important;
    color: #047857 !important;
}

[data-theme="light"] .card.glass[style*="linear-gradient(135deg, #ec4899"] .bg-purple-500\/30 {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
}

/* Stats card icon colors - darker in light theme */
[data-theme="light"] .text-pink-400 {
    color: #be185d !important;
    /* pink-700 */
}

[data-theme="light"] .text-purple-400 {
    color: #7e22ce !important;
    /* purple-700 */
}

[data-theme="light"] .text-yellow-400 {
    color: #b45309 !important;
    /* amber-700 */
}

[data-theme="light"] .text-blue-400 {
    color: #1d4ed8 !important;
    /* blue-700 */
}

/* Stats card icon background colors - light pastel + dark icons */
[data-theme="light"] .bg-pink-500\/20 {
    background-color: #fce7f3 !important;
    /* pink-50 */
    color: #be185d !important;
}

[data-theme="light"] .bg-purple-500\/20 {
    background-color: #f3e8ff !important;
    /* purple-50 */
    color: #7e22ce !important;
}

[data-theme="light"] .bg-yellow-500\/20 {
    background-color: #fffbeb !important;
    /* amber-50 */
    color: #b45309 !important;
}

[data-theme="light"] .bg-blue-500\/20 {
    background-color: #eff6ff !important;
    /* blue-50 */
    color: #1d4ed8 !important;
}

[data-theme="light"] .bg-red-500\/20 {
    background-color: #fef2f2 !important;
    /* red-50 */
    color: #b91c1c !important;
}

[data-theme="light"] .bg-green-500\/20 {
    background-color: #ecfdf5 !important;
    /* emerald-50 */
    color: #047857 !important;
}

[data-theme="light"] .bg-gray-500\/20 {
    background-color: #f3f4f6 !important;
    /* gray-50 */
    color: #374151 !important;
}

/* Stats card text colors in light theme */
[data-theme="light"] .card.glass .text-white {
    color: #111827 !important;
    /* gray-900 for numbers */
}

[data-theme="light"] .card.glass .text-gray-400 {
    color: #4b5563 !important;
    /* gray-600 */
}

/* Additional overrides to ensure form labels are visible in light mode */
html[data-theme="light"] label.form-label,
html[data-theme="light"] .form-label,
html[data-theme="light"] label[class*="form-label"],
[data-theme="light"] body label.form-label,
[data-theme="light"] body .form-label {
    color: #1f2937 !important;
    opacity: 1 !important;
}

/* Card headers in light mode */
html[data-theme="light"] .card-header,
html[data-theme="light"] div.card-header,
[data-theme="light"] body .card-header {
    color: #374151 !important;
}

/* Select dropdown text in light mode */
[data-theme="light"] select.form-input,
[data-theme="light"] .form-input {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    /* dark text */
    border-color: #d1d5db !important;
}

[data-theme="light"] .form-input::placeholder {
    color: #6b7280 !important;
}

[data-theme="light"] select.form-input option {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* ===== GLOBAL LIGHT MODE OVERRIDES ===== */

/* Checkboxes */
html[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    accent-color: #6366f1 !important;
}

html[data-theme="light"] input[type="checkbox"]:checked {
    background-color: #6366f1 !important;
}

/* Radio buttons */
html[data-theme="light"] input[type="radio"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    accent-color: #6366f1 !important;
}

/* Text Colors - Gray Scale */
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
    color: #111827 !important;
}

html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
    color: #4b5563 !important;
}

html[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
}

/* Sidebar Links */
html[data-theme="light"] .sidebar-link,
html[data-theme="light"] .sidebar-item,
html[data-theme="light"] nav a,
[data-theme="light"] .sidebar-link,
[data-theme="light"] .sidebar-item {
    color: #374151 !important;
}

html[data-theme="light"] .sidebar-link:hover,
html[data-theme="light"] .sidebar-item:hover,
[data-theme="light"] .sidebar-link:hover {
    color: #111827 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .sidebar-link.active,
html[data-theme="light"] .sidebar-item.active,
[data-theme="light"] .sidebar-link.active {
    color: #4f46e5 !important;
    background-color: rgba(79, 70, 229, 0.1) !important;
}

/* Dropdown Menus */
html[data-theme="light"] .custom-dropdown,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] [class*="dropdown"],
[data-theme="light"] .custom-dropdown,
[data-theme="light"] .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .custom-dropdown-item,
[data-theme="light"] .dropdown-item {
    color: #1f2937 !important;
}

html[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:hover {
    background-color: #f3f4f6 !important;
}

/* Tables */
html[data-theme="light"] table,
html[data-theme="light"] .table,
[data-theme="light"] table {
    color: #1f2937 !important;
}

html[data-theme="light"] th,
html[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] td {
    border-color: #e5e7eb !important;
}

html[data-theme="light"] thead,
html[data-theme="light"] .table-header,
[data-theme="light"] thead {
    background-color: #f9fafb !important;
    color: #374151 !important;
}

html[data-theme="light"] tbody tr:hover,
[data-theme="light"] tbody tr:hover {
    background-color: #f3f4f6 !important;
}

/* Modals */
html[data-theme="light"] .modal,
html[data-theme="light"] [class*="modal"],
html[data-theme="light"] .modal-content,
[data-theme="light"] .modal {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-title,
[data-theme="light"] .modal-header {
    color: #111827 !important;
}

/* Modal title text (h3 in modals) */
html[data-theme="light"] #createUserModal h3,
html[data-theme="light"] #deleteUserModal h3,
[data-theme="light"] #createUserModal h3,
[data-theme="light"] #deleteUserModal h3 {
    color: #111827 !important;
}

/* Modal background in light mode */
html[data-theme="light"] #createUserModal>div,
html[data-theme="light"] #deleteUserModal>div,
[data-theme="light"] #createUserModal>div,
[data-theme="light"] #deleteUserModal>div {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Modal dialog text in light mode */
html[data-theme="light"] #createUserModal p,
html[data-theme="light"] #deleteUserModal p,
[data-theme="light"] #createUserModal p,
[data-theme="light"] #deleteUserModal p {
    color: #4b5563 !important;
}

/* Stat Cards */
html[data-theme="light"] .stat-value,
html[data-theme="light"] .stat-label,
[data-theme="light"] .stat-value,
[data-theme="light"] .stat-label {
    color: #1f2937 !important;
}

/* Info text */
html[data-theme="light"] .info-text,
html[data-theme="light"] .help-text,
html[data-theme="light"] small,
[data-theme="light"] small {
    color: #6b7280 !important;
}

/* Badges */
html[data-theme="light"] .badge,
[data-theme="light"] .badge {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Textarea */
html[data-theme="light"] textarea,
html[data-theme="light"] textarea.form-input,
[data-theme="light"] textarea {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}