/* ===  SLATE-TEAL THEME MODIFIER  === */

/* --- Bootstrap variable overrides --- */
:root {
  --bs-primary: #067678;
  --bs-primary-rgb: 6,118,120;
  /* Example optional palette tweaks
  --bs-body-bg: #0b1220;
  --bs-body-color: #e6eef8;
  --bs-card-bg: #0f1724;
  --bs-card-border-color: rgba(255,255,255,0.04);
  */
}

/* --- Navbar --- */
.navbar {
  background-color: var(--bs-primary) !important;
  color: #071423 !important;
}
.navbar-dark .nav-link,
.navbar .nav-link {
  color: #ffffff !important;
}

/* --- Navbar link hover/active highlight --- */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #fff !important;
  background-color: #079194 !important;  /* same teal as button hover */
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.06)),
    linear-gradient(to bottom, #079194, rgba(0,0,0,0.15)) !important;
  border-radius: 0.25rem;
  text-decoration: none !important;
}



/* Optional: make the entire navbar slightly darken on hover (subtle feedback) */
.navbar:hover {
  filter: brightness(0.98);
}


/* --- Primary buttons: shiny teal look --- */
.btn-primary {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.05)),
    linear-gradient(to bottom, var(--bs-primary), rgba(0,0,0,0.18)) !important;
  border: 1px solid rgba(0,0,0,0.35) !important;
  transition: box-shadow .12s, background-color .08s;
}


/* Navbar links (hover / active) */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  background-image: linear-gradient(
      to bottom,
      var(--bs-primary) 0%,
      #22262b 100%
  ) !important;                    /* same inverted gradient */
  border-radius: 0.25rem;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Buttons */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  background-image: linear-gradient(
      to bottom,
      var(--bs-primary) 0%,
      #32383e 100%
  ) !important;                    /* teal → page-background dark */
  
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary:active,
.btn-primary.active {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(var(--bs-primary-rgb),0.04)) !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.25) !important;
}

/* --- Accordions --- */
.accordion-button {
  color: var(--bs-body-color, #fff) !important;
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  background-image: none;
}
.accordion-button:not(.collapsed) {
  --accordion-open-rgb: var(--bs-primary-rgb);
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  background-image: linear-gradient(
    180deg,
    rgba(var(--accordion-open-rgb),0.14),
    rgba(255,255,255,0.03)
  ) !important;
  border: 1px solid rgba(0,0,0,0.35) !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 .35rem .6rem rgba(var(--accordion-open-rgb),0.08) !important;
}
.accordion-button:not(.collapsed):hover,
.accordion-button:not(.collapsed):focus {
  box-shadow:
    0 .45rem .9rem rgba(var(--accordion-open-rgb),0.16),
    0 0 0 .18rem rgba(var(--accordion-open-rgb),0.09) !important;
  outline: none !important;
}
.accordion .accordion-item,
.accordion .accordion-header {
  border-color: rgba(0,0,0,0.35) !important;
}

/* --- Cards --- */
.card-header {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* --- Icons --- */
.bi {
  color: var(--bs-body-color) !important;
}

/* --- Dropdowns --- */
.dropdown-menu,
.dropdown-item {
  color: #000 !important;
  background-color: #fff !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: rgba(var(--bs-primary-rgb),0.15) !important;
  color: #000 !important;
}

/* Active (selected) tab — teal with subtle Slate-style shine */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.05)),
    linear-gradient(to bottom, var(--bs-primary), rgba(0,0,0,0.18)) !important;
  border-color: rgba(0,0,0,0.35) !important;
  
  transition: filter .12s, box-shadow .12s;
}

.nav-tabs .nav-link.active:hover {
  filter: brightness(1.05);
  transform: none !important;
}

/* Inactive (unselected) tabs — match Bootswatch Slate look */
.nav-tabs .nav-link {
  color: #adb5bd !important;              /* Slate’s muted light gray */
  background-color: #272b30 !important;   /* typical Slate tab background */
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: color .12s, background-color .12s, border-color .12s;
}

/* Hover on inactive tabs — gentle lightness, faint teal accent */
.nav-tabs .nav-link:hover {
  color: #fff !important;
  background-color: #32383e !important;   /* slightly lighter gray */
  border-color: rgba(var(--bs-primary-rgb),0.35) !important;
}



/* --- Switches / checkboxes --- */
.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--bs-primary) !important;
}

/* make all switches larger */
.form-switch .form-check-input {
  transform: scale(2);          /* increase size (1 = default) */
  margin-right: 10px;      
  margin-left: -20px; 
  margin-top: 20px;       /* adjust spacing */
}

/* optional: keep the knob centered vertically */
.form-switch {
  display: flex;
  align-items: center;
}





/* unfilled track */
.rc-slider-rail {
  background-color:var(--bs-primary) !important;    /* Slate dark gray */
  height: 6px;
  border-radius: 3px;
}

/* filled track */
.rc-slider-track {
  background-color: var(--bs-primary) !important; /* your teal */
  height: 6px;
  border-radius: 3px;
}

/* handle (knob) */
.rc-slider-handle {
  border: 2px solid var(--bs-primary) !important;
  background-color: #fff !important;

  box-shadow: none !important;
  transition: background-color .15s, border-color .15s;
}
.rc-slider-handle:hover,
.rc-slider-handle:focus {
  border-color: #055f61 !important;       /* darker teal */
  background-color: #e9ecef !important;
}

/* --- Disabled slider styling --- */
.rc-slider-disabled {
  opacity: 1 !important;                     /* prevent global fade-out */
}

/* muted track / rail colors */
.rc-slider-disabled .rc-slider-rail {
  background-color: #555b61 !important;  
       /* gray unfilled rail */
  border: 20px solid  #32383e !important;  
  position: relative;       /* allow offset */
  left: -10px;  
}
.rc-slider-disabled .rc-slider-track {
  background-color: #555b61 !important;       /* slightly lighter gray */
  border: 20px solid  #32383e !important;  
}

/* knob (handle) */
.rc-slider-disabled .rc-slider-handle {
  background-color: var(--bs-body-bg) !important;       /* light gray fill */
  border: 2px solid #888 !important;          /* medium gray ring */
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.3) !important; /* soft light-gray glow */
  cursor: not-allowed !important;
}

/* optional: marks / labels */
.rc-slider-disabled .rc-slider-mark-text {
  color: #8a8f95 !important;
}