@use "sass:color";
@use "bootswatch/dist/flatly/variables" as flatly;
@use "bootswatch/dist/darkly/variables" as darkly;

$lead-font-weight: 400;

// custom "dark" color, little less dark than flatly
$blue: #455a64;

// default is ~0.97rem
$font-size-base: 1rem;

// make dark darker, default it's $gray-700
$dark: #3b4247;
$enable-shadows: true;
$enable-dark-mode: false;
$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;
$tooltip-max-width: 400px;
$body-bg: #455a64;

@import "./Fonts";
@import "bootstrap/scss/functions";

// Import flatly (light) variables as base
@import "bootswatch/dist/flatly/variables";

// make links light gray by default instead of green
$link-color: $gray-700;
$navbar-dark-brand-color: $navbar-dark-color;
$navbar-dark-brand-hover-color: $gray-200;
$navbar-dark-hover-color: $gray-200;
$navbar-dark-active-color: $gray-200;

// fix active tab color, for some reason it ends up with $primary as bg color
$nav-tabs-link-active-bg: #fff;
$nav-tabs-link-active-color: $gray-700;

// pagination tweaks
$pagination-color: $white;
$pagination-bg: $gray-500;
$pagination-hover-color: $white;
$pagination-hover-bg: $gray-700;
$pagination-active-bg: $pagination-hover-bg;
$pagination-disabled-color: $white;
$pagination-disabled-bg: $gray-300;
$progress-bg: color.adjust($light, $lightness: -10%);
$accordion-active-bg: $gray-100;
$accordion-button-bg: $gray-100;
$accordion-button-active-bg: $gray-100;
$accordion-border-color: $gray-300;
$modal-header-border-color: $gray-300;
$table-bg: transparent;
$table-accent-bg: transparent;
$card-cap-bg: inherit;
$kbd-color: $white;
$kbd-bg: $dark;

// Bootstrap 5.3 changed text-muted from $gray-600 to var(--bs-secondary-color)
// which defaults to rgba($body-color, .75) - nearly black in light theme.
// Override to match the old text-muted color.
$body-secondary-color: $gray-600;

// Import Bootstrap variables with !default (won't override flatly values already set)
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";

// Bootstrap layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";

// @import "bootstrap/scss/breadcrumb"; // unused
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";

// @import "bootstrap/scss/carousel"; // unused
@import "bootstrap/scss/spinners";

// @import "bootstrap/scss/offcanvas"; // unused
// @import "bootstrap/scss/placeholders"; // unused

// Bootstrap helpers & utilities
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// Bootswatch flatly component overrides
@import "bootswatch/dist/flatly/bootswatch";

// Light color mode — flatly colors
[data-bs-theme="light"] {
  background-color: #455a64;

  --bs-body-bg: #455a64;
  --bs-body-bg-rgb: 69, 90, 100;
  --karma-alert-bg: #{$white};
  --karma-alert-history-inactive: #{color.adjust($light, $lightness: 1%)};
  --karma-alertgroup-body-bg: #{$white};
  --karma-alertgroup-footer-bg: #{$gray-100};
  --karma-silence-id: #{$dark};
  --karma-silence-color: #{$dark};
  --karma-silence-bg: #{color.adjust($gray-200, $lightness: 4%)};
  --karma-silence-border: #{$gray-700};
  --karma-silence-comment-color: #{$gray-800};
  --karma-filter-input-hoover-bg: #{$white};
  --karma-filter-input-hoover-color: #{$black};
  --karma-placeholder-color: #{$secondary};
  --karma-filterinput-border: #{$navbar-dark-color};
  --karma-grid-swimlane-bg: #{color.adjust($dark, $lightness: 2%)};
  --karma-bg-focused: #{color.adjust($blue, $lightness: 5%)};
  --karma-bg-focused-rgb: #{color.red(color.adjust($blue, $lightness: 5%))}, #{color.green(color.adjust($blue, $lightness: 5%))}, #{color.blue(color.adjust($blue, $lightness: 5%))};
  --karma-annotation-link-border: #{$light};
  --karma-components-date-range-sub-color: #{$black};
  --karma-input-range-track-background: #{$gray-400};
  --karma-input-range-thumb-font-color: #{$white};
  --karma-color-default: #708090;
  --karma-with-click-default: #{$black};
  --karma-with-click-dark: #{$white};
  --karma-with-click-light: #{$black};
  --karma-accordion-border-color: #{$gray-300};
  --karma-link-color: #{$gray-700};
  --karma-toast-bg: #{color.adjust($dark, $lightness: -5%)};
  --karma-toast-bg-rgb: #{color.red(color.adjust($dark, $lightness: -5%))}, #{color.green(color.adjust($dark, $lightness: -5%))}, #{color.blue(color.adjust($dark, $lightness: -5%))};
  --karma-progress-bg: #{color.adjust($light, $lightness: -10%)};
  --karma-label-primary-border: #{color.adjust($primary, $lightness: 2%)};
  --karma-label-secondary-border: #{color.adjust($secondary, $lightness: -1%)};
  --karma-label-secondary-bg: #{color.adjust($secondary, $lightness: -2%)};
  --karma-label-success-border: #{color.adjust($success, $lightness: -2%)};
  --karma-label-danger-border: #{color.adjust($danger, $lightness: 2%)};
  --karma-label-warning-border: #{color.adjust($warning, $lightness: 3%)};
  --karma-label-info-border: #{color.adjust($info, $lightness: -2%)};
  --karma-label-dark-border: #{color.adjust($dark, $lightness: -2%)};

  .modal {
    --bs-modal-bg: #{$white};
  }

  .accordion {
    --bs-accordion-bg: #{$white};
  }

  .list-group {
    --bs-list-group-bg: #{$white};
  }

  .card {
    --bs-card-bg: #{$white};
  }

  .popover {
    --bs-popover-bg: #{$white};
  }

  .tooltip {
    --bs-tooltip-bg: #{$dark};
    --bs-tooltip-color: #{$white};
  }

  // unused
  // .offcanvas {
  //   --bs-offcanvas-bg: #{$white};
  // }

  .form-control {
    background-color: #{$white};
  }

  .form-select {
    background-color: #{$white};
  }

  .form-check-input {
    --bs-form-check-bg: #{$white};
  }

  .nav-tabs .nav-link.active {
    color: #{$gray-900};
  }

  .dropdown-menu {
    --bs-dropdown-bg: #{$white};
    --bs-dropdown-link-color: #{$gray-700};
    --bs-dropdown-link-hover-color: #{$white};
    --bs-dropdown-link-hover-bg: #{$primary};
  }
}

// Dark color mode — darkly colors
[data-bs-theme="dark"] {
  background-color: #455a64;
  color: #{darkly.$body-color};

  --bs-body-bg: #455a64;
  --bs-body-bg-rgb: 69, 90, 100;
  --bs-body-color: #{darkly.$body-color};
  --bs-emphasis-color: #{darkly.$white};
  --bs-secondary-color: #{rgba(darkly.$gray-300, 0.75)};
  --bs-secondary-bg: #{darkly.$secondary};
  --bs-tertiary-color: #{rgba(darkly.$gray-300, 0.5)};
  --bs-tertiary-bg: #{color.adjust(darkly.$gray-800, $lightness: -2%)};
  --bs-primary: #455a64;
  --bs-secondary: #{darkly.$secondary};
  --bs-success: #{darkly.$success};
  --bs-info: #{darkly.$info};
  --bs-warning: #{darkly.$warning};
  --bs-danger: #{darkly.$danger};
  --bs-light: #{color.adjust(darkly.$gray-800, $lightness: 5%)};
  --bs-dark: #{color.adjust(darkly.$dark, $lightness: -4%)};
  --bs-primary-rgb: 69, 90, 100;
  --bs-secondary-rgb: #{color.red(darkly.$secondary)}, #{color.green(darkly.$secondary)}, #{color.blue(darkly.$secondary)};
  --bs-success-rgb: #{color.red(darkly.$success)}, #{color.green(darkly.$success)}, #{color.blue(darkly.$success)};
  --bs-info-rgb: #{color.red(darkly.$info)}, #{color.green(darkly.$info)}, #{color.blue(darkly.$info)};
  --bs-warning-rgb: #{color.red(darkly.$warning)}, #{color.green(darkly.$warning)}, #{color.blue(darkly.$warning)};
  --bs-danger-rgb: #{color.red(darkly.$danger)}, #{color.green(darkly.$danger)}, #{color.blue(darkly.$danger)};
  --bs-light-rgb: #{color.red(color.adjust(darkly.$gray-800, $lightness: 5%))}, #{color.green(color.adjust(darkly.$gray-800, $lightness: 5%))}, #{color.blue(color.adjust(darkly.$gray-800, $lightness: 5%))};
  --bs-dark-rgb: #{color.red(color.adjust(darkly.$dark, $lightness: -4%))}, #{color.green(color.adjust(darkly.$dark, $lightness: -4%))}, #{color.blue(color.adjust(darkly.$dark, $lightness: -4%))};
  --bs-link-color: #{darkly.$gray-400};
  --bs-link-hover-color: #{color.adjust(darkly.$gray-400, $lightness: 10%)};
  --bs-border-color: #{darkly.$secondary};
  --karma-alert-bg: #{darkly.$gray-800};
  --karma-alert-history-inactive: #{color.adjust(darkly.$gray-700, $lightness: 2%)};
  --karma-alertgroup-body-bg: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
  --karma-alertgroup-footer-bg: #{color.adjust(darkly.$gray-700, $lightness: 2%)};
  --karma-silence-id: #{darkly.$white};
  --karma-silence-color: #{darkly.$white};
  --karma-silence-bg: #{color.adjust(darkly.$gray-900, $lightness: 4%)};
  --karma-silence-border: #{darkly.$black};
  --karma-silence-comment-color: #{darkly.$gray-500};
  --karma-filter-input-hoover-bg: #{darkly.$gray-700};
  --karma-filter-input-hoover-color: #{darkly.$white};
  --karma-placeholder-color: #{darkly.$gray-600};
  --karma-filterinput-border: #{darkly.$navbar-dark-color};
  --karma-grid-swimlane-bg: #{color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: 2%)};
  --karma-bg-focused: #{color.adjust(#455a64, $lightness: -5%)};
  --karma-bg-focused-rgb: #{color.red(color.adjust(#455a64, $lightness: -5%))}, #{color.green(color.adjust(#455a64, $lightness: -5%))}, #{color.blue(color.adjust(#455a64, $lightness: -5%))};
  --karma-annotation-link-border: #{darkly.$secondary};
  --karma-components-date-range-sub-color: #{darkly.$white};
  --karma-input-range-track-background: #{darkly.$secondary};
  --karma-input-range-thumb-font-color: #{darkly.$white};
  --karma-color-default: #708090;
  --karma-with-click-default: #{darkly.$white};
  --karma-with-click-dark: #{darkly.$white};
  --karma-with-click-light: #{darkly.$dark};
  --karma-accordion-border-color: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
  --karma-link-color: #{darkly.$gray-400};
  --karma-toast-bg: #{color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%)};
  --karma-toast-bg-rgb: #{color.red(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))}, #{color.green(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))}, #{color.blue(color.adjust(color.adjust(darkly.$dark, $lightness: -4%), $lightness: -5%))};
  --karma-progress-bg: #{darkly.$black};
  --karma-label-primary-border: #{color.adjust(darkly.$primary, $lightness: 2%)};
  --karma-label-secondary-border: #{color.adjust(darkly.$secondary, $lightness: -1%)};
  --karma-label-secondary-bg: #{color.adjust(darkly.$secondary, $lightness: -2%)};
  --karma-label-success-border: #{color.adjust(darkly.$success, $lightness: -2%)};
  --karma-label-danger-border: #{color.adjust(darkly.$danger, $lightness: 2%)};
  --karma-label-warning-border: #{color.adjust(darkly.$warning, $lightness: 3%)};
  --karma-label-info-border: #{color.adjust(darkly.$info, $lightness: -2%)};
  --karma-label-dark-border: #{color.adjust(darkly.$dark, $lightness: -2%)};

  // Component overrides for dark theme
  .badge,
  .modal-content {
    color: #{darkly.$white};
  }

  .navbar {
    @supports (backdrop-filter: blur(12px)) {
      background-color: rgba(#455a64, 0.85);
    }

    @supports not (backdrop-filter: blur(12px)) {
      background-color: rgba(#455a64, 0.95);
    }
  }

  .nav-tabs {
    --bs-nav-tabs-border-color: #{darkly.$gray-700};
    --bs-nav-tabs-link-hover-border-color: #{darkly.$gray-700} #{darkly.$gray-700} transparent;

    .nav-link.active {
      color: #{darkly.$white};
      background-color: #{darkly.$gray-800};
      border-color: #{darkly.$gray-700} #{darkly.$gray-700} #{darkly.$gray-800};
    }
  }

  .form-control {
    color: #{darkly.$white};
    background-color: #{darkly.$secondary};
    border-color: #{darkly.$secondary};

    &:disabled {
      background-color: #{darkly.$gray-800};
    }
  }

  .form-check-input {
    background-color: #{darkly.$gray-100};
    border-color: #{darkly.$gray-100};

    &:checked {
      background-color: #455a64;
      border-color: #455a64;
    }

    &:disabled {
      background-color: #{darkly.$gray-700};

      &:checked {
        background-color: #{darkly.$gray-700};
      }
    }
  }

  .form-select {
    color: #{darkly.$white};
    background-color: #{darkly.$secondary};
    border-color: #{darkly.$secondary};
  }

  .input-group-text {
    background-color: #{darkly.$gray-800};
  }

  .dropdown-menu {
    --bs-dropdown-bg: #{color.adjust(darkly.$gray-800, $lightness: -2%)};
    --bs-dropdown-border-color: #{darkly.$gray-700};
    --bs-dropdown-divider-bg: #{darkly.$gray-700};
    --bs-dropdown-link-color: #{darkly.$white};
    --bs-dropdown-link-hover-color: #{darkly.$white};
    --bs-dropdown-link-hover-bg: #455a64;
  }

  button.btn {
    --bs-btn-active-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
  }

  .btn-secondary {
    --bs-btn-bg: #{darkly.$secondary};
    --bs-btn-border-color: #{darkly.$secondary};
    --bs-btn-hover-bg: #{color.adjust(darkly.$secondary, $lightness: 5%)};
    --bs-btn-hover-border-color: #{color.adjust(darkly.$secondary, $lightness: 5%)};
    --bs-btn-active-bg: #{color.adjust(darkly.$secondary, $lightness: 8%)};
    --bs-btn-active-border-color: #{color.adjust(darkly.$secondary, $lightness: 8%)};
    --bs-btn-disabled-bg: #{darkly.$secondary};
    --bs-btn-disabled-border-color: #{darkly.$secondary};
  }

  .btn-light {
    --bs-btn-bg: #{darkly.$gray-900};
    --bs-btn-border-color: #{darkly.$gray-700};
    --bs-btn-color: #{darkly.$white};
    --bs-btn-hover-bg: #{darkly.$gray-700};
    --bs-btn-hover-border-color: #{darkly.$gray-700};
    --bs-btn-hover-color: #{darkly.$white};
    --bs-btn-active-bg: #{darkly.$gray-800};
    --bs-btn-active-border-color: #{darkly.$gray-700};
    --bs-btn-active-color: #{darkly.$white};
    --bs-btn-disabled-bg: #{darkly.$gray-900};
    --bs-btn-disabled-border-color: #{darkly.$gray-700};
    --bs-btn-disabled-color: #{darkly.$gray-600};
  }

  .btn-outline-secondary {
    --bs-btn-color: #{darkly.$secondary};
    --bs-btn-border-color: #{darkly.$secondary};
    --bs-btn-hover-color: #{darkly.$white};
    --bs-btn-hover-bg: #{darkly.$secondary};
    --bs-btn-hover-border-color: #{darkly.$secondary};
    --bs-btn-active-color: #{darkly.$white};
    --bs-btn-active-bg: #{darkly.$secondary};
    --bs-btn-active-border-color: #{darkly.$secondary};
    --bs-btn-disabled-color: #{darkly.$secondary};
    --bs-btn-disabled-border-color: #{darkly.$secondary};
  }

  .accordion {
    --bs-accordion-bg: #{darkly.$gray-800};
    --bs-accordion-btn-bg: #{darkly.$gray-700};
    --bs-accordion-active-bg: #{darkly.$gray-700};
    --bs-accordion-border-color: #{color.adjust(darkly.$gray-700, $lightness: 5%)};
    --bs-accordion-btn-color: #{darkly.$white};
  }

  .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .list-group {
    --bs-list-group-bg: #{darkly.$list-group-bg};
    --bs-list-group-border-color: #{darkly.$list-group-border-color};
    --bs-list-group-color: #{darkly.$body-color};
  }

  .card {
    --bs-card-bg: #{darkly.$card-bg};
    --bs-card-cap-bg: inherit;
    --bs-card-color: #{darkly.$body-color};
  }

  .modal-content {
    --bs-modal-bg: #{darkly.$modal-content-bg};
    --bs-modal-border-color: #{darkly.$modal-content-border-color};
    --bs-modal-header-border-color: #{darkly.$modal-header-border-color};
    --bs-modal-footer-border-color: #{darkly.$modal-header-border-color};
  }

  .btn-close {
    // TODO: get rid of _bootswatch.scss imports and then we can simply set color here.
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .progress {
    --bs-progress-bg: #{darkly.$progress-bg};
  }

  .pagination {
    --bs-pagination-color: #{darkly.$white};
    --bs-pagination-bg: #{darkly.$gray-700};
    --bs-pagination-hover-color: #{darkly.$white};
    --bs-pagination-hover-bg: #455a64;
    --bs-pagination-active-bg: #455a64;
    --bs-pagination-border-color: #{color.adjust(darkly.$dark, $lightness: -4%)};
    --bs-pagination-disabled-color: #{darkly.$gray-600};
    --bs-pagination-disabled-bg: #{darkly.$gray-700};
  }

  .toast {
    --bs-toast-bg: #{darkly.$toast-background-color};
    --bs-toast-header-bg: #{darkly.$toast-header-background-color};
  }

  .popover {
    --bs-popover-bg: #{darkly.$popover-bg};
    --bs-popover-header-bg: #{darkly.$popover-header-bg};
  }

  .tooltip {
    --bs-tooltip-bg: var(--bs-tertiary-bg);
    --bs-tooltip-color: var(--bs-emphasis-color);
  }

  // darkly bootswatch alert override
  .alert {
    color: #{darkly.$white};
    border: none;

    a,
    .alert-link {
      color: #{darkly.$white};
      text-decoration: underline;
    }

    @each $color, $value in (
      "primary": darkly.$primary,
      "secondary": darkly.$secondary,
      "success": darkly.$success,
      "info": darkly.$info,
      "warning": darkly.$warning,
      "danger": darkly.$danger,
      "light": darkly.$light,
      "dark": darkly.$dark,
    ) {
      &-#{$color} {
        background-color: #{$value};
      }
    }
  }

  // unused
  // .breadcrumb a {
  //   color: #{darkly.$white};
  // }
}

/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import "./Components";

a {
  color: var(--karma-link-color);
}

button.btn {
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
}
