/* Dark Mode Toggle Button */
.dark-mode-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dark-mode-toggle i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover i {
    transform: scale(1.1);
}

/* ============================================
   DARK MODE STYLES - ESTILO MEDIAVIDA
   Paleta de grises neutros
   ============================================ */

/* Color Variables Reference:
   --bg-darkest: #121212      (fondo principal)
   --bg-dark: #1a1a1a         (cards, sidebar)
   --bg-medium: #222222       (headers, inputs)
   --bg-light: #2a2a2a        (hover states)
   --bg-lighter: #333333      (elementos destacados)
   --border: #3a3a3a          (bordes)
   --border-light: #444444    (bordes hover)
   --text-primary: #f0f0f0    (texto principal - más brillante)
   --text-secondary: #c5c5c5  (texto secundario)
   --text-muted: #909090      (texto muted)
   --accent: #7eb8da          (enlaces, acentos)
   --accent-hover: #9ecbea    (enlaces hover)
   --primary: #5a9fd4         (botones primarios)
   --table-odd: #242424       (filas impares tabla)
   --table-even: #1a1a1a      (filas pares tabla)
*/

body.dark-mode {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
}

/* ============================================
   GENERAL TEXT AND COLORS
   ============================================ */

body.dark-mode,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
    color: #f0f0f0 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode .text-muted {
    color: #909090 !important;
}

body.dark-mode .text-dark {
    color: #f0f0f0 !important;
}

body.dark-mode .text-secondary {
    color: #c5c5c5 !important;
}

body.dark-mode .text-body {
    color: #f0f0f0 !important;
}

body.dark-mode label {
    color: #f0f0f0 !important;
}

body.dark-mode a {
    color: #7eb8da;
}

body.dark-mode a:hover {
    color: #9ecbea;
}

body.dark-mode small,
body.dark-mode .small {
    color: #c5c5c5 !important;
}

body.dark-mode strong,
body.dark-mode b {
    color: #ffffff !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

body.dark-mode .sidebar {
    background-color: #1a1a1a !important;
}

body.dark-mode .sidebar .nav-link {
    color: #c5c5c5 !important;
}

body.dark-mode .sidebar .nav-link:hover,
body.dark-mode .sidebar .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .sidebar .nav-title {
    color: #707070 !important;
}

body.dark-mode .sidebar-pills .nav-link.active {
    background-color: #2a2a2a !important;
}

body.dark-mode .sidebar .nav-dropdown.open {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   HEADER / NAVBAR
   ============================================ */

body.dark-mode .app-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333333 !important;
}

body.dark-mode .app-header .nav-link {
    color: #c5c5c5 !important;
}

body.dark-mode .app-header .nav-link:hover {
    color: #ffffff !important;
}

body.dark-mode .navbar {
    background-color: #1a1a1a !important;
}

body.dark-mode .navbar-brand {
    color: #ffffff !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

body.dark-mode .app-body {
    background-color: #121212 !important;
}

body.dark-mode .main {
    background-color: #121212 !important;
}

body.dark-mode .container-fluid {
    background-color: transparent !important;
}

/* ============================================
   CARDS AND BOXES
   ============================================ */

body.dark-mode .card {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .card-header {
    background-color: #222222 !important;
    border-bottom-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .card-header h3,
body.dark-mode .card-header .card-title {
    color: #f0f0f0 !important;
}

body.dark-mode .card-body {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .card-footer {
    background-color: #222222 !important;
    border-top-color: #333333 !important;
    color: #f0f0f0 !important;
}

/* ============================================
   TABLES - GENERAL
   ============================================ */

body.dark-mode .table {
    color: #f0f0f0 !important;
    background-color: transparent !important;
}

body.dark-mode .table thead th {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
    font-weight: 600;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .table tbody tr {
    background-color: #1a1a1a !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #242424 !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #1a1a1a !important;
}

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

/* ============================================
   DATATABLES - COMPLETE STYLING
   ============================================ */

body.dark-mode .dataTable {
    color: #f0f0f0 !important;
}

body.dark-mode .dataTable thead th {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
    font-weight: 600;
}

body.dark-mode .dataTable tbody tr {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .dataTable tbody tr:nth-of-type(odd) {
    background-color: #242424 !important;
}

body.dark-mode .dataTable tbody tr:nth-of-type(even) {
    background-color: #1a1a1a !important;
}

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

body.dark-mode .dataTable tbody td {
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .dataTable tbody td a {
    color: #7eb8da !important;
}

/* DataTables wrapper elements */
body.dark-mode .dataTables_wrapper {
    color: #f0f0f0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #f0f0f0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length label,
body.dark-mode .dataTables_wrapper .dataTables_filter label {
    color: #f0f0f0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

/* DataTables sorting icons */
body.dark-mode .dataTable thead .sorting:before,
body.dark-mode .dataTable thead .sorting:after,
body.dark-mode .dataTable thead .sorting_asc:before,
body.dark-mode .dataTable thead .sorting_asc:after,
body.dark-mode .dataTable thead .sorting_desc:before,
body.dark-mode .dataTable thead .sorting_desc:after {
    color: #909090 !important;
}

/* DataTables empty row */
body.dark-mode .dataTable tbody .dataTables_empty {
    color: #808080 !important;
}

/* DataTables row selection */
body.dark-mode .dataTable tbody tr.selected {
    background-color: #2d3a45 !important;
}

/* ============================================
   BUTTONS - ALL TYPES
   ============================================ */

/* Primary buttons (Añadir, Create, etc.) */
body.dark-mode .btn-primary {
    background-color: #5a9fd4 !important;
    border-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-primary:hover {
    background-color: #4a8fc4 !important;
    border-color: #4a8fc4 !important;
    color: #ffffff !important;
}

/* Secondary buttons */
body.dark-mode .btn-secondary {
    background-color: #3a3a3a !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
}

body.dark-mode .btn-secondary:hover {
    background-color: #4a4a4a !important;
    border-color: #5a5a5a !important;
    color: #ffffff !important;
}

/* Light buttons */
body.dark-mode .btn-light {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .btn-light:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Default buttons */
body.dark-mode .btn-default {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .btn-default:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Link buttons */
body.dark-mode .btn-link {
    color: #7eb8da !important;
}

body.dark-mode .btn-link:hover {
    color: #9ecbea !important;
}

/* Outline buttons */
body.dark-mode .btn-outline-primary {
    color: #7eb8da !important;
    border-color: #7eb8da !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-outline-secondary {
    color: #b0b0b0 !important;
    border-color: #4a4a4a !important;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* Success, Danger, Warning, Info buttons */
body.dark-mode .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #121212 !important;
}

body.dark-mode .btn-info {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

/* Button groups */
body.dark-mode .btn-group .btn {
    border-color: #3a3a3a !important;
}

/* ============================================
   FORMS
   ============================================ */

body.dark-mode .form-control {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .form-control:focus {
    background-color: #2a2a2a !important;
    border-color: #5a9fd4 !important;
    color: #f0f0f0 !important;
    box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: #707070 !important;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
    background-color: #1e1e1e !important;
    color: #808080 !important;
}

body.dark-mode .input-group-text {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #c5c5c5 !important;
}

body.dark-mode select.form-control {
    background-color: #222222 !important;
    color: #f0f0f0 !important;
}

body.dark-mode select.form-control option {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .custom-select {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .form-group label {
    color: #f0f0f0 !important;
}

body.dark-mode .form-text {
    color: #808080 !important;
}

/* Checkboxes and radios */
body.dark-mode .custom-control-label {
    color: #f0f0f0 !important;
}

body.dark-mode .custom-control-label::before {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
}

/* ============================================
   SELECT2
   ============================================ */

body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-color: transparent !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #707070 !important;
}

body.dark-mode .select2-dropdown {
    background-color: #1a1a1a !important;
    border-color: #3a3a3a !important;
}

body.dark-mode .select2-container--default .select2-results__option {
    color: #f0f0f0 !important;
    background-color: #1a1a1a !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #333333 !important;
}

body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #c5c5c5 !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

body.dark-mode .dropdown-menu {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

body.dark-mode .dropdown-item {
    color: #f0f0f0 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item:active {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .dropdown-divider {
    border-top-color: #333333 !important;
}

body.dark-mode .dropdown-header {
    color: #808080 !important;
}

/* ============================================
   MODALS
   ============================================ */

body.dark-mode .modal-content {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #333333 !important;
    background-color: #222222 !important;
}

body.dark-mode .modal-header .modal-title {
    color: #f0f0f0 !important;
}

body.dark-mode .modal-body {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .modal-footer {
    border-top-color: #333333 !important;
    background-color: #1a1a1a !important;
}

body.dark-mode .close {
    color: #f0f0f0 !important;
    text-shadow: none !important;
}

body.dark-mode .close:hover {
    color: #ffffff !important;
}

body.dark-mode .modal-backdrop {
    background-color: #000000 !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

body.dark-mode .breadcrumb {
    background-color: transparent !important;
}

body.dark-mode .breadcrumb-item a {
    color: #7eb8da !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #c5c5c5 !important;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #606060 !important;
}

/* ============================================
   PAGINATION
   ============================================ */

body.dark-mode .page-link {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .page-link:hover {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #5a9fd4 !important;
    border-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #505050 !important;
}

/* Fix Laravel pagination SVG arrows size */
.pagination svg,
nav[role="navigation"] svg {
    width: 1rem !important;
    height: 1rem !important;
    display: inline-block !important;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .pagination svg {
    fill: #f0f0f0 !important;
}

body.dark-mode .page-item.disabled svg {
    fill: #505050 !important;
}

/* ============================================
   ALERTS
   ============================================ */

body.dark-mode .alert {
    border-color: #333333 !important;
}

body.dark-mode .alert-info {
    background-color: #1a2e3a !important;
    border-color: #17a2b8 !important;
    color: #d1ecf1 !important;
}

body.dark-mode .alert-success {
    background-color: #1a2e1a !important;
    border-color: #28a745 !important;
    color: #d4edda !important;
}

body.dark-mode .alert-warning {
    background-color: #2e2a1a !important;
    border-color: #ffc107 !important;
    color: #fff3cd !important;
}

body.dark-mode .alert-danger {
    background-color: #2e1a1a !important;
    border-color: #dc3545 !important;
    color: #f8d7da !important;
}

/* ============================================
   FOOTER
   ============================================ */

body.dark-mode .app-footer {
    background-color: #1a1a1a !important;
    border-top-color: #333333 !important;
    color: #c5c5c5 !important;
}

/* ============================================
   BACKPACK SPECIFIC ELEMENTS
   ============================================ */

/* Background utilities override */
body.dark-mode .bg-light {
    background-color: #1a1a1a !important;
}

body.dark-mode .bg-white {
    background-color: #1a1a1a !important;
}

body.dark-mode .border {
    border-color: #333333 !important;
}

body.dark-mode hr {
    border-top-color: #333333 !important;
}

/* Widgets */
body.dark-mode .small-box {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .small-box h3,
body.dark-mode .small-box p {
    color: #ffffff !important;
}

body.dark-mode .info-box {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

/* Filters navbar */
body.dark-mode .navbar-filters {
    background-color: #1a1a1a !important;
}

body.dark-mode .navbar-filters .nav-link {
    color: #c5c5c5 !important;
}

body.dark-mode .navbar-filters .navbar-toggler,
body.dark-mode .navbar-filters .navbar-toggler span,
body.dark-mode .navbar-filters button.navbar-toggler,
body.dark-mode nav.navbar-filters .navbar-toggler,
body.dark-mode nav.navbar.navbar-filters button.navbar-toggler {
    color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}

body.dark-mode .navbar-filters .navbar-toggler:hover,
body.dark-mode nav.navbar.navbar-filters button.navbar-toggler:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Force filters toggler text color */
body.dark-mode .navbar-filters > button {
    color: #f0f0f0 !important;
}

body.dark-mode .navbar-filters .navbar-toggler,
body.dark-mode .navbar-filters .navbar-toggler span,
body.dark-mode .navbar-filters button.navbar-toggler,
body.dark-mode nav.navbar-filters .navbar-toggler,
body.dark-mode nav.navbar.navbar-filters button.navbar-toggler {
    color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

body.dark-mode .navbar-filters .navbar-toggler:hover,
body.dark-mode nav.navbar.navbar-filters button.navbar-toggler:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Force filters toggler text color */
body.dark-mode .navbar-filters > button {
    color: #e0e0e0 !important;
}

/* Backpack list view action buttons */
body.dark-mode .crud-table-actions .btn {
    color: #f0f0f0 !important;
}

body.dark-mode .crud-table-actions .btn:hover {
    color: #ffffff !important;
}

/* Top button stack (Add New, etc.) */
body.dark-mode #crudTable_wrapper .top-buttons .btn,
body.dark-mode .top-buttons .btn {
    color: #ffffff !important;
}

/* Backpack CRUD headers */
body.dark-mode .crud-form .card-header,
body.dark-mode #crud-form .card-header {
    background-color: #222222 !important;
    color: #f0f0f0 !important;
}

/* Nav tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: #333333 !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #c5c5c5 !important;
    border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #333333 #333333 transparent !important;
    color: #ffffff !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: #1a1a1a !important;
    border-color: #333333 #333333 #1a1a1a !important;
    color: #ffffff !important;
}

/* Nav pills */
body.dark-mode .nav-pills .nav-link {
    color: #c5c5c5 !important;
}

body.dark-mode .nav-pills .nav-link.active {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

/* List groups */
body.dark-mode .list-group-item {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .list-group-item:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .list-group-item.active {
    background-color: #5a9fd4 !important;
    border-color: #5a9fd4 !important;
}

/* Badges */
body.dark-mode .badge-secondary {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .badge-light {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}

/* ============================================
   SWAL (SWEET ALERT)
   ============================================ */

body.dark-mode .swal-modal {
    background-color: #1a1a1a !important;
}

body.dark-mode .swal-title,
body.dark-mode .swal-text {
    color: #f0f0f0 !important;
}

body.dark-mode .swal-footer {
    background-color: #222222 !important;
}

/* Swal buttons (used in Bootstrap modals) */
body.dark-mode .swal-button--cancel {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .swal-button--cancel:hover {
    background-color: #4a4a4a !important;
}

/* ============================================
   SWEETALERT2 (Swal.fire)
   ============================================ */

body.dark-mode .swal2-popup {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

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

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

body.dark-mode .swal2-select {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .swal2-select option {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .swal2-input::placeholder,
body.dark-mode .swal2-textarea::placeholder {
    color: #707070 !important;
}

body.dark-mode .swal2-validation-message {
    background-color: #2e1a1a !important;
    color: #f8d7da !important;
}

body.dark-mode .swal2-confirm {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .swal2-cancel {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .swal2-deny {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Swal buttons (used in Bootstrap modals) */
body.dark-mode .swal-button--cancel {
    background-color: #3a3a5a !important;
    color: #ffffff !important;
}

body.dark-mode .swal-button--cancel:hover {
    background-color: #4a4a6a !important;
}

/* ============================================
   SWEETALERT2 (Swal.fire)
   ============================================ */

body.dark-mode .swal2-popup {
    background-color: #16213e !important;
    color: #e0e0e0 !important;
}

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

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

body.dark-mode .swal2-select {
    background-color: #0f3460 !important;
    border-color: #2a2a4a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .swal2-select option {
    background-color: #16213e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea {
    background-color: #0f3460 !important;
    border-color: #2a2a4a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .swal2-input::placeholder,
body.dark-mode .swal2-textarea::placeholder {
    color: #808080 !important;
}

body.dark-mode .swal2-validation-message {
    background-color: #3a1a1a !important;
    color: #f8d7da !important;
}

body.dark-mode .swal2-confirm {
    background-color: #4a90d9 !important;
    color: #ffffff !important;
}

body.dark-mode .swal2-cancel {
    background-color: #3a3a5a !important;
    color: #ffffff !important;
}

body.dark-mode .swal2-deny {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* ============================================
   NOTY NOTIFICATIONS
   ============================================ */

body.dark-mode .noty_theme__mint.noty_type__info {
    background-color: #1a2e3a !important;
}

body.dark-mode .noty_theme__mint.noty_type__success {
    background-color: #1a2e1a !important;
}

body.dark-mode .noty_theme__mint.noty_type__warning {
    background-color: #2e2a1a !important;
}

body.dark-mode .noty_theme__mint.noty_type__error {
    background-color: #2e1a1a !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */

body.dark-mode .tooltip-inner {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .bs-tooltip-top .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #2a2a2a !important;
}

body.dark-mode .bs-tooltip-bottom .arrow::before,
body.dark-mode .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #2a2a2a !important;
}

/* ============================================
   POPOVERS
   ============================================ */

body.dark-mode .popover {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

body.dark-mode .popover-header {
    background-color: #222222 !important;
    border-bottom-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .popover-body {
    color: #f0f0f0 !important;
}

/* ============================================
   CODE AND PRE
   ============================================ */

body.dark-mode code {
    background-color: #2a2a2a !important;
    color: #e06c75 !important;
}

body.dark-mode pre {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #333333 !important;
}

/* ============================================
   BOX SHADOWS
   ============================================ */

body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-lg {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* ============================================
   TRANSITIONS
   ============================================ */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .sidebar, .app-header, .modal-content, .dropdown-menu,
.form-control, .table, .page-link, .btn, .alert, .badge {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   DARK MODE TOGGLE ICON
   ============================================ */

body.dark-mode .dark-mode-toggle .la-moon {
    display: none;
}

body.dark-mode .dark-mode-toggle .la-sun {
    display: inline-block;
    color: #ffc107 !important;
}

body:not(.dark-mode) .dark-mode-toggle .la-sun {
    display: none;
}

body:not(.dark-mode) .dark-mode-toggle .la-moon {
    display: inline-block;
}

/* ============================================
   ADDITIONAL BACKPACK CRUD FIXES
   ============================================ */

/* Table wrapper and all contents */
body.dark-mode #crudTable_wrapper,
body.dark-mode .table-responsive {
    background-color: transparent !important;
}

/* Ensure all table text is visible */
body.dark-mode #crudTable td,
body.dark-mode #crudTable th,
body.dark-mode #crudTable tbody td *,
body.dark-mode .dataTable td,
body.dark-mode .dataTable th,
body.dark-mode .dataTable tbody td * {
    color: #f0f0f0 !important;
}

/* Links inside tables */
body.dark-mode #crudTable td a,
body.dark-mode .dataTable td a {
    color: #7eb8da !important;
}

/* Action buttons in table */
body.dark-mode .crud-table-actions,
body.dark-mode .crud-table-actions a,
body.dark-mode .crud-table-actions button {
    color: #f0f0f0 !important;
}

/* Export buttons */
body.dark-mode .dt-buttons .btn,
body.dark-mode .dt-buttons .dt-button {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .dt-buttons .btn:hover,
body.dark-mode .dt-buttons .dt-button:hover {
    background-color: #3a3a3a !important;
}

/* Column visibility dropdown */
body.dark-mode .dt-button-collection {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

body.dark-mode .dt-button-collection .dt-button {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

body.dark-mode .dt-button-collection .dt-button:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .dt-button-collection .dt-button.active {
    background-color: #5a9fd4 !important;
}

/* ============================================
   BLINK / HIGHLIGHT ROWS (Orders)
   ============================================ */

/* Override the default blink animation colors for dark mode */
body.dark-mode .highlight-row {
    background-color: #2a3a2a !important;
}

body.dark-mode .highlight-row td {
    color: #ffffff !important;
}

/* Override the original @keyframes when in dark mode by redefining it */
body.dark-mode .blink {
    animation-name: blink-animation-dark !important;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes blink-animation-dark {
    0%, 100% {
        background-color: #2a4a2a;
    }
    50% {
        background-color: #3a6a3a;
    }
}

/* Ensure text in blinking cells is always visible */
body.dark-mode .blink,
body.dark-mode .blink *,
body.dark-mode td.blink,
body.dark-mode td.blink * {
    color: #ffffff !important;
}

body.dark-mode .highlight-row a,
body.dark-mode .highlight-row span,
body.dark-mode .highlight-row div,
body.dark-mode .highlight-row p,
body.dark-mode .blink a,
body.dark-mode .blink span,
body.dark-mode .blink div,
body.dark-mode .blink p {
    color: #ffffff !important;
}

body.dark-mode .highlight-row .btn,
body.dark-mode .blink .btn {
    color: #ffffff !important;
}

/* ============================================
   "VOLVER AL LISTADO DE X" LINK FIX
   ============================================ */

/* Ensure spans inside links inherit the link color */
body.dark-mode a span,
body.dark-mode a small,
body.dark-mode small a span {
    color: inherit !important;
}

body.dark-mode h2 small a,
body.dark-mode h2 small a span,
body.dark-mode .container-fluid h2 small a,
body.dark-mode .container-fluid h2 small a span {
    color: #7eb8da !important;
}

body.dark-mode h2 small a:hover,
body.dark-mode h2 small a:hover span {
    color: #9ecbea !important;
}

/* ============================================
   SELECT_AND_ORDER FIELD (DRAG-DROP LISTS)
   ============================================ */

body.dark-mode .select_and_order_all,
body.dark-mode .select_and_order_selected {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

body.dark-mode .select_and_order_all li,
body.dark-mode .select_and_order_selected li {
    background-color: #222222 !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select_and_order_all li {
    background-color: #1e1e1e !important;
    color: #c5c5c5 !important;
}

body.dark-mode .select_and_order_all li:hover,
body.dark-mode .select_and_order_selected li:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .select_and_order_all li i,
body.dark-mode .select_and_order_selected li i {
    color: #7eb8da !important;
}

/* ============================================
   REPEATABLE FIELD (SCHEDULE/CALENDAR)
   ============================================ */

body.dark-mode .repeatable-element {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

body.dark-mode .repeatable-element label {
    color: #f0f0f0 !important;
}

body.dark-mode .repeatable-element .form-control {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .container-repeatable-elements .controls button {
    color: #c5c5c5 !important;
}

body.dark-mode .container-repeatable-elements .controls button:hover {
    color: #ffffff !important;
}

body.dark-mode .add-repeatable-element-button {
    color: #7eb8da !important;
    border-color: #7eb8da !important;
}

/* ============================================
   TAB CONTENT / TAB PANES
   ============================================ */

body.dark-mode .tab-content {
    background-color: #1a1a1a !important;
}

body.dark-mode .tab-pane {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .tab-pane .card {
    background-color: #1a1a1a !important;
}

body.dark-mode .tab-pane label {
    color: #f0f0f0 !important;
}

/* Day labels in schedule (Lunes, Martes, etc.) */
body.dark-mode [data-repeatable-holder] > label,
body.dark-mode .container-repeatable-elements > label,
body.dark-mode .form-group > label {
    color: #f0f0f0 !important;
}

/* ============================================
   CHECKBOX / ESTADO TAB FIX
   ============================================ */

body.dark-mode .custom-checkbox,
body.dark-mode .custom-control {
    color: #f0f0f0 !important;
}

body.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #5a9fd4 !important;
    border-color: #5a9fd4 !important;
}

body.dark-mode .checkbox label,
body.dark-mode .form-check-label {
    color: #f0f0f0 !important;
}

/* Ensure tab pane doesn't have white background */
body.dark-mode .tab-pane .form-group,
body.dark-mode .tab-pane .checkbox,
body.dark-mode .tab-pane .custom-control {
    background-color: transparent !important;
}

/* ============================================
   WELL / PANEL BACKGROUND FIX
   ============================================ */

body.dark-mode .well {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

/* ============================================
   PASSWORD RESET PAGE
   ============================================ */

body.dark-mode .auth-content,
body.dark-mode .login-box,
body.dark-mode .register-box {
    background-color: #121212 !important;
}

body.dark-mode .login-card-body,
body.dark-mode .register-card-body,
body.dark-mode .card-body.auth-card-body {
    background-color: #1a1a1a !important;
}

/* ============================================
   ADDITIONAL FORM FIELD FIXES
   ============================================ */

/* Disabled/readonly inputs */
body.dark-mode input[disabled],
body.dark-mode input[readonly],
body.dark-mode textarea[disabled],
body.dark-mode textarea[readonly],
body.dark-mode select[disabled] {
    background-color: #1e1e1e !important;
    color: #707070 !important;
    border-color: #333333 !important;
}

/* ============================================
   DATE RANGE PICKER
   ============================================ */

body.dark-mode .daterangepicker {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #f0f0f0 !important;
}

body.dark-mode .daterangepicker::before,
body.dark-mode .daterangepicker::after {
    border-bottom-color: #333333 !important;
}

body.dark-mode .daterangepicker .drp-calendar {
    background-color: #1a1a1a !important;
}

body.dark-mode .daterangepicker .calendar-table {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

body.dark-mode .daterangepicker .calendar-table th,
body.dark-mode .daterangepicker .calendar-table td {
    color: #f0f0f0 !important;
    background-color: transparent !important;
}

body.dark-mode .daterangepicker .calendar-table .next span,
body.dark-mode .daterangepicker .calendar-table .prev span {
    border-color: #f0f0f0 !important;
}

body.dark-mode .daterangepicker td.available:hover,
body.dark-mode .daterangepicker th.available:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker td.off,
body.dark-mode .daterangepicker td.off.in-range,
body.dark-mode .daterangepicker td.off.start-date,
body.dark-mode .daterangepicker td.off.end-date {
    background-color: transparent !important;
    color: #505050 !important;
}

body.dark-mode .daterangepicker td.in-range {
    background-color: #2a3a4a !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker td.active,
body.dark-mode .daterangepicker td.active:hover {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker td.start-date,
body.dark-mode .daterangepicker td.end-date {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker .drp-buttons {
    background-color: #222222 !important;
    border-top-color: #333333 !important;
}

body.dark-mode .daterangepicker .drp-buttons .btn {
    color: #ffffff !important;
}

body.dark-mode .daterangepicker .drp-selected {
    color: #c5c5c5 !important;
}

body.dark-mode .daterangepicker .ranges li {
    color: #f0f0f0 !important;
    background-color: transparent !important;
}

body.dark-mode .daterangepicker .ranges li:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker .ranges li.active {
    background-color: #5a9fd4 !important;
    color: #ffffff !important;
}

body.dark-mode .daterangepicker select.monthselect,
body.dark-mode .daterangepicker select.yearselect {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .daterangepicker .calendar-time select {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

/* Input field for date range */
body.dark-mode .daterangepicker-input,
body.dark-mode input.daterangepicker,
body.dark-mode .input-daterange input,
body.dark-mode [data-toggle="daterangepicker"] {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

/* ============================================
   SELECT2 BOOTSTRAP 5 THEME DARK MODE
   ============================================ */

/* Select2 Bootstrap 5 theme - container */
body.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--single {
    background-color: #222222 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: #222222 !important;
}

/* Select2 Bootstrap 5 - rendered text */
body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    color: #f0f0f0 !important;
}

/* Select2 Bootstrap 5 - placeholder */
body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__placeholder,
body.dark-mode .select2-container .select2-selection__placeholder {
    color: #808080 !important;
}

/* Select2 Bootstrap 5 - arrow */
body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: #808080 transparent transparent transparent !important;
}

/* Select2 Bootstrap 5 - clear button */
body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    color: #808080 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover,
body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover {
    color: #f0f0f0 !important;
}

/* Select2 Bootstrap 5 - dropdown */
body.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #1a1a1a !important;
    border-color: #3a3a3a !important;
}

/* Select2 Bootstrap 5 - search field */
body.dark-mode .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder {
    color: #707070 !important;
}

/* Select2 Bootstrap 5 - options */
body.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: #f0f0f0 !important;
    background-color: #1a1a1a !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-results__option--highlighted,
body.dark-mode .select2-container--bootstrap-5 .select2-results__option:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-results__option--selected,
body.dark-mode .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Select2 Bootstrap 5 - multiple selection tags */
body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #c5c5c5 !important;
    border-color: #3a3a3a !important;
}

body.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
}

/* Select2 Bootstrap 5 - focused state */
body.dark-mode .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body.dark-mode .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #5a9fd4 !important;
    box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25) !important;
}

/* ============================================
   FORM PLACEHOLDERS AND HINTS
   ============================================ */

/* All input placeholders */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder {
    color: #707070 !important;
    opacity: 1 !important;
}

/* Webkit placeholder */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder,
body.dark-mode .form-control::-webkit-input-placeholder {
    color: #707070 !important;
}

/* Mozilla placeholder */
body.dark-mode input::-moz-placeholder,
body.dark-mode textarea::-moz-placeholder,
body.dark-mode .form-control::-moz-placeholder {
    color: #707070 !important;
    opacity: 1 !important;
}

/* MS placeholder */
body.dark-mode input:-ms-input-placeholder,
body.dark-mode textarea:-ms-input-placeholder,
body.dark-mode .form-control:-ms-input-placeholder {
    color: #707070 !important;
}

/* Form hints and help text */
body.dark-mode .form-text,
body.dark-mode .help-block,
body.dark-mode .form-control-feedback,
body.dark-mode small.form-text,
body.dark-mode .text-help,
body.dark-mode .hint {
    color: #909090 !important;
}

/* Native select options */
body.dark-mode select option,
body.dark-mode select.form-control option,
body.dark-mode .custom-select option {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}

/* Select default/empty option (placeholder-like) */
body.dark-mode select option[value=""],
body.dark-mode select option:disabled {
    color: #707070 !important;
}

/* Backpack CRUD filter placeholders */
body.dark-mode .navbar-filters input::placeholder,
body.dark-mode .navbar-filters .form-control::placeholder {
    color: #707070 !important;
}

/* Backpack filter dropdown items */
body.dark-mode .backpack-filter .dropdown-item,
body.dark-mode .filter-dropdown .dropdown-item {
    color: #f0f0f0 !important;
}

body.dark-mode .backpack-filter .dropdown-item:hover,
body.dark-mode .filter-dropdown .dropdown-item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Form label hints (small text under labels) */
body.dark-mode label small,
body.dark-mode .form-label small,
body.dark-mode label .text-muted,
body.dark-mode .form-label .text-muted {
    color: #808080 !important;
}

/* Input group addon text */
body.dark-mode .input-group-text {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
    color: #c5c5c5 !important;
}

/* Disabled select styling */
body.dark-mode select:disabled,
body.dark-mode select.form-control:disabled,
body.dark-mode .select2-container--disabled .select2-selection {
    background-color: #1e1e1e !important;
    color: #606060 !important;
    border-color: #333333 !important;
}

body.dark-mode .select2-container--disabled .select2-selection__rendered,
body.dark-mode .select2-container--disabled .select2-selection__placeholder {
    color: #606060 !important;
}