/* This file contains overwrites, which we want to have as defaults for vizro framework
but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough
for a pure Dash app.

All the HEX values starting with --text-code are taken from the Github code highlighting style. */

:root {
  --Dash-Spacing: 4px;
  --Dash-Stroke-Strong: var(--bs-border-color);
  --Dash-Stroke-Weak: var(--bs-border-color-translucent);
  --Dash-Fill-Interactive-Strong: var(--bs-primary-text-emphasis);
  --Dash-Fill-Weak: var(--bs-primary-bg-subtle);
  --Dash-Fill-Inverse-Strong: var(--bs-secondary-bg);
  --Dash-Text-Primary: var(--bs-primary);
  --Dash-Text-Strong: var(--bs-primary-text-emphasis);
  --Dash-Text-Disabled: var(--bs-tertiary-color);
  --Dash-Text-Weak: var(--bs-body-color);
  --Dash-Fill-Primary-Hover: var(--bs-primary-text-emphasis);
  --Dash-Fill-Primary-Active: var(--bs-primary);
  --Dash-Fill-Disabled: var(--bs-primary-bg-subtle);
  --Dash-Shading-Strong: var(--bs-box-shadow);
  --Dash-Shading-Weak: var(--bs-box-shadow-sm);
  --Dash-Border-Radius: var(--bs-border-radius);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #141721; /* QBDS: --surface-bg-accent */
  --bs-tertiary-bg: #181b26; /* QBDS: --surface-bg-primary */
  --bs-primary-bg-subtle: #272a35; /* QBDS: --fill-onsurface-ui-3  */
  --bs-highlight-bg: #ffffff14; /* QBDS: --stateslayer-overlay-hover */
  --bs-focus-ring-color: #00a9f4; /* QBDS: --brand-accent */
  --bs-card-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-bg: var(--bs-primary-bg-subtle); /* Dropdown bg on left-side */
  --hover-bg-subtle: var(--bs-gray-900);
  --Dash-Fill-Interactive-Weak: var(--bs-dark-bg-subtle);
  --input-field-bg: var(--bs-primary-bg-subtle);
}

[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-tertiary-bg: #F5F6F6;
  --bs-primary-bg-subtle: #f5f6f6;
  --bs-highlight-bg: #14172114;
  --bs-focus-ring-color: #00a9f4;
  --bs-card-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-bg: var(--bs-body-bg); /* Dropdown bg on left-side */
  --left-side-bg: var(--bs-body-bg);
  --Dash-Fill-Interactive-Weak: var(--bs-light-bg-subtle);

  /* When plugging in other bootstrap variables, surfaces-bg-card does not exist and it will just default to white. */
  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
  --hover-bg-subtle: var(--bs-gray-300);
  --input-field-bg: var(--bs-body-bg);
}

/* Override Mantine's default CSS variables with Bootstrap's here */
:root[data-bs-theme="dark"], :root[data-bs-theme="light"] {
  --mantine-color-body: var(--bs-body-bg);
  --mantine-color-text: var(--bs-body-color);
}


/* This is currently required as the usage of dbc.NavBar automatically adds classNames such as `navbar-light` and
`bg-light`, which come with an important tag from bootstrap. So we need below to overwrite these properties again. */
.navbar {
  background: var(--bs-tertiary-bg) !important;
  border: none;
  flex-wrap: nowrap;
}

.nav-link {
   color: var(--bs-body-color) !important;
}

.nav-link:active, .nav-link.active {
    color: var(--bs-primary) !important;
}

/* CARDS */
.card {
  background-color: var(--bs-card-bg);
  margin: 4px;
  overflow: scroll;
  padding: 0.75rem;
}

.card-wrapper .card,
.card-wrapper-actions .card {
  padding: 0;
}

.card .nav-link {
  height: 100%;
}

/* FORM ELEMENTS */
.form-check {
    height: 16px;
}

.form-check:last-of-type {
  margin-bottom: 0;
}

.form-switch .form-check-input {
  margin-right: 0;
  padding-left: 0;
}

.container-controls-panel .dash-dropdown {
  max-width: 280px;
  min-width: 160px;
}

.container-controls-panel .form-check-inline {
  align-content: center;
  height: 32px;
}

/* Remove label that automatically gets added when calling `dbc.Switch` to remove gap. */
label[for="theme-selector"] {
  display: none;
}

div.form-check.form-switch {
  align-items: start;
  display: flex;
  gap: 8px;
}


.card-nav:hover, .card-nav.hover {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
}

.navbar .nav-link {
  border: none;
  height: 60px;
  padding: 1rem;
  width: 60px;
}

.accordion {
  width: 100%;
}


legend {
  font-size: inherit;
}


/* NEW QBDS - take over to bootstrap */
.form-control {
  box-shadow: none;
}

.form-control:focus, .form-control.focus, .input-group-text:focus, .input-group-text.focus {
  background-color: var(--bs-body-bg);
}

.form-control:hover:not(:focus), .form-control.hover:not(:focus), .input-group-text:hover:not(:focus), .input-group-text.hover:not(:focus) {
  background-color: var(--bs-highlight-bg);
}


.accordion-item .nav-link:active, .accordion-item .nav-link.active {
    background: var(--bs-highlight-bg) !important;
}

.accordion-item .nav-link:hover, .accordion-item .nav-link.hover {
    background: var(--bs-highlight-bg) !important;
}