.offmarket-toggle-container {
  display: inline-flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  width: auto;
  height: 39px;
  margin-bottom: 0px;
}

.offmarket-label-text {
  background-color: #fff;
  color: var(--secondary-color);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.2rem 0.3rem;
  border: 1px solid #00509e;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.offmarket-switch-bg {
  background-color: var(--secondary-color);
  color: #003366;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--secondary-color);
  border-left: 0;
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  pointer-events: none;
}

.offmarket-switch-input {
  pointer-events: auto;
  cursor: pointer;
}

.offmarket-switch-input .form-check.form-switch .form-check-input {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  border: #003366 !important;
  box-shadow: #003366 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.offmarket-switch-input .form-check.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #00509e;
  transition: transform 0.2s ease;

}

.offmarket-switch-input .form-check.form-switch .form-check-input:checked {
  background-image: none !important;
  background-color: #003366 !important; /* THIS LINE HERE controls track color when ON */
}

.offmarket-switch-input .form-check.form-switch .form-check-input:checked::after {
  background-color: #003366; /* <-- THIS actually controls the ON color! */
}


.offmarket-switch-input .form-check.form-switch .form-check-input:checked::before {
  transform: translateX(20px);

}

.price-metric-toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.2rem 0.3rem;
  border: 1px solid #00509e;
  background-color: #fff;
  border-radius: var(--border-radius);
}

.price-metric-label-text {
  font-weight: 600;
  font-size: 0.85rem;
  color: #00509e;
}
.metric-toggle-btn-group .btn {
    display: flex;               /* create a flex container            */
    align-items: center;         /* vertical ‑ centre the text          */
    justify-content: center;     /* optional: horizontal centre        */

    height: 30px;
    padding: 0 0.75rem;          /* remove top/bottom padding, keep X  */

    font-size: 1.02rem;
    font-weight: 500;
    color: #00509e;
    background: #fff;
    border: 0.5px solid #00509e;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.metric-toggle-btn-group .btn.active {
    background: #00509e !important;
    color: #fff   !important;
}

.metric-toggle-btn-group .btn:hover,
.metric-toggle-btn-group .btn:focus,
.metric-toggle-btn-group .btn:active {
    background-color: #fff !important;
    color: #00509e !important;
    box-shadow: none !important;
}

.metric-toggle-btn-group .btn.active {
    background-color: #00509e !important;
    height: 30px;
    color: #fff !important;
}

.metric-toggle-btn-group .metric-label-btn {
    cursor: default;
    opacity: 1;
}

.export-all {
    pointer-events: none;             /* Disable click interactions */
    opacity: 0.5;                     /* Make it look visually deactivated */
    position: relative;               /* Allow positioning of pseudo-element */
}

.export-all::after {
    content: 'Deactivated in trial version';
    position: absolute;
    bottom: -25px;                    /* Adjust vertical position as needed */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;             /* Ensure tooltip doesn't interfere with other interactions */
}

.export-all:hover::after {
    opacity: 1;                       /* Show message on hover */
}

.export-all-wrapper {
    display: inline-block;          /* To fit button size */
    position: relative;
}

.export-all-button {
    opacity: 0.5;
    pointer-events: none;           /* Disable clicking */
}

.export-all-wrapper::after {
    content: 'Deactivated in trial version';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;           /* Don't block other interactions */
}

.export-all-wrapper:hover::after {
    opacity: 1;                     /* Show on hover */
}

/* assets/toolbar.css */
.toolbar-divider{
  border-left:1px solid var(--bs-gray-400);   /* subtle grey */
  height:24px;
}


#adv-toggle-btn:active {
    transform: none !important;
}

/* Keep the same inside width whether the button is filled or outlined */
#adv-toggle-btn.btn-primary {
    padding-left: calc(.75rem + 1px);
    padding-right: calc(.75rem + 1px);
}

#adv-collapse.collapse {
    transition: none !important;          /* turn the height animation off   */
}

#adv-collapse,
#adv-collapse.collapsing {
  transition: none !important;
}

#grid-wrapper {
    position: relative;
    min-height: 70vh;                 /* reserves the space */
}

#grid-wrapper .dash-spinner-container {
    position: absolute;               /* anchor to the wrapper */
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;          /* perfect centring */
}

.grid-hidden  { opacity: 0; }
.grid-visible { opacity: 1; transition: opacity .25s ease; }


/*  assets/checkbox-brand.css
───────────────────────────────────────────────────────────────────────── */

/* dbc.Checkbox / dbc.Checklist / dbc.RadioItems ---------------------- */
.form-check-input:checked {
    background-color: #00509e !important;   /* fill */
    border-color:     #00509e !important;   /* outline */
}

/* keep the focus ring in the same hue */
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 80, 158, .25) !important;
}

/* dcc.Checklist ------------------------------------------------------ */
.dash-checkbox-input:checked + .dash-checkbox-label:before {
    background-color:  #0066cc !important;
    border-color:      #0066cc !important;
}

/* dcc.RadioItems ----------------------------------------------------- */
.dash-radio-input:checked + .dash-radio-label:before {
    background-color:  #0066cc !important;
    border-color:      #0066cc !important;
}



.ag-theme-alpine,
.custom-ag-grid.ag-theme-alpine {               /* ← same rules twice   */
    /* dark square + white tick – adjust to taste or use BS variables */
    --ag-checkbox-checked-background-color:  #0066cc; !important;
    --ag-checkbox-checked-color:             #0066cc !important;

    /* optional extras */
    --ag-checkbox-border-color:             #00509e;  /* thick border  */
    --ag-checkbox-unchecked-color:          #6c757d;   /* unticked box  */
}

.metric-toggle-btn-group .btn { transition: none !important; }

.btn { transition-duration: 10ms; }

.filter-label { transition: none !important; }


.metric-toggle-btn-group .btn.metric-last-visible.active {
    background-color: #00509e !important;
    color: #fff !important;
}