/**** DARK THEME ****/

html[data-bs-theme="dark"] #primary-navbar {
    background-color: #212529 !important;
}

html[data-bs-theme="dark"] #global-search,
html[data-bs-theme="dark"] #at-a-glance-search {
    background-color: #1b1f22 !important;
}

/* .bg-light adds contrast to light mode, but overrides dark mode when toggled, so we manually switch it to dark highlight color */
/* Don't want to mass toggle classes over the whole project */
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .custom-card-header-bg-color {
    background-color: #1b1f22 !important;
}

html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .accordion-header,
html[data-bs-theme="dark"] .accordion-button,
html[data-bs-theme="dark"] .accordion-button:active {
    background-color: #1b1f22 !important;
}

html[data-bs-theme="dark"] .accordion-button,
html[data-bs-theme="dark"] .accordion-button:active {
  color: #999 !important;
}

html[data-bs-theme="dark"] .accordion-button {
  background-color: #1f1f1f;
  color: #f8f9fa;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .sidebar .nav-link {
  color: #999 !important;
}

html[data-bs-theme="dark"] .sidebar {
  box-shadow: inset -1px 0 0 rgba(222, 226, 230, 0.25);
}

html[data-bs-theme="dark"] [readonly="readonly"] {
    background-color: #212529 !important;
    color: #fff !important;
    border: 1px solid #495057 !important;
}

html[data-bs-theme="dark"]  .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"]  .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"]  .select2-container--default .select2-selection__choice,
html[data-bs-theme="dark"]  .select2-container--default .select2-container--disabled .select2-selection--single,
html[data-bs-theme="dark"]  .select2-container--default .select2-container--disabled .select2-selection--multiple {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    cursor: default;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-dropdown {
    background-color: #343a40 !important;
    color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #5897fb !important;
}


/* Custom styles to apply Bootstrap dark theme to jQuery UI Autocomplete */
html[data-bs-theme="dark"] .ui-autocomplete {
    background-color: #343a40; /* Bootstrap dark background */
    color: #fff; /* Bootstrap dark text color */
    border: 1px solid #495057; /* Bootstrap dark border color */
    border-radius: 0.25rem; /* Bootstrap border radius */
    z-index: 1050; /* Ensure it appears above other elements */
}
html[data-bs-theme="dark"] .ui-menu-item {
    /*padding: 0.25rem 1.5rem; !* Bootstrap padding *!*/
}

html[data-bs-theme="dark"] .ui-menu-item:hover {
    background-color: #495057; /* Bootstrap dark hover background */
    color: #fff; /* Bootstrap dark hover text color */
}

/**** END DARK THEME ****/



/**** LIGHT THEME ****/

html[data-bs-theme="light"] #primary-navbar {
    background-color: #f8f9fa !important;
}

html[data-bs-theme="light"] .sidebar .nav-link {
  color: #333 !important;
}

html[data-bs-theme="light"] .custom-card-header-bg-color {
    background-color: #d6d6d6 !important;
}


/* Form text black for more contrast */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-control-sm {
    color: black !important;
    border: 1px solid #aaa !important;
    min-height: 33px !important;
}

/*!* Override default datatables style of the column headers for more contrast *!*/
html[data-bs-theme="light"] .table-responsive-sm th[scope=col] {
    color: black !important;
    font-weight: bold !important;
}

/* By default the background color select2 disabled is #eee */
html[data-bs-theme="light"] .select2-container--default .select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef !important;
    cursor: default;
}

html[data-bs-theme="light"] .sidebar {
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

/**** END LIGHT THEME ****/





body {
  font-size: .875rem;
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

.vertical-align[class*='col-'] {
  letter-spacing: -4px;
  font-size: 0;
}

.vertical-align .col-xs-4 {
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}


/* Remove underline from breadcrumb links */
li.breadcrumb-item > a { text-decoration: none !important; }
li.breadcrumb-item > a.active { text-decoration: none !important; }
div.card > a.collapse { text-decoration: none !important; }
div.card > a.collapsed { text-decoration: none !important; }

/* Prevent buttons from expanding past their parent */
.btn {
    max-width: 100% !important;
    white-space: normal !important;
}

input[type='checkbox'] {
    width: 20px; height: 20px !important;
}

/*
Prevent overscroll in Chrome on macOS
*/

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}


/*
Sidebar
*/

.sidebar {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 0;
  height: 100%;
  /*box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);*/
}

.sidebar-sticky {
  position: sticky;
  top: 68px; /* Height of navbar */
  min-height: calc(100vh - 68px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}


/*
Search
*/

.global-search-result-header {
    font-size: 1.2em;
    font-weight: bold;
}

.global-search-result-object {
    font-style: italic;
    color: #0d5aa7;
}

.global-search-matched-field {
    color: #1e7e34;
}

.global-search-application {
    color: #f58a42;
}


/*
Navbar
*/

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

/*html[data-bs-theme="dark"] .form-control {*/
/*  color: #fff !important;*/
/*  background-color: rgba(255, 255, 255, .1) !important;*/
/*  border-color: rgba(255, 255, 255, .1) !important;*/
/*}*/

/*html[data-bs-theme="dark"] .form-control:focus {*/
/*  border-color: transparent !important;*/
/*  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25) !important;*/
/*}*/

/*
Utilities
*/

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.form-control::-webkit-input-placeholder {
  color: dimgray;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: dimgray;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: dimgray;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: dimgray;
  opacity: 1;
}

.form-control::placeholder {
  color: dimgray;
  opacity: 1;
}



/*
DataTables and Select2 Overrides
*/



/*!* Height override to ensure select2 widgets and bootstrap5 forms are same height *!*/
.select2-container .select2-selection--single {
    min-height: 33px !important;
}




/* DataTables / Bootstrap dropdown overrides */
/* Override dropdown menu items for datatables - bootstrap sets them to bright blue */
.dt-button-collection > .dropdown-menu {
    background-color:  #6c757d !important;
}

.dt-button-collection > .dropdown-menu > a.active {
    background-color: #6c757d !important;
}

.dt-button-collection > .dropdown-menu > a {
    font-weight: normal !important;
    font-size: 0.9rem !important;
    color: #fff !important;
}


/*
End DataTables and Select2 Overrides
*/


/*
Search
*/

.ui-autocomplete {
    position: absolute;
    cursor: default;
    /* Header is z-index 1020 */
    z-index: 2000 !important;
   /* If many results, prevent window from making page too long */
    max-height: 500px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.ui-autocomplete > li.ui-menu-item {
    border-bottom: 1px solid #c5c5c5;
}

li.ui-menu-item > div.ui-menu-item-wrapper {
    padding: 10px;
}



/*
Used in single entity summary pages, for the ride sidebar content
E.g. allocation_detail.html and customer_detail.html
*/
#collapse-activity,
#collapse-tasks,
#collapse-documents,
#collapse-history {
    padding: 0 !important;
}

.cursor {
    cursor: pointer;
}


/*
CKEditor Overrides
*/
.django-ckeditor-widget {
    display: block !important;
    overflow-y: auto !important;
    margin-bottom: 0 !important;
}