/* ================================================================
   THIRD-PARTY LIBRARIES DARK THEME FIXES
   DataTables, Animate.css, Lightbox2, jQuery, etc.
   ================================================================ */

/* ================================================================
   DATATABLES DARK THEME
   ================================================================ */

.dataTable {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dataTable thead th {
    background-color: rgba(20, 20, 35, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dataTable tbody td {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.dataTable tbody tr {
    background-color: transparent !important;
}

.dataTable tbody tr:hover {
    background-color: rgba(0, 191, 255, 0.08) !important;
}

.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgba(20, 20, 35, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(0, 191, 255, 0.15) !important;
    border-color: rgba(0, 191, 255, 0.3) !important;
    color: #4dd9ff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #00bfff !important;
    border-color: #00bfff !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(25, 25, 40, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_processing {
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}

/* ================================================================
   LIGHTBOX2 DARK THEME
   ================================================================ */

#lightbox {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

#lightbox img {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#lightbox-page {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.lb-close,
.lb-prev,
.lb-next {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background-color: #00bfff !important;
    color: #ffffff !important;
}

.lb-details {
    background-color: rgba(20, 20, 35, 0.95) !important;
    color: #ffffff !important;
}

/* ================================================================
   LEAFLET MAPS DARK THEME
   ================================================================ */

.leaflet-container {
    background-color: #000000 !important;
    filter: brightness(0.8) contrast(1.1);
}

.leaflet-control {
    background-color: rgba(20, 20, 35, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.leaflet-control a,
.leaflet-control button {
    background-color: rgba(0, 191, 255, 0.15) !important;
    color: #00bfff !important;
    border: 1px solid rgba(0, 191, 255, 0.3) !important;
}

.leaflet-control a:hover,
.leaflet-control button:hover {
    background-color: rgba(0, 191, 255, 0.25) !important;
    border-color: #00bfff !important;
}

.leaflet-popup-content-wrapper {
    background-color: rgba(10, 10, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.leaflet-popup-tip {
    background-color: rgba(10, 10, 20, 0.95) !important;
}

.leaflet-popup-content {
    color: rgba(255, 255, 255, 0.85) !important;
}

.leaflet-popup-close-button {
    color: #ffffff !important;
    opacity: 0.8;
}

.leaflet-popup-close-button:hover {
    opacity: 1;
    color: #00bfff !important;
}

.leaflet-tooltip {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ================================================================
   SELECT2 DARK THEME
   ================================================================ */

.select2-container--default .select2-selection--single {
    background-color: rgba(25, 25, 40, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}

.select2-container--default .select2-selection--single:focus {
    border-color: rgba(0, 191, 255, 0.5) !important;
}

.select2-dropdown {
    background-color: rgba(20, 20, 35, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.select2-results__option {
    color: rgba(255, 255, 255, 0.85) !important;
}

.select2-results__option--highlighted {
    background-color: rgba(0, 191, 255, 0.15) !important;
    color: #4dd9ff !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: rgba(0, 191, 255, 0.25) !important;
    color: #4dd9ff !important;
}

/* ================================================================
   ANIMATE.CSS ADJUSTMENTS
   ================================================================ */

.animated,
.animate__animated {
    --animate-duration: 0.6s;
}

/* ================================================================
   FLATPICKR DARK THEME (Date Picker)
   ================================================================ */

.flatpickr-calendar {
    background-color: rgba(10, 10, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.flatpickr-monthNav-button {
    color: #ffffff !important;
}

.flatpickr-monthNav-button:hover {
    background-color: rgba(0, 191, 255, 0.15) !important;
    color: #00bfff !important;
}

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

.flatpickr-day {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.flatpickr-day:hover {
    background-color: rgba(0, 191, 255, 0.15) !important;
    border-color: rgba(0, 191, 255, 0.3) !important;
    color: #4dd9ff !important;
}

.flatpickr-day.selected {
    background-color: #00bfff !important;
    border-color: #00bfff !important;
    color: #ffffff !important;
}

.flatpickr-day.today {
    border-color: rgba(0, 191, 255, 0.5) !important;
    color: #00bfff !important;
}

.flatpickr-time input {
    background-color: rgba(25, 25, 40, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ================================================================
   SUMMERNOTE DARK THEME (Rich Text Editor)
   ================================================================ */

.note-editor {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.note-editor.panel {
    background-color: rgba(10, 10, 20, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.note-editable {
    background-color: rgba(25, 25, 40, 0.95) !important;
    color: #ffffff !important;
}

.note-toolbar {
    background-color: rgba(15, 15, 30, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.note-btn {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.note-btn:hover {
    background-color: rgba(0, 191, 255, 0.15) !important;
    border-color: rgba(0, 191, 255, 0.3) !important;
    color: #4dd9ff !important;
}

.note-btn.active {
    background-color: rgba(0, 191, 255, 0.25) !important;
    border-color: #00bfff !important;
    color: #4dd9ff !important;
}

/* ================================================================
   SWIPER DARK THEME
   ================================================================ */

.swiper {
    background-color: transparent !important;
}

.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(0, 191, 255, 0.15) !important;
    color: #4dd9ff !important;
    border: 1px solid rgba(0, 191, 255, 0.3) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 191, 255, 0.25) !important;
    border-color: #00bfff !important;
    color: #ffffff !important;
}

.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #00bfff !important;
}

/* ================================================================
   CUSTOM SCROLLBARS FOR ALL LIBRARIES
   ================================================================ */

.note-editable::-webkit-scrollbar,
.select2-results::-webkit-scrollbar,
.flatpickr-calendar::-webkit-scrollbar {
    width: 8px;
}

.note-editable::-webkit-scrollbar-track,
.select2-results::-webkit-scrollbar-track,
.flatpickr-calendar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.note-editable::-webkit-scrollbar-thumb,
.select2-results::-webkit-scrollbar-thumb,
.flatpickr-calendar::-webkit-scrollbar-thumb {
    background: rgba(0, 191, 255, 0.4);
    border-radius: 4px;
}

.note-editable::-webkit-scrollbar-thumb:hover,
.select2-results::-webkit-scrollbar-thumb:hover,
.flatpickr-calendar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 191, 255, 0.6);
}

/* ================================================================
   ALERT ANIMATIONS
   ================================================================ */

.alert {
    animation: slideIn 0.3s ease-out;
}

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

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

/* ================================================================
   PRINT STYLES FOR DARK THEME
   ================================================================ */

@media print {

    .no-print,
    .navbar,
    .pagination,
    .btn {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    a {
        color: #0066cc !important;
    }

    .card {
        border: 1px solid #cccccc !important;
        background: white !important;
        color: black !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black !important;
        page-break-after: avoid;
    }

    p {
        color: black !important;
    }
}

/* ================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================ */

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --primary: #00ffff;
        --bg-card: rgba(5, 5, 15, 0.98);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High DPI displays */
@media (min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}