/* ====================================================================
   Dark mode for Backpack admin (theme-coreuiv4).
   Palette restored to the pre-Backpack-7 look: plain near-black surfaces
   with a purple accent (instead of the navy-blue first attempt).
   The early-init script in inc/head.blade.php toggles the class before
   paint to avoid the white flash on first load.
   ==================================================================== */

/* Hide the moon icon when dark is active, and the sun icon when light. */
.dark-mode-toggle .la-sun { display: none; }
body.dark-mode .dark-mode-toggle .la-moon { display: none; }
body.dark-mode .dark-mode-toggle .la-sun { display: inline-block; }

/* ----- Layout surfaces ----- */
body.dark-mode,
body.dark-mode .wrapper,
body.dark-mode .app-body,
body.dark-mode main.main,
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body {
    background-color: #111111 !important;
    color: #e6e6e6 !important;
}

/* Sidebar: a touch darker than the body so it stands out. */
body.dark-mode .sidebar {
    background: #0a0a0a !important;
    color: #e6e6e6;
}
body.dark-mode .sidebar-brand {
    background: #0a0a0a;
    color: #fff;
    border-bottom: 1px solid #1f1f1f;
}
body.dark-mode .sidebar .nav-link {
    color: #d0d0d0;
}
body.dark-mode .sidebar .nav-link .nav-icon,
body.dark-mode .sidebar .nav-link > i {
    color: #7c5ce3;
}
body.dark-mode .sidebar .nav-link:hover {
    background-color: #1a1a1a;
    color: #fff;
}
body.dark-mode .sidebar .nav-link.active {
    background-color: #1a1a1a;
    color: #fff;
}
body.dark-mode .sidebar .nav-link.active .nav-icon,
body.dark-mode .sidebar .nav-link.active > i {
    color: #9b7ee8;
}
body.dark-mode .sidebar .nav-group.show > .nav-group-toggle,
body.dark-mode .sidebar .nav-group-items {
    background-color: transparent;
}

/* ----- Header / footer ----- */
body.dark-mode .header,
body.dark-mode .navbar,
body.dark-mode header.header {
    background-color: #111111 !important;
    border-color: #1f1f1f !important;
    color: #e6e6e6;
    box-shadow: none;
}
body.dark-mode .header .nav-link,
body.dark-mode .navbar .nav-link { color: #d0d0d0; }

body.dark-mode footer {
    background-color: #0a0a0a !important;
    color: #d0d0d0 !important;
    border-color: #1f1f1f !important;
}

/* ----- Cards ----- */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .tab-content,
body.dark-mode .tab-pane {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .card-header,
body.dark-mode .card-footer {
    background-color: #1f1f1f !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}

/* ----- Tabs (Backpack uses Bootstrap nav-tabs for edit-form sections) ----- */
body.dark-mode .nav-tabs {
    border-bottom-color: #2a2a2a;
}
body.dark-mode .nav-tabs .nav-link {
    color: #c0c0c0;
    background-color: transparent;
    border-color: transparent;
}
body.dark-mode .nav-tabs .nav-link:hover {
    color: #fff;
    border-color: #2a2a2a #2a2a2a transparent;
    background-color: #1f1f1f;
}
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
    color: #fff !important;
    background-color: #1a1a1a !important;
    border-color: #2a2a2a #2a2a2a #1a1a1a !important;
}
body.dark-mode .nav-pills .nav-link.active {
    background-color: #7c5ce3 !important;
    color: #fff !important;
}

/* ----- Tables ----- */
body.dark-mode table,
body.dark-mode .table {
    color: #e6e6e6;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-color: #e6e6e6;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: #e6e6e6;
    --bs-table-hover-bg: rgba(124, 92, 227, 0.10);
    --bs-table-hover-color: #fff;
    --bs-table-border-color: #2a2a2a;
}
body.dark-mode .table > :not(caption) > * > * {
    background-color: transparent;
    color: #e6e6e6;
    border-color: #2a2a2a;
}
body.dark-mode .table thead th {
    background-color: #1f1f1f;
    color: #fff;
    border-color: #2a2a2a;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: #e6e6e6;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(124, 92, 227, 0.10);
    color: #fff;
}

/* ----- DataTables wrapper ----- */
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: #e6e6e6; }
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #e6e6e6 !important;
    background: transparent;
    border-color: #2a2a2a;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #7c5ce3 !important;
    color: #fff !important;
    border-color: #7c5ce3;
}
body.dark-mode .page-link {
    background-color: #1a1a1a;
    border-color: #2a2a2a;
    color: #d0d0d0;
}
body.dark-mode .page-item.active .page-link {
    background-color: #7c5ce3;
    border-color: #7c5ce3;
    color: #fff;
}

/* ----- Forms & inputs: cover ALL input types, not just .form-control ----- */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea.form-control,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="time"],
body.dark-mode input[type="month"],
body.dark-mode input[type="week"],
body.dark-mode select,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border-color: #7c5ce3 !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 227, 0.3) !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #777 !important; }
body.dark-mode .form-label,
body.dark-mode label,
body.dark-mode .col-form-label { color: #e6e6e6 !important; }
body.dark-mode small,
body.dark-mode .form-text,
body.dark-mode .help-block { color: #999 !important; }
body.dark-mode .input-group-text {
    background-color: #1f1f1f !important;
    border-color: #2a2a2a !important;
    color: #d0d0d0 !important;
}
body.dark-mode .form-check-input {
    background-color: #1a1a1a;
    border-color: #3a3a3a;
}
body.dark-mode .form-check-input:checked {
    background-color: #7c5ce3;
    border-color: #7c5ce3;
}
body.dark-mode .form-check-label { color: #e6e6e6; }

/* Browser-rendered date / time input internals (Webkit) */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

/* ----- Select2 dropdown ----- */
body.dark-mode .select2-dropdown {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .select2-results__option { color: #e6e6e6 !important; }
body.dark-mode .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-results__option--highlighted {
    background-color: #7c5ce3 !important;
    color: #fff !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #7c5ce3 !important;
    border-color: #6a4dd1 !important;
    color: #fff !important;
}
body.dark-mode .select2-container--default .select2-selection__rendered { color: #e6e6e6 !important; }
/* The inline search field inside a multi-select must not paint its own dark
   background — it should inherit from the selection container so the
   "Selecciona elementos" placeholder doesn't show as a black pill. */
body.dark-mode .select2-search--inline .select2-search__field,
body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #e6e6e6 !important;
    box-shadow: none !important;
}
body.dark-mode .select2-search--inline .select2-search__field::placeholder { color: #777 !important; }
/* Placeholder text rendered as a <li class="select2-selection__placeholder">
   (no input there, just text). Make sure it shows in a subtle grey. */
body.dark-mode .select2-selection__placeholder { color: #777 !important; }
/* Standalone search box inside the dropdown (single select with search) */
body.dark-mode .select2-dropdown .select2-search__field {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}

/* ----- Dropdowns / modals / popovers ----- */
body.dark-mode .dropdown-menu {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .dropdown-item { color: #e6e6e6 !important; }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #fff !important;
}
body.dark-mode .dropdown-divider { border-color: #2a2a2a !important; }
body.dark-mode .dropdown-header { color: #999 !important; }

body.dark-mode .modal-content {
    background-color: #1a1a1a !important;
    color: #e6e6e6 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: #2a2a2a !important; }
body.dark-mode .popover {
    background-color: #1a1a1a;
    border-color: #2a2a2a;
    color: #e6e6e6;
}
body.dark-mode .popover .popover-header { background-color: #1f1f1f; color: #fff; border-bottom-color: #2a2a2a; }

/* ----- Borders & misc ----- */
body.dark-mode hr,
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end { border-color: #2a2a2a !important; }

body.dark-mode .text-muted { color: #8a8a8a !important; }
body.dark-mode .text-dark { color: #e6e6e6 !important; }
body.dark-mode a { color: #9b7ee8; }
body.dark-mode a:hover { color: #b7a0f0; }

/* ----- Buttons ----- */
body.dark-mode .btn-secondary,
body.dark-mode .btn-light,
body.dark-mode .btn-outline-secondary {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e6e6e6;
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-light:hover { background-color: #3a3a3a; color: #fff; }
body.dark-mode .btn-primary,
body.dark-mode .btn-outline-primary {
    background-color: #7c5ce3;
    border-color: #7c5ce3;
    color: #fff;
}
body.dark-mode .btn-outline-primary {
    background-color: transparent;
    color: #9b7ee8;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-outline-primary:hover {
    background-color: #6a4dd1;
    border-color: #6a4dd1;
    color: #fff;
}

/* ----- Alerts ----- */
body.dark-mode .alert {
    background-color: #1f1f1f;
    border-color: #2a2a2a;
    color: #e6e6e6;
}
body.dark-mode .alert-info { background-color: rgba(13, 110, 253, 0.15); border-color: rgba(13, 110, 253, 0.3); color: #9ec5ff; }
body.dark-mode .alert-success { background-color: rgba(25, 135, 84, 0.15); border-color: rgba(25, 135, 84, 0.3); color: #75d6a3; }
body.dark-mode .alert-warning { background-color: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.3); color: #ffd766; }
body.dark-mode .alert-danger { background-color: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); color: #f4a3ac; }

/* ----- List groups ----- */
body.dark-mode .list-group-item {
    background-color: #1a1a1a;
    border-color: #2a2a2a;
    color: #e6e6e6;
}

/* ----- Breadcrumbs ----- */
body.dark-mode .breadcrumb { background-color: transparent; color: #d0d0d0; }
body.dark-mode .breadcrumb-item.active { color: #fff; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #666; }

/* ----- DataTables Buttons (Exportar / Visibilidad de columnas) ----- */
body.dark-mode div.dt-buttons .btn,
body.dark-mode div.dt-buttons .dt-button,
body.dark-mode div.dt-buttons button.dt-button,
body.dark-mode div.dt-buttons a.dt-button,
body.dark-mode div.dt-buttons div.dt-button {
    background: #1f1f1f !important;
    background-image: none !important;
    border: 1px solid #2a2a2a !important;
    color: #e6e6e6 !important;
    text-shadow: none !important;
}
body.dark-mode div.dt-buttons .btn:hover,
body.dark-mode div.dt-buttons .dt-button:hover,
body.dark-mode div.dt-buttons .dt-button:focus,
body.dark-mode div.dt-buttons .btn:focus {
    background: #2a2a2a !important;
    background-image: none !important;
    border-color: #7c5ce3 !important;
    color: #fff !important;
}
body.dark-mode div.dt-buttons .dt-button span,
body.dark-mode div.dt-buttons .btn span { color: inherit !important; }

body.dark-mode div.dt-button-collection,
body.dark-mode div.dt-button-collection.dropdown-menu {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode div.dt-button-collection .dt-button {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #e6e6e6 !important;
}
body.dark-mode div.dt-button-collection .dt-button:hover {
    background: #2a2a2a !important;
    color: #fff !important;
}
body.dark-mode div.dt-button-collection .dt-button.active {
    background: rgba(124, 92, 227, 0.18) !important;
    color: #fff !important;
}
body.dark-mode div.dt-button-background { background: rgba(0, 0, 0, 0.6) !important; }

/* ----- Repeatable field rows -----
   The vendor blade hard-codes `background-color: #f0f3f94f` on
   `.repeatable-element`, which on a dark background renders as a flat
   grey bar that hides labels and inputs. Override with !important. */
body.dark-mode .repeatable-element,
body.dark-mode .well {
    background-color: #1f1f1f !important;
    border: 1px solid #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .repeatable-element label,
body.dark-mode .repeatable-element .form-label,
body.dark-mode .repeatable-element .col-form-label { color: #e6e6e6 !important; }
body.dark-mode .container-repeatable-elements .controls button {
    color: #d0d0d0 !important;
    background: transparent !important;
    opacity: 1;
}
body.dark-mode .container-repeatable-elements .controls button:hover {
    color: #fff !important;
    background: #2a2a2a !important;
}
body.dark-mode .container-repeatable-elements .controls button.delete-element {
    color: #f4a3ac !important;
}
body.dark-mode .container-repeatable-elements .controls button.delete-element:hover {
    color: #fff !important;
    background: rgba(220, 53, 69, 0.3) !important;
}

/* ----- select_and_order field -----
   The vendor blade ships inline CSS with light backgrounds (#fbfbfb, white)
   for the list items, so we need !important to win. */
body.dark-mode .select_and_order_all,
body.dark-mode .select_and_order_selected {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .select_and_order_all li,
body.dark-mode .select_and_order_selected li {
    background-color: #1f1f1f !important;
    border-color: #2a2a2a !important;
    color: #e6e6e6 !important;
}
body.dark-mode .select_and_order_all li.ui-sortable-helper,
body.dark-mode .select_and_order_selected li.ui-sortable-helper {
    color: #9b7ee8 !important;
}
body.dark-mode .select_and_order_all .ui-sortable-placeholder,
body.dark-mode .select_and_order_selected .ui-sortable-placeholder {
    border-color: #7c5ce3 !important;
    background-color: rgba(124, 92, 227, 0.1) !important;
}

/* ----- Backpack-specific containers that often default to white ----- */
body.dark-mode .backpack-filter,
body.dark-mode .crud-list,
body.dark-mode .container-fluid > .row > [class^="col"] {
    color: #e6e6e6;
}
body.dark-mode .text-black { color: #e6e6e6 !important; }

/* Tabler/CoreUI sometimes uses these wrappers around tab contents */
body.dark-mode .nav-tabs-custom,
body.dark-mode .nav-tabs-custom > .tab-content,
body.dark-mode .nav-tabs-custom > .nav-tabs,
body.dark-mode .form-group {
    background-color: transparent !important;
    color: #e6e6e6 !important;
}