/* ================================================
   Dark Mode Overrides for SB Admin 2 / Bootstrap 4
   ================================================ */

/* Global background & text */
body {
    background-color: #121212 !important;
    color: #eaeaea !important;
}

#content {
    background-color: #1e1e1e;
    color: #f8f9fa !important;
}

/* Sidebar */
#accordionSidebar,
.sidebar,
.bg-gradient-primary {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .collapse-item {
    color: #ddd !important;
}

.sidebar .nav-item.active .nav-link {
    color: #fff !important;
    background-color: #333 !important;
}

.sidebar .nav-item .nav-link:hover {
    background-color: #2c2c2c !important;
    color: #fff !important;
}

/* Navbar / Topbar */
.navbar,
.navbar-light,
.topbar {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

.navbar-light .navbar-nav .nav-link,
.navbar .nav-link {
    color: #f8f9fa !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #adb5bd !important;
}

/* Cards */
.card,
.card-header,
.bg-white,
.bg-light {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #f8f9fa !important;
}

/* Tables */
.table{
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border-color: #333 !important;
}

.table thead th, .table thead td {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #333 !important;
}

.table tbody td{
    border-color: #333 !important;
}

.table tfoot td{
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #333 !important;
}

.modal-body tbody tr:hover {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

/* Forms */
.form-control,
.custom-select {
    background-color: #222 !important;
    color: #f8f9fa !important;
    border-color: #444 !important;
}

.form-control:focus,
.custom-select:focus {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #666 !important;
    box-shadow: none !important;
}

/* Headings and text colors */
.text-gray-800,
.text-dark {
    color: #eaeaea !important;
}

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

.text-muted {
    color: #aaa !important;
}



/* ================================================
   Dark Mode Fix for Modal Close Button
   ================================================ */

.modal-content {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border-color: #333 !important;
}

/* Make the “×” close icon visible */
.modal-header .close {
    color: #f8f9fa !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

.modal-header .close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ================================================
   Dark Mode Fix for Modal Dividers
   ================================================ */

/* Divider between modal header and body */
.modal-header {
    border-bottom: 1px solid #333 !important; /* darker border */
  }

  /* Divider between body and footer */
  .modal-footer {
    border-top: 1px solid #333 !important; /* darker border */
  }

  /* Optional: soften footer background if needed */
  .modal-footer {
    background-color: #1e1e1e !important;
  }


/* Alerts */
.alert {
    background-color: #2a2a2a !important;
    color: #f8f9fa !important;
    border-color: #444 !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #f8f9fa !important;
}

.dropdown-item {
    color: #eaeaea !important;
}

.dropdown-item:hover {
    background-color: #333 !important;
    color: #fff !important;
}

/* Footer */
footer.sticky-footer {
    background-color: #1a1a1a !important;
    color: #ccc !important;
}

/* Scroll-to-top button */
.scroll-to-top {
    background-color: #444 !important;
    border: none !important;
}

/* Smooth transition */
body,
.card,
.navbar,
.sidebar,
.btn,
.form-control,
.table {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================================================
   Dark Mode Fixes for Bootstrap Select
   ================================================ */

/* The main select box */
.bootstrap-select .btn.dropdown-toggle {
    background-color: #222 !important;
    color: #f8f9fa !important;
    border-color: #444 !important;
}

.bootstrap-select .btn.dropdown-toggle:focus,
.bootstrap-select .btn.dropdown-toggle:hover {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #555 !important;
    box-shadow: none !important;
}

/* The dropdown menu */
.bootstrap-select .dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #f8f9fa !important;
}

/* The search box inside dropdown */
.bootstrap-select .bs-searchbox .form-control {
    background-color: #222 !important;
    color: #f8f9fa !important;
    border-color: #444 !important;
}

.bootstrap-select .bs-searchbox .form-control::placeholder {
    color: #aaa !important;
}

/* The dropdown list items */
.bootstrap-select .dropdown-menu li a {
    color: #f8f9fa !important;
    background-color: transparent !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu li.active a {
    background-color: #333 !important;
    color: #fff !important;
}

/* The check mark for selected items */
.bootstrap-select .dropdown-menu li.selected a span.check-mark {
    color: #0d6efd !important; /* highlight color (blue) */
}

/* Disabled state */
.bootstrap-select .dropdown-menu li.disabled a {
    color: #666 !important;
}

/* Fix border contrast */
.bootstrap-select .dropdown-toggle::after {
    border-top-color: #ccc !important;
}

/* Adjust dropdown header or divider */
.bootstrap-select .dropdown-header {
    color: #aaa !important;
    background-color: #1a1a1a !important;
}
.bootstrap-select .dropdown-divider {
    border-color: #333 !important;
}

/* ================================================
   Dark Mode Fix for Laravel Pagination (Bootstrap 4)
   ================================================ */

   .pagination {
    justify-content: center;
  }

  .page-link {
    background-color: #1e1e1e !important;
    color: #f8f9fa !important;
    border-color: #333 !important;
  }

  .page-link:hover {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #444 !important;
  }

  .page-item.active .page-link {
    background-color: #007bff !important; /* or your brand color */
    border-color: #007bff !important;
    color: #fff !important;
  }

  .page-item.disabled .page-link {
    background-color: #2a2a2a !important;
    color: #777 !important;
    border-color: #333 !important;
    cursor: not-allowed;
  }


/* Buttons */
.btn-primary {
    background-color: #2a75e6 !important;
    border-color: #2a75e6 !important;
}

.btn-secondary {
    background-color: #444 !important;
    border-color: #555 !important;
    color: #f8f9fa !important;
}

.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}


.badge-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.badge-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.badge-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.alert-primary{
    background-color: #2a75e6 !important;
    border-color: #2a75e6 !important;
    color: #fff !important;
}

.alert-danger{
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.alert-success{
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.alert-info{
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #fff !important;
}

hr{
    background-color: #333;
}