/* CSS nesting, doesn't work in some cases
div.title>span {
  font-variant: small-caps;

  @media (width < 1200px) {
    display: none;
  }
}
*/

div.title>span {
  font-variant: small-caps;
  display: block;
  padding-right: 50px;
}

@media (max-width: 1500px) {
  div.title>span {
    display: none;
    padding-right: 0;
  }
}

/* Fix margin-bottom in language button */
.form-group {
  margin-bottom: 0;
}

/* Fix strange whitespace under logo in header */
span.navbar-brand {
  padding: 0;
  margin: 0;
}

/* To allow logos to move to bottom of left sidebar*/
.sidebar-content {
  height: 100%;
}

/* Allow overflow in sidebar */
.sidebar {
  overflow: visible !important;
}

.selectize-dropdown, .dropdown-menu {
    z-index: 1050 !important; /* Ensure dropdown appears above sidebar */
    position: relative;       /* Needed for z-index to apply correctly */
}

.bslib-card, .tab-content, .tab-pane, .card-body {
    overflow: visible !important; /* Prevent dropdowns or tooltips from being clipped */
}

/* Exception: if a card-body contains a nested card, allow scroll */
.card-body:has(.card) {
    overflow: auto !important;
}

/* Change CSS style for buttons */
.bttn-unite.bttn-primary {
    border-color: #d96363;
    color: #d96363;
    background-color: transparent;
    padding: 0px 8px;
}
.bttn-unite.bttn-primary:before {
    background: #d96363;
}
.bttn-unite.bttn-primary:after {
    background: #9f2A2A;
}

/* Move settings dropdown button to the right of the card header*/
.sw-dropdown {
  margin-left: auto;
}

/* Improve readability when showing LLM modal box*/
.modal {
  --bs-modal-width: 400px;
}

.modal-backdrop {
  --bs-backdrop-opacity: .2;
}

#shiny-modal-wrapper:has(~.modal-backdrop) .modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 576px) {
  .modal-dialog {
    margin-right: 25px;
    margin-bottom: 25px;
    margin-top: 5%;
  }
}

.modal-body {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  & p:last-child {
    margin-bottom: 0;
  }
}

/* Add space between elements in tabsetPanel inside sidebar */
.tab-content .tab-pane { /* Top of each panel */
  margin-top: 1rem;
}

.tab-content .form-group { /* Top of each input*/
  margin-top: 1rem;
}

.tab-content div:first-child .form-group { /* Avoid margin in first input*/
  margin-top: 0;
}

/* Custom value box without background */
.light-valuebox {
  background-color: var(--bs-body-bg);
}

.bslib-value-box.light-valuebox.showcase-top-right .value-box-grid {
  ---bslib-value-box-showcase-w: 20% !important;
}

.bslib-value-box.light-valuebox.showcase-top-right .value-box-showcase>svg.bi {
    fill: #d96363 !important;
    height: 0.5em !important;
    width: 0.5em !important;
}


/* Remove select all button in picker inputs */
.picker-only-clear .bs-actionsbox .bs-select-all {
  display: none !important;
}

.picker-only-clear .bs-actionsbox .bs-deselect-all {
  width: 100% !important;
}

/* Custom style for AI button */
.ai-button {
  background-color: rgba(var(--bs-body-bg-rgb), 0.8);
  box-shadow: 0px 4px 10px rgba(var(--bs-body-color-rgb), 0.3);
  transition: all 0.3s ease-in-out;
  border-radius: 50% !important;
  border-width: 4px !important;
  --bs-btn-padding-x: 1.25em;
}

.ai-button:hover {
  background-color: rgba(var(--bs-body-bg-rgb), 1);
  box-shadow: 0px 8px 15px rgba(var(--bs-body-color-rgb), 0.4);
  transform: scale(1.1);
}

.ai-button img {
  width: 50px;
  height: auto;
}

/* Custom styles for badges in summary races */
.badge {
  --bs-badge-padding-y: .45em;
}
.badge.bg-warning {
  --bs-warning-rgb: 249, 185, 40;
}
.badge.bg-success {
  --bs-success-rgb: 92, 174, 110;
}
.badge.bg-info {
  --bs-info-rgb: 107, 174, 214;
}
.badge.bg-dark {
  --bs-dark-rgb: 108, 117, 125;
}

/* Hide light-mode logos when in dark mode */
[data-bs-theme=dark] .logo-light {
  display: none;
}
/* Hide dark-mode logos when in light mode */
[data-bs-theme=light] .logo-dark {
  display: none;
}
/* Invert other logos */
[data-bs-theme="dark"] .urjc-logo,
[data-bs-theme="dark"] .dslab-logo,
[data-bs-theme="dark"] .cide-logo,
[data-bs-theme="dark"] .pace-logo,
[data-bs-theme="dark"] .ai-button img {
  filter: brightness(0) invert(1);
}
[data-bs-theme="dark"] .pace-diagram {
  filter: invert(1) hue-rotate(180deg);
}

/* Fix color for fullscreen button */
[data-bs-theme="dark"] #fullscreen {
  --bs-btn-color: #D96363;
  --bs-btn-border-color: #D96363;
  --bs-btn-hover-color: #281E37;
  --bs-btn-hover-bg: #D96363;
  --bs-btn-hover-border-color: #D96363;
  --bs-btn-focus-shadow-rgb: 217,99,99;
  --bs-btn-active-color: #281E37;
  --bs-btn-active-bg: #D96363;
  --bs-btn-active-border-color: #D96363;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(40,30,55,0.125);
  --bs-btn-disabled-color: #D96363;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #D96363;
  --bs-btn-bg: transparent;
  --bs-gradient: none;
}

/* Center label of ensemble_range sliderInput */
label[for="ensemble_range"] {
    display: block;
    text-align: center;
}

/* Change tooltip colors */
.tooltip {
    --bs-tooltip-color: var(--bs-popover-body-color);
    --bs-tooltip-bg: var(--bs-body-bg);
    --bs-tooltip-padding-x: 1rem;
    --bs-tooltip-padding-y: .5rem;
    --bs-tooltip-border-radius: .5rem;
    --bs-tooltip-border-width: var(--bs-border-width);
    --bs-tooltip-border-color: var(--bs-border-color-translucent);
    --bs-tooltip-shadow: 0px 1px 2px RGBA(var(--bslib-box-shadow-color-rgb), 0.1),0px 3px 7px RGBA(var(--bslib-box-shadow-color-rgb), 0.1),0px 12px 30px RGBA(var(--bslib-box-shadow-color-rgb), 0.08);
    box-shadow: var(--bs-tooltip-shadow);
    border-radius: var(--bs-tooltip-border-radius);
}

.tooltip > .tooltip-inner {
    border: var(--bs-tooltip-border-width) solid var(--bs-tooltip-border-color);
}