/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo i {
  font-size: 1.4rem;
}

.table-responsive td,
.table-responsive th {
  white-space: nowrap;
}

.text-wrap-normal {
  white-space: normal !important;
}

.table-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.table-status-badge.table-status-count {
  min-width: 4.5rem;
  justify-content: center;
}

.pagination {
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pagination .page-link {
  min-width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  border: 1px solid #d9dee3;
  color: #566a7f;
  background-color: #fff;
  padding: 0.5rem 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination .page-link:hover {
  color: #696cff;
  border-color: #c7cfff;
  background-color: #f5f5ff;
}

.pagination .page-item.active .page-link {
  color: #fff;
  border-color: #696cff;
  background-color: #696cff;
  box-shadow: 0 0.2rem 0.5rem rgba(105, 108, 255, 0.24);
}

.pagination .page-item.disabled .page-link {
  color: #b4bdc6;
  background-color: #f7f7f9;
  border-color: #ebeef0;
}

.pagination .page-item.pagination-arrow .page-link {
  min-width: 2.6rem;
  padding-inline: 0.7rem;
}

.swal2-container {
  z-index: 20000 !important;
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top {
  top: 5rem !important;
}

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  min-height: calc(1.53em + 1.5rem + 2px);
  border: 1px solid #d9dee3;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  padding: 0.45rem 0.75rem 0.45rem 0.15rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #566a7f;
  line-height: 1.5;
  padding-left: 0.6rem;
  padding-right: 1.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #a1acb8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.55rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #696cff;
  box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.16);
}

.select2-dropdown {
  border-color: #d9dee3;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 1.5rem rgba(67, 89, 113, 0.14);
}

.select2-search--dropdown {
  padding: 0.75rem;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #d9dee3;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.select2-results__option {
  padding: 0.65rem 0.85rem;
}

.select2-results__option--highlighted[aria-selected] {
  background: #696cff !important;
}

.app-footer {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(105, 122, 141, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.app-footer .app-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
}

.app-footer .app-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #566a7f;
}

.app-footer .app-footer-mark {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d7f5fc;
  color: #03c3ec;
  font-size: 1rem;
  flex: 0 0 auto;
}

.app-footer .app-footer-title {
  display: block;
  font-weight: 800;
  color: #233446;
  line-height: 1.15;
}

.app-footer .app-footer-copy {
  display: block;
  font-size: 0.76rem;
  color: #8a97a8;
  margin-top: 0.12rem;
}

.app-footer .app-footer-meta {
  color: #7b8a9c;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(3, 195, 236, 0.14);
  border-radius: 999px;
  background: rgba(215, 245, 252, 0.45);
}

@media (min-width: 1200px) {
  .app-footer .app-footer-inner {
    padding-inline: 1.4rem;
  }
}

@media (max-width: 767.98px) {
  .app-footer .app-footer-inner {
    align-items: flex-start;
    padding-inline: 1rem;
  }
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/*
* App sidebar toggle
******************************************************************************/

.layout-menu-desktop-toggle {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
}

.menu-footer-credit {
  margin: 1rem 1.5rem 0;
  padding: 0.75rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(105, 122, 141, 0.14);
  color: #a1acb8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-footer-credit span {
  display: block;
  white-space: nowrap;
}

input,
textarea,
select,
[contenteditable="true"],
.select2-search__field {
  -webkit-user-select: text;
  user-select: text;
}

@media (min-width: 1200px) {
  .layout-menu-fixed.layout-menu-collapsed .layout-page,
  .layout-menu-fixed-offcanvas.layout-menu-collapsed .layout-page {
    padding-left: 5.25rem;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) {
    width: 5.25rem;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item {
    width: 5.25rem;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item > .menu-link .menu-icon {
    margin-left: -2rem;
    width: 5.25rem;
    text-align: center;
    margin-right: 0;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item div:not(.menu-block),
  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-header .menu-header-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item > .menu-sub,
  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item.open > .menu-sub,
  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item > .menu-toggle::after,
  .layout-menu-collapsed .layout-menu:not(:hover) .menu-footer-credit {
    display: none;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-header::before {
    content: "";
    position: absolute;
    left: 2.25rem;
    display: block;
    width: 1rem;
    text-align: center;
    top: 1.1875rem;
    border-top: 1px solid #a1acb8;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .app-brand {
    width: 5.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo,
  .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-link,
  .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-text {
    margin-right: auto;
    margin-left: auto;
  }

  .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo ~ .app-brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
  }
}

/*
* App color theme
******************************************************************************/

.app-theme-toggle {
  color: #566a7f;
}

.app-notification-toggle {
  position: relative;
  color: #566a7f;
}

.badge-notifications {
  position: absolute;
  top: 0.15rem;
  right: 0.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.28rem;
  font-size: 0.62rem;
  line-height: 1;
}

.app-notification-menu {
  width: min(23rem, calc(100vw - 2rem));
  padding-block: 0.45rem;
}

.app-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.45rem 0.95rem;
}

.app-notification-head form {
  flex: 0 0 auto;
}

.app-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  white-space: normal;
  padding-block: 0.72rem;
}

.app-notification-item.is-unread {
  background: rgba(105, 108, 255, 0.08);
}

.app-notification-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #71dd37;
  background: rgba(113, 221, 55, 0.14);
}

.app-notification-text {
  min-width: 0;
}

.app-notification-text small {
  line-height: 1.35;
}

.app-notification-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  color: #8a97a8;
}

.app-theme-menu .dropdown-item {
  display: flex;
  align-items: center;
}

.app-theme-menu .dropdown-item.active,
.app-theme-menu .dropdown-item:active {
  color: #696cff;
  background-color: #f0f0ff;
}

.form-control[readonly],
.form-select[readonly] {
  cursor: default;
}

html.dark-style body {
  color: #d2dae6;
  background: #161b22;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.dark-style .layout-wrapper,
html.dark-style .layout-page,
html.dark-style .content-wrapper {
  background: #161b22;
}

html.dark-style .bg-navbar-theme,
html.dark-style .bg-menu-theme,
html.dark-style .bg-footer-theme,
html.dark-style .card,
html.dark-style .card-header,
html.dark-style .card-footer,
html.dark-style .dropdown-menu,
html.dark-style .modal-content,
html.dark-style .modal-header,
html.dark-style .modal-footer,
html.dark-style .offcanvas,
html.dark-style .accordion-item,
html.dark-style .accordion-button,
html.dark-style .select2-dropdown,
html.dark-style .swal2-popup {
  color: #d2dae6;
  background-color: #1f2630 !important;
  border-color: #2f3a46;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
}

html.dark-style .navbar-detached {
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.24);
}

html.dark-style .bg-menu-theme .menu-link,
html.dark-style .bg-menu-theme .menu-text,
html.dark-style .bg-menu-theme .menu-header,
html.dark-style .bg-navbar-theme,
html.dark-style .bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
html.dark-style .dropdown-item,
html.dark-style .text-body,
html.dark-style .text-muted,
html.dark-style .form-label,
html.dark-style .form-check-label,
html.dark-style .accordion-button,
html.dark-style .accordion-body,
html.dark-style .list-group-item,
html.dark-style .table {
  color: #d2dae6 !important;
}

html.dark-style h1,
html.dark-style h2,
html.dark-style h3,
html.dark-style h4,
html.dark-style h5,
html.dark-style h6,
html.dark-style .h1,
html.dark-style .h2,
html.dark-style .h3,
html.dark-style .h4,
html.dark-style .h5,
html.dark-style .h6,
html.dark-style .fw-semibold,
html.dark-style .fw-bold,
html.dark-style .card-title,
html.dark-style .app-footer .app-footer-title {
  color: #eef3f8 !important;
}

html.dark-style .text-muted,
html.dark-style small,
html.dark-style .small,
html.dark-style .app-footer .app-footer-copy,
html.dark-style .app-footer .app-footer-meta {
  color: #95a3b8 !important;
}

html.dark-style a:not(.btn):not(.dropdown-item):not(.menu-link):not(.page-link) {
  color: #9da0ff;
}

html.dark-style a:not(.btn):not(.dropdown-item):not(.menu-link):not(.page-link):hover {
  color: #c0c2ff;
}

html.dark-style .bg-menu-theme .menu-header,
html.dark-style .bg-menu-theme .menu-header-text {
  color: #8b98aa !important;
}

html.dark-style .menu-footer-credit {
  color: #738096;
  border-top-color: #2f3a46;
}

html.dark-style .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(
    #1f2630 41%,
    rgba(31, 38, 48, 0.72) 72%,
    rgba(31, 38, 48, 0)
  ) !important;
}

html.dark-style .bg-menu-theme .menu-link:hover,
html.dark-style .bg-menu-theme .menu-link:focus,
html.dark-style .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus,
html.dark-style .app-theme-menu .dropdown-item.active,
html.dark-style .app-theme-menu .dropdown-item:active {
  color: #f4f7fb !important;
  background-color: #2a3440 !important;
}

html.dark-style .bg-menu-theme .menu-item.active > .menu-link,
html.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #fff !important;
  background: linear-gradient(90deg, #696cff 0%, #5b8def 100%) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(105, 108, 255, 0.28);
}

html.dark-style .card,
html.dark-style .card-header,
html.dark-style .card-footer,
html.dark-style .accordion-item,
html.dark-style .list-group-item,
html.dark-style .table,
html.dark-style .table th,
html.dark-style .table td,
html.dark-style .dropdown-divider,
html.dark-style hr {
  border-color: #2f3a46 !important;
}

html.dark-style .table > :not(caption) > * > * {
  color: #d2dae6;
  background-color: transparent;
  border-bottom-color: #2f3a46;
}

html.dark-style .table {
  --bs-table-color: #d2dae6;
  --bs-table-bg: transparent;
  --bs-table-border-color: #2f3a46;
  --bs-table-striped-color: #d2dae6;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.018);
  --bs-table-hover-color: #f4f7fb;
  --bs-table-hover-bg: rgba(105, 108, 255, 0.1);
  font-size: 0.875rem;
}

html.dark-style .table-responsive {
  border-color: #2f3a46;
}

html.dark-style .table thead th,
html.dark-style .table tbody th {
  font-weight: 800;
  letter-spacing: 0;
}

html.dark-style .table-hover > tbody > tr:hover > * {
  color: #eef3f8;
  background-color: rgba(105, 108, 255, 0.1);
}

html.dark-style .table-light,
html.dark-style .table thead,
html.dark-style .table th {
  color: #eef3f8 !important;
  background-color: #252e39 !important;
}

html.dark-style .table tbody tr {
  transition: background-color 0.15s ease, color 0.15s ease;
}

html.dark-style .table td,
html.dark-style .table th {
  vertical-align: middle;
}

html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style .input-group-text,
html.dark-style .select2-container--default .select2-selection--single,
html.dark-style .select2-search--dropdown .select2-search__field {
  color: #dce4ee;
  background-color: #171d25;
  border-color: #344150;
}

html.dark-style .form-control[readonly],
html.dark-style .form-select[readonly] {
  color: #aeb9c8;
  background-color: #202936;
  border-color: #344150;
}

html.dark-style .form-label {
  color: #dce4ee !important;
  font-weight: 700;
}

html.dark-style .form-text {
  color: #95a3b8;
}

html.dark-style .form-check-input {
  background-color: #171d25;
  border-color: #465568;
}

html.dark-style .form-check-input:checked {
  background-color: #696cff;
  border-color: #696cff;
}

html.dark-style .form-control:focus,
html.dark-style .form-select:focus,
html.dark-style .select2-container--default.select2-container--focus .select2-selection--single,
html.dark-style .select2-container--default.select2-container--open .select2-selection--single {
  color: #eef3f8;
  background-color: #171d25;
  border-color: #696cff;
  box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.22);
}

html.dark-style .form-control::placeholder,
html.dark-style .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6f7d8f;
}

html.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-style .select2-results__option {
  color: #d8dee9;
}

html.dark-style .select2-results__option--selected {
  background-color: #2a3440;
}

html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #fff;
  background-color: #696cff !important;
}

html.dark-style .select2-container--default .select2-selection--multiple {
  color: #dce4ee;
  background-color: #171d25;
  border-color: #344150;
}

html.dark-style .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: #dce4ee;
  background-color: #26313d;
  border-color: #3a4758;
}

html.dark-style code {
  color: #ffb4c1;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 0.35rem;
  padding: 0.1rem 0.28rem;
}

html.dark-style pre,
html.dark-style kbd {
  color: #dce4ee;
  background-color: #111821;
  border-color: #2f3a46;
}

html.dark-style .btn-outline-secondary {
  color: #d2dae6;
  border-color: #465568;
}

html.dark-style .btn-outline-secondary:hover,
html.dark-style .btn-outline-secondary:focus {
  color: #fff;
  background-color: #344150;
  border-color: #56657a;
}

html.dark-style .btn-outline-primary {
  color: #b7b9ff;
  border-color: rgba(105, 108, 255, 0.48);
}

html.dark-style .btn-outline-primary:hover,
html.dark-style .btn-outline-primary:focus {
  color: #fff;
  background-color: #696cff;
  border-color: #696cff;
}

html.dark-style .btn-outline-danger {
  color: #ffaaa0;
  border-color: rgba(255, 62, 29, 0.45);
}

html.dark-style .btn-outline-danger:hover,
html.dark-style .btn-outline-danger:focus {
  color: #fff;
  background-color: #ff3e1d;
  border-color: #ff3e1d;
}

html.dark-style .btn-outline-warning {
  color: #ffd27a;
  border-color: rgba(255, 171, 0, 0.45);
}

html.dark-style .btn-outline-warning:hover,
html.dark-style .btn-outline-warning:focus {
  color: #1f2630;
  background-color: #ffab00;
  border-color: #ffab00;
}

html.dark-style .app-notification-toggle {
  color: #d2dae6;
}

html.dark-style .app-notification-item.is-unread {
  background: rgba(105, 108, 255, 0.14) !important;
}

html.dark-style .app-notification-icon {
  color: #d4ffbd;
  background: rgba(113, 221, 55, 0.16);
}

html.dark-style .app-notification-empty {
  color: #95a3b8;
}

html.dark-style .bg-label-primary {
  color: #aeb0ff !important;
  background-color: rgba(105, 108, 255, 0.16) !important;
}

html.dark-style .bg-label-success {
  color: #a8ef80 !important;
  background-color: rgba(113, 221, 55, 0.14) !important;
}

html.dark-style .bg-label-warning {
  color: #ffd27a !important;
  background-color: rgba(255, 171, 0, 0.16) !important;
}

html.dark-style .bg-label-danger {
  color: #ff9b8a !important;
  background-color: rgba(255, 62, 29, 0.14) !important;
}

html.dark-style .bg-label-info,
html.dark-style .app-footer .app-footer-mark {
  color: #73e5ff !important;
  background-color: rgba(3, 195, 236, 0.14) !important;
}

html.dark-style .bg-label-secondary {
  color: #c0cad8 !important;
  background-color: rgba(133, 146, 163, 0.16) !important;
}

html.dark-style .badge {
  font-weight: 700;
  letter-spacing: 0;
}

html.dark-style .badge.bg-label-primary,
html.dark-style .table-status-badge.bg-label-primary {
  color: #fff !important;
  background-color: #696cff !important;
  border-color: #696cff !important;
}

html.dark-style .badge.bg-label-success,
html.dark-style .table-status-badge.bg-label-success {
  color: #1f2630 !important;
  background-color: #71dd37 !important;
  border-color: #71dd37 !important;
}

html.dark-style .badge.bg-label-warning,
html.dark-style .table-status-badge.bg-label-warning {
  color: #1f2630 !important;
  background-color: #ffab00 !important;
  border-color: #ffab00 !important;
}

html.dark-style .badge.bg-label-danger,
html.dark-style .table-status-badge.bg-label-danger {
  color: #fff !important;
  background-color: #ff3e1d !important;
  border-color: #ff3e1d !important;
}

html.dark-style .badge.bg-label-info,
html.dark-style .table-status-badge.bg-label-info {
  color: #1f2630 !important;
  background-color: #03c3ec !important;
  border-color: #03c3ec !important;
}

html.dark-style .badge.bg-label-secondary,
html.dark-style .table-status-badge.bg-label-secondary {
  color: #fff !important;
  background-color: #8592a3 !important;
  border-color: #8592a3 !important;
}

html.dark-style .pagination .page-link {
  color: #c7d0dd;
  background-color: #1f2630;
  border-color: #344150;
}

html.dark-style .pagination .page-link:hover {
  color: #fff;
  background-color: #2a3440;
  border-color: #696cff;
}

html.dark-style .pagination .page-item.disabled .page-link {
  color: #687589;
  background-color: #171d25;
  border-color: #2f3a46;
}

html.dark-style .app-footer {
  border-top-color: #2f3a46;
  background: linear-gradient(180deg, rgba(31, 38, 48, 0.94) 0%, rgba(22, 27, 34, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark-style .app-footer .app-footer-meta {
  border-color: rgba(3, 195, 236, 0.18);
  background: rgba(3, 195, 236, 0.08);
}

html.dark-style .alert {
  border-color: transparent;
}

html.dark-style .alert-primary {
  color: #c7c8ff;
  background-color: rgba(105, 108, 255, 0.16);
}

html.dark-style .alert-info {
  color: #9eeeff;
  background-color: rgba(3, 195, 236, 0.13);
}

html.dark-style .alert-success {
  color: #b8f59a;
  background-color: rgba(113, 221, 55, 0.12);
}

html.dark-style .alert-warning {
  color: #ffd88e;
  background-color: rgba(255, 171, 0, 0.14);
}

html.dark-style .alert-danger {
  color: #ffb1a5;
  background-color: rgba(255, 62, 29, 0.13);
}

html.dark-style .nav-pills .nav-link:not(.active) {
  color: #aeb9c8;
  background-color: transparent;
}

html.dark-style .nav-pills .nav-link:not(.active):hover {
  color: #f4f7fb;
  background-color: #2a3440;
}

html.dark-style .nav-tabs {
  border-bottom-color: #2f3a46;
}

html.dark-style .nav-tabs .nav-link {
  color: #aeb9c8;
}

html.dark-style .nav-tabs .nav-link:hover {
  border-color: #344150 #344150 #2f3a46;
}

html.dark-style .nav-tabs .nav-link.active {
  color: #eef3f8;
  background-color: #1f2630;
  border-color: #344150 #344150 #1f2630;
}

html.dark-style .modal-backdrop.show {
  opacity: 0.72;
}

html.dark-style .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

/*
* Admin dark refinements
******************************************************************************/

html.dark-style .generate-card,
html.dark-style .guide-hero,
html.dark-style .guide-step,
html.dark-style .guide-card,
html.dark-style .guide-menu-item,
html.dark-style .guide-tip,
html.dark-style .guide-accordion .accordion-item,
html.dark-style .pegawai-form-panel,
html.dark-style .pegawai-form-switch-box {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}

html.dark-style .pegawai-status-card {
  color: #d2dae6 !important;
  background:
    radial-gradient(circle at top left, rgba(113, 221, 55, 0.2), transparent 42%),
    linear-gradient(135deg, #1f2f28 0%, #1c2630 58%, #20242d 100%) !important;
  border-color: rgba(113, 221, 55, 0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}

html.dark-style .guide-hero {
  background: linear-gradient(135deg, #1f2630 0%, #1b2633 48%, #182d2f 100%) !important;
}

html.dark-style .generate-title,
html.dark-style .guide-title,
html.dark-style .guide-step h6,
html.dark-style .guide-card h5,
html.dark-style .guide-menu-item strong,
html.dark-style .guide-tip strong,
html.dark-style .guide-accordion .accordion-button,
html.dark-style .pegawai-form-panel-title,
html.dark-style .pegawai-status-card-title {
  color: #eef3f8 !important;
}

html.dark-style .generate-desc,
html.dark-style .guide-lead,
html.dark-style .guide-step p,
html.dark-style .guide-menu-item span,
html.dark-style .guide-tip span,
html.dark-style .guide-accordion .accordion-body,
html.dark-style .pegawai-form-panel-note,
html.dark-style .pegawai-form-compact-note,
html.dark-style .pegawai-status-card-note {
  color: #95a3b8 !important;
}

html.dark-style .pegawai-form-readonly-reference[readonly] {
  color: #9eeeff !important;
  background:
    linear-gradient(135deg, rgba(3, 195, 236, 0.12) 0%, rgba(113, 221, 55, 0.08) 100%),
    #232b36 !important;
  border-color: rgba(3, 195, 236, 0.22) !important;
}

html.dark-style .pegawai-last-nip-reference {
  color: #9eeeff !important;
  background:
    linear-gradient(135deg, rgba(3, 195, 236, 0.12) 0%, rgba(113, 221, 55, 0.08) 100%),
    #232b36 !important;
  border-color: rgba(3, 195, 236, 0.22) !important;
}

html.dark-style .pegawai-last-nip-label,
html.dark-style .pegawai-last-nip-note {
  color: #95a3b8 !important;
}

html.dark-style .pegawai-last-nip-value {
  color: #9eeeff !important;
}

html.dark-style .generate-icon,
html.dark-style .guide-card-icon,
html.dark-style .guide-menu-item i,
html.dark-style .guide-step-number {
  color: #8feaff !important;
  background: rgba(3, 195, 236, 0.12) !important;
  border-color: rgba(3, 195, 236, 0.18) !important;
}

html.dark-style .pegawai-status-card-icon {
  color: #a9f58d !important;
  background: rgba(113, 221, 55, 0.13) !important;
  border-color: rgba(113, 221, 55, 0.2) !important;
}

html.dark-style .pegawai-status-card-switch .form-check-label {
  color: #95a3b8 !important;
}

html.dark-style .pegawai-status-card-switch .form-check-input:checked ~ .form-check-label {
  color: #a9f58d !important;
}

html.dark-style .pegawai-status-card-switch .form-check-input:disabled {
  opacity: 1 !important;
  box-shadow: 0 0 0 1px rgba(113, 221, 55, 0.18) !important;
}

html.dark-style .guide-hero-icon {
  color: #ffffff !important;
  background: linear-gradient(135deg, #696cff 0%, #03c3ec 100%) !important;
  box-shadow: 0 0.8rem 1.5rem rgba(3, 195, 236, 0.16) !important;
}

html.dark-style .guide-kicker,
html.dark-style .pegawai-tax-advice {
  color: #9eeeff !important;
  background: rgba(3, 195, 236, 0.1) !important;
  border-color: rgba(3, 195, 236, 0.2) !important;
}

html.dark-style .pegawai-tax-advice strong {
  color: #d8f9ff !important;
}

html.dark-style .guide-menu-item:hover {
  background: #26313d !important;
  border-color: rgba(3, 195, 236, 0.28) !important;
}

html.dark-style .guide-menu-item .bx-chevron-right {
  color: #718095 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html.dark-style .guide-tip i {
  color: #8feaff !important;
}

html.dark-style .guide-accordion .accordion-button:not(.collapsed) {
  color: #9eeeff !important;
  background: rgba(3, 195, 236, 0.1) !important;
}

html.dark-style .guide-alert {
  color: #ffd88e !important;
  background: rgba(255, 171, 0, 0.12) !important;
  border-color: rgba(255, 171, 0, 0.24) !important;
}

html.dark-style .guide-alert i {
  color: #ffd27a !important;
}

html.dark-style .login-wrapper {
  background: rgba(31, 38, 48, 0.86);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

html.dark-style .login-wrapper::before {
  background: linear-gradient(135deg, rgba(105, 108, 255, 0.2), rgba(3, 195, 236, 0.13));
}

html.dark-style .login-kicker,
html.dark-style .login-copy,
html.dark-style .login-footer {
  color: #8b98aa;
}

html.dark-style .login-title,
html.dark-style .login-card-title,
html.dark-style .brand-text strong {
  color: #eef3f8;
}

html.dark-style .login-card {
  background: rgba(22, 27, 34, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
}

/*
* User dark refinements
******************************************************************************/

html.dark-style .dashboard-role-hero,
html.dark-style .dashboard-role-card,
html.dark-style .dashboard-role-action,
html.dark-style .dashboard-hero,
html.dark-style .dashboard-hero-side,
html.dark-style .dashboard-hero-side-block,
html.dark-style .dashboard-panel,
html.dark-style .dashboard-kpi,
html.dark-style .dashboard-summary-item,
html.dark-style .dashboard-reminder-card,
html.dark-style .dashboard-progress-shell,
html.dark-style .dashboard-progress-statusbox,
html.dark-style .dashboard-progress-mini-card,
html.dark-style .dashboard-empty,
html.dark-style .nilai-hero,
html.dark-style .nilai-filter-card,
html.dark-style .nilai-panel,
html.dark-style .nilai-score-card,
html.dark-style .nilai-detail-box,
html.dark-style .nilai-component,
html.dark-style .nilai-empty,
html.dark-style .nilai-modal-box,
html.dark-style .validation-hero,
html.dark-style .validation-side-panel,
html.dark-style .validation-policy-banner,
html.dark-style .validation-table-card,
html.dark-style .validation-modal-chip,
html.dark-style .validation-modal-absensi,
html.dark-style .validation-detail-panel,
html.dark-style .validation-side-item,
html.dark-style .validation-toolbar,
html.dark-style .validation-toolbar-value,
html.dark-style .validation-section-card,
html.dark-style .validation-section-head,
html.dark-style .validation-table-toolbar,
html.dark-style .validation-day-accordion .accordion-item,
html.dark-style .validation-modal-content,
html.dark-style .we-hero,
html.dark-style .we-side-panel,
html.dark-style .we-filter-card,
html.dark-style .we-table-card,
html.dark-style .we-stat-card,
html.dark-style .we-side-item,
html.dark-style .we-table-head,
html.dark-style .we-detail-summary-item,
html.dark-style .waktu-form-panel,
html.dark-style .waktu-form-card,
html.dark-style .kinerja-item,
html.dark-style .kinerja-picker,
html.dark-style .kinerja-field-block,
html.dark-style .kinerja-legend-shell,
html.dark-style .kinerja-legend-card,
html.dark-style .kinerja-activity-entry,
html.dark-style .kinerja-duration-display,
html.dark-style .kinerja-kalendar-offcanvas,
html.dark-style .kinerja-kalendar-offcanvas .offcanvas-header,
html.dark-style .kinerja-offcanvas-status,
html.dark-style .kinerja-modal-status,
html.dark-style .kinerja-day-modal .modal-content,
html.dark-style .kinerja-empty-state,
html.dark-style .kinerja-type-toggle,
html.dark-style .kinerja-clock-readout,
html.dark-style .kinerja-clock-mode,
html.dark-style .kinerja-clock-face,
html.dark-style .slip-tab,
html.dark-style .slip-hero,
html.dark-style .slip-period-badge,
html.dark-style .slip-filter,
html.dark-style .slip-stat,
html.dark-style .slip-card,
html.dark-style .slip-empty,
html.dark-style .penghasilan-tab,
html.dark-style .penghasilan-hero,
html.dark-style .penghasilan-chip,
html.dark-style .penghasilan-filter,
html.dark-style .penghasilan-panel,
html.dark-style .penghasilan-card,
html.dark-style .penghasilan-metric,
html.dark-style .pencapaian-hero,
html.dark-style .pencapaian-chip,
html.dark-style .pencapaian-stat,
html.dark-style .pencapaian-card,
html.dark-style .pencapaian-empty,
html.dark-style .rekap-head,
html.dark-style .rekap-head-chip,
html.dark-style .rekap-main-card,
html.dark-style .rekap-sidebar-card,
html.dark-style .rekap-filter-card,
html.dark-style .rekap-summary-pill,
html.dark-style .rekap-modal-content,
html.dark-style .rekap-detail-empty,
html.dark-style .rekap-detail-date-chip {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
  box-shadow: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.2) !important;
}

html.dark-style .dashboard-role-hero,
html.dark-style .dashboard-hero,
html.dark-style .nilai-hero,
html.dark-style .validation-hero,
html.dark-style .we-hero,
html.dark-style .slip-hero,
html.dark-style .penghasilan-hero,
html.dark-style .pencapaian-hero,
html.dark-style .rekap-head {
  background: linear-gradient(135deg, #1f2630 0%, #1b2633 52%, #182d2f 100%) !important;
}

html.dark-style .dashboard-role-title,
html.dark-style .dashboard-role-card-value,
html.dark-style .dashboard-role-action h5,
html.dark-style .dashboard-title,
html.dark-style .dashboard-hero-side-value,
html.dark-style .dashboard-summary-item strong,
html.dark-style .dashboard-reminder-value,
html.dark-style .dashboard-progress-title,
html.dark-style .dashboard-progress-mini-value,
html.dark-style .nilai-title,
html.dark-style .nilai-score-value,
html.dark-style .nilai-detail-value,
html.dark-style .nilai-component strong,
html.dark-style .nilai-effective-name,
html.dark-style .validation-title,
html.dark-style .validation-person-name,
html.dark-style .validation-stat-chip strong,
html.dark-style .validation-side-item strong,
html.dark-style .validation-toolbar-value strong,
html.dark-style .validation-section-title,
html.dark-style .we-title,
html.dark-style .we-person-name,
html.dark-style .we-stat-card strong,
html.dark-style .we-side-item strong,
html.dark-style .waktu-form-title,
html.dark-style .kinerja-title,
html.dark-style .kinerja-item-title,
html.dark-style .kinerja-legend-card strong,
html.dark-style .kinerja-duration-value,
html.dark-style .kinerja-clock-readout strong,
html.dark-style .slip-title,
html.dark-style .slip-money,
html.dark-style .slip-stat strong,
html.dark-style .penghasilan-title,
html.dark-style .penghasilan-metric-value,
html.dark-style .penghasilan-card strong,
html.dark-style .pencapaian-title,
html.dark-style .pencapaian-score,
html.dark-style .pencapaian-money,
html.dark-style .pencapaian-stat strong,
html.dark-style .rekap-head-title,
html.dark-style .rekap-section-title h5,
html.dark-style .rekap-minutes {
  color: #eef3f8 !important;
}

html.dark-style .dashboard-role-lead,
html.dark-style .dashboard-role-card-meta,
html.dark-style .dashboard-role-card-label,
html.dark-style .dashboard-role-action p,
html.dark-style .dashboard-subtitle,
html.dark-style .dashboard-hero-side-label,
html.dark-style .dashboard-summary-item span,
html.dark-style .dashboard-reminder-label,
html.dark-style .dashboard-progress-meta,
html.dark-style .dashboard-progress-mini-label,
html.dark-style .nilai-subtitle,
html.dark-style .nilai-score-label,
html.dark-style .nilai-detail-label,
html.dark-style .nilai-component span,
html.dark-style .nilai-effective-meta,
html.dark-style .validation-subtitle,
html.dark-style .validation-person-meta,
html.dark-style .validation-stat-chip span,
html.dark-style .validation-side-item span,
html.dark-style .validation-toolbar-value span,
html.dark-style .validation-section-subtitle,
html.dark-style .we-subtitle,
html.dark-style .we-person-meta,
html.dark-style .we-stat-card span,
html.dark-style .we-side-item span,
html.dark-style .waktu-form-subtitle,
html.dark-style .kinerja-subtitle,
html.dark-style .kinerja-item-meta,
html.dark-style .kinerja-legend-card span,
html.dark-style .kinerja-duration-label,
html.dark-style .kinerja-clock-mode,
html.dark-style .slip-subtitle,
html.dark-style .slip-stat span,
html.dark-style .penghasilan-subtitle,
html.dark-style .penghasilan-metric-label,
html.dark-style .penghasilan-card span,
html.dark-style .pencapaian-subtitle,
html.dark-style .pencapaian-stat span,
html.dark-style .rekap-head-subtitle,
html.dark-style .rekap-section-title p {
  color: #95a3b8 !important;
}

html.dark-style .dashboard-role-icon,
html.dark-style .dashboard-kpi-icon,
html.dark-style .dashboard-reminder-icon,
html.dark-style .nilai-score-icon,
html.dark-style .validation-side-icon,
html.dark-style .we-side-icon,
html.dark-style .slip-icon,
html.dark-style .penghasilan-icon,
html.dark-style .pencapaian-icon,
html.dark-style .rekap-head-icon {
  color: #8feaff !important;
  background: rgba(3, 195, 236, 0.12) !important;
  border-color: rgba(3, 195, 236, 0.2) !important;
}

html.dark-style .dashboard-soft-badge,
html.dark-style .nilai-badge,
html.dark-style .validation-stat-chip,
html.dark-style .validation-modal-badge,
html.dark-style .we-status,
html.dark-style .kinerja-status,
html.dark-style .slip-chip,
html.dark-style .penghasilan-chip,
html.dark-style .pencapaian-chip,
html.dark-style .rekap-head-chip,
html.dark-style .rekap-summary-pill {
  color: #d8f9ff !important;
  background: rgba(3, 195, 236, 0.1) !important;
  border-color: rgba(3, 195, 236, 0.22) !important;
}

html.dark-style .is-success,
html.dark-style .we-status.is-open,
html.dark-style .kinerja-status.is-success {
  color: #d4ffbd !important;
  background: rgba(113, 221, 55, 0.18) !important;
  border-color: rgba(113, 221, 55, 0.34) !important;
  box-shadow: 0 0 0 1px rgba(113, 221, 55, 0.08), 0 0.45rem 1rem rgba(113, 221, 55, 0.08) !important;
}

html.dark-style .is-warning,
html.dark-style .we-status.is-warning,
html.dark-style .we-status.is-locked,
html.dark-style .kinerja-status.is-warning {
  color: #ffe2a8 !important;
  background: rgba(255, 171, 0, 0.2) !important;
  border-color: rgba(255, 171, 0, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(255, 171, 0, 0.08), 0 0.45rem 1rem rgba(255, 171, 0, 0.1) !important;
}

html.dark-style .is-danger,
html.dark-style .we-status.is-closed,
html.dark-style .kinerja-status.is-danger {
  color: #ffc0b7 !important;
  background: rgba(255, 62, 29, 0.18) !important;
  border-color: rgba(255, 62, 29, 0.34) !important;
  box-shadow: 0 0 0 1px rgba(255, 62, 29, 0.08), 0 0.45rem 1rem rgba(255, 62, 29, 0.1) !important;
}

html.dark-style .we-status i,
html.dark-style .we-chip i,
html.dark-style .we-date-chip i,
html.dark-style .dashboard-soft-badge i,
html.dark-style .validation-pill i,
html.dark-style .validation-hero-chip i,
html.dark-style .rekap-badge i,
html.dark-style .penghasilan-chip i,
html.dark-style .pencapaian-chip i,
html.dark-style .slip-kicker i {
  color: currentColor !important;
}

html.dark-style .we-stat-icon.is-blue {
  color: #9eeeff !important;
  background: rgba(3, 195, 236, 0.16) !important;
  border: 1px solid rgba(3, 195, 236, 0.28) !important;
}

html.dark-style .we-stat-icon.is-emerald {
  color: #d4ffbd !important;
  background: rgba(113, 221, 55, 0.16) !important;
  border: 1px solid rgba(113, 221, 55, 0.28) !important;
}

html.dark-style .we-stat-icon.is-amber {
  color: #ffe2a8 !important;
  background: rgba(255, 171, 0, 0.18) !important;
  border: 1px solid rgba(255, 171, 0, 0.32) !important;
}

html.dark-style .we-stat-icon.is-slate {
  color: #ffc0b7 !important;
  background: rgba(255, 62, 29, 0.15) !important;
  border: 1px solid rgba(255, 62, 29, 0.28) !important;
}

html.dark-style .we-table .table-status-badge.bg-label-warning {
  color: #1f2630 !important;
  background: #ffab00 !important;
  border: 1px solid #ffab00 !important;
}

html.dark-style .we-table .table-status-badge.bg-label-secondary,
html.dark-style .table-status-badge.bg-label-secondary {
  color: #fff !important;
  background: #8592a3 !important;
  border: 1px solid #8592a3 !important;
}

html.dark-style .dashboard-table thead th,
html.dark-style .nilai-effective-table th,
html.dark-style .validation-table thead th,
html.dark-style .we-table thead th,
html.dark-style .we-detail-table th,
html.dark-style .slip-table th,
html.dark-style .pencapaian-table th,
html.dark-style .rekap-table thead th {
  color: #aeb9c8 !important;
  background: #171d25 !important;
  border-color: #2f3a46 !important;
}

html.dark-style .dashboard-table td,
html.dark-style .nilai-effective-table td,
html.dark-style .validation-table td,
html.dark-style .we-table td,
html.dark-style .we-detail-table td,
html.dark-style .slip-table td,
html.dark-style .pencapaian-table td,
html.dark-style .rekap-table td {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
}

html.dark-style .dashboard-table tbody tr:hover td,
html.dark-style .nilai-effective-table tbody tr:hover td,
html.dark-style .validation-table tbody tr:hover td,
html.dark-style .we-table tbody tr:hover td,
html.dark-style .slip-table tbody tr:hover td,
html.dark-style .pencapaian-table tbody tr:hover td,
html.dark-style .rekap-table tbody tr:hover td {
  background: #26313d !important;
}

html.dark-style .table-hover.we-table {
  --bs-table-hover-color: #eef3f8;
  --bs-table-hover-bg: #26313d;
}

html.dark-style .table-hover.we-table > tbody > tr:hover {
  background-color: #26313d !important;
}

html.dark-style .table-hover.we-table > tbody > tr:hover > * {
  --bs-table-accent-bg: #26313d !important;
  color: #eef3f8 !important;
  background-color: #26313d !important;
  border-color: #344150 !important;
  box-shadow: inset 0 0 0 9999px #26313d !important;
}

html.dark-style .table-hover.we-table > tbody > tr:hover .we-person-meta,
html.dark-style .table-hover.we-table > tbody > tr:hover .we-muted-note,
html.dark-style .table-hover.we-table > tbody > tr:hover .we-minute-row span {
  color: #aeb9c8 !important;
}

html.dark-style .table-hover.we-table > tbody > tr:hover .we-person-name,
html.dark-style .table-hover.we-table > tbody > tr:hover .we-minute-row strong {
  color: #ffffff !important;
}

html.dark-style .pencapaian-sticky {
  background: #1f2630 !important;
  border-right-color: #2f3a46 !important;
  box-shadow: 0.85rem 0 1rem rgba(0, 0, 0, 0.22) !important;
}

html.dark-style .pencapaian-table thead .pencapaian-sticky,
html.dark-style .pencapaian-table tbody tr:hover .pencapaian-sticky {
  background: #26313d !important;
}

html.dark-style .validation-day-accordion .accordion-button,
html.dark-style .validation-day-accordion .accordion-button.collapsed {
  color: #eef3f8 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
}

html.dark-style .validation-day-accordion .accordion-button:not(.collapsed) {
  color: #9eeeff !important;
  background: rgba(3, 195, 236, 0.1) !important;
}

html.dark-style .kinerja-calendar .fc,
html.dark-style .kinerja-calendar .fc-scrollgrid,
html.dark-style .kinerja-calendar .fc-theme-standard td,
html.dark-style .kinerja-calendar .fc-theme-standard th {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
}

html.dark-style .kinerja-calendar .fc-col-header-cell,
html.dark-style .kinerja-calendar .fc-daygrid-day-frame {
  background: #1f2630 !important;
}

html.dark-style .kinerja-calendar .fc-day-today {
  background: rgba(105, 108, 255, 0.14) !important;
}

html.dark-style .kinerja-calendar .fc-button {
  color: #eef3f8 !important;
  background: #2a3440 !important;
  border-color: #3b4858 !important;
}

html.dark-style .kinerja-calendar .fc-button-primary:not(:disabled).fc-button-active,
html.dark-style .kinerja-calendar .fc-button-primary:not(:disabled):active {
  background: #696cff !important;
  border-color: #696cff !important;
}

html.dark-style .flatpickr-calendar {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.38) !important;
}

html.dark-style .flatpickr-months,
html.dark-style .flatpickr-weekdays,
html.dark-style .flatpickr-time,
html.dark-style .flatpickr-time input,
html.dark-style .flatpickr-day {
  color: #d2dae6 !important;
  background: #1f2630 !important;
}

html.dark-style .flatpickr-day:hover,
html.dark-style .flatpickr-day:focus {
  background: #26313d !important;
  border-color: #344150 !important;
}

html.dark-style .flatpickr-day.today {
  border-color: #03c3ec !important;
}

html.dark-style .flatpickr-day.selected,
html.dark-style .flatpickr-day.startRange,
html.dark-style .flatpickr-day.endRange {
  color: #fff !important;
  background: #696cff !important;
  border-color: #696cff !important;
}

html.dark-style .dashboard-role-badge,
html.dark-style .dashboard-role-meta-chip,
html.dark-style .dashboard-period-badge,
html.dark-style .dashboard-progress-kicker,
html.dark-style .nilai-chip,
html.dark-style .nilai-mini-pill,
html.dark-style .validation-hero-chip,
html.dark-style .validation-pill,
html.dark-style .we-chip,
html.dark-style .we-date-chip,
html.dark-style .slip-kicker,
html.dark-style .penghasilan-kicker,
html.dark-style .penghasilan-formula-period,
html.dark-style .rekap-head-kicker,
html.dark-style .rekap-badge {
  color: #d8f9ff !important;
  background: rgba(3, 195, 236, 0.1) !important;
  border-color: rgba(3, 195, 236, 0.22) !important;
}

html.dark-style .dashboard-kpi,
html.dark-style .penghasilan-box,
html.dark-style .penghasilan-component,
html.dark-style .penghasilan-formula,
html.dark-style .penghasilan-formula-box,
html.dark-style .penghasilan-formula-row,
html.dark-style .penghasilan-empty,
html.dark-style .nilai-formula-card,
html.dark-style .nilai-modal-box-head,
html.dark-style .validation-empty-state,
html.dark-style .we-detail-modal .modal-content,
html.dark-style .we-detail-modal .modal-header,
html.dark-style .rekap-modal-content .modal-header,
html.dark-style .rekap-modal-content .modal-footer,
html.dark-style .kinerja-head,
html.dark-style .kinerja-head-chip,
html.dark-style .kinerja-hero,
html.dark-style .kinerja-calendar-card,
html.dark-style .kinerja-summary-pill,
html.dark-style .kinerja-panel,
html.dark-style .kinerja-note-card,
html.dark-style .kinerja-form-actions {
  color: #d2dae6 !important;
  background: #1f2630 !important;
  border-color: #2f3a46 !important;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18) !important;
}

html.dark-style .kinerja-head,
html.dark-style .kinerja-hero,
html.dark-style .kinerja-calendar-card,
html.dark-style .penghasilan-formula {
  background: linear-gradient(135deg, #1f2630 0%, #1b2633 52%, #182d2f 100%) !important;
}

html.dark-style .dashboard-kpi-value,
html.dark-style .dashboard-progress-kicker,
html.dark-style .nilai-formula-title,
html.dark-style .nilai-formula-line strong,
html.dark-style .nilai-modal-box-head,
html.dark-style .validation-modal-chip strong,
html.dark-style .validation-modal-absensi-title,
html.dark-style .we-table-title,
html.dark-style .we-minute-row strong,
html.dark-style .we-detail-summary-item strong,
html.dark-style .we-detail-section-title,
html.dark-style .slip-employee strong,
html.dark-style .penghasilan-detail-title h5,
html.dark-style .penghasilan-main-number,
html.dark-style .penghasilan-box-value,
html.dark-style .penghasilan-component strong,
html.dark-style .penghasilan-formula-title,
html.dark-style .penghasilan-formula-value,
html.dark-style .penghasilan-formula-row strong,
html.dark-style .rekap-summary-pill .summary-value,
html.dark-style .rekap-period-label,
html.dark-style .rekap-detail-empty strong,
html.dark-style .kinerja-hero h4,
html.dark-style .kinerja-summary-pill .summary-value,
html.dark-style .kinerja-panel-title h5,
html.dark-style .kinerja-panel-title .modal-title,
html.dark-style .kinerja-activity-entry h6,
html.dark-style .kinerja-clock-value {
  color: #eef3f8 !important;
}

html.dark-style .dashboard-kpi-label,
html.dark-style .dashboard-kpi-note,
html.dark-style .dashboard-progress-lead,
html.dark-style .dashboard-progress-mini-note,
html.dark-style .nilai-formula-line,
html.dark-style .nilai-modal-lead,
html.dark-style .validation-day-note,
html.dark-style .validation-day-notes,
html.dark-style .validation-modal-chip span,
html.dark-style .we-table-subtitle,
html.dark-style .we-minute-row span,
html.dark-style .we-muted-note,
html.dark-style .we-detail-summary-item span,
html.dark-style .we-detail-note,
html.dark-style .slip-lead,
html.dark-style .slip-employee span,
html.dark-style .slip-muted,
html.dark-style .penghasilan-lead,
html.dark-style .penghasilan-metric-meta,
html.dark-style .penghasilan-main-caption,
html.dark-style .penghasilan-box-label,
html.dark-style .penghasilan-component span,
html.dark-style .penghasilan-formula-lead,
html.dark-style .penghasilan-formula-label,
html.dark-style .penghasilan-formula-meta,
html.dark-style .penghasilan-formula-row span,
html.dark-style .rekap-head-lead,
html.dark-style .rekap-summary-pill .summary-label,
html.dark-style .rekap-summary-pill .summary-meta,
html.dark-style .rekap-period-meta,
html.dark-style .rekap-detail-note,
html.dark-style .rekap-detail-empty span,
html.dark-style .kinerja-panel-subtitle,
html.dark-style .kinerja-required-note,
html.dark-style .kinerja-activity-line,
html.dark-style .kinerja-meta {
  color: #95a3b8 !important;
}

html.dark-style .dashboard-progress-meter,
html.dark-style .penghasilan-progress {
  background: #171d25 !important;
}

html.dark-style .validation-table-note-row td {
  color: #ffb1a5 !important;
  background: rgba(255, 62, 29, 0.08) !important;
}

html.dark-style .validation-conflict-badge,
html.dark-style .validation-source-badge.is-utama,
html.dark-style .kinerja-source-badge.is-utama {
  color: #c7c8ff !important;
  background: rgba(105, 108, 255, 0.14) !important;
  border-color: rgba(105, 108, 255, 0.24) !important;
}

html.dark-style .validation-source-badge.is-tambahan,
html.dark-style .kinerja-source-badge.is-tambahan {
  color: #9eeeff !important;
  background: rgba(3, 195, 236, 0.1) !important;
  border-color: rgba(3, 195, 236, 0.22) !important;
}

html.dark-style .kinerja-calendar .fc {
  --fc-border-color: #2f3a46 !important;
  --fc-page-bg-color: #1f2630 !important;
  --fc-neutral-bg-color: #171d25 !important;
  --fc-today-bg-color: rgba(105, 108, 255, 0.14) !important;
}

html.dark-style .kinerja-calendar .fc a,
html.dark-style .kinerja-calendar .fc th,
html.dark-style .kinerja-calendar .fc td,
html.dark-style .kinerja-calendar .fc-daygrid-day-number,
html.dark-style .kinerja-calendar .fc-col-header-cell-cushion {
  color: #d2dae6 !important;
}

html.dark-style .kinerja-calendar .fc-daygrid-day.is-empty .fc-daygrid-day-frame,
html.dark-style .kinerja-calendar .fc-daygrid-day-frame {
  background: #1f2630 !important;
}

html.dark-style .kinerja-calendar .fc-daygrid-day.active .fc-daygrid-day-frame,
html.dark-style .kinerja-calendar .fc-daygrid-day.is-today .fc-daygrid-day-frame {
  background: rgba(105, 108, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px #696cff !important;
}

html.dark-style .kinerja-calendar .fc-daygrid-day.status-menunggu .fc-daygrid-day-frame {
  background: linear-gradient(180deg, rgba(255, 171, 0, 0.13) 0%, #1f2630 100%) !important;
}

html.dark-style .kinerja-calendar .fc-daygrid-day.status-diverifikasi .fc-daygrid-day-frame {
  background: linear-gradient(180deg, rgba(113, 221, 55, 0.11) 0%, #1f2630 100%) !important;
}

html.dark-style .kinerja-calendar .fc-daygrid-day.status-ditolak .fc-daygrid-day-frame,
html.dark-style .kinerja-calendar .fc-daygrid-day.is-weekend-blocked .fc-daygrid-day-frame {
  background: linear-gradient(180deg, rgba(255, 62, 29, 0.11) 0%, #1f2630 100%) !important;
}

html.dark-style .kinerja-day-pill.is-count,
html.dark-style .kinerja-summary-pill .summary-chip {
  color: #d8f9ff !important;
  background: rgba(3, 195, 236, 0.11) !important;
}

html.dark-style .kinerja-clock-face {
  background: radial-gradient(circle at center, #03c3ec 0 7%, #171d25 7.5% 8.5%, #1f2630 9% 100%) !important;
  border-color: #2f3a46 !important;
}

html.dark-style .kinerja-clock-mode button,
html.dark-style .kinerja-clock-option {
  color: #aeb9c8 !important;
}

html.dark-style .kinerja-clock-mode button.is-active,
html.dark-style .kinerja-clock-option.is-active {
  color: #fff !important;
}