// pow() - Raise number to the nth power
//
// @param {number} $base      The base number
// @param {number} $exponents The exponent to which to raise $base
@use 'sass:math';

:root {
  --scroll-margin-top: 2.5rem;
  --navbar-top-height: 4rem;
  --navbar-top-menu-margin: 1.5rem;
  --navbar-top-height-slim: 1.7rem;
  --navbar-top-height-dual: 7.25rem;
  --navbar-top-menu-margin-dual: 1.3rem;
  --navbar-top-menu-margin-slim: 0.8rem;
  --kanban-bg: #e3e6ed;
  --kanban-column-bg: var(--body-bg);
  --kanban-drag-bg: var(--white);
  --kanban-column-hover-bg: var(--white);
  --body-font-family: var(--font-sans-serif);
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.49;
  --border-width: 1px;
  --border-style: solid;
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-xxl: 2rem;
  --border-radius-2xl: var(--border-radius-xxl);
  --border-radius-pill: 50rem;
  --box-shadow: 0px 2px 4px -2px rgba(36, 40, 46, 0.08);
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --focus-ring-width: 0.25rem;
  --focus-ring-opacity: 0.25;
  --focus-ring-color: rgba(56, 116, 255, 0.25);
  --quaternary-bg: #9fa6bc;
  --quaternary-bg-rgb: 159, 166, 188;
  --emphasis-bg: #fff;
  --emphasis-bg-rgb: 255, 255, 255;
  --body-highlight-color: #222834;
  --body-highlight-bg: #eff2f6;
  --navbar-vertical-width: 15.875rem;
}

[data-bs-theme=light] {
  --blue: #3874ff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #d63384;
  --red: #fa3b1d;
  --orange: #e5780b;
  --yellow: #ffc107;
  --green: #25b003;
  --teal: #20c997;
  --cyan: #0097eb;
  --black: #000000;
  --white: #fff;
  --gray-50: #f5f7fa;
  --gray-100: #eff2f6;
  --gray-200: #e3e6ed;
  --gray-300: #cbd0dd;
  --gray-400: #9fa6bc;
  --gray-500: #8a94ad;
  --gray-600: #6e7891;
  --gray-700: #525b75;
  --gray-800: #3e465b;
  --gray-900: #31374a;
  --gray-1000: #222834;
  --primary: #3874ff;
  --secondary: #31374a;
  --success: #25b003;
  --info: #0097eb;
  --warning: #e5780b;
  --danger: #fa3b1d;
  --light: #eff2f6;
  --dark: #141824;
  --primary-rgb: 56, 116, 255;
  --body-color: #31374a;
  --body-bg: #f5f7fa;
  --emphasis-color: #141824;
  --secondary-color: #3e465b;
  --link-color: #3874ff;
  --link-hover-color: #003cc7;
  --link-decoration: none;
  --link-hover-decoration: underline;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --body-color: #9fa6bc;
  --body-bg: #0f111a;
  --emphasis-color: #eff2f6;
  --secondary-color: #949db5;
  --secondary-bg: #31374a;
  --tertiary-color: #8a94ad;
  --primary-bg-subtle: #1C2231;
  --secondary-bg-subtle: #252834;
  --success-bg-subtle: #1D2527;
  --info-bg-subtle: #1A2431;
  --warning-bg-subtle: #262527;
  --danger-bg-subtle: #241F25;
  --light-bg-subtle: #3e465b;
  --dark-bg-subtle: #1f232e;
  --kanban-bg: #0f111a;
  // --kanban-column-bg: var(--emphasis-bg);
  --kanban-drag-bg: #1c222c;
  --kanban-column-hover-bg: #1c222c;
}

// Define Sass variables based on CSS variables
$navbar-top-height: var(--navbar-top-height);
$navbar-top-menu-margin: var(--navbar-top-menu-margin);
$navbar-top-height-slim: var(--navbar-top-height-slim);
$navbar-top-height-dual: var(--navbar-top-height-dual);
$navbar-top-menu-margin-dual: var(--navbar-top-menu-margin-dual);
$navbar-top-menu-margin-slim: var(--navbar-top-menu-margin-slim);
$kanban-bg: var(--kanban-bg);
$kanban-column-bg: var(--kanban-column-bg);
$kanban-drag-bg: var(--kanban-drag-bg);
$kanban-column-hover-bg: var(--kanban-column-hover-bg);
$body-font-family: var(--body-font-family);
$body-font-size: var(--body-font-size);
$body-font-weight: var(--body-font-weight);
$body-line-height: var(--body-line-height);
$border-width: var(--border-width);
$border-style: var(--border-style);
$border-radius: var(--border-radius);
$border-radius-sm: var(--border-radius-sm);
$border-radius-lg: var(--border-radius-lg);
$border-radius-xl: var(--border-radius-xl);
$border-radius-xxl: var(--border-radius-xxl);
$border-radius-2xl: var(--border-radius-2xl);
$border-radius-pill: var(--border-radius-pill);
$box-shadow: var(--box-shadow);
$box-shadow-sm: var(--box-shadow-sm);
$box-shadow-lg: var(--box-shadow-lg);
$box-shadow-inset: var(--box-shadow-inset);
$focus-ring-width: var(--focus-ring-width);
$focus-ring-opacity: var(--focus-ring-opacity);
$focus-ring-color: var(--focus-ring-color);
$quaternary-bg: var(--quaternary-bg);
$quaternary-bg-rgb: var(--quaternary-bg-rgb);
$emphasis-bg: var(--emphasis-bg);
$emphasis-bg-rgb: var(--emphasis-bg-rgb);
$body-highlight-color: var(--body-highlight-color);
$body-highlight-bg: var(--body-highlight-bg);
$navbar-vertical-width: var(--navbar-vertical-width);

// scss-docs-start form-select-variables
$form-select-indicator-padding: 2.5rem !default;
$form-select-disabled-bg: var(--#{$prefix}quaternary-bg) !default;
$form-select-box-shadow: $input-box-shadow !default;
$form-select-indicators: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03NS4zNDggMTI3LjE5MkM3Mi40MzgxIDEyNy4xOTIgNjkuODUxNCAxMjYuMjIyIDY3LjkxMTUgMTI0LjI4Mkw1LjgzMjE1IDYyLjIwMjNDMS42Mjg4NyA1OC4zMjIzIDEuNjI4ODcgNTEuNTMyNCA1LjgzMjE1IDQ3LjY1MjVDOS43MTIxMSA0My40NDkyIDE2LjUwMiA0My40NDkyIDIwLjM4MiA0Ny42NTI1TDc1LjM0OCAxMDIuMjk1TDEyOS45OTEgNDcuNjUyNUMxMzMuODcxIDQzLjQ0OTIgMTQwLjY2MSA0My40NDkyIDE0NC41NDEgNDcuNjUyNUMxNDguNzQ0IDUxLjUzMjQgMTQ4Ljc0NCA1OC4zMjIzIDE0NC41NDEgNjIuMjAyM0w4Mi40NjEzIDEyNC4yODJDODAuNTIxMyAxMjYuMjIyIDc3LjkzNDcgMTI3LjE5MiA3NS4zNDggMTI3LjE5MloiIGZpbGw9IiMzMTM3NEEiLz4KPC9zdmc+Cg==') !default;
$form-select-bg-size: 9px 12px !default;
// scss-docs-end form-select-variables

@function mapReverse($map) {
  $result: null;

  @if type-of($map) == 'map' {
    $keys: map-keys($map);
    $map-reversed: ();

    @for $i from length($keys) through 1 {
      $map-reversed: map-merge(
        $map-reversed,
        (
          nth($keys, $i): map-get($map, nth($keys, $i))
        )
      );
    }

    @if type-of($map-reversed) == 'map' {
      $result: $map-reversed;
    } @else {
      @warn 'There was an error reversing the order of "#{$map}"';
    }
  } @else {
    @warn '"#{$map}" is not a valid map';
  }

  @return $result;
}


//*-----------------------------------------------
//|   Grid Breakpoints
//-----------------------------------------------*/
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1540px
) !default;

//*-----------------------------------------------
//|   Spacing
//----------------------------------------------
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
  7: $spacer * 3,
  8: $spacer * 3.5,
  9: $spacer * 4,
  10: $spacer * 4.5,
  11: $spacer * 5,
  12: $spacer * 6,
  13: $spacer * 6.5,
  14: $spacer * 7,
  15: $spacer * 7.5
) !default;


//*-----------------------------------------------
//|   Navbar Vertical
//-----------------------------------------------*/

$navbar-vertical-breakpoints: mapReverse($grid-breakpoints) !default;

// /*-----------------------------------------------
//|   Footer
//-----------------------------------------------*/
$footer-height: 4rem !default;

//*-----------------------------------------------
//|   Layout
//-----------------------------------------------*/
$content-padding-x: map-get($spacers, 6) !default;
$content-padding-top: calc($navbar-top-height + 2rem) !default;
$content-padding-bottom: 6.375rem !default;


.kanban-content {
  position: fixed;
  padding-top: $navbar-top-height;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0;
  right: 0;
  // z-index: -1;

  .phoenix-offcanvas {
    width: 100%;
    top: $navbar-top-height;
    padding: 1rem 2rem;
    height: calc(100vh - $navbar-top-height - $footer-height);

    &.show {
      ~ {
        .phoenix-offcanvas-backdrop {
          top: $navbar-top-height;
          height: calc(100vh - $navbar-top-height - $footer-height);
        }
      }
    }
  }
}

.navbar {
  @each $item, $value in $navbar-vertical-breakpoints {
    @include media-breakpoint-up($item) {
      &.navbar-expand-#{$item} {
        ~ .kanban-content,
        ~ .kanban-deals-content {
          .kanban-header {
            padding-left: $content-padding-x;
            padding-right: $content-padding-x;
          }
          .kanban-container {
            padding-left: $content-padding-x;
            padding-right: $content-padding-x;
          }
          .footer {
            padding-left: $content-padding-x;
          }
        }
      }
    }
  }
}

.kanban-header {
  padding: map-get($spacers, 2) map-get($spacers, 4);
  border-bottom: 1px solid var(--#{$prefix}border-color);
}

.kanban-container {
  white-space: nowrap;
  padding: 0 map-get($spacers, 4);

  background-color: var(--#{$prefix}kanban-bg);
  height: calc(100vh - $navbar-top-height - $footer-height - 106px);
  @include media-breakpoint-up(md) {
    height: calc(100vh - $navbar-top-height - $footer-height - 63px);
  }
  .sortable-drag {
    // dragging item
    .sortable-item {
      &.card {
        background-color: var(--#{$prefix}kanban-drag-bg);
      }
    }
  }

  .sortable-item {
    &.card {
      background-color: var(--#{$prefix}kanban-column-bg);
      border-radius: $border-radius-lg;
      border: 0;
      &:hover {
        background-color: var(--#{$prefix}kanban-column-hover-bg);
      }
    }
  }

  .kanban-items-container {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    transition-delay: 0.2s;
    min-height: 1rem;
  }
  .kanban-column {
    display: inline-block !important;
    width: 22rem;
    white-space: normal;
    vertical-align: top;
    margin-right: 1rem;
    background-color: var(--#{$prefix}kanban-column-bg);
    transition: width 0.2s ease;
    height: 100%;
    user-select: none;
  }
  .kanban-column-title {
    font-weight: $font-weight-bold;
    color: var(--#{$prefix}emphasis-color);
  }

  .kanban-title-badge {
    border-radius: var(--#{$prefix}border-radius-pill);
    background-color: var(--#{$prefix}secondary-bg);
    font-size: map-get($font-sizes, 9);
    font-weight: $font-weight-semibold;
    // padding: $badge-padding-y $badge-padding-x;
    padding: 4px 9px;
    margin-left: 0.5rem;
    color: var(--#{$prefix}emphasis-color);
    line-height: 1;
    display: inline;
  }

  .kanban-item-dropdown-btn {
    padding: 0 0.5rem;
    position: absolute !important;
    right: 0;
    top: 0;
    z-index: 2 !important;
  }
  .kanban-header-dropdown-btn {
    position: absolute !important;
    top: -15px;
    z-index: 2 !important;
  }
  .kanban-collapse-icon {
    cursor: pointer;
    &.uil-arrow-from-right {
      display: none;
    }
  }
  // kanban collapse
  .kanban-column {
    &.collapsed {
      width: 3.5rem;
      transition: width 0.2s ease;
      overflow: hidden;
      height: 100%;
      position: relative;
      .kanban-header-dropdown-btn {
        display: none !important;
      }
      .kanban-column-header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
      .kanban-column-title {
        margin: 0;
        position: absolute;
        top: 10rem;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg);
        white-space: nowrap;
        min-width: 10rem;
        text-align: end;
      }
      .kanban-collapse-icon {
        margin: 0 auto;
        &.uil-left-arrow-to-left {
          display: none;
        }
        &.uil-arrow-from-right {
          display: inline;
        }
      }
      .kanban-add-task {
        display: none;
      }

      .kanban-items-container {
        // display: none;
        opacity: 0;
        transition: none;
        .sortable-item {
          display: none;
        }
      }
    }
  }
}
.kanban-add-task {
  display: flex;
  button {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    &:hover {
      background-color: var(--#{$prefix}quaternary-bg) !important;
    }
  }
}

.kanban-action-item {
  background-color: var(--#{$prefix}body-bg);
  margin-bottom: 0.5rem;
  border-radius: $border-radius;
  position: relative;
}

// ----------------------------------------
//        kanban create board
// -------- -------------------------------
.kanban-create-board {
  .nav-underline {
    gap: 0;
    .nav-item {
      flex: 1;
      .nav-link {
        text-align: center;
        &::before {
          display: none;
        }
      }
    }
  }
}

.kanban-column-input-container {
  position: relative;
  .kanban-column-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-8px);
  }
  .form-floating {
    input {
      padding-left: 2.25rem;
    }
  }
  &.flatpickr-input-sm {
    .flatpickr-icon {
      transform: translateY(-13px);
    }
  }
}

.kanban-color-picker {
  min-width: 128px;
  padding: 14px 48px 14px 16px;
  background: var(--#{$prefix}emphasis-bg);
  height: 100%;
  width: 100%;
  border: 1px solid $input-border-color;
  border-radius: var(--#{$prefix}border-radius);
  position: relative;
  background-image: $form-select-indicators;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px 12px;
  &::-webkit-color-swatch {
    border: none;
  }
}

.kanban-column-item {
  display: flex;
  margin-bottom: 2rem;
}

.kanban-swatch-label {
  width: 50px;
  height: 40px;
  border: 1px solid var(--#{$prefix}border-color-translucent);
  border-radius: var(--#{$prefix}border-radius-pill);
}
.kanban-radio-bg-image {
  border-radius: var(--#{$prefix}border-radius-lg);
}

.kanban-swatch-radio:checked {
  + {
    .kanban-swatch-btn-shadow {
      border-color: var(--#{$prefix}primary);
      box-shadow: 0 0 0 0.2rem rgba(var(--#{$prefix}primary-rgb), 0.5);
      outline: 0;
    }
    .kanban-radio-bg-image {
      box-shadow: 0 0 0 0.2rem rgba(var(--#{$prefix}primary-rgb), 0.5);
    }
  }
}

.kanban-tag {
  .kanban-tag-badge {
    width: 100%;
    transition: width 0.2s ease;
  }
  .kanban-tag-action-icons {
    padding: 0.66rem 0.66rem;
    border-color: transparent;
    opacity: 0;
    transition: opacity 0.2s ease;

    &:hover {
      // border-color: var(--#{$prefix}border-color-translucent);
      background-color: var(--#{$prefix}body-highlight-bg) !important;
    }
  }
  &:hover {
    .kanban-tag-badge {
      width: calc(100% - 80px);
      transition: width 0.2s ease;
    }
    .kanban-tag-action-icons {
      opacity: 1;
    }
  }
}

.theme-wizard {
  &.theme-wizard-progress {
    .nav-wizard {
      .nav-item {
        pointer-events: none;
        flex: 1;
        &:first-child {
          .nav-link {
            &::before {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
          }
        }
        &:last-child {
          .nav-link {
            &::before {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }
        .nav-link {
          &:before {
            content: '' !important;
            height: 6px !important;
            left: 0 !important;
            top: 48% !important;
            width: 100% !important;
            position: absolute !important;
            background-color: var(--#{$prefix}tertiary-bg) !important ;
          }
        }
      }
    }
    .nav-wizard.nav-wizard-progress {
      .nav-item {
        .nav-link {
          &.active {
            &::before {
              background-color: var(--#{$prefix}primary) !important ;
            }
          }
          &.complete,
          &.done {
            &::before {
              background-color: var(--#{$prefix}primary) !important ;
            }
          }
        }
      }
    }
  }
}

// kanban modal view

@each $color, $value in $theme-colors {
  .kanban-column-underline-#{$color} {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      height: 4px;
      width: 100%;
      border-radius: 5px;
      background-color: var(--#{$prefix}#{$color});
    }
  }
}
.kanban-radio-collapse {
  input[aria-expanded='true'] {
    + label {
      pointer-events: none;
    }
    pointer-events: none;
  }
}
.kanban-board-bg {
  img {
    max-width: 100%;
    width: 450px;
  }
  @include media-breakpoint-up(xl) {
    img {
      width: 600px;
    }
  }
}

// kanban boards
.kanban-boards-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}