:root {
  --cp-bs-sidebar-width: 270px;
  --cp-bs-header-height: 70px;
  --cp-bs-bg: #f6f8fb;
  --cp-bs-card-bg: #fff;
  --cp-bs-border: #e5eaef;
  --cp-bs-muted: #5a6a85;
  --cp-bs-heading: #2a3547;
  --cp-bs-primary: #5d87ff;
  --cp-bs-primary-hover: #4570ea;
  --cp-bs-primary-soft: #ecf2ff;
  --cp-bs-secondary: #49beff;
  --cp-bs-secondary-soft: #e8f7ff;
  --cp-bs-success: #13deb9;
  --cp-bs-success-soft: #e6fffa;
  --cp-bs-warning: #ffae1f;
  --cp-bs-warning-soft: #fef5e5;
  --cp-bs-danger: #fa896b;
  --cp-bs-danger-soft: #fbf2ef;
  --cp-bs-info: #539bff;
  --cp-bs-info-soft: #ebf3fe;
  --cp-bs-radius: 7px;
  --cp-bs-shadow: 0 12px 24px -4px rgba(145, 158, 171, .12);
}

html[data-bs-theme="light"] {
  background: var(--cp-bs-bg);
}

.modernize-bs5-ui {
  --bs-primary: var(--cp-bs-primary);
  --bs-primary-rgb: 93, 135, 255;
  --bs-secondary: var(--cp-bs-secondary);
  --bs-secondary-rgb: 73, 190, 255;
  --bs-success: var(--cp-bs-success);
  --bs-success-rgb: 19, 222, 185;
  --bs-warning: var(--cp-bs-warning);
  --bs-warning-rgb: 255, 174, 31;
  --bs-danger: var(--cp-bs-danger);
  --bs-danger-rgb: 250, 137, 107;
  --bs-info: var(--cp-bs-info);
  --bs-info-rgb: 83, 155, 255;
  background: var(--cp-bs-bg);
  color: var(--cp-bs-heading);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.modernize-bs5-ui #containerMain {
  background: var(--cp-bs-bg) !important;
}

.modernize-bs5-ui #sidebarMain {
  width: var(--cp-bs-sidebar-width) !important;
  border-right: 1px solid var(--cp-bs-border) !important;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
  box-shadow: none;
}

.modernize-bs5-ui #sidebarMain.left-sidebar {
  position: relative !important;
  inset: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-self: stretch;
  overflow: hidden !important;
  z-index: 40;
}

/* Root admin only: below 1024px let the off-canvas sidebar rules in app.css
   (position: fixed + translateX slide-in + backdrop) take over. The general
   rule above forces the sidebar in-flow with !important, so we relax the
   positioning here with a higher-specificity, root-scoped override. Client and
   owner layouts are intentionally left unchanged. */
@media (max-width: 1023px) {
  body.root-admin-layout.modernize-bs5-ui #sidebarMain.left-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(18rem, calc(100vw - 3rem)) !important;
    max-width: 18rem !important;
    z-index: 60 !important;
  }
}

.modernize-bs5-ui #sidebarMain > .border-b,
.modernize-bs5-ui #sidebarMain > div:first-child {
  background: linear-gradient(135deg, #fff 0%, var(--cp-bs-primary-soft) 100%);
  min-height: var(--cp-bs-header-height);
  border-bottom: 1px solid var(--cp-bs-border) !important;
  padding-inline: 24px !important;
}

.modernize-bs5-ui #sidebarMain > div:first-child span {
  color: var(--cp-bs-muted) !important;
  letter-spacing: .04em;
}

.modernize-bs5-ui #sidebarMain > div:first-child strong {
  color: var(--cp-bs-heading) !important;
  font-size: 1.05rem !important;
  line-height: 1.35;
}

.modernize-bs5-ui #pageContainer {
  background: var(--cp-bs-bg);
}

.modernize-bs5-ui #headerMain,
.modernize-bs5-ui #focusedHeaderMain {
  min-height: var(--cp-bs-header-height) !important;
  border-bottom: 1px solid var(--cp-bs-border) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(236, 242, 255, .92) 100%) !important;
  box-shadow: 0 1px 0 rgba(145, 158, 171, .08);
}

.modernize-bs5-ui #pageContent {
  background: var(--cp-bs-bg);
}

.modernize-bs5-ui .root-admin-nav {
  gap: 18px !important;
  padding: 18px 16px !important;
}

.modernize-bs5-ui #sidebarMain .root-admin-nav.sidebar-nav.scroll-sidebar {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 0;
  padding: 12px !important;
}

.modernize-bs5-ui .root-nav-search {
  position: relative;
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  width: 100% !important;
}

.modernize-bs5-ui .root-nav-search i {
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #8a9ab0;
  font-size: .9rem;
  pointer-events: none;
}

.modernize-bs5-ui .root-nav-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--cp-bs-border);
  border-radius: var(--cp-bs-radius);
  background: #f8fafc;
  color: var(--cp-bs-heading);
  font-size: .875rem;
  font-weight: 600;
  outline: 0;
  padding: 0 12px 0 38px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.modernize-bs5-ui .root-nav-search input:focus {
  border-color: rgba(93, 135, 255, .55);
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(93, 135, 255, .12);
}

.modernize-bs5-ui .root-nav-groups {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding-right: 0;
}

.modernize-bs5-ui .root-nav-groups#sidebarnav {
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  margin: 0;
  overflow: visible;
  padding: 0 !important;
  width: 100% !important;
  align-content: start;
}

.modernize-bs5-ui .root-nav-group {
  display: grid;
  gap: 4px;
  width: 100% !important;
}

.modernize-bs5-ui .root-nav-group-toggle {
  min-height: 30px;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: var(--cp-bs-radius);
  background: transparent;
  color: var(--cp-bs-muted);
  cursor: pointer;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  padding: 0 12px;
  transition: background-color .15s ease, color .15s ease;
}

.modernize-bs5-ui .root-nav-group-toggle:hover,
.modernize-bs5-ui .root-nav-group-toggle[aria-expanded="true"] {
  background: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
}

.modernize-bs5-ui .root-nav-group-toggle i {
  color: #8a9ab0;
  font-size: .72rem;
  transition: transform .15s ease;
}

.modernize-bs5-ui .root-nav-group-toggle[aria-expanded="true"] i {
  color: var(--cp-bs-primary);
  transform: rotate(90deg);
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-toggle {
  grid-column: 1 / -1 !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-right: 12px !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-toggle span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-toggle i {
  margin-left: auto !important;
}

.modernize-bs5-ui .root-nav-group-items {
  display: grid;
  gap: 4px;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav],
body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-groups,
body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group,
body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-items {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  justify-items: stretch !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-items {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .root-nav-group-items > .app-nav-item {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.modernize-bs5-ui .root-nav-group-items[hidden],
.modernize-bs5-ui .root-nav-subitems[hidden],
.modernize-bs5-ui [data-client-nav-item][hidden],
.modernize-bs5-ui [data-root-nav-item][hidden],
.modernize-bs5-ui [data-owner-nav-item][hidden],
.modernize-bs5-ui [data-client-nav-group][hidden],
.modernize-bs5-ui [data-root-nav-group][hidden],
.modernize-bs5-ui [data-owner-nav-group][hidden] {
  display: none !important;
}

.modernize-bs5-ui .app-nav-item {
  min-height: 40px;
  width: 100% !important;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--cp-bs-radius);
  color: var(--cp-bs-muted);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  padding: 8px 10px;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.modernize-bs5-ui .app-nav-item:hover {
  background: #f3f7ff;
  color: var(--cp-bs-primary);
}

.modernize-bs5-ui .app-nav-item.active,
.modernize-bs5-ui .app-nav-item[aria-current="page"] {
  background: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
  box-shadow: none;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain .app-nav-item.active,
body.modernize-bs5-ui.client-admin-layout #sidebarMain .app-nav-item[aria-current="page"] {
  border-color: rgba(93, 135, 255, .22) !important;
  background: var(--cp-bs-primary-soft) !important;
  color: var(--cp-bs-primary) !important;
  box-shadow: none !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain .app-nav-item.active .app-nav-icon,
body.modernize-bs5-ui.client-admin-layout #sidebarMain .app-nav-item[aria-current="page"] .app-nav-icon {
  background: var(--cp-bs-primary) !important;
  color: #fff !important;
}

body.modernize-bs5-ui.client-admin-layout #sidebarMain [data-client-sidebar-nav] .app-nav-item > span:not(.app-nav-icon):not(.nav-unread-count) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

.modernize-bs5-ui .app-nav-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(93, 135, 255, .1) !important;
  color: var(--cp-bs-primary) !important;
  font-size: 1rem;
}

.modernize-bs5-ui .app-nav-item:hover .app-nav-icon,
.modernize-bs5-ui .app-nav-item.active .app-nav-icon,
.modernize-bs5-ui .app-nav-item[aria-current="page"] .app-nav-icon {
  background: var(--cp-bs-primary) !important;
  color: #fff !important;
}

.modernize-bs5-ui .root-nav-subitems {
  margin-left: 22px !important;
  border-left: 1px solid var(--cp-bs-border) !important;
}

.modernize-bs5-ui .root-nav-subitems .app-nav-item {
  min-height: 34px !important;
  font-size: .82rem !important;
}

.modernize-bs5-ui [data-client-sidebar-footer] {
  padding: 12px !important;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
}

.modernize-bs5-ui .card,
.modernize-bs5-ui .modal-content,
.modernize-bs5-ui .offcanvas,
.modernize-bs5-ui .dropdown-menu,
.modernize-bs5-ui [class*="rounded-md"][class*="border"][class*="bg-white"] {
  border-color: var(--cp-bs-border) !important;
  border-radius: var(--cp-bs-radius) !important;
}

.modernize-bs5-ui .card {
  box-shadow: var(--cp-bs-shadow);
}

.modernize-bs5-ui .btn {
  border-radius: var(--cp-bs-radius);
  font-weight: 700;
}

.modernize-bs5-ui .btn-primary {
  --bs-btn-bg: var(--cp-bs-primary);
  --bs-btn-border-color: var(--cp-bs-primary);
  --bs-btn-hover-bg: #4570ea;
  --bs-btn-hover-border-color: #4570ea;
}

.modernize-bs5-ui .btn-outline-primary,
.modernize-bs5-ui a[class*="border-slate-300"][class*="bg-white"],
.modernize-bs5-ui button[class*="border-slate-300"][class*="bg-white"] {
  border-color: rgba(93, 135, 255, .32) !important;
  color: var(--cp-bs-heading) !important;
}

.modernize-bs5-ui .btn-outline-primary:hover,
.modernize-bs5-ui a[class*="border-slate-300"][class*="bg-white"]:hover,
.modernize-bs5-ui button[class*="border-slate-300"][class*="bg-white"]:hover {
  border-color: rgba(93, 135, 255, .55) !important;
  background-color: var(--cp-bs-primary-soft) !important;
  color: var(--cp-bs-primary) !important;
}

.modernize-bs5-ui .btn-outline-secondary {
  border-color: var(--cp-bs-border);
  background-color: #fff;
  color: var(--cp-bs-muted);
}

.modernize-bs5-ui .btn-outline-secondary:hover,
.modernize-bs5-ui .btn-outline-secondary:focus {
  border-color: rgba(93, 135, 255, .55);
  background-color: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
}

.modernize-bs5-ui .form-control,
.modernize-bs5-ui .form-select,
.modernize-bs5-ui .select2-container--default .select2-selection--single,
.modernize-bs5-ui .select2-container--default .select2-selection--multiple {
  border-color: var(--cp-bs-border);
  border-radius: var(--cp-bs-radius);
  color: var(--cp-bs-heading);
}

.modernize-bs5-ui .form-control:focus,
.modernize-bs5-ui .form-select:focus,
.modernize-bs5-ui .select2-container--default.select2-container--focus .select2-selection--multiple,
.modernize-bs5-ui .select2-container--default.select2-container--open .select2-selection--single {
  border-color: rgba(93, 135, 255, .55);
  box-shadow: 0 0 0 .2rem rgba(93, 135, 255, .12);
}

.modernize-bs5-ui .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.modernize-bs5-ui .input-group > .form-control,
.modernize-bs5-ui .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.modernize-bs5-ui .input-group > .form-control:not(:last-child),
.modernize-bs5-ui .input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.modernize-bs5-ui .input-group > .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.modernize-bs5-ui .input-group > .btn:not(:first-child),
.modernize-bs5-ui .input-group > .input-group-text:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.modernize-bs5-ui .input-group > .btn:not(:last-child),
.modernize-bs5-ui .input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.modernize-bs5-ui .table {
  --bs-table-color: var(--cp-bs-heading);
  --bs-table-border-color: var(--cp-bs-border);
}

.modernize-bs5-ui .table thead th {
  color: var(--cp-bs-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.modernize-bs5-ui .badge:not([class*="bg-"]):not(.status-badge) {
  background-color: var(--cp-bs-primary-soft) !important;
  color: var(--cp-bs-primary) !important;
  border: 1px solid rgba(93, 135, 255, .18);
}

.modernize-bs5-ui .nav-pills .nav-link.active,
.modernize-bs5-ui .nav-tabs .nav-link.active,
.modernize-bs5-ui [role="tab"][aria-selected="true"] {
  background: var(--cp-bs-primary-soft) !important;
  border-color: rgba(93, 135, 255, .2) !important;
  color: var(--cp-bs-primary) !important;
}

.modernize-bs5-ui .toast-container.app-toast-container,
.modernize-bs5-ui #toastContainer {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1080 !important;
  display: flex !important;
  width: min(26rem, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: .75rem !important;
  padding: 0 !important;
  pointer-events: none;
}

.modernize-bs5-ui .app-toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: .75rem;
  --bs-toast-padding-y: .5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: .875rem;
  --bs-toast-color: var(--bs-body-color);
  --bs-toast-bg: var(--bs-body-bg);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: var(--bs-body-bg);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  padding: 0;
  color: var(--bs-toast-color);
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  border-radius: var(--bs-toast-border-radius);
  box-shadow: var(--bs-toast-box-shadow);
  pointer-events: auto;
}

.modernize-bs5-ui .app-toast .toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}

.modernize-bs5-ui .app-toast .toast-body {
  padding: var(--bs-toast-padding-x);
  color: var(--bs-toast-color);
  word-wrap: break-word;
}

.modernize-bs5-ui .root-sidebar-backdrop {
  background: rgba(42, 53, 71, .45);
}

.modernize-bs5-ui .text-white :is(h1, h2, h3, h4, h5, h6, p, span, small, strong) {
  color: inherit !important;
}

.modernize-bs5-ui .text-slate-950,
.modernize-bs5-ui .group:hover .group-hover\:text-slate-950 {
  color: var(--cp-bs-heading) !important;
}

.modernize-bs5-ui .text-slate-700,
.modernize-bs5-ui .group:hover .group-hover\:text-slate-700 {
  color: #3f4d63 !important;
}

.modernize-bs5-ui .text-slate-600,
.modernize-bs5-ui .group:hover .group-hover\:text-slate-600 {
  color: var(--cp-bs-muted) !important;
}

.modernize-bs5-ui .text-slate-500,
.modernize-bs5-ui .text-slate-400 {
  color: #7c8aa1 !important;
}

.modernize-bs5-ui .text-sky-500,
.modernize-bs5-ui .text-sky-600,
.modernize-bs5-ui .text-sky-700,
.modernize-bs5-ui .text-blue-600,
.modernize-bs5-ui .text-blue-700,
.modernize-bs5-ui .group:hover .group-hover\:text-sky-500 {
  color: var(--cp-bs-primary) !important;
}

.modernize-bs5-ui .text-emerald-600,
.modernize-bs5-ui .text-emerald-700,
.modernize-bs5-ui .text-green-700 {
  color: #0aa889 !important;
}

.modernize-bs5-ui .text-amber-600,
.modernize-bs5-ui .text-amber-700,
.modernize-bs5-ui .text-yellow-700 {
  color: #bd7400 !important;
}

.modernize-bs5-ui .text-red-600,
.modernize-bs5-ui .text-red-700,
.modernize-bs5-ui .text-rose-700 {
  color: #d85a43 !important;
}

.modernize-bs5-ui .bg-slate-950,
.modernize-bs5-ui .bg-slate-900,
.modernize-bs5-ui .bg-slate-800,
.modernize-bs5-ui .peer:checked ~ .peer-checked\:bg-slate-950 {
  background: linear-gradient(135deg, var(--cp-bs-primary) 0%, var(--cp-bs-secondary) 100%) !important;
  border-color: transparent !important;
}

.modernize-bs5-ui .hover\:bg-slate-800:hover,
.modernize-bs5-ui .hover\:bg-slate-900:hover,
.modernize-bs5-ui .hover\:bg-slate-950:hover {
  background: linear-gradient(135deg, var(--cp-bs-primary-hover) 0%, #2f9ceb 100%) !important;
  border-color: transparent !important;
}

.modernize-bs5-ui .bg-slate-50 {
  background-color: #f6f9fc !important;
}

.modernize-bs5-ui .bg-slate-100 {
  background-color: var(--cp-bs-primary-soft) !important;
}

.modernize-bs5-ui .bg-sky-50,
.modernize-bs5-ui .bg-blue-50,
.modernize-bs5-ui .hover\:bg-sky-50\/60:hover,
.modernize-bs5-ui .hover\:bg-blue-50:hover {
  background-color: var(--cp-bs-info-soft) !important;
}

.modernize-bs5-ui .bg-emerald-50,
.modernize-bs5-ui .bg-green-50 {
  background-color: var(--cp-bs-success-soft) !important;
}

.modernize-bs5-ui .bg-emerald-700,
.modernize-bs5-ui .bg-green-700,
.modernize-bs5-ui .hover\:bg-emerald-800:hover,
.modernize-bs5-ui .hover\:bg-green-800:hover {
  background: linear-gradient(135deg, var(--cp-bs-success) 0%, #0bb39c 100%) !important;
  border-color: transparent !important;
}

.modernize-bs5-ui .bg-amber-50,
.modernize-bs5-ui .bg-yellow-50 {
  background-color: var(--cp-bs-warning-soft) !important;
}

.modernize-bs5-ui .bg-red-50,
.modernize-bs5-ui .bg-rose-50 {
  background-color: var(--cp-bs-danger-soft) !important;
}

.modernize-bs5-ui .bg-red-700,
.modernize-bs5-ui .bg-rose-700,
.modernize-bs5-ui .hover\:bg-red-800:hover,
.modernize-bs5-ui .hover\:bg-rose-800:hover {
  background: linear-gradient(135deg, var(--cp-bs-danger) 0%, #e66f58 100%) !important;
  border-color: transparent !important;
}

.modernize-bs5-ui .border-slate-950,
.modernize-bs5-ui .peer:checked ~ .peer-checked\:border-slate-950 {
  border-color: var(--cp-bs-primary) !important;
}

.modernize-bs5-ui .border-sky-300,
.modernize-bs5-ui .hover\:border-sky-300:hover,
.modernize-bs5-ui .border-blue-200,
.modernize-bs5-ui .border-blue-300 {
  border-color: rgba(93, 135, 255, .42) !important;
}

.modernize-bs5-ui [class*="has-[:checked]:border-slate-950"]:has(:checked) {
  border-color: var(--cp-bs-primary) !important;
}

.modernize-bs5-ui [class*="has-[:checked]:bg-slate-50"]:has(:checked) {
  background-color: var(--cp-bs-primary-soft) !important;
}

.modernize-bs5-ui [class*="has-[:checked]:ring-slate-950"]:has(:checked) {
  --tw-ring-color: rgba(93, 135, 255, .45) !important;
}

.modernize-bs5-ui a[class*="bg-slate-950"],
.modernize-bs5-ui button[class*="bg-slate-950"],
.modernize-bs5-ui button[class*="bg-emerald-700"],
.modernize-bs5-ui a[class*="bg-emerald-700"] {
  box-shadow: 0 8px 16px rgba(93, 135, 255, .22) !important;
}

.modernize-bs5-ui [id$="ModHeader"],
.modernize-bs5-ui [id$="GridHeader"],
.modernize-bs5-ui [data-sendgrid-page-header] {
  background: linear-gradient(90deg, #fff 0%, #f7faff 100%) !important;
}

.modernize-bs5-ui [data-root-widget],
.modernize-bs5-ui [data-client-widget],
.modernize-bs5-ui [data-owner-widget],
.modernize-bs5-ui .root-widget,
.modernize-bs5-ui .app-stat-card {
  border-top: 3px solid var(--cp-bs-primary) !important;
  box-shadow: 0 12px 24px -4px rgba(145, 158, 171, .16) !important;
}

.modernize-bs5-ui [data-root-widget]:nth-child(4n+2),
.modernize-bs5-ui [data-client-widget]:nth-child(4n+2),
.modernize-bs5-ui [data-owner-widget]:nth-child(4n+2),
.modernize-bs5-ui .root-widget:nth-child(4n+2),
.modernize-bs5-ui .app-stat-card:nth-child(4n+2) {
  border-top-color: var(--cp-bs-success) !important;
}

.modernize-bs5-ui [data-root-widget]:nth-child(4n+3),
.modernize-bs5-ui [data-client-widget]:nth-child(4n+3),
.modernize-bs5-ui [data-owner-widget]:nth-child(4n+3),
.modernize-bs5-ui .root-widget:nth-child(4n+3),
.modernize-bs5-ui .app-stat-card:nth-child(4n+3) {
  border-top-color: var(--cp-bs-warning) !important;
}

.modernize-bs5-ui [data-root-widget]:nth-child(4n+4),
.modernize-bs5-ui [data-client-widget]:nth-child(4n+4),
.modernize-bs5-ui [data-owner-widget]:nth-child(4n+4),
.modernize-bs5-ui .root-widget:nth-child(4n+4),
.modernize-bs5-ui .app-stat-card:nth-child(4n+4) {
  border-top-color: var(--cp-bs-secondary) !important;
}

.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"],
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: .5rem !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > [data-owner-widget],
.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > .app-stat-card,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > [data-owner-widget],
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > .app-stat-card {
  display: grid !important;
  flex: 1 1 10rem !important;
  min-width: min(100%, 10rem) !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: baseline !important;
  gap: .15rem .5rem !important;
  border: 1px solid #e5eaef !important;
  border-top: 1px solid #e5eaef !important;
  border-radius: .375rem !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(145, 158, 171, .08) !important;
  padding: .55rem .7rem !important;
}

.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > [data-owner-widget] span,
.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > .app-stat-card span,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > [data-owner-widget] span,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > .app-stat-card span {
  min-width: 0 !important;
  color: #5a6a85 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > [data-owner-widget] strong,
.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > .app-stat-card strong,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > [data-owner-widget] strong,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > .app-stat-card strong {
  margin: 0 !important;
  color: #2a3547 !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > [data-owner-widget] p,
.modernize-bs5-ui.owner-admin-layout [data-owner-widget-grid][aria-label$="summary"] > .app-stat-card p,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > [data-owner-widget] p,
.modernize-bs5-ui.owner-admin-layout .app-stat-grid[data-owner-widget-grid] > .app-stat-card p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #7c8fac !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.modernize-bs5-ui table thead,
.modernize-bs5-ui .table thead {
  background-color: #f6f9fc !important;
}

.modernize-bs5-ui tbody tr:hover,
.modernize-bs5-ui .table-hover tbody tr:hover {
  background-color: #f4f8ff !important;
}

.modernize-bs5-ui .status-badge,
.modernize-bs5-ui [class*="status-"] {
  border: 1px solid transparent;
}

.modernize-bs5-ui .status-active,
.modernize-bs5-ui .status-success,
.modernize-bs5-ui .status-sent,
.modernize-bs5-ui .status-paid,
.modernize-bs5-ui .status-delivered,
.modernize-bs5-ui .status-verified {
  background-color: var(--cp-bs-success-soft) !important;
  color: #0a7c6a !important;
}

.modernize-bs5-ui .status-pending,
.modernize-bs5-ui .status-draft,
.modernize-bs5-ui .status-open,
.modernize-bs5-ui .status-partial {
  background-color: var(--cp-bs-warning-soft) !important;
  color: #9f6100 !important;
}

.modernize-bs5-ui .status-failed,
.modernize-bs5-ui .status-error,
.modernize-bs5-ui .status-inactive,
.modernize-bs5-ui .status-cancelled,
.modernize-bs5-ui .status-bounced {
  background-color: var(--cp-bs-danger-soft) !important;
  color: #c84f3a !important;
}

.modernize-bs5-ui .livechat-overview-layout {
  display: grid;
  gap: 15px;
}

@media (min-width: 1200px) {
  .modernize-bs5-ui .livechat-overview-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  }
}

.modernize-bs5-ui .root-calendar-home-layout {
  display: grid;
  gap: 15px;
}

.modernize-bs5-ui .root-calendar-month {
  min-width: 0;
}

.modernize-bs5-ui .root-calendar-weekdays,
.modernize-bs5-ui .root-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.modernize-bs5-ui .root-calendar-weekdays {
  border-bottom: 1px solid var(--cp-bs-border);
  background: #f6f9fc;
}

.modernize-bs5-ui .root-calendar-weekdays > div {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--cp-bs-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.modernize-bs5-ui .root-calendar-day {
  min-height: 118px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 1px solid var(--cp-bs-border);
  border-bottom: 1px solid var(--cp-bs-border);
  background: #fff;
  padding: 10px;
}

.modernize-bs5-ui .root-calendar-day:nth-child(7n) {
  border-right: 0;
}

.modernize-bs5-ui .root-calendar-day.is-muted {
  background: #f8fafc;
}

.modernize-bs5-ui .root-calendar-day.is-muted .root-calendar-day-number span {
  color: #9aa8ba;
}

.modernize-bs5-ui .root-calendar-day.is-today {
  background: var(--cp-bs-primary-soft);
  box-shadow: inset 0 0 0 2px rgba(93, 135, 255, .22);
}

.modernize-bs5-ui .root-calendar-day-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modernize-bs5-ui .root-calendar-day-number span {
  color: var(--cp-bs-heading);
  font-size: .9rem;
  font-weight: 800;
}

.modernize-bs5-ui .root-calendar-day-number strong {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--cp-bs-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 0 8px;
}

.modernize-bs5-ui .root-calendar-day-events {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.modernize-bs5-ui .root-calendar-day-empty {
  color: #a7b3c2;
  font-size: .72rem;
  font-weight: 700;
}

.modernize-bs5-ui .root-calendar-event-pill {
  min-width: 0;
  display: grid;
  gap: 1px;
  border-left: 3px solid var(--event-color, var(--cp-bs-primary));
  border-radius: 6px;
  background: #f6f9fc;
  color: var(--cp-bs-heading);
  line-height: 1.2;
  padding: 6px 8px;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}

.modernize-bs5-ui .root-calendar-event-pill:hover {
  background: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
  transform: translateY(-1px);
}

.modernize-bs5-ui .root-calendar-event-pill span,
.modernize-bs5-ui .root-calendar-event-pill small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modernize-bs5-ui .root-calendar-event-pill span {
  font-size: .78rem;
  font-weight: 800;
}

.modernize-bs5-ui .root-calendar-event-pill small {
  color: var(--cp-bs-muted);
  font-size: .68rem;
  font-weight: 700;
}

@media (min-width: 1200px) {
  .modernize-bs5-ui .root-calendar-home-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }
}

@media (max-width: 767px) {
  .modernize-bs5-ui .root-calendar-weekdays {
    display: none;
  }

  .modernize-bs5-ui .root-calendar-month-grid {
    grid-template-columns: 1fr;
  }

  .modernize-bs5-ui .root-calendar-day {
    min-height: 92px;
    border-right: 0;
  }

  .modernize-bs5-ui .root-calendar-day-empty {
    display: none;
  }
}

@media (max-width: 1023px) {
  .modernize-bs5-ui #sidebarMain {
    box-shadow: 0 18px 40px rgba(42, 53, 71, .24);
  }
}

/* ==========================================================================
   Invoice pay page — aligned with the marketing site (modernize) brand.
   Scoped to .invoice-payment-form so it only affects /client/billing/invoices/@id/pay.
   Brand tokens come from :root above (--cp-bs-primary, --cp-bs-primary-soft, ...).
   Selectors are 2-class/structural so they override the page's Tailwind utilities
   (single-class) without editing the template or rebuilding the Tailwind output.
   ========================================================================== */
.modernize-bs5-ui .invoice-payment-form {
  background: var(--cp-bs-bg);
  color: var(--cp-bs-heading);
}

.modernize-bs5-ui .invoice-payment-panel {
  background: var(--cp-bs-bg);
}

/* Cards: marketing uses 24px radius, faint hairline border, no heavy shadow. */
.modernize-bs5-ui .invoice-payment-panel > section,
.modernize-bs5-ui .invoice-payment-panel > aside {
  border: 1px solid rgba(42, 53, 71, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

/* Amount-due header: brand-soft wash instead of emerald. */
.modernize-bs5-ui .invoice-payment-summary {
  background: var(--cp-bs-primary-soft);
  border-bottom: 1px solid rgba(42, 53, 71, .08);
}

.modernize-bs5-ui .invoice-payment-summary > span {
  color: var(--cp-bs-primary);
}

.modernize-bs5-ui .invoice-payment-summary strong {
  color: var(--cp-bs-heading);
}

.modernize-bs5-ui .invoice-payment-summary p {
  color: var(--cp-bs-muted);
}

/* Section subheads and aside copy use the marketing heading/muted tones. */
.modernize-bs5-ui .invoice-payment-methods h3,
.modernize-bs5-ui .invoice-payment-panel aside h3,
.modernize-bs5-ui .invoice-payment-panel aside dt,
.modernize-bs5-ui .invoice-payment-panel aside dd {
  color: var(--cp-bs-heading);
}

.modernize-bs5-ui .invoice-payment-methods p,
.modernize-bs5-ui .invoice-payment-panel aside p,
.modernize-bs5-ui .invoice-payment-panel aside dt {
  color: var(--cp-bs-muted);
}

/* Icon chips: marketing .modernize-icon style (rounded-2xl, brand-tinted). */
.modernize-bs5-ui .invoice-first-payment-intro > span,
.modernize-bs5-ui .invoice-payment-empty > span {
  background: rgba(93, 135, 255, .12);
  color: var(--cp-bs-primary);
  border: 0;
}

.modernize-bs5-ui .invoice-payment-option-icon,
.modernize-bs5-ui .invoice-first-payment-option-icon {
  background: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
  border: 1px solid rgba(93, 135, 255, .18);
}

/* First-payment card: brand-soft accent border/bg instead of emerald. */
.modernize-bs5-ui .invoice-first-payment {
  border: 1px solid rgba(93, 135, 255, .28);
  border-radius: 16px;
  background: #f7faff;
}

.modernize-bs5-ui .invoice-first-payment-intro h3,
.modernize-bs5-ui .invoice-first-payment-option-copy strong,
.modernize-bs5-ui .invoice-payment-option-main strong {
  color: var(--cp-bs-heading);
}

.modernize-bs5-ui .invoice-first-payment-intro p,
.modernize-bs5-ui .invoice-first-payment-option-copy small,
.modernize-bs5-ui .invoice-payment-option-main small {
  color: var(--cp-bs-muted);
}

/* Selected option: brand ring + brand-soft fill. */
.modernize-bs5-ui .invoice-payment-option:has(input:checked),
.modernize-bs5-ui .invoice-first-payment-option:has(input:checked) {
  border-color: var(--cp-bs-primary);
  background: var(--cp-bs-primary-soft);
  box-shadow: 0 0 0 1px var(--cp-bs-primary);
}

.modernize-bs5-ui .invoice-payment-option,
.modernize-bs5-ui .invoice-first-payment-option {
  border: 1px solid rgba(42, 53, 71, .08);
  border-radius: 12px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.modernize-bs5-ui .invoice-first-payment-option-badge {
  background: var(--cp-bs-primary-soft);
  color: var(--cp-bs-primary);
}

.modernize-bs5-ui .invoice-first-payment-note {
  color: var(--cp-bs-muted);
}

/* Aside balance-due row: brand-soft instead of emerald. */
.modernize-bs5-ui .invoice-payment-panel aside dl > div:last-child {
  background: var(--cp-bs-primary-soft);
}

.modernize-bs5-ui .invoice-payment-panel aside dl > div:last-child dt {
  color: var(--cp-bs-primary);
}

/* Primary pay button: brand blue, matches marketing .btn-primary. */
.modernize-bs5-ui .invoice-payment-form button[type="submit"] {
  border: 1px solid var(--cp-bs-primary);
  background: var(--cp-bs-primary);
  color: #fff;
  border-radius: 8px;
  transition: background 140ms ease, border-color 140ms ease;
}

.modernize-bs5-ui .invoice-payment-form button[type="submit"]:hover:not(:disabled) {
  background: var(--cp-bs-primary-hover);
  border-color: var(--cp-bs-primary-hover);
}

/* Header buttons get the marketing rounded-8 + faint border treatment. */
.modernize-bs5-ui .invoice-payment-form [data-client-view-header] a,
.modernize-bs5-ui .invoice-payment-form [data-client-form-actions] a {
  border: 1px solid rgba(42, 53, 71, .12);
  border-radius: 8px;
}