.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
  }
  
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
  }

table.dataTable thead th {
    font-weight: bold;
    background-color: #336b91;
    color: #fff;
  }
  
div.dt-buttons {
    float: right;
  }

.navbar-brand {
  color: #fff !important;
}

.hint--info:after {
          background-color: var(--bs-info);
          text-shadow: 0 -1px 0px var(--bs-info);
        }
.hint--info.hint--bottom:before {
          border-bottom-color: var(--bs-info)
        }
.hint--info.hint--left:before {
          border-left-color: var(--bs-info)
        }
.hint--info.hint--top:before {
          border-top-color: var(--bs-info)
        }
.hint--info.hint--right:before {
          border-right-color: var(--bs-info)
        }

/* Fix Plotly responsive sizing */
.plotly {
  width: 100% !important;
}

.js-plotly-plot, .plot-container {
  width: 100% !important;
}

button[id$='reset_selection']:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

button[id$='reset_selection'] {
  background-color: #fff !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

button[id$='reset_selection']:focus,
button[id$='reset_selection']:active,
button[id$='reset_selection'].active {
  background-color: #fff !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

.dt-buttons .btn-primary,
.dt-buttons .btn-secondary:hover,
.dt-buttons .btn-secondary:focus,
.dt-buttons .btn-secondary:active,
.dt-buttons .btn-primary:hover,
.dt-buttons .btn-primary:focus,
.dt-buttons .btn-primary:active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.dt-button-collection .dt-button {
  background-color: #fff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

.dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:focus,
.dt-button-collection .dt-button:active {
  background-color: #fff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  background-color: var(--bs-pagination-bg) !important;
  border-color: var(--bs-pagination-border-color) !important;
  color: var(--bs-pagination-color) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.active):not(.disabled) .page-link:focus {
  background-color: var(--bs-pagination-hover-bg) !important;
  border-color: var(--bs-pagination-hover-border-color) !important;
  color: var(--bs-pagination-hover-color) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg) !important;
  border-color: var(--bs-pagination-active-border-color) !important;
  color: var(--bs-pagination-active-color) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background-color: var(--bs-pagination-disabled-bg) !important;
  border-color: var(--bs-pagination-disabled-border-color) !important;
  color: var(--bs-pagination-disabled-color) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Reduce overall container padding on mobile */
  .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Reduce card padding on mobile */
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .card-body {
    padding: 0.75rem !important;
  }
  
  /* Remove excess margins from plotly */
  .js-plotly-plot .plotly .main-svg {
    margin: 0 !important;
  }
  
  /* Optimize plotly for mobile touch */
  .plotly .nsewdrag {
    cursor: grab !important;
  }
  
  /* Make range slider more touch-friendly */
  .rangeslider-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Better navbar on mobile */
  .navbar-brand {
    font-size: 1rem !important;
  }
}