/*
 * Dark Mode Support CSS
 * This file provides comprehensive dark mode support for the entire application
 */

/* Root Variables for Dark Mode */
:root.dark {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --border-hover: #4b5563;
}

/* Dark Mode - Body & General */
.dark body {
    background-color: #111827;
    color: #f9fafb;
}

.dark .page {
    background-color: #111827;
}

.dark .main-content {
    background-color: #111827;
}

/* Dark Mode - Cards */
.dark .card,
.dark .box,
.dark .panel {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark .card-header,
.dark .box-header {
    background-color: #1f2937;
    border-bottom-color: #374151;
    color: #f9fafb;
}

.dark .card-body,
.dark .box-body {
    background-color: #1f2937;
    color: #e5e7eb;
}

.dark .card-footer,
.dark .box-footer {
    background-color: #1f2937;
    border-top-color: #374151;
}

/* Dark Mode - Forms */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark select,
.dark textarea,
.dark .form-control,
.dark .form-input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9ca3af;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #6366f1;
    background-color: #374151;
    color: #f9fafb;
}

/* Dark Mode - Buttons */
.dark .btn-secondary,
.dark .button-secondary {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

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

/* Dark Mode - Tables */
.dark table,
.dark .table {
    color: #e5e7eb;
}

.dark table thead,
.dark .table thead {
    background-color: #1f2937;
    border-bottom-color: #374151;
}

.dark table th,
.dark .table th {
    color: #f9fafb;
    border-color: #374151;
}

.dark table td,
.dark .table td {
    border-color: #374151;
    color: #e5e7eb;
}

.dark table tbody tr:hover,
.dark .table tbody tr:hover {
    background-color: #374151;
}

.dark table tbody tr:nth-child(even),
.dark .table tbody tr:nth-child(even) {
    background-color: #1f2937;
}

.dark table tbody tr:nth-child(odd),
.dark .table tbody tr:nth-child(odd) {
    background-color: #111827;
}

/* Dark Mode - Dropdowns */
.dark .dropdown-menu,
.dark .ti-dropdown-menu {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .dropdown-item,
.dark .ti-dropdown-item {
    color: #e5e7eb;
}

.dark .dropdown-item:hover,
.dark .ti-dropdown-item:hover {
    background-color: #374151;
    color: #f9fafb;
}

.dark .dropdown-divider {
    border-color: #374151;
}

/* Dark Mode - Modals */
.dark .modal-content,
.dark .ti-modal-content {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark .modal-header,
.dark .ti-modal-header {
    background-color: #1f2937;
    border-bottom-color: #374151;
    color: #f9fafb;
}

.dark .modal-footer,
.dark .ti-modal-footer {
    background-color: #1f2937;
    border-top-color: #374151;
}

/* Dark Mode - Badges */
.dark .badge {
    background-color: #374151;
    color: #f9fafb;
}

/* Dark Mode - Alerts */
.dark .alert {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

/* Dark Mode - Breadcrumbs */
.dark .breadcrumb {
    background-color: #1f2937;
}

.dark .breadcrumb-item,
.dark .breadcrumb-item a {
    color: #9ca3af;
}

.dark .breadcrumb-item.active {
    color: #f9fafb;
}

/* Dark Mode - Pagination */
.dark .pagination .page-link {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.dark .pagination .page-link:hover {
    background-color: #374151;
    color: #f9fafb;
}

.dark .pagination .page-item.active .page-link {
    background-color: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

/* Dark Mode - Borders & Dividers */
.dark hr,
.dark .divider {
    border-color: #374151;
}

/* Dark Mode - Text Colors */
.dark .text-muted,
.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-600 {
    color: #6b7280 !important;
}

.dark .text-gray-700 {
    color: #9ca3af !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-900 {
    color: #f9fafb !important;
}

/* Dark Mode - Hover Effects */
.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important;
}

/* Dark Mode - Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Dark Mode - Loader */
.dark #loader {
    background-color: #111827;
}

/* Dark Mode - Sidebar */
.dark .app-sidebar {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-right-color: #374151;
}

/* Dark Mode - Back to Top Button */
.dark .scrollToTop {
    background-color: #6366f1;
    color: #fff;
}

.dark .scrollToTop:hover {
    background-color: #4f46e5;
}

/* Dark Mode - Custom Animations */
.dark .animate-pulse {
    animation: pulse-dark 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dark {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
}

/* Dark Mode - Filament Compatibility */
.dark .fi-input,
.dark .fi-select,
.dark .fi-textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .fi-label {
    color: #e5e7eb !important;
}

.dark .fi-dropdown-list {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .fi-dropdown-list-item:hover {
    background-color: #374151 !important;
}

/* Dark Mode - Box & Main Content Card */
.dark .box,
.dark .main-content-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .box-header {
    background-color: #1f2937 !important;
    border-bottom-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .box-body {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

.dark .box-title {
    color: #f9fafb !important;
}

/* Dark Mode - Breadcrumbs Override */
.dark .breadcrumb {
    background-color: transparent !important;
}

.dark .breadcrumb-item a {
    color: #9ca3af !important;
}

.dark .breadcrumb-item a:hover {
    color: #6366f1 !important;
}

.dark .breadcrumb-item.active {
    color: #f9fafb !important;
}

/* Dark Mode - Page Header */
.dark .page-header-breadcrumb {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Dark Mode - Welcome Section */
.dark .welcome-section {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}

/* Dark Mode - Charts */
.dark .apexcharts-canvas {
    background-color: transparent !important;
}

.dark .apexcharts-text {
    fill: #e5e7eb !important;
}

.dark .apexcharts-legend-text {
    color: #e5e7eb !important;
}

.dark .apexcharts-gridline {
    stroke: #374151 !important;
}

/* Dark Mode - Avatar */
.dark .avatar {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

/* Dark Mode - Text Muted */
.dark .text-textmuted,
.dark .textmuted {
    color: #9ca3af !important;
}

/* Dark Mode - Links */
.dark a {
    color: #9ca3af;
}

.dark a:hover {
    color: #6366f1;
}

/* Dark Mode - Icons */
.dark i,
.dark svg {
    color: inherit;
}

/* Dark Mode - Progress Bars */
.dark .progress {
    background-color: #374151 !important;
}

.dark .progress-bar {
    background-color: #6366f1 !important;
}

/* Dark Mode - List Groups */
.dark .list-group-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .list-group-item:hover {
    background-color: #374151 !important;
}

/* Dark Mode - Nav Tabs */
.dark .nav-tabs {
    border-bottom-color: #374151 !important;
}

.dark .nav-tabs .nav-link {
    color: #9ca3af !important;
    border-color: transparent !important;
}

.dark .nav-tabs .nav-link:hover {
    color: #6366f1 !important;
    border-color: #374151 !important;
}

.dark .nav-tabs .nav-link.active {
    color: #6366f1 !important;
    background-color: #1f2937 !important;
    border-color: #374151 #374151 transparent !important;
}

/* Dark Mode - Tab Content */
.dark .tab-content {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* Dark Mode - Well & Jumbotron */
.dark .well,
.dark .jumbotron {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Dark Mode - Panel */
.dark .panel {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .panel-heading {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .panel-body {
    color: #e5e7eb !important;
}

/* Dark Mode - Custom Select */
.dark .choices__inner {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .choices__list--dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .choices__item {
    color: #e5e7eb !important;
}

.dark .choices__item--selectable:hover {
    background-color: #374151 !important;
}

/* Dark Mode - Flatpickr */
.dark .flatpickr-calendar {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .flatpickr-months {
    background-color: #374151 !important;
}

.dark .flatpickr-current-month {
    color: #f9fafb !important;
}

.dark .flatpickr-day {
    color: #e5e7eb !important;
}

.dark .flatpickr-day:hover {
    background-color: #374151 !important;
}

.dark .flatpickr-day.selected {
    background-color: #6366f1 !important;
    color: #fff !important;
}

/* Dark Mode - Simplebar */
.dark .simplebar-content {
    color: #e5e7eb !important;
}

.dark .simplebar-scrollbar::before {
    background-color: #4b5563 !important;
}

/* Dark Mode - Preline Components */
.dark .hs-accordion-toggle {
    color: #e5e7eb !important;
}

.dark .hs-accordion-toggle:hover {
    color: #6366f1 !important;
}

.dark .hs-accordion-content {
    background-color: #1f2937 !important;
}

/* Dark Mode - Custom Classes */
.dark .bg-light {
    background-color: #374151 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

.dark .bg-gray-200 {
    background-color: #374151 !important;
}

.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-900 {
    color: #f9fafb !important;
}

/* Dark Mode - Hover States */
.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important;
}

.dark .hover\:text-gray-900:hover {
    color: #f9fafb !important;
}

/* Dark Mode - Focus States */
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #6366f1 !important;
    ring-color: #6366f1 !important;
}

/* Dark Mode - Disabled States */
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled,
.dark button:disabled {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

/* Dark Mode - Placeholder Text */
.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Dark Mode - Ring Colors */
.dark .ring-indigo-200 {
    --tw-ring-color: #6366f1 !important;
}

.dark .ring-gray-300 {
    --tw-ring-color: #4b5563 !important;
}

/* Dark Mode - Alert Messages */
.dark .alert {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .alert-success {
    background-color: #064e3b !important;
    border-color: #047857 !important;
    color: #a7f3d0 !important;
}

.dark .alert-danger,
.dark .alert-error {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}

.dark .alert-warning {
    background-color: #78350f !important;
    border-color: #92400e !important;
    color: #fde68a !important;
}

.dark .alert-info {
    background-color: #1e3a8a !important;
    border-color: #1e40af !important;
    color: #bfdbfe !important;
}

/* Dark Mode - Text Classes Override */
.dark .text-black {
    color: #f9fafb !important;
}

.dark .text-white {
    color: #ffffff !important;
}

/* Dark Mode - Background Classes Override */
.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .bg-black {
    background-color: #000000 !important;
}

/* Dark Mode - Specific Component Classes */
.dark .landing-body,
.dark .landing-page-wrapper,
.dark .landing-main {
    background-color: #111827 !important;
    color: #f9fafb !important;
}

.dark .landing-main-footer {
    background-color: #1f2937 !important;
    border-top-color: #374151 !important;
}

/* Dark Mode - Container Fluid */
.dark .container-fluid {
    background-color: transparent !important;
}

/* Dark Mode - Grid & Flex Layouts */
.dark .grid,
.dark .flex {
    color: inherit;
}

/* Dark Mode - Headings */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #f9fafb !important;
}

/* Dark Mode - Paragraph */
.dark p {
    color: #e5e7eb;
}

/* Dark Mode - Lists */
.dark ul,
.dark ol {
    color: #e5e7eb;
}

/* Dark Mode - Code & Pre */
.dark code,
.dark pre {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

/* Dark Mode - Blockquote */
.dark blockquote {
    background-color: #1f2937 !important;
    border-left-color: #6366f1 !important;
    color: #e5e7eb !important;
}

/* Dark Mode - Images */
.dark img {
    opacity: 0.95;
}

.dark img:hover {
    opacity: 1;
}

/* Dark Mode - Video & Iframe */
.dark video,
.dark iframe {
    border-color: #374151 !important;
}

/* Dark Mode - Custom Scrollbar Enhanced */
.dark .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Dark Mode - Spinner & Loading */
.dark .spinner,
.dark .loading {
    border-color: #374151 #374151 #6366f1 #6366f1 !important;
}

/* Dark Mode - Overlay */
.dark .overlay,
.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Dark Mode - Shadow Override */
.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow,
.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}

/* Dark Mode - Divider */
.dark .divider,
.dark .separator {
    border-color: #374151 !important;
    background-color: #374151 !important;
}

/* Dark Mode - Tooltip */
.dark .tooltip {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

/* Dark Mode - Popover */
.dark .popover {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .popover-header {
    background-color: #374151 !important;
    border-bottom-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Dark Mode - Toast Notifications */
.dark .toast {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .toast-header {
    background-color: #374151 !important;
    border-bottom-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Dark Mode - Accordion */
.dark .accordion-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .accordion-header {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .accordion-button {
    background-color: #374151 !important;
    color: #f9fafb !important;
}

.dark .accordion-button:not(.collapsed) {
    background-color: #4b5563 !important;
    color: #6366f1 !important;
}

.dark .accordion-body {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* Dark Mode - Collapse */
.dark .collapse {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

/* Dark Mode - Carousel */
.dark .carousel-item {
    background-color: #1f2937 !important;
}

.dark .carousel-caption {
    background-color: rgba(31, 41, 55, 0.8) !important;
    color: #f9fafb !important;
}

.dark .carousel-indicators button {
    background-color: #9ca3af !important;
}

.dark .carousel-indicators .active {
    background-color: #6366f1 !important;
}

/* Dark Mode - Offcanvas */
.dark .offcanvas {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

.dark .offcanvas-header {
    background-color: #374151 !important;
    border-bottom-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Dark Mode - Placeholder */
.dark .placeholder {
    background-color: #374151 !important;
}

/* Dark Mode - Spinner Border */
.dark .spinner-border {
    border-color: #374151 !important;
    border-right-color: #6366f1 !important;
}

/* Dark Mode - Specific Utility Classes */
.dark .rounded-lg,
.dark .rounded-xl,
.dark .rounded-2xl,
.dark .rounded-3xl {
    border-color: inherit;
}

/* Dark Mode - Text Selection */
.dark ::selection {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

.dark ::-moz-selection {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Dark Mode - Transitions */
.dark * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Dark Mode - Print Styles */
@media print {
    .dark {
        background-color: white !important;
        color: black !important;
    }
}

/* Dark Mode - Responsive Utilities */
@media (max-width: 640px) {
    .dark .mobile-dark {
        background-color: #111827 !important;
    }
}

/* Dark Mode - Focus Visible */
.dark *:focus-visible {
    outline-color: #6366f1 !important;
}

/* Dark Mode - Required Fields */
.dark input:required,
.dark select:required,
.dark textarea:required {
    border-left: 3px solid #6366f1 !important;
}

/* Dark Mode - Invalid Fields */
.dark input:invalid,
.dark select:invalid,
.dark textarea:invalid {
    border-color: #ef4444 !important;
}

/* Dark Mode - Valid Fields */
.dark input:valid,
.dark select:valid,
.dark textarea:valid {
    border-color: #10b981 !important;
}