/* Custom Styles for Reseller Panel */

/* Additional Color Classes */
.bg-indigo-500 {
    background-color: #6366f1 !important;
}

.border-indigo-500 {
    border-color: #6366f1 !important;
}

.text-indigo-500 {
    color: #6366f1 !important;
}

.bg-cyan-500 {
    background-color: #06b6d4 !important;
}

.border-cyan-500 {
    border-color: #06b6d4 !important;
}

.text-cyan-500 {
    color: #06b6d4 !important;
}

/* Credit Badge */
.credit-badge {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}

.credit-badge svg {
    width: 18px;
    height: 18px;
}

.credit-badge .credit-label {
    font-weight: 600;
    font-size: 0.875rem;
    opacity: 0.9;
}

.credit-badge .credit-amount {
    font-weight: 700;
    font-size: 1.125rem;
}

/* Dark mode credit badge */
.dark .credit-badge {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}

/* Dashboard SVG Icons */
.dashboard-icon-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
}

.dashboard-icon-circle svg {
    width: 24px !important;
    height: 24px !important;
    stroke: white !important;
    fill: none !important;
}

.dashboard-icon-large svg {
    width: 32px;
    height: 32px;
    stroke: white !important;
}

/* Quick Actions Icons */
.quick-action-icon svg {
    width: 24px;
    height: 24px;
    stroke: white !important;
}

/* Button Icons */
.btn svg {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

[dir="rtl"] .btn svg {
    margin-right: 0;
    margin-left: 0.5rem;
}

.btn-close svg {
    width: 24px;
    height: 24px;
}

/* Navbar Icons */
.nav-tools svg {
    width: 20px;
    height: 20px;
}

/* Sidebar Icons */
.nav-icon svg {
    width: 20px;
    height: 20px;
}

.icon-arrow svg {
    width: 16px;
    height: 16px;
}

/* RTL Support for SVG margins */
[dir="rtl"] .btn svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="ltr"] .btn svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Language Flags */
.lang-flag {
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
    margin-right: 0.5rem;
}

[dir="rtl"] .lang-flag {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Ensure emojis render properly */
.lang-flag::before {
    content: '';
}

button .lang-flag {
    vertical-align: middle;
}

/* Modal Styles */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
    width: 90%;
}

.modal.show {
    display: block !important;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Button Styles */
.btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-warning {
    background-color: #f59e0b;
    color: white;
}

.btn-warning:hover {
    background-color: #d97706;
}

.btn-info {
    background-color: #06b6d4;
    color: white;
}

.btn-info:hover {
    background-color: #0891b2;
}

.btn-dark {
    background-color: #1e293b;
    color: white;
}

.btn-dark:hover {
    background-color: #0f172a;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background-color: white;
    color: #0f172a;
    transition: all 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .form-control {
    border-color: #475569 !important;
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .form-control option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select.form-control {
    color: #f1f5f9 !important;
}

.dark select.form-control option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background-color: white;
    color: #0f172a;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .form-select {
    border-color: #475569 !important;
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.dark .form-select option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select.form-select {
    color: #f1f5f9 !important;
}

.dark select.form-select option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Toast Notifications - DashCode Alert Style */
#toastContainer {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    max-width: 400px !important;
    pointer-events: none;
}

#toastContainer>div {
    pointer-events: auto;
    margin-bottom: 10px;
}

.notification-toast {
    animation: slideInRight 0.3s ease-out;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Alert Colors from alert.html */
.bg-success-500 {
    background-color: #50C793 !important;
}

.bg-danger-500 {
    background-color: #F1595C !important;
}

.bg-warning-500 {
    background-color: #FA916B !important;
}

.bg-info-500 {
    background-color: #0CE7FA !important;
}

.bg-primary-500 {
    background-color: #4669FA !important;
}

.bg-secondary-500 {
    background-color: #A0AEC0 !important;
}

.bg-slate-800 {
    background-color: #1e293b !important;
}

/* Dark mode adjustments */
.dark .bg-slate-800 {
    background-color: #0f172a !important;
}

#toastContainer .bg-slate-800 {
    background-color: rgba(30, 41, 59, 0.14) !important;
    color: #1e293b !important;
}

.dark #toastContainer .bg-slate-500 {
    background-color: rgba(100, 116, 139, 0.14) !important;
    color: #64748b !important;
}

.dark #toastContainer .notification-toast,
.dark #toastContainer .notification-toast p,
.dark #toastContainer .notification-toast * {
    color: #ffffff !important;
}

.dark #toastContainer .bg-slate-800,
.dark #toastContainer .bg-slate-600 {
    color: #ffffff !important;
}

/* ULTRA AGGRESSIVE jvectormap prevention */
.jvectormap-container,
.jvectormap,
.jvectormap-container *,
.jvectormap *,
[class*="jvectormap"],
[class*="vector-map"],
[class*="world-map"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}

/* Hide any map containers that might cause issues */
#world-map,
.map-container,
.vector-map,
.world-map,
.map,
.vector-map-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Prevent jvectormap from initializing */
.jvectormap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {

    /* Hide any problematic elements on mobile */
    .jvectormap-container,
    .jvectormap,
    #world-map,
    .map-container,
    .vector-map {
        display: none !important;
    }

    /* Fix toast notifications on mobile */
    #toastContainer {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }

    #toastContainer>div {
        margin-bottom: 8px;
        font-size: 14px;
    }

    /* Welcome modal responsive */
    #welcomeModal .modal-content {
        max-width: 95% !important;
        margin: 0 auto;
    }

    #welcomeModal .p-6 {
        padding: 1rem !important;
    }

    #welcomeModal .space-y-4>div {
        padding: 0.75rem !important;
    }
}

/* Welcome Modal Styles */
#welcomeModal {
    backdrop-filter: blur(4px);
}

#welcomeModal .modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Welcome Modal Header */
#welcomeModal .bg-gradient-to-r {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dark #welcomeModal .bg-gradient-to-r {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Welcome Modal Body - Light Mode */
#welcomeModal .bg-blue-50 {
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
}

#welcomeModal .bg-green-50 {
    background-color: #f0fdf4;
    border: 1px solid #dcfce7;
}

#welcomeModal .bg-purple-50 {
    background-color: #faf5ff;
    border: 1px solid #f3e8ff;
}

#welcomeModal .bg-cyan-50 {
    background-color: #ecfeff;
    border: 1px solid #cffafe;
}

#welcomeModal .bg-orange-50 {
    background-color: #fff7ed;
    border: 1px solid #fed7aa;
}

/* Welcome Modal Body - Dark Mode */
.dark #welcomeModal .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dark #welcomeModal .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.dark #welcomeModal .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.dark #welcomeModal .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.dark #welcomeModal .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* Icon Circles */
#welcomeModal .bg-blue-500 {
    background-color: #3b82f6;
}

#welcomeModal .bg-green-500 {
    background-color: #22c55e;
}

#welcomeModal .bg-purple-500 {
    background-color: #a855f7;
}

#welcomeModal .bg-cyan-500 {
    background-color: #06b6d4;
}

#welcomeModal .bg-orange-500 {
    background-color: #f97316;
}

/* Text Colors - Light Mode */
#welcomeModal .text-blue-900 {
    color: #1e3a8a;
}

#welcomeModal .text-blue-600 {
    color: #2563eb;
}

#welcomeModal .text-green-900 {
    color: #14532d;
}

#welcomeModal .text-green-600 {
    color: #16a34a;
}

#welcomeModal .text-purple-900 {
    color: #581c87;
}

#welcomeModal .text-purple-600 {
    color: #9333ea;
}

#welcomeModal .text-cyan-900 {
    color: #164e63;
}

#welcomeModal .text-cyan-600 {
    color: #0891b2;
}

#welcomeModal .text-orange-900 {
    color: #7c2d12;
}

#welcomeModal .text-orange-600 {
    color: #ea580c;
}

/* Text Colors - Dark Mode */
.dark #welcomeModal .text-blue-900 {
    color: #93c5fd;
}

.dark #welcomeModal .text-blue-600 {
    color: #60a5fa;
}

.dark #welcomeModal .text-green-900 {
    color: #86efac;
}

.dark #welcomeModal .text-green-600 {
    color: #4ade80;
}

.dark #welcomeModal .text-purple-900 {
    color: #d8b4fe;
}

.dark #welcomeModal .text-purple-600 {
    color: #c084fc;
}

.dark #welcomeModal .text-cyan-900 {
    color: #67e8f9;
}

.dark #welcomeModal .text-cyan-600 {
    color: #22d3ee;
}

.dark #welcomeModal .text-orange-900 {
    color: #fdba74;
}

.dark #welcomeModal .text-orange-600 {
    color: #fb923c;
}

/* Hover Effects */
#welcomeModal .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.dark #welcomeModal .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Links */
#welcomeModal a {
    transition: all 0.2s ease;
}

#welcomeModal a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* Modal Backdrop */
#welcomeModal.show {
    background-color: rgba(0, 0, 0, 0.5);
}

.dark #welcomeModal.show {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Modal Shadow */
#welcomeModal .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark #welcomeModal .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Password Eye Icon RTL Support */
[dir="rtl"] #togglePassword {
    right: auto !important;
    left: 0.75rem !important;
}

[dir="rtl"] #password {
    padding-right: 0.75rem !important;
    padding-left: 2.5rem !important;
}

/* Login page - password eye icon positioning - always on the right */
#loginPassword {
    padding-right: 2.5rem !important;
}

#toggleLoginPassword {
    right: 0.75rem !important;
    left: auto !important;
}

[dir="rtl"] #toggleLoginPassword {
    right: 0.75rem !important;
    left: auto !important;
}

[dir="rtl"] #loginPassword {
    padding-right: 2.5rem !important;
}

/* Dropdown menu actions - better spacing */
.dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    white-space: nowrap !important;
}

.dropdown-menu a iconify-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Disable SimpleBar on login page to prevent errors */
body.skin-default .sidebar-menus {
    overflow-y: auto !important;
}

body.skin-default [data-simplebar] {
    overflow: auto !important;
}

/* Modal centering fix */
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal.show {
    display: flex !important;
}

.modal-dialog {
    margin: 0 auto;
}

/* Input group for password reset */
.input-group {
    display: flex;
    width: 100%;
}

.input-group .form-control {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.input-group button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.input-group button:hover {
    background-color: #f1f5f9;
}

.dark .input-group button {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.dark .input-group button:hover {
    background-color: #334155;
}

/* Package badges - Soft Badges style from DashCode */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

/* Force specific colors for soft badges */
.badge.bg-primary-500 {
    background-color: rgba(79, 70, 229, 0.3) !important;
    color: #4f46e5 !important;
}

.badge.bg-secondary-500 {
    background-color: rgba(100, 116, 139, 0.3) !important;
    color: #64748b !important;
}

.badge.bg-success-500 {
    background-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

.badge.bg-info-500 {
    background-color: rgba(14, 165, 233, 0.3) !important;
    color: #0ea5e9 !important;
}

.badge.bg-warning-500 {
    background-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

.badge.bg-danger-500 {
    background-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

/* Dark mode colors */
.dark .badge.bg-primary-500 {
    background-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

.dark .badge.bg-secondary-500 {
    background-color: rgba(148, 163, 184, 0.3) !important;
    color: #cbd5e1 !important;
}

.dark .badge.bg-success-500 {
    background-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

.dark .badge.bg-info-500 {
    background-color: rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
}

.dark .badge.bg-warning-500 {
    background-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

.dark .badge.bg-danger-500 {
    background-color: rgba(248, 113, 113, 0.3) !important;
    color: #f87171 !important;
}

/* Table Header & Body - Center all text - ULTRA FORCE */
table thead th,
table thead .table-th,
table th,
#users-table thead th,
#users-table thead .table-th,
#Codes-table thead th,
#Codes-table thead .table-th,
thead.border-t th,
thead.border-t .table-th,
.table-th,
th.table-th,
th[scope="col"],
th[scope="col"].table-th {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
}

/* Force override for RTL/LTR - ULTRA SPECIFIC */
[dir="ltr"] table thead th,
[dir="rtl"] table thead th,
[dir="ltr"] table th,
[dir="rtl"] table th,
[dir="ltr"] .table-th,
[dir="rtl"] .table-th,
[dir="ltr"] #Codes-table .table-th,
[dir="rtl"] #Codes-table .table-th,
[dir="ltr"] #users-table .table-th,
[dir="rtl"] #users-table .table-th,
[dir="ltr"] th.table-th,
[dir="rtl"] th.table-th,
[dir="ltr"] th[scope="col"],
[dir="rtl"] th[scope="col"] {
    text-align: center !important;
}

#users-table tbody td,
#users-table tbody .table-td,
#Codes-table tbody td,
#Codes-table tbody .table-td,
tbody td,
tbody .table-td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
}

/* Ensure flex containers in table cells don't affect alignment */
#Codes-table td .flex,
#users-table td .flex {
    width: 100%;
    justify-content: center !important;
}

/* Force hide DataTable search box only */
.dataTables_filter,
#data-table_filter,
div[id$="_filter"] {
    display: none !important;
}

/* DataTable Length Menu - Style it */
.dataTables_length {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.dataTables_length select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: white;
    font-size: 0.875rem;
}

.dark .dataTables_length select {
    background-color: #1e293b;
    border-color: #334155;
    color: white;
}

/* DataTable Info and Pagination */
.dataTables_info {
    color: #64748b;
    font-size: 0.875rem;
}

.dark .dataTables_info {
    color: #94a3b8;
}

.dataTables_paginate {
    display: inline-flex;
    gap: 0.25rem;
}

.dataTables_paginate .paginate_button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.dataTables_paginate .paginate_button:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.dataTables_paginate .paginate_button.current {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dark .dataTables_paginate .paginate_button {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.dark .dataTables_paginate .paginate_button:hover {
    background-color: #334155;
}

/* Copy Code Button */
.copy-code-btn {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.copy-code-btn:hover {
    background-color: rgba(99, 102, 241, 0.1);
    transform: scale(1.1);
}

.copy-code-btn:active {
    transform: scale(0.95);
}

.dark .copy-code-btn:hover {
    background-color: rgba(99, 102, 241, 0.2);
}

.dark .dataTables_paginate .paginate_button.current {
    background-color: #4f46e5;
    color: white;
}

/* Fixed table height for all manager tables */
table[id$="-table"] tbody {
    min-height: 400px;
    display: block;
}

table[id$="-table"] tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    height: 40px;
}

table[id$="-table"] thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

table[id$="-table"] {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Dark Mode Fixes - Cards and Modals */
.dark .card {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .card-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .card-title {
    color: #f1f5f9 !important;
}

.dark .card-text {
    color: #cbd5e1 !important;
}

/* Dark Mode - Modal Content */
.dark .modal-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .modal-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Dark Mode - Form Labels */
.dark .form-label {
    color: #cbd5e1 !important;
}

/* Dark Mode - Input Areas */
.dark .input-area {
    color: #cbd5e1 !important;
}

/* Dark Mode - Text in cards and modals */
.dark .text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate-200"]):not([class*="text-slate-300"]):not([class*="text-slate-50"]) {
    color: #f1f5f9 !important;
}

/* Dark Mode - Override text-slate-900 in all contexts */
.dark .text-slate-900.dark\:text-white,
.dark .text-slate-900.dark\:text-slate-100,
.dark .text-slate-900.dark\:text-slate-200 {
    color: #f1f5f9 !important;
}

/* Dark Mode - All elements with text-slate-900 in dashboard cards */
.dark .rounded-lg .text-slate-900,
.dark .shadow .text-slate-900,
.dark .shadow-sm .text-slate-900,
.dark .shadow-md .text-slate-900,
.dark .shadow-lg .text-slate-900 {
    color: #f1f5f9 !important;
}

/* Dark Mode - Backgrounds that should be dark */
.dark .bg-white {
    background-color: #1e293b !important;
}

/* Dark Mode - Borders */
.dark .border-slate-100 {
    border-color: #334155 !important;
}

/* Dark Mode - Select options */
.dark select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark select option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select[multiple] {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select[multiple] option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select[multiple] option:checked {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Dark Mode - All select elements in forms */
.dark form select,
.dark .card select,
.dark .card-body select,
.dark .input-area select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark form select option,
.dark .card select option,
.dark .card-body select option,
.dark .input-area select option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Dark Mode - Textarea */
.dark textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Dark Mode - Tables */
.dark table tbody {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark table tbody td {
    color: #cbd5e1 !important;
}

.dark table thead th {
    color: #f1f5f9 !important;
    background-color: #0f172a !important;
}

/* Dark Mode - Buttons in modals */
.dark .btn-secondary {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

.dark .btn-secondary:hover {
    background-color: #64748b !important;
}

/* Dark Mode - Links */
/* Moved to public/css/layout/buttons-sidebar.css for professional styling */

/* Dark Mode - Buttons text should be white, not blue */
.dark .btn,
.dark button,
.dark .btn *,
.dark button *,
.dark .btn span,
.dark button span,
.dark .btn a,
.dark button a {
    color: #ffffff !important;
}

.dark .btn:hover,
.dark button:hover,
.dark .btn:hover *,
.dark button:hover *,
.dark .btn:hover span,
.dark button:hover span {
    color: #ffffff !important;
}

/* Dark Mode - Specific button types */
.dark .btn-primary,
.dark .btn-primary *,
.dark .btn-primary span,
.dark .btn-primary a {
    color: #ffffff !important;
}

.dark .btn-secondary,
.dark .btn-secondary *,
.dark .btn-secondary span,
.dark .btn-secondary a {
    color: #ffffff !important;
}

.dark .btn-success,
.dark .btn-success *,
.dark .btn-success span,
.dark .btn-success a {
    color: #ffffff !important;
}

.dark .btn-warning,
.dark .btn-warning *,
.dark .btn-warning span,
.dark .btn-warning a {
    color: #ffffff !important;
}

.dark .btn-info,
.dark .btn-info *,
.dark .btn-info span,
.dark .btn-info a {
    color: #ffffff !important;
}

.dark .btn-dark,
.dark .btn-dark *,
.dark .btn-dark span,
.dark .btn-dark a {
    color: #ffffff !important;
}

.dark .btn-danger,
.dark .btn-danger *,
.dark .btn-danger span,
.dark .btn-danger a {
    color: #ffffff !important;
}

.dark .btn-sm,
.dark .btn-sm *,
.dark .btn-sm span,
.dark .btn-sm a {
    color: #ffffff !important;
}

/* Dark Mode - Sidebar menu titles should be white, not blue */
.dark .sidebar-menu .sidebar-menu-title,
.dark .sidebar-menu-title,
.dark .sidebar-menu>li.sidebar-menu-title {
    color: #ffffff !important;
}

.dark .sidebar-menu .sidebar-menu-title *,
.dark .sidebar-menu-title * {
    color: #ffffff !important;
}

/* Dark Mode - Mobile Modal */
.dark .mobile-data-modal .modal-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .mobile-data-modal .modal-header {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

.dark .mobile-data-modal .modal-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .mobile-data-modal .modal-footer {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-top-color: #334155 !important;
}

.dark .mobile-data-modal .modal-title {
    color: #f1f5f9 !important;
}

/* Dark Mode - Card Header */
.dark .card-header {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

/* Dark Mode - Table TD */
.dark .table-td {
    color: #cbd5e1 !important;
}

/* Dark Mode - Strong tags */
.dark strong {
    color: #f1f5f9 !important;
}

/* Dark Mode - Divs with text */
.dark div {
    color: inherit;
}

/* Dark Mode - Ensure all text in modals is visible */
.dark .modal-content * {
    color: inherit;
}

.dark .modal-content p,
.dark .modal-content div,
.dark .modal-content span {
    color: #cbd5e1 !important;
}

.dark .modal-content h3,
.dark .modal-content h4,
.dark .modal-content h5,
.dark .modal-content h6 {
    color: #f1f5f9 !important;
}

/* Dark Mode - btn-close */
.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark Mode - Ensure all text in cards is visible */
.dark .card * {
    color: inherit;
}

.dark .card p,
.dark .card div:not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-primary"]):not([class*="text-info"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .card span:not(.badge):not(.btn *):not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-primary"]):not([class*="text-info"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]) {
    color: #cbd5e1 !important;
}

/* Dark Mode - Preserve specific color classes in .card - Override gray color */
.dark .card .text-danger-500,
.dark .card span.text-danger-500,
.dark .card div.text-danger-500,
.dark .card .text-danger-400,
.dark .card span.text-danger-400,
.dark .card div.text-danger-400,
.dark .card .text-danger-600,
.dark .card span.text-danger-600,
.dark .card div.text-danger-600 {
    color: #ef4444 !important;
}

.dark .card .text-success-500,
.dark .card span.text-success-500,
.dark .card div.text-success-500,
.dark .card .text-success-400,
.dark .card span.text-success-400,
.dark .card div.text-success-400,
.dark .card .text-success-600,
.dark .card span.text-success-600,
.dark .card div.text-success-600 {
    color: #22c55e !important;
}

.dark .card .text-warning-500,
.dark .card span.text-warning-500,
.dark .card div.text-warning-500,
.dark .card .text-warning-400,
.dark .card span.text-warning-400,
.dark .card div.text-warning-400,
.dark .card .text-warning-600,
.dark .card span.text-warning-600,
.dark .card div.text-warning-600 {
    color: #eab308 !important;
}

.dark .card .text-primary-500,
.dark .card span.text-primary-500,
.dark .card div.text-primary-500,
.dark .card .text-primary-400,
.dark .card span.text-primary-400,
.dark .card div.text-primary-400,
.dark .card .text-primary-600,
.dark .card span.text-primary-600,
.dark .card div.text-primary-600 {
    color: #3b82f6 !important;
}

.dark .card .text-info-500,
.dark .card span.text-info-500,
.dark .card div.text-info-500,
.dark .card .text-info-400,
.dark .card span.text-info-400,
.dark .card div.text-info-400,
.dark .card .text-info-600,
.dark .card span.text-info-600,
.dark .card div.text-info-600 {
    color: #06b6d4 !important;
}

.dark .card .text-cyan-500,
.dark .card span.text-cyan-500,
.dark .card div.text-cyan-500,
.dark .card .text-cyan-400,
.dark .card span.text-cyan-400,
.dark .card div.text-cyan-400,
.dark .card .text-cyan-600,
.dark .card span.text-cyan-600,
.dark .card div.text-cyan-600 {
    color: #06b6d4 !important;
}

.dark .card .text-indigo-500,
.dark .card span.text-indigo-500,
.dark .card div.text-indigo-500,
.dark .card .text-indigo-400,
.dark .card span.text-indigo-400,
.dark .card div.text-indigo-400,
.dark .card .text-indigo-600,
.dark .card span.text-indigo-600,
.dark .card div.text-indigo-600 {
    color: #6366f1 !important;
}

/* Dark Mode - Dashboard cards text fixes */
.dark .bg-white.dark\:bg-slate-800 .text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .bg-white.dark\:bg-slate-800 h5.text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .bg-white.dark\:bg-slate-800 div.text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .bg-white.dark\:bg-slate-800 span.text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .bg-white.dark\:bg-slate-800 p.text-slate-900:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]) {
    color: #f1f5f9 !important;
}

/* Dark Mode - All text in dashboard cards */
.dark .bg-white.dark\:bg-slate-800,
.dark .bg-white.dark\:bg-slate-800 * {
    color: inherit;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-600 {
    color: #cbd5e1 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-500 {
    color: #94a3b8 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-400 {
    color: #cbd5e1 !important;
}

/* Dark Mode - Dashboard stats cards */
.dark [class*="bg-white"].dark\:bg-slate-800 .text-slate-900,
.dark [class*="bg-white"].dark\:bg-slate-800 h5,
.dark [class*="bg-white"].dark\:bg-slate-800 div:not(.badge):not(.btn),
.dark [class*="bg-white"].dark\:bg-slate-800 span:not(.badge):not(.btn *) {
    color: #f1f5f9 !important;
}

/* Dark Mode - Card body text in dashboard */
.dark .card-body .text-slate-900,
.dark .card-body h5:not([class*="text-cyan"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-indigo"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .card-body div:not(.badge):not(.btn):not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-primary"]):not([class*="text-info"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]),
.dark .card-body span:not(.badge):not(.btn *):not([class*="text-danger"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-primary"]):not([class*="text-info"]):not([class*="text-cyan"]):not([class*="text-indigo"]):not([class*="text-blue"]):not([class*="text-amber"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-rose"]):not([class*="text-sky"]):not([class*="text-yellow"]):not([class*="text-orange"]):not([class*="text-violet"]):not([class*="text-slate"]) {
    color: #f1f5f9 !important;
}

/* Dark Mode - Preserve specific color classes in card-body - Override white color */
.dark .card-body .text-danger-500,
.dark .card-body span.text-danger-500,
.dark .card-body span.text-danger-500,
.dark .card-body .text-danger-400,
.dark .card-body span.text-danger-400,
.dark .card-body .text-danger-600,
.dark .card-body span.text-danger-600 {
    color: #ef4444 !important;
}

.dark .card-body .text-success-500,
.dark .card-body span.text-success-500,
.dark .card-body .text-success-400,
.dark .card-body span.text-success-400,
.dark .card-body .text-success-600,
.dark .card-body span.text-success-600 {
    color: #22c55e !important;
}

.dark .card-body .text-warning-500,
.dark .card-body span.text-warning-500,
.dark .card-body .text-warning-400,
.dark .card-body span.text-warning-400,
.dark .card-body .text-warning-600,
.dark .card-body span.text-warning-600 {
    color: #eab308 !important;
}

.dark .card-body .text-primary-500,
.dark .card-body span.text-primary-500,
.dark .card-body .text-primary-400,
.dark .card-body span.text-primary-400,
.dark .card-body .text-primary-600,
.dark .card-body span.text-primary-600 {
    color: #3b82f6 !important;
}

.dark .card-body .text-info-500,
.dark .card-body span.text-info-500,
.dark .card-body .text-info-400,
.dark .card-body span.text-info-400,
.dark .card-body .text-info-600,
.dark .card-body span.text-info-600 {
    color: #06b6d4 !important;
}

.dark .card-body .text-cyan-500,
.dark .card-body span.text-cyan-500,
.dark .card-body .text-cyan-400,
.dark .card-body span.text-cyan-400,
.dark .card-body .text-cyan-600,
.dark .card-body span.text-cyan-600 {
    color: #06b6d4 !important;
}

.dark .card-body .text-indigo-500,
.dark .card-body span.text-indigo-500,
.dark .card-body .text-indigo-400,
.dark .card-body span.text-indigo-400,
.dark .card-body .text-indigo-600,
.dark .card-body span.text-indigo-600 {
    color: #6366f1 !important;
}

/* Dark Mode - Form controls in modals */
.dark .modal-content .form-control,
.dark .modal-content .form-select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Dark Mode - Labels in modals */
.dark .modal-content .form-label {
    color: #cbd5e1 !important;
}

/* Dark Mode - Text in modals that might be hardcoded */
.dark .modal-content .text-slate-600 {
    color: #cbd5e1 !important;
}

.dark .modal-content .text-slate-700 {
    color: #e2e8f0 !important;
}

/* Dark Mode - Backgrounds in modals */
.dark .modal-content .bg-slate-50 {
    background-color: #334155 !important;
}

.dark .modal-content .bg-slate-100 {
    background-color: #475569 !important;
}

/* Dark Mode - M3U Playlist Modal specific fixes */
.dark .modal-content .bg-slate-700\/50,
.dark .modal-content [class*="bg-slate-700/50"] {
    background-color: #334155 !important;
}

.dark .modal-content .bg-slate-800 {
    background-color: #1e293b !important;
}

.dark .modal-content textarea {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .modal-content textarea.text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .modal-content h6.text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .modal-content .text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .modal-content .text-slate-400 {
    color: #cbd5e1 !important;
}

.dark .modal-content .text-white {
    color: #f1f5f9 !important;
}

/* Dark Mode - Latest Updates Section in Dashboard */
.dark .bg-slate-700\/50,
.dark [class*="bg-slate-700/50"] {
    background-color: #1e293b !important;
}

.dark .card-body .bg-slate-50 {
    background-color: #1e293b !important;
}

.dark .card-body .text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .card-body .text-white {
    color: #f1f5f9 !important;
}

/* Dark Mode - Fix all select elements text color */
.dark select,
.dark select.form-control,
.dark select.form-select,
.dark #bqAll,
.dark #bqSel {
    color: #f1f5f9 !important;
    background-color: #334155 !important;
}

.dark select option,
.dark select.form-control option,
.dark select.form-select option,
.dark #bqAll option,
.dark #bqSel option {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark select option:checked,
.dark select.form-control option:checked,
.dark select.form-select option:checked,
.dark #bqAll option:checked,
.dark #bqSel option:checked {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Dark Mode - Sidebar menu titles (MAIN, MANAGEMENT, PACKAGES, OTHER) - Override blue color */
.dark .sidebar-menu .sidebar-menu-title,
.dark .sidebar-menu-title,
.dark .sidebar-menu>li.sidebar-menu-title,
.dark li.sidebar-menu-title,
.dark .sidebar-wrapper .sidebar-menu-title,
.dark .sidebar-menus .sidebar-menu-title {
    color: #ffffff !important;
}

.dark .sidebar-menu .sidebar-menu-title *,
.dark .sidebar-menu-title *,
.dark .sidebar-menu>li.sidebar-menu-title *,
.dark li.sidebar-menu-title *,
.dark .sidebar-wrapper .sidebar-menu-title *,
.dark .sidebar-menus .sidebar-menu-title * {
    color: #ffffff !important;
}

/* Override any link color inside sidebar menu titles */
.dark .sidebar-menu .sidebar-menu-title a,
.dark .sidebar-menu-title a,
.dark .sidebar-menu>li.sidebar-menu-title a,
.dark li.sidebar-menu-title a {
    color: #ffffff !important;
}

/* Dashboard Dark Mode Colors - Beautiful Color Scheme */
.dark .text-cyan-300 {
    color: #67e8f9 !important;
}

.dark .text-cyan-400 {
    color: #22d3ee !important;
}

.dark .text-blue-300 {
    color: #93c5fd !important;
}

.dark .text-blue-400 {
    color: #60a5fa !important;
}

.dark .text-amber-300 {
    color: #fcd34d !important;
}

.dark .text-amber-400 {
    color: #fbbf24 !important;
}

.dark .text-emerald-300 {
    color: #6ee7b7 !important;
}

.dark .text-emerald-400 {
    color: #34d399 !important;
}

.dark .text-red-300 {
    color: #fca5a5 !important;
}

.dark .text-red-400 {
    color: #f87171 !important;
}

.dark .text-rose-300 {
    color: #fda4af !important;
}

.dark .text-rose-400 {
    color: #fb7185 !important;
}

.dark .text-indigo-300 {
    color: #a5b4fc !important;
}

.dark .text-indigo-400 {
    color: #818cf8 !important;
}

.dark .text-sky-300 {
    color: #7dd3fc !important;
}

.dark .text-sky-400 {
    color: #38bdf8 !important;
}

.dark .text-yellow-200 {
    color: #fef08a !important;
}

.dark .text-yellow-400 {
    color: #facc15 !important;
}

.dark .text-orange-200 {
    color: #fed7aa !important;
}

.dark .text-orange-400 {
    color: #fb923c !important;
}

.dark .text-violet-200 {
    color: #ddd6fe !important;
}

.dark .text-violet-400 {
    color: #a78bfa !important;
}

.dark .text-slate-200 {
    color: #e2e8f0 !important;
}

.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

.dark .text-slate-50 {
    color: #f8fafc !important;
}

/* Dashboard Specific Color Overrides - High Specificity */
.dark .bg-white.dark\:bg-slate-800 .text-cyan-300,
.dark .bg-white.dark\:bg-slate-800 .text-cyan-400,
.dark .bg-white.dark\:bg-slate-800 div.text-cyan-300,
.dark .bg-white.dark\:bg-slate-800 div.text-cyan-400,
.dark .bg-white.dark\:bg-slate-800 span.text-cyan-300,
.dark .bg-white.dark\:bg-slate-800 span.text-cyan-400 {
    color: #67e8f9 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-cyan-400,
.dark .bg-white.dark\:bg-slate-800 div.text-cyan-400,
.dark .bg-white.dark\:bg-slate-800 span.text-cyan-400 {
    color: #22d3ee !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-blue-300,
.dark .bg-white.dark\:bg-slate-800 div.text-blue-300,
.dark .bg-white.dark\:bg-slate-800 span.text-blue-300 {
    color: #93c5fd !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-blue-400,
.dark .bg-white.dark\:bg-slate-800 div.text-blue-400,
.dark .bg-white.dark\:bg-slate-800 span.text-blue-400 {
    color: #60a5fa !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-amber-300,
.dark .bg-white.dark\:bg-slate-800 div.text-amber-300,
.dark .bg-white.dark\:bg-slate-800 span.text-amber-300 {
    color: #fcd34d !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-amber-400,
.dark .bg-white.dark\:bg-slate-800 div.text-amber-400,
.dark .bg-white.dark\:bg-slate-800 span.text-amber-400 {
    color: #fbbf24 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-emerald-300,
.dark .bg-white.dark\:bg-slate-800 div.text-emerald-300,
.dark .bg-white.dark\:bg-slate-800 span.text-emerald-300 {
    color: #6ee7b7 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-emerald-400,
.dark .bg-white.dark\:bg-slate-800 div.text-emerald-400,
.dark .bg-white.dark\:bg-slate-800 span.text-emerald-400 {
    color: #34d399 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-red-300,
.dark .bg-white.dark\:bg-slate-800 div.text-red-300,
.dark .bg-white.dark\:bg-slate-800 span.text-red-300 {
    color: #fca5a5 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-red-400,
.dark .bg-white.dark\:bg-slate-800 div.text-red-400,
.dark .bg-white.dark\:bg-slate-800 span.text-red-400 {
    color: #f87171 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-rose-300,
.dark .bg-white.dark\:bg-slate-800 div.text-rose-300,
.dark .bg-white.dark\:bg-slate-800 span.text-rose-300 {
    color: #fda4af !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-rose-400,
.dark .bg-white.dark\:bg-slate-800 div.text-rose-400,
.dark .bg-white.dark\:bg-slate-800 span.text-rose-400 {
    color: #fb7185 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-indigo-300,
.dark .bg-white.dark\:bg-slate-800 div.text-indigo-300,
.dark .bg-white.dark\:bg-slate-800 span.text-indigo-300 {
    color: #a5b4fc !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-indigo-400,
.dark .bg-white.dark\:bg-slate-800 div.text-indigo-400,
.dark .bg-white.dark\:bg-slate-800 span.text-indigo-400 {
    color: #818cf8 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-sky-300,
.dark .bg-white.dark\:bg-slate-800 div.text-sky-300,
.dark .bg-white.dark\:bg-slate-800 span.text-sky-300 {
    color: #7dd3fc !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-sky-400,
.dark .bg-white.dark\:bg-slate-800 div.text-sky-400,
.dark .bg-white.dark\:bg-slate-800 span.text-sky-400 {
    color: #38bdf8 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-yellow-200,
.dark .bg-white.dark\:bg-slate-800 div.text-yellow-200,
.dark .bg-white.dark\:bg-slate-800 span.text-yellow-200,
.dark .bg-white.dark\:bg-slate-800 h5.text-yellow-200 {
    color: #fef08a !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-yellow-400,
.dark .bg-white.dark\:bg-slate-800 div.text-yellow-400,
.dark .bg-white.dark\:bg-slate-800 span.text-yellow-400 {
    color: #facc15 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-orange-200,
.dark .bg-white.dark\:bg-slate-800 div.text-orange-200,
.dark .bg-white.dark\:bg-slate-800 span.text-orange-200,
.dark .bg-white.dark\:bg-slate-800 h5.text-orange-200 {
    color: #fed7aa !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-orange-400,
.dark .bg-white.dark\:bg-slate-800 div.text-orange-400,
.dark .bg-white.dark\:bg-slate-800 span.text-orange-400 {
    color: #fb923c !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-violet-200,
.dark .bg-white.dark\:bg-slate-800 div.text-violet-200,
.dark .bg-white.dark\:bg-slate-800 span.text-violet-200,
.dark .bg-white.dark\:bg-slate-800 h4.text-violet-200 {
    color: #ddd6fe !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-violet-400,
.dark .bg-white.dark\:bg-slate-800 div.text-violet-400,
.dark .bg-white.dark\:bg-slate-800 span.text-violet-400 {
    color: #a78bfa !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-200,
.dark .bg-white.dark\:bg-slate-800 div.text-slate-200,
.dark .bg-white.dark\:bg-slate-800 span.text-slate-200,
.dark .bg-white.dark\:bg-slate-800 p.text-slate-200 {
    color: #e2e8f0 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-300,
.dark .bg-white.dark\:bg-slate-800 div.text-slate-300,
.dark .bg-white.dark\:bg-slate-800 span.text-slate-300 {
    color: #cbd5e1 !important;
}

.dark .bg-white.dark\:bg-slate-800 .text-slate-50,
.dark .bg-white.dark\:bg-slate-800 h4.text-slate-50 {
    color: #f8fafc !important;
}

/* Dashboard card specific overrides - even higher specificity */
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-cyan-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-cyan-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-blue-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-blue-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-amber-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-amber-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-emerald-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-emerald-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-red-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-red-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-rose-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-rose-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-indigo-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-indigo-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-sky-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-sky-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-yellow-200,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-yellow-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-orange-200,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-orange-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-violet-200,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-violet-400,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-slate-200,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-slate-300,
.dark .rounded-lg.bg-white.dark\:bg-slate-800 .text-slate-50 {
    color: inherit !important;
}

/* ============================================
   DASHBOARD COLOR OVERRIDES - HIGHEST PRIORITY
   ============================================
   These rules must come LAST to override all previous rules
   Using attribute selectors to match elements with multiple color classes
*/

/* Override .dark .text-slate-900 for elements that also have colored classes */
.dark [class*="text-slate-900"][class*="text-cyan-300"] {
    color: #67e8f9 !important;
}

.dark [class*="text-slate-900"][class*="text-cyan-400"] {
    color: #22d3ee !important;
}

.dark [class*="text-slate-900"][class*="text-blue-300"] {
    color: #93c5fd !important;
}

.dark [class*="text-slate-900"][class*="text-blue-400"] {
    color: #60a5fa !important;
}

.dark [class*="text-slate-900"][class*="text-amber-300"] {
    color: #fcd34d !important;
}

.dark [class*="text-slate-900"][class*="text-amber-400"] {
    color: #fbbf24 !important;
}

.dark [class*="text-slate-900"][class*="text-emerald-300"] {
    color: #6ee7b7 !important;
}

.dark [class*="text-slate-900"][class*="text-emerald-400"] {
    color: #34d399 !important;
}

.dark [class*="text-slate-900"][class*="text-red-300"] {
    color: #fca5a5 !important;
}

.dark [class*="text-slate-900"][class*="text-red-400"] {
    color: #f87171 !important;
}

.dark [class*="text-slate-900"][class*="text-rose-300"] {
    color: #fda4af !important;
}

.dark [class*="text-slate-900"][class*="text-rose-400"] {
    color: #fb7185 !important;
}

.dark [class*="text-slate-900"][class*="text-indigo-300"] {
    color: #a5b4fc !important;
}

.dark [class*="text-slate-900"][class*="text-indigo-400"] {
    color: #818cf8 !important;
}

.dark [class*="text-slate-900"][class*="text-sky-300"] {
    color: #7dd3fc !important;
}

.dark [class*="text-slate-900"][class*="text-sky-400"] {
    color: #38bdf8 !important;
}

.dark [class*="text-slate-900"][class*="text-yellow-200"] {
    color: #fef08a !important;
}

.dark [class*="text-slate-900"][class*="text-yellow-400"] {
    color: #facc15 !important;
}

.dark [class*="text-slate-900"][class*="text-orange-200"] {
    color: #fed7aa !important;
}

.dark [class*="text-slate-900"][class*="text-orange-400"] {
    color: #fb923c !important;
}

.dark [class*="text-slate-900"][class*="text-violet-200"] {
    color: #ddd6fe !important;
}

.dark [class*="text-slate-900"][class*="text-violet-400"] {
    color: #a78bfa !important;
}

.dark [class*="text-slate-900"][class*="text-slate-200"] {
    color: #e2e8f0 !important;
}

.dark [class*="text-slate-900"][class*="text-slate-300"] {
    color: #cbd5e1 !important;
}

.dark [class*="text-slate-900"][class*="text-slate-50"] {
    color: #f8fafc !important;
}

/* Override .dark .text-slate-600 for elements that also have colored classes */
.dark [class*="text-slate-600"][class*="text-cyan-300"] {
    color: #67e8f9 !important;
}

.dark [class*="text-slate-600"][class*="text-blue-300"] {
    color: #93c5fd !important;
}

.dark [class*="text-slate-600"][class*="text-amber-300"] {
    color: #fcd34d !important;
}

.dark [class*="text-slate-600"][class*="text-emerald-300"] {
    color: #6ee7b7 !important;
}

.dark [class*="text-slate-600"][class*="text-red-300"] {
    color: #fca5a5 !important;
}

.dark [class*="text-slate-600"][class*="text-rose-300"] {
    color: #fda4af !important;
}

.dark [class*="text-slate-600"][class*="text-indigo-300"] {
    color: #a5b4fc !important;
}

.dark [class*="text-slate-600"][class*="text-sky-300"] {
    color: #7dd3fc !important;
}

.dark [class*="text-slate-600"][class*="text-yellow-200"] {
    color: #fef08a !important;
}

.dark [class*="text-slate-600"][class*="text-orange-200"] {
    color: #fed7aa !important;
}

.dark [class*="text-slate-600"][class*="text-violet-200"] {
    color: #ddd6fe !important;
}

/* Ultra-specific selectors for dashboard cards with rounded-lg */
.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-cyan-300"] {
    color: #67e8f9 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-cyan-400"] {
    color: #22d3ee !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-blue-300"] {
    color: #93c5fd !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-blue-400"] {
    color: #60a5fa !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-amber-300"] {
    color: #fcd34d !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-amber-400"] {
    color: #fbbf24 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-emerald-300"] {
    color: #6ee7b7 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-emerald-400"] {
    color: #34d399 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-red-300"] {
    color: #fca5a5 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-red-400"] {
    color: #f87171 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-rose-300"] {
    color: #fda4af !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-rose-400"] {
    color: #fb7185 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-indigo-300"] {
    color: #a5b4fc !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-indigo-400"] {
    color: #818cf8 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-sky-300"] {
    color: #7dd3fc !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-sky-400"] {
    color: #38bdf8 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-yellow-200"] {
    color: #fef08a !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-yellow-400"] {
    color: #facc15 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-orange-200"] {
    color: #fed7aa !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-orange-400"] {
    color: #fb923c !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-violet-200"] {
    color: #ddd6fe !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-violet-400"] {
    color: #a78bfa !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-slate-200"] {
    color: #e2e8f0 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-slate-300"] {
    color: #cbd5e1 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-900"][class*="text-slate-50"] {
    color: #f8fafc !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-cyan-300"] {
    color: #67e8f9 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-blue-300"] {
    color: #93c5fd !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-amber-300"] {
    color: #fcd34d !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-emerald-300"] {
    color: #6ee7b7 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-red-300"] {
    color: #fca5a5 !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-rose-300"] {
    color: #fda4af !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-indigo-300"] {
    color: #a5b4fc !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-sky-300"] {
    color: #7dd3fc !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-yellow-200"] {
    color: #fef08a !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-orange-200"] {
    color: #fed7aa !important;
}

.dark .rounded-lg[class*="bg-white"][class*="bg-slate-800"] [class*="text-slate-600"][class*="text-violet-200"] {
    color: #ddd6fe !important;
}

.page-content {
    padding-bottom: 0 !important;
    min-height: auto !important;
}

@media (min-width: 768px) {
    .page-content {
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
}

#page_layout {
    padding-bottom: 1.5rem !important;
}

#content_layout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body .page-content {
    padding-bottom: 0 !important;
    min-height: auto !important;
}
/* Sidebar Mobile Fixes */
.sidebar-wrapper.bg-white,
.sidebar-wrapper.dark\:bg-slate-800,
.sidebar-menus,
.simplebar-mask,
.simplebar-offset,
.simplebar-content-wrapper,
.simplebar-content {
    background-color: inherit !important;
}

@media (max-width: 1024px) {
    .sidebar-wrapper {
        background-color: #fff !important;
    }
    .dark .sidebar-wrapper {
        background-color: #1e293b !important; /* slate-800 */
    }
    
    .sidebar-wrapper .sidebar-menus {
        background-color: inherit !important;
    }
}

/* Force Sidebar Background via CSS Variable */
:root {
    --sidebar-bg: #fff;
}
.dark {
    --sidebar-bg: #1e293b;
}

@media (max-width: 1280px) {
    .sidebar-wrapper {
        background-color: #fff !important;
    }
    .dark .sidebar-wrapper {
        background-color: #1e293b !important;
    }
}

/* EXTREME SIDEBAR FIX FOR LIGHT MODE */
html:not(.dark) .sidebar-wrapper,
body:not(.dark) .sidebar-wrapper,
.sidebar-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

html.dark .sidebar-wrapper,
body.dark .sidebar-wrapper {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

html:not(.dark) .sidebar-menus,
html:not(.dark) .simplebar-content-wrapper {
    background-color: #ffffff !important;
}

/* FINAL FIX FOR SIMPLEBAR BACKGROUND */
html:not(.dark) .simplebar-content-wrapper,
html:not(.dark) .simplebar-mask,
html:not(.dark) .simplebar-offset {
    background-color: #ffffff !important;
    background: #ffffff !important;
}