create-nexgen 1.0.4

package/template/src/resources/src/assets/scss/custom.scss

@@ -0,0 +1,1100 @@
+@use "sass:map";
+@use "sass:color";
+@use "bootstrap/scss/bootstrap" as *;
+
+/*
+* Here from start custom css
+* Our custom css depends on some bootstrap class
+* and our new class
+*/
+
+html,
+body {
+  height: 100%;
+  color: $gray-700;
+  scroll-behavior: smooth;
+}
+
+#app {
+  position: relative;
+  min-height: 100%;
+}
+
+$themes: (
+  light: (bg: #f5f5f9,
+    bg-white: #ffffff,
+    text-color: $gray-900,
+    gray-700: $gray-700,
+    gray-200: $gray-200,
+    gray-300: $gray-300,
+    gray-400: $gray-400,
+    gray-500: $gray-500,
+    gray-900: $gray-900,
+    primary: $primary,
+    secondary: $secondary,
+    danger: $danger,
+    warning: $warning,
+    success: $success,
+    info: $info,
+    dark-color: $dark,
+    border-custom: #cdcdcd,
+    auth-shadow: rgba(34, 48, 62, 0.1),
+    sidebar-shadow: rgba(145, 152, 159, 0.12),
+    sidebar-link-bg: rgba(105, 108, 255, 0.16),
+    backdrop: rgba(0, 0, 0, 0.5),
+    shadow-custom: rgba(34, 48, 62, 0.08),
+    accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"),
+    accordion-icon-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 10.354a.5.5 0 0 1 .708 0L8 4.707l5.646 5.647a.5.5 0 0 1 .708-.708l-6-6a.5.5 0 0 1-.708 0l-6 6a.5.5 0 0 1 0 .708z'/%3e%3c/svg%3e")),
+  dark: (bg: #121212,
+    bg-white: #1b1b1b,
+    text-color: #ffffff,
+    // surface
+    gray-700: #e5e5e5,
+    // body text
+    gray-200: #2a2a2a,
+    gray-300: #4a4a4a,
+    gray-400: #6a6a6a,
+    // hover surface
+    gray-500: #a8a8a8,
+    // muted
+    gray-900: #ffffff,
+    // high contrast text
+    primary: $warning,
+    secondary: #9aa0a6,
+    danger: $danger,
+    warning: $warning,
+    success: $success,
+    info: $info,
+    dark-color: $warning,
+    border-custom: #3f3f3f,
+    auth-shadow: rgba(0, 0, 0, 0.35),
+    sidebar-shadow: rgba(0, 0, 0, 0.35),
+    sidebar-link-bg: rgba(105, 108, 255, 0.22),
+    backdrop: rgba(0, 0, 0, 0.6),
+    shadow-custom: rgba(34, 48, 62, 0.08),
+    accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"),
+    accordion-icon-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 10.354a.5.5 0 0 1 .708 0L8 4.707l5.646 5.647a.5.5 0 0 1 .708-.708l-6-6a.5.5 0 0 1-.708 0l-6 6a.5.5 0 0 1 0 .708z'/%3e%3c/svg%3e"))
+);
+
+$sidebar-width: 16.25rem;
+
+@mixin theme($theme-name) {
+  $theme: map.get($themes, $theme-name);
+
+  & {
+    /* App custom tokens */
+    --app-bg: #{map.get($theme, bg)};
+    --app-surface: #{map.get($theme, bg-white)};
+    --app-text: #{map.get($theme, text-color)};
+    --app-text-strong: #{map.get($theme, text-color)};
+    --app-text-muted: #{map.get($theme, gray-500)};
+    --app-border: #{map.get($theme, border-custom)};
+    --app-hover: #{map.get($theme, gray-200)};
+    --app-primary: #{map.get($theme, primary)};
+    --app-backdrop: #{map.get($theme, backdrop)};
+
+    /* Bootstrap runtime vars */
+    --bs-body-bg: var(--app-bg);
+    --bs-body-color: var(--app-text);
+    --bs-border-color: var(--app-border);
+    --bs-dropdown-bg: var(--app-surface);
+    --bs-dropdown-link-color: var(--app-text);
+    --bs-dropdown-link-hover-bg: var(--app-hover);
+    --bs-input-bg: var(--app-surface);
+    --bs-input-color: var(--app-text);
+    --bs-link-color: var(--app-primary);
+    --bs-navbar-bg: transparent; // you use transparent
+    --bs-secondary-color: #{map.get($theme, gray-500)};
+    --bs-secondary-color-rgb: #{color.channel(map.get($theme, gray-500), "red", $space: rgb)},
+    #{color.channel(map.get($theme, gray-500), "green", $space: rgb)},
+    #{color.channel(map.get($theme, gray-500), "blue", $space: rgb)};
+  }
+
+  & {
+    background-color: map.get($theme, bg);
+    color: var(--app-text);
+
+    *::-webkit-scrollbar {
+      width: 6px;
+
+      &-track {
+        background: map.get($theme, gray-200);
+      }
+
+      &-thumb {
+        background: map.get($theme, gray-500);
+        border-radius: 0.375rem;
+      }
+    }
+  }
+
+  // Ensure modal close icon visible in each theme
+  .btn-close {
+    @if $theme-name ==dark {
+      filter: invert(1) grayscale(100%) brightness(200%) !important;
+    }
+
+    opacity: 0.85;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary), transparent 75%);
+    }
+  }
+
+  // Outline-dark becomes warning color
+@each $btn-variant in (primary, secondary, success, danger, warning, info, dark) {
+  .btn-outline-#{$btn-variant} {
+    @if $btn-variant ==dark {
+      color: map.get($theme, dark-color) !important;
+      border-color: map.get($theme, dark-color) !important;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        background-color: map.get($theme, dark-color) !important;
+        color: map.get($theme, bg-white) !important; // improve contrast
+        border-color: map.get($theme, dark-color) !important;
+      }
+    }
+  }
+}
+
+.card {
+  --bs-card-bg: #{map.get($theme, bg-white)};
+  --bs-card-color: #{map.get($theme, text-color)};
+  --bs-card-border-color: #{map.get($theme, border-custom)};
+  /* optional bits */
+  --bs-card-cap-bg: var(--bs-card-bg);
+  --bs-card-cap-color: var(--bs-card-color);
+
+  .card-header,
+  .card-footer {
+    --bs-card-footer-bg: var(--bs-card-cap-bg);
+  }
+}
+
+.table {
+  --bs-table-color: #{map.get($theme, text-color)};
+  --bs-table-bg: #{map.get($theme, bg-white)};
+  --bs-table-border-color: #{map.get($theme, border-custom)};
+  --bs-table-striped-bg: #{map.get($theme, gray-200)};
+  --bs-table-striped-color: #{map.get($theme, text-color)};
+  --bs-table-hover-bg: #{map.get($theme, gray-300)};
+  --bs-table-hover-color: #{map.get($theme, text-color)};
+  --bs-table-active-bg: #{map.get($theme, gray-200)};
+  --bs-table-active-color: #{map.get($theme, text-color)};
+}
+
+.auth {
+  background-color: map.get($theme, bg-white);
+  box-shadow: 0 0.1875rem 0.5rem 0 map.get($theme, auth-shadow);
+  border: 1px solid map.get($theme, border-custom);
+  box-sizing: border-box;
+  padding: 1.5rem 2rem 3.5rem 2rem;
+  max-width: 460px;
+  margin: 0 auto;
+  border-radius: 0.375rem;
+
+  @include media-breakpoint-down(sm) {
+    padding: 3rem 0.5rem;
+  }
+}
+
+.input-group-text {
+  background: map.get($theme, bg-white);
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.form-control {
+  border: 1px solid map.get($theme, border-custom);
+  // padding: calc(0.44rem - var(--bs-border-width)) calc(0.9375rem - var(--bs-border-width));
+  // line-height: 1.375;
+  background: map.get($theme, bg-white);
+
+  @if $theme-name ==dark {
+    color-scheme: dark;
+  }
+
+  &:hover {
+    border: 1px solid map.get($theme, secondary);
+  }
+
+  &:focus {
+    box-shadow: 0 0 1px map.get($theme, primary);
+    border: 1px solid map.get($theme, primary);
+    background: map.get($theme, bg-white);
+  }
+
+  &::placeholder {
+    color: map.get($theme, gray-500);
+  }
+
+  &[type="checkbox"] {
+    padding: 8px;
+    border: 1px solid map.get($theme, secondary);
+  }
+
+  &:read-only,
+  &[readonly],
+  &:disabled {
+    @if $theme-name ==light {
+      background: #f6f6f6;
+    }
+
+    @else {
+      color: map.get($theme, gray-500);
+      background-color: map.get($theme, gray-200);
+    }
+  }
+
+  &.second-input[readonly]:focus {
+    background: #f6f6f6;
+    border-left: 1px solid map.get($theme, border-custom) !important;
+
+    @if $theme-name ==dark {
+      background-color: map.get($theme, gray-200);
+    }
+  }
+}
+
+.form-select {
+  background-color: map.get($theme, bg-white);
+
+  &:hover {
+    border: 1px solid map.get($theme, secondary);
+  }
+}
+
+label[for] {
+  cursor: pointer;
+  margin-bottom: 0.25rem;
+}
+
+.input-group {
+  border: 1px solid map.get($theme, border-custom);
+  border-radius: 0.375rem; // match Bootstrap default radius
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    border: 1px solid map.get($theme, secondary);
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 1px map.get($theme, primary);
+    border: 1px solid map.get($theme, primary);
+  }
+
+  .form-control,
+  .form-select {
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none !important;
+      border: none !important;
+      background: map.get($theme, bg-white);
+    }
+  }
+
+  input.form-control:focus:first-child {
+    border-right: 1px solid map.get($theme, border-custom) !important;
+  }
+
+  input.form-control+input.form-control {
+    border-left: 1px solid map.get($theme, border-custom) !important;
+  }
+}
+
+.btn {
+  // padding-top: 0.2rem;
+  font-weight: 500;
+  align-items: center;
+
+  // line-height: 1.8;
+  &:hover {
+    transform: translateY(-0.5px);
+
+    i {
+      transform: translateY(-1px); // only icon moves slightly upward
+    }
+  }
+
+  transition: all 0.2s ease-in-out;
+}
+
+// select infinite custom
+.v-select {
+  @if $theme-name ==dark {
+    --vs-controls-color: #fff;
+    /* icons (arrow/clear) use this */
+  }
+}
+
+.vs__search,
+.vs__search:focus {
+  margin: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.vs__dropdown-toggle {
+  padding: 0.26rem 0;
+  border-radius: 5px;
+  border-color: map.get($theme, border-custom) !important;
+}
+
+.vs__dropdown-menu {
+  background-color: map.get($theme, bg-white) !important;
+  border-color: map.get($theme, border-custom) !important;
+  max-height: 225px;
+  min-width: 100px !important;
+  right: 0 !important;
+  left: auto !important;
+}
+
+.vs__selected {
+  margin: 0;
+
+  @if $theme-name ==dark {
+    color: map.get($theme, gray-700) !important;
+  }
+}
+
+.vs__selected .vs__search,
+.vs__selected .vs__search:focus {
+  margin: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.vs--disabled .vs__dropdown-toggle,
+.vs--disabled .vs__clear,
+.vs--disabled .vs__search,
+.vs--disabled .vs__selected,
+.vs--disabled .vs__open-indicator {
+  @if $theme-name ==dark {
+    background-color: map.get($theme, gray-200) !important;
+    color: map.get($theme, gray-500) !important;
+  }
+}
+
+.fs-mini {
+  font-size: 10px;
+}
+
+.form-text {
+  font-size: 0.775rem;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: $sidebar-width;
+  background-color: map.get($theme, bg-white);
+  box-shadow: 0 0.125rem 0.375rem 0 map.get($theme, sidebar-shadow);
+  box-sizing: border-box;
+  z-index: 1100;
+  // border: 1px solid map.get($theme, border-custom);
+
+  & .app-brand {
+    margin-top: 0.5rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    height: 64px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    line-height: 1;
+    min-height: 1px;
+    overflow: hidden;
+    justify-content: center;
+
+    >a {
+      text-decoration: none;
+      color: map.get($theme, gray-900);
+    }
+
+    img {
+      width: 100%;
+      vertical-align: middle;
+    }
+  }
+
+  .accordion {
+    position: relative;
+    height: calc(100% - 4.5rem);
+    overflow-y: auto;
+    padding-bottom: 7rem;
+    box-sizing: border-box;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 2px;
+
+      &-track {
+        background: map.get($theme, gray-200);
+      }
+
+      &-thumb {
+        background: map.get($theme, gray-700);
+        border-radius: 0.375rem;
+      }
+    }
+
+    &:hover {
+      &::-webkit-scrollbar {
+        display: block;
+
+        &-thumb {
+          background: map.get($theme, gray-700);
+        }
+      }
+    }
+
+    // Active state
+    & .active {
+      background-color: map.get($theme, sidebar-link-bg) !important;
+
+      a {
+        color: map.get($theme, primary) !important;
+
+        &:hover {
+          background: none !important;
+        }
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: -1rem;
+        top: 0;
+        height: 100%;
+        width: 0.25rem;
+        background: map.get($theme, primary);
+        border-radius: 0.375rem 0 0 0.375rem;
+      }
+    }
+
+    & ul.list-group {
+      list-style-type: none;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      & li.split-label {
+        position: relative;
+        font-size: 13px;
+        color: map.get($theme, gray-500);
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        padding-left: 1rem;
+        background: none;
+
+        &:hover {
+          background: none;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: -1rem;
+          width: 1rem;
+          height: 0.1rem;
+          border-bottom: 1px solid map.get($theme, gray-500);
+          transform: translateY(-50%);
+        }
+      }
+
+      & li.list-group-item {
+        position: relative;
+        padding: 0;
+        border: none;
+        border-radius: 0.375rem;
+        margin-top: 0.25rem;
+
+        & a {
+          display: flex;
+          align-items: center;
+          color: map.get($theme, gray-700);
+          text-decoration: none;
+          padding: 0.25rem 1rem;
+          box-shadow: none;
+
+          .menu-icon {
+            display: flex;
+            width: 1.5rem;
+            flex-shrink: 0;
+            flex-grow: 0;
+            margin-right: 0.5rem;
+            font-size: 1.3rem;
+          }
+        }
+
+        // Normal hover for top-level
+        &:hover>a {
+          background: map.get($theme, gray-200);
+          transition: all 0.2s ease-in-out;
+          border-radius: 0.375rem;
+          padding: 0.25rem 1rem;
+        }
+
+        // Accordion section -> 1st level
+        &.accordion-item {
+          padding: 0;
+
+          &>a {
+            &:hover {
+              background: map.get($theme, gray-200);
+            }
+
+            &::after {
+              flex-shrink: 0;
+              width: 1rem;
+              height: 1rem;
+              margin-left: auto; // push icon fully to right
+              background-size: 1rem;
+              background-image: map.get($theme, accordion-icon);
+              background-repeat: no-repeat;
+              font-size: 10px;
+              transition: transform 0.2s ease-in-out;
+
+              // Default state → down arrow
+              transform: rotate(-90deg);
+            }
+
+            &:not(.collapsed) {
+              background: map.get($theme, gray-200);
+
+              &::after {
+                transform: rotate(0deg);
+              }
+            }
+          }
+
+          // Nested list hover -> 2nd level
+          &>ul {
+            padding-left: 0;
+            padding-right: 0;
+
+            &>li {
+              margin-top: 0.25rem;
+              position: relative;
+
+              &>a {
+                // vertical-align: middle;
+                padding: 0.5rem 1rem 0.5rem 3rem;
+              }
+
+              &::before {
+                content: "";
+                position: absolute;
+                top: 1rem;
+                left: 1.3rem;
+                width: 0.5rem;
+                height: 0.5rem;
+                border-radius: 50%;
+                background-color: map.get($theme, gray-500);
+                z-index: 100;
+              }
+
+              &.active {
+                &::before {
+                  content: "";
+                  position: absolute;
+                  top: 50%;
+                  left: 1.256rem;
+                  width: 0.6rem;
+                  height: 0.6rem;
+                  border-radius: 50%;
+                  transform: translateY(-50%);
+                  background-color: map.get($theme, primary);
+                  box-shadow: 0 0 0.2rem map.get($theme, primary);
+                  z-index: 100;
+                }
+              }
+
+              >ul li {
+                &::after {
+                  content: "";
+                  position: absolute;
+                  top: 0;
+                  left: 1.56rem;
+                  width: 1px;
+                  height: 100%;
+                  background-color: map.get($theme, gray-500);
+                  z-index: 50;
+                }
+
+                &.active {
+                  &::after {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: 1.56rem;
+                    width: 1px;
+                    height: 100%;
+                    background-color: map.get($theme, primary);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.main {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex: 1 0 auto;
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
+  padding-left: $sidebar-width;
+  transition: padding-left 0.4s ease;
+
+  &.no-transition {
+    transition: none !important;
+  }
+
+  .content-wrapper {
+    position: inherit;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 1060;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      transition:
+        padding 0.1s ease-in-out,
+        background-color 0.1s ease-in-out;
+
+      &.scrolled {
+        padding-top: 0;
+        padding-bottom: 0; // optional
+        background-color: map.get($theme, bg-white); // optional: add bg when scrolled
+      }
+
+      & ul.dropdown-menu {
+        --bs-dropdown-bg: #{map.get($theme, bg-white)};
+        --bs-dropdown-border-color: #{map.get($theme, border-custom)};
+        --bs-dropdown-link-color: #{map.get($theme, gray-700)};
+        --bs-dropdown-link-hover-bg: #{map.get($theme, bg)};
+        --bs-dropdown-link-hover-color: #{map.get($theme, primary)};
+        --bs-dropdown-link-active-bg: #{map.get($theme, sidebar-link-bg)};
+        --bs-dropdown-link-active-color: #{map.get($theme, primary)};
+        --bs-dropdown-divider-bg: #{map.get($theme, gray-300)};
+      }
+
+      .nav-btn {
+        font-size: 1.5rem !important;
+        border: 1px solid map.get($theme, border-custom);
+        box-shadow: 0 0.125rem 0.375rem 0 map.get($theme, shadow-custom);
+        padding: 0.7rem 1.2rem;
+        border-radius: 0.25rem;
+        background: map.get($theme, bg-white);
+        color: map.get($theme, text-color);
+
+        &:hover {
+          background: map.get($theme, bg-white);
+          color: map.get($theme, primary);
+        }
+      }
+
+      .nav-card {
+        height: 3.75rem;
+        padding-block: 0; // remove top/bottom padding
+        padding-inline: 0.75rem; // keep a little left/right padding
+
+        display: grid;
+        align-items: center; // vertical center
+        justify-items: start; // left align (doesn't center horizontally)
+
+        text-align: left;
+        color: map.get($theme, text-color);
+        background: map.get($theme, bg-white);
+        border-color: map.get($theme, border-custom);
+        box-shadow: 0 0.125rem 0.375rem 0 map.get($theme, shadow-custom);
+      }
+
+      @include media-breakpoint-down(sm) {
+        .nav-btn {
+          flex: 1 1 calc(20% - 0.25rem); // 4 items per row with gap
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+
+    .content {
+      position: inherit;
+      flex: 1 1 auto;
+      min-height: 0;
+      color: map.get($theme, text-color);
+    }
+
+    footer {
+      font-size: 0.875rem;
+      color: map.get($theme, secondary);
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .sidebar {
+    left: 0;
+    transition: left 0.3s ease-in-out;
+  }
+
+  .sidebar.tgl {
+    left: -$sidebar-width;
+    transition: left 0.3s ease-in-out;
+  }
+
+  .main.tgl {
+    padding-left: 0;
+    transition: padding-left 0.3s ease-in-out;
+  }
+}
+
+@include media-breakpoint-down(xl) {
+  .sidebar {
+    left: -($sidebar-width + 1rem);
+    transition: left 0.3s ease-in-out;
+  }
+
+  .sidebar-toggle {
+    margin-right: -1rem;
+    margin-top: 1.5rem;
+    border: 0.4rem solid map.get($theme, bg-white);
+    font-size: 10px;
+    padding: 0.25rem 0.425rem;
+    background: map.get($theme, primary);
+    color: map.get($theme, bg-white);
+  }
+
+  .sidebar.tgl {
+    left: 0;
+    transition: left 0.3s ease-in-out;
+  }
+
+  .backdrop.off-canvas {
+    position: absolute;
+    background: map.get($theme, backdrop);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1099;
+  }
+
+  .main {
+    padding-left: 0;
+    transition: padding-left 0.3s ease-in-out;
+  }
+
+  .main.tgl {
+    padding-left: 0;
+    transition: padding-left 0.3s ease-in-out;
+  }
+}
+
+}
+
+.datatable {
+
+  thead tr>th,
+  tbody tr>td {
+    padding: 7.5px 10px;
+  }
+
+  thead {
+    tr>th {
+      padding-top: 7.5px;
+      padding-bottom: 7.5px;
+    }
+
+    tr>th:nth-child(-n + 2) {
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    tr>th:nth-child(-n + 1) {
+      padding-left: 6px !important;
+      padding-right: 5px !important;
+    }
+
+    tr>th:last-child {
+      width: 1%;
+      white-space: nowrap;
+      text-align: center;
+    }
+  }
+
+  tbody tr>td:nth-child(-n + 1) {
+    padding-left: 6px !important;
+    padding-right: 5px !important;
+  }
+
+  .datatable-pagination .page-item {
+    .page-link {
+      border-radius: 5px;
+      margin-left: 0;
+      border: 1px solid #dfdfdf;
+    }
+  }
+}
+
+// general table
+.datatable-general thead tr>th,
+.datatable-general tbody tr>td {
+  padding: 7.5px 10px;
+}
+
+.datatable-general thead tr>th {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.datatable-general thead tr>th:nth-child(-n + 1) {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.datatable-general-pagination .page-item {
+  .page-link {
+    border-radius: 5px;
+    margin-left: 0;
+    border: 1px solid #dfdfdf;
+  }
+}
+
+.modal-backdrop.show {
+  z-index: 1100 !important;
+}
+
+.modal.show {
+  z-index: 1110 !important;
+}
+
+// theme light or dark
+.theme-light {
+  @include theme(light);
+}
+
+.theme-dark {
+  @include theme(dark);
+}
+
+.theme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include theme(dark);
+  }
+
+  @media (prefers-color-scheme: light) {
+    @include theme(light);
+  }
+}
+
+// this is section for print media
+/* PAGE MARGINS — DO NOT USE size: so Firefox shows orientation */
+@page {
+  margin: 12mm;
+}
+
+@media print {
+
+  /***************
+   GLOBAL RESET
+  ***************/
+  html,
+  body,
+  #app,
+  .wrapper,
+  .main,
+  .content-wrapper,
+  .content,
+  .card {
+    height: auto !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+
+    background: #ffffff !important;
+    color: #000000 !important;
+
+    /* kill theme variables (dark mode fix) */
+    --app-bg: #ffffff !important;
+    --app-surface: #ffffff !important;
+    --app-text: #000000 !important;
+    --app-text-muted: #000000 !important;
+    --bs-body-bg: #ffffff !important;
+    --bs-body-color: #000000 !important;
+    --bs-card-bg: #ffffff !important;
+    --bs-card-color: #000000 !important;
+    --bs-table-bg: #ffffff !important;
+    --bs-table-color: #000000 !important;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  .table {
+    margin-bottom: 0 !important;
+  }
+
+  /***************
+    REMOVE NON-PRINT ELEMENTS
+  ***************/
+  .content-wrapper>header,
+  .content-wrapper>footer,
+  .PageBar,
+  .Refresh,
+  .sidebar,
+  footer {
+    display: none !important;
+  }
+
+  /* remove left space from sidebar */
+  .main {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .wrapper {
+    height: auto !important;
+    overflow: visible !important;
+    font-size: 12px !important;
+  }
+
+  /***************
+    PRINT UTILITY RESET
+  ***************/
+  .pp-0,
+  .pm-0 {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  @each $name, $size in $spacers {
+
+    /* Padding */
+    .pp-#{$name} {
+      padding: $size !important;
+    }
+
+    .ppt-#{$name} {
+      padding-top: $size !important;
+    }
+
+    .ppe-#{$name} {
+      padding-right: $size !important;
+    }
+
+    .ppb-#{$name} {
+      padding-bottom: $size !important;
+    }
+
+    .pps-#{$name} {
+      padding-left: $size !important;
+    }
+
+    /* Margin */
+    .pm-#{$name} {
+      margin: $size !important;
+    }
+
+    .pmt-#{$name} {
+      margin-top: $size !important;
+    }
+
+    .pme-#{$name} {
+      margin-right: $size !important;
+    }
+
+    .pmb-#{$name} {
+      margin-bottom: $size !important;
+    }
+
+    .pms-#{$name} {
+      margin-left: $size !important;
+    }
+  }
+
+  /* Remove all card borders completely */
+  .card.border,
+  .card-body,
+  .card-body.border {
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  /***************
+    RESPONSIVE TABLE FIX
+    (NO SCROLL, SHRINK TO FIT)
+  ***************/
+  .table-responsive {
+    overflow: visible !important;
+  }
+
+  .table-responsive>table {
+    width: 100% !important;
+    table-layout: fixed !important;
+  }
+
+  .table-responsive th,
+  .table-responsive td {
+    padding: 2px 4px !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+  }
+
+  /***************
+    PAGE BREAK & TABLE SPLIT FIX
+  ***************/
+  table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    page-break-inside: auto !important;
+    break-inside: auto !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
+
+  tfoot {
+    display: table-footer-group !important;
+  }
+
+  tr,
+  th,
+  td {
+    page-break-inside: avoid !important;
+    /* do not split ROWS */
+    break-inside: avoid-page !important;
+    page-break-after: auto !important;
+  }
+}