:root {
  --cjs-blue: #1278ff;
  --cjs-sky: #15c7ec;
  --cjs-mint: #32d8c5;
  --cjs-violet: #7d42f3;
  --cjs-ink: #071a35;
  --cjs-text: #263c5d;
  --cjs-muted: #627895;
  --cjs-line: rgba(18, 120, 255, 0.18);
  --cjs-line-strong: rgba(18, 120, 255, 0.34);
}

html body {
  font-size: 14px;
}

html:not(.dark) body {
  background:
    linear-gradient(115deg, rgba(21, 199, 236, 0.16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(245deg, rgba(125, 66, 243, 0.08), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #f8fdff 0%, #f2fbff 48%, #f9fcff 100%) !important;
  color: var(--cjs-text);
}

html:not(.dark) .bg-mesh-gradient {
  opacity: 0.78 !important;
  background-image:
    linear-gradient(rgba(18, 120, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 120, 255, 0.055) 1px, transparent 1px),
    linear-gradient(108deg, transparent 0 43%, rgba(18, 120, 255, 0.08) 43.1% 43.25%, transparent 43.45% 100%) !important;
  background-size: 76px 76px, 76px 76px, 100% 620px !important;
}

html:not(.dark) .min-h-screen.bg-gray-50,
html:not(.dark) .bg-gray-50 {
  background: transparent !important;
}

.sidebar {
  border-right: 1px solid rgba(18, 120, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 252, 255, 0.9)) !important;
  box-shadow: 18px 0 48px rgba(18, 68, 118, 0.07) !important;
  backdrop-filter: blur(18px);
}

.dark .sidebar {
  border-right-color: rgba(72, 170, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(8, 23, 48, 0.96), rgba(10, 31, 62, 0.94)) !important;
  box-shadow: 18px 0 48px rgba(0, 0, 0, 0.28) !important;
}

.sidebar-header {
  border-bottom: 1px solid rgba(18, 120, 255, 0.12) !important;
}

.sidebar-logo {
  border: 1px solid rgba(18, 120, 255, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 14px 28px rgba(18, 120, 255, 0.16) !important;
}

.dark .sidebar-logo {
  border-color: rgba(72, 170, 255, 0.28) !important;
  background: rgba(12, 36, 70, 0.78) !important;
}

.sidebar-brand-title {
  color: var(--cjs-ink) !important;
  letter-spacing: 0 !important;
}

.dark .sidebar-brand-title {
  color: #f5fbff !important;
}

.sidebar-link {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #385574 !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.sidebar-link:hover {
  color: #0d3d72 !important;
  border-color: rgba(21, 199, 236, 0.26) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 10px 24px rgba(18, 120, 255, 0.08) !important;
}

.sidebar-link-active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--cjs-blue), var(--cjs-sky) 72%, var(--cjs-mint)) !important;
  box-shadow: 0 16px 34px rgba(18, 120, 255, 0.22) !important;
}

.dark .sidebar-link {
  color: #b8c8dc !important;
}

.dark .sidebar-link:hover {
  color: #f7fbff !important;
  border-color: rgba(72, 170, 255, 0.24) !important;
  background: rgba(23, 57, 101, 0.58) !important;
}

.dark .sidebar-link-active {
  color: #fff !important;
  background: linear-gradient(135deg, #126ee9, #0baed6 70%, #23c2b1) !important;
}

.sidebar-section-title {
  color: #6b7f99 !important;
  font-weight: 760 !important;
}

.dark .sidebar-section-title {
  color: #8da7c4 !important;
}

main.p-4,
main.md\:p-6,
main.lg\:p-8 {
  max-width: none !important;
}

html:not(.dark) .glass {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(242, 251, 255, 0.78)) !important;
  border-color: rgba(18, 120, 255, 0.14) !important;
  box-shadow: 0 12px 34px rgba(18, 68, 118, 0.06) !important;
}

.dark .glass {
  background:
    linear-gradient(90deg, rgba(8, 23, 48, 0.9), rgba(13, 35, 70, 0.82)) !important;
  border-color: rgba(72, 170, 255, 0.16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

main h1,
main h2 {
  color: var(--cjs-ink) !important;
  letter-spacing: 0 !important;
}

.dark main h1,
.dark main h2 {
  color: #f7fbff !important;
}

main h1 {
  position: relative;
  line-height: 1.18 !important;
}

main h1::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 0.84em;
  margin-right: 12px;
  border-radius: 99px;
  vertical-align: -0.08em;
  background: linear-gradient(180deg, var(--cjs-sky), var(--cjs-violet));
}

html:not(.dark) main h3 {
  color: #0f2748 !important;
}

.dark main h3 {
  color: #f4fbff !important;
}

html body .text-gradient {
  background-image: linear-gradient(90deg, var(--cjs-blue), var(--cjs-sky) 48%, var(--cjs-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

button,
a,
input,
select,
textarea {
  border-radius: 8px !important;
}

button[class*="bg-primary"],
a[class*="bg-primary"],
button[class*="bg-blue"],
a[class*="bg-blue"],
button[class*="bg-teal"],
a[class*="bg-teal"],
button[class*="bg-green"],
a[class*="bg-green"],
button[class*="bg-emerald"],
a[class*="bg-emerald"],
.bg-primary-600,
.bg-primary-500,
.bg-blue-600,
.bg-blue-500,
.bg-teal-600,
.bg-teal-500,
.bg-green-600,
.bg-green-500,
.bg-emerald-600,
.bg-emerald-500 {
  background: linear-gradient(135deg, var(--cjs-blue), var(--cjs-sky) 72%, var(--cjs-mint)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(18, 120, 255, 0.18) !important;
}

html body .btn.btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body .btn.btn-success,
html body button.btn-success,
html body a.btn-success {
  background: linear-gradient(135deg, var(--cjs-blue), var(--cjs-sky) 70%, var(--cjs-mint)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(18, 120, 255, 0.22) !important;
}

button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover,
button[class*="bg-blue"]:hover,
a[class*="bg-blue"]:hover,
button[class*="bg-teal"]:hover,
a[class*="bg-teal"]:hover,
button[class*="bg-green"]:hover,
a[class*="bg-green"]:hover,
button[class*="bg-emerald"]:hover,
a[class*="bg-emerald"]:hover {
  filter: saturate(1.06) brightness(0.97);
  box-shadow: 0 16px 32px rgba(18, 120, 255, 0.25) !important;
}

html body .btn.btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover,
html body .btn.btn-success:hover,
html body button.btn-success:hover,
html body a.btn-success:hover {
  background: linear-gradient(135deg, #0b6ee8, #0fb8dd 68%, #26cdbd) !important;
  color: #fff !important;
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(18, 120, 255, 0.28) !important;
}

html body .btn.btn-secondary,
html body .date-picker-trigger,
html body .select-trigger {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(18, 120, 255, 0.18) !important;
  color: #263c5d !important;
  box-shadow: 0 8px 20px rgba(18, 68, 118, 0.05) !important;
}

html body .btn.btn-secondary:hover,
html body .date-picker-trigger:hover,
html body .select-trigger:hover {
  background: rgba(232, 248, 255, 0.82) !important;
  border-color: rgba(21, 199, 236, 0.34) !important;
  color: #0d3d72 !important;
}

.dark body .btn.btn-secondary,
.dark body .date-picker-trigger,
.dark body .select-trigger {
  background: rgba(15, 39, 78, 0.72) !important;
  border-color: rgba(91, 170, 235, 0.22) !important;
  color: #eaf4ff !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important;
}

.dark body .btn.btn-secondary:hover,
.dark body .date-picker-trigger:hover,
.dark body .select-trigger:hover {
  background: rgba(24, 65, 118, 0.76) !important;
  border-color: rgba(99, 216, 255, 0.32) !important;
  color: #fff !important;
}

.text-primary-600,
.text-primary-500,
.text-blue-600,
.text-blue-500,
.text-teal-600,
.text-teal-500,
.text-green-600,
.text-green-500,
.text-emerald-600,
.text-emerald-500 {
  color: #1278ff !important;
}

.dark .text-primary-400,
.dark .text-blue-400,
.dark .text-teal-400,
.dark .text-green-400,
.dark .text-emerald-400 {
  color: #63d6ff !important;
}

.ring-primary-500,
.focus\:ring-primary-500:focus,
.focus\:border-primary-500:focus,
.focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus {
  --tw-ring-color: rgba(21, 199, 236, 0.42) !important;
  border-color: rgba(21, 199, 236, 0.64) !important;
}

main .rounded-xl,
main .rounded-2xl,
main .rounded-lg {
  border-radius: 8px !important;
}

html:not(.dark) main [class*="bg-white"],
html:not(.dark) main [class*="bg-gray-50"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 255, 0.88)) !important;
}

html:not(.dark) main .card,
html:not(.dark) main [class*="rounded-xl"],
html:not(.dark) main [class*="rounded-2xl"] {
  border-color: rgba(18, 120, 255, 0.14) !important;
}

html:not(.dark) main [class*="border-gray"],
html:not(.dark) main table,
html:not(.dark) main th,
html:not(.dark) main td {
  border-color: rgba(18, 120, 255, 0.16) !important;
}

html:not(.dark) main .shadow,
html:not(.dark) main .shadow-sm,
html:not(.dark) main .shadow-md,
html:not(.dark) main .shadow-lg,
html:not(.dark) main .shadow-card,
html:not(.dark) main .shadow-soft {
  box-shadow: 0 18px 42px rgba(18, 68, 118, 0.08) !important;
}

html:not(.dark) main table thead,
html:not(.dark) main thead tr,
html:not(.dark) main th {
  background: rgba(241, 249, 255, 0.86) !important;
  color: #263c5d !important;
}

html:not(.dark) main tbody tr:hover,
html:not(.dark) main .hover\:bg-gray-50:hover,
html:not(.dark) main .hover\:bg-gray-100:hover {
  background: rgba(232, 248, 255, 0.72) !important;
}

html:not(.dark) main .group:hover {
  border-color: rgba(21, 199, 236, 0.24) !important;
}

html:not(.dark) main .bg-primary-100,
html:not(.dark) main .bg-blue-100,
html:not(.dark) main .bg-cyan-100,
html:not(.dark) main .bg-emerald-100,
html:not(.dark) main .bg-green-100,
html:not(.dark) main .bg-teal-100 {
  background: linear-gradient(135deg, rgba(18, 120, 255, 0.16), rgba(50, 216, 197, 0.22)) !important;
}

html:not(.dark) main .bg-purple-100,
html:not(.dark) main .bg-violet-100,
html:not(.dark) main .bg-indigo-100 {
  background: linear-gradient(135deg, rgba(125, 66, 243, 0.14), rgba(21, 199, 236, 0.16)) !important;
}

html:not(.dark) main .bg-amber-100,
html:not(.dark) main .bg-orange-100,
html:not(.dark) main .bg-yellow-100 {
  background: linear-gradient(135deg, rgba(255, 186, 73, 0.2), rgba(50, 216, 197, 0.14)) !important;
}

input,
select,
textarea {
  border-color: rgba(18, 120, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.86) !important;
}

.dark input,
.dark select,
.dark textarea {
  border-color: rgba(91, 170, 235, 0.22) !important;
  background-color: rgba(9, 25, 51, 0.78) !important;
  color: #eaf4ff !important;
}

html.dark body,
html.dark .min-h-screen.bg-dark-950,
html.dark .dark\:bg-dark-950 {
  background:
    linear-gradient(125deg, rgba(18, 120, 255, 0.12), rgba(9, 25, 51, 0) 34%),
    linear-gradient(245deg, rgba(125, 66, 243, 0.12), rgba(9, 25, 51, 0) 44%),
    #06142a !important;
}

.dark main [class*="dark:bg-dark"],
.dark main [class*="dark:bg-gray"],
.dark main [class*="bg-dark"] {
  background: linear-gradient(180deg, rgba(12, 31, 62, 0.94), rgba(9, 25, 51, 0.9)) !important;
}

.dark main [class*="dark:border"],
.dark main table,
.dark main th,
.dark main td {
  border-color: rgba(91, 170, 235, 0.16) !important;
}

.dark main thead,
.dark main th {
  background: rgba(15, 43, 84, 0.88) !important;
  color: #dceeff !important;
}

.dark main .shadow,
.dark main .shadow-sm,
.dark main .shadow-md,
.dark main .shadow-lg,
.dark main .shadow-card,
.dark main .shadow-soft {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28) !important;
}

.navigation-progress-bar {
  background: linear-gradient(90deg, transparent 0%, var(--cjs-blue) 18%, var(--cjs-sky) 52%, var(--cjs-mint) 82%, transparent 100%) !important;
}

html:not(.dark) body button.date-picker-trigger,
html:not(.dark) body button.select-trigger,
html:not(.dark) body .date-picker-trigger,
html:not(.dark) body .select-trigger,
html:not(.dark) body button.btn-secondary,
html:not(.dark) body .btn.btn-secondary {
  --tw-bg-opacity: 1 !important;
  --tw-border-opacity: 1 !important;
  --tw-shadow: 0 8px 20px rgba(18, 68, 118, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  background-image: none !important;
  border-color: rgba(18, 120, 255, 0.18) !important;
  color: #263c5d !important;
  box-shadow: 0 8px 20px rgba(18, 68, 118, 0.05) !important;
}

html:not(.dark) body button.date-picker-trigger:hover,
html:not(.dark) body button.select-trigger:hover,
html:not(.dark) body .date-picker-trigger:hover,
html:not(.dark) body .select-trigger:hover,
html:not(.dark) body button.btn-secondary:hover,
html:not(.dark) body .btn.btn-secondary:hover {
  background-color: rgba(232, 248, 255, 0.82) !important;
  border-color: rgba(21, 199, 236, 0.34) !important;
  color: #0d3d72 !important;
}

.dark body button.date-picker-trigger,
.dark body button.select-trigger,
.dark body .date-picker-trigger,
.dark body .select-trigger,
.dark body button.btn-secondary,
.dark body .btn.btn-secondary {
  --tw-bg-opacity: 1 !important;
  --tw-border-opacity: 1 !important;
  --tw-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important;
  background-color: rgba(15, 39, 78, 0.72) !important;
  background-image: none !important;
  border-color: rgba(91, 170, 235, 0.22) !important;
  color: #eaf4ff !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important;
}

.dark body button.date-picker-trigger:hover,
.dark body button.select-trigger:hover,
.dark body .date-picker-trigger:hover,
.dark body .select-trigger:hover,
.dark body button.btn-secondary:hover,
.dark body .btn.btn-secondary:hover {
  background-color: rgba(24, 65, 118, 0.76) !important;
  border-color: rgba(99, 216, 255, 0.32) !important;
  color: #fff !important;
}

/* Management tables: keep dense list controls flat and visually consistent. */
main .table-page-layout,
main .table-scroll-container,
main .table-wrapper {
  color: var(--cjs-text);
}

html:not(.dark) main .table-scroll-container {
  border-color: rgba(18, 120, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 255, 0.92)) !important;
  box-shadow: 0 18px 42px rgba(18, 68, 118, 0.07) !important;
}

.dark main .table-scroll-container {
  border-color: rgba(91, 170, 235, 0.17) !important;
  background: linear-gradient(180deg, rgba(12, 31, 62, 0.94), rgba(8, 25, 52, 0.92)) !important;
}

html:not(.dark) main .table-wrapper .table-header,
html:not(.dark) main .table-wrapper .sticky-header-cell,
html:not(.dark) main .table-scroll-container thead,
html:not(.dark) main .table-scroll-container th {
  background: linear-gradient(180deg, rgba(241, 249, 255, 0.96), rgba(232, 246, 255, 0.92)) !important;
  color: #25415f !important;
}

.dark main .table-wrapper .table-header,
.dark main .table-wrapper .sticky-header-cell,
.dark main .table-scroll-container thead,
.dark main .table-scroll-container th {
  background: linear-gradient(180deg, rgba(15, 43, 84, 0.96), rgba(12, 35, 70, 0.94)) !important;
  color: #dceeff !important;
}

html:not(.dark) main .table-wrapper tbody .sticky-col,
html:not(.dark) main .table-scroll-container tbody .sticky-col {
  background: rgba(255, 255, 255, 0.96) !important;
}

html:not(.dark) main .table-wrapper tbody tr:hover .sticky-col,
html:not(.dark) main .table-scroll-container tbody tr:hover .sticky-col {
  background: rgba(232, 248, 255, 0.94) !important;
}

.dark main .table-wrapper tbody .sticky-col,
.dark main .table-scroll-container tbody .sticky-col {
  background: rgba(9, 25, 51, 0.96) !important;
}

.dark main .table-wrapper tbody tr:hover .sticky-col,
.dark main .table-scroll-container tbody tr:hover .sticky-col {
  background: rgba(15, 43, 84, 0.96) !important;
}

html:not(.dark) main .is-scrollable .sticky-col-left::after,
html:not(.dark) main .is-scrollable .sticky-col-left-second::after {
  background: linear-gradient(to right, rgba(18, 68, 118, 0.09), transparent) !important;
}

html:not(.dark) main .is-scrollable .sticky-col-right::before {
  background: linear-gradient(to left, rgba(18, 68, 118, 0.09), transparent) !important;
}

main .badge,
main [class~="badge"] {
  border: 1px solid rgba(18, 120, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(232, 248, 255, 0.82) !important;
  color: #176099 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

html:not(.dark) main .badge-primary,
html:not(.dark) main .badge-success,
html:not(.dark) main .badge-info,
html:not(.dark) main .bg-primary-50,
html:not(.dark) main .bg-blue-50,
html:not(.dark) main .bg-cyan-50,
html:not(.dark) main .bg-teal-50,
html:not(.dark) main .bg-emerald-50,
html:not(.dark) main .bg-green-50 {
  background: rgba(224, 247, 255, 0.86) !important;
  color: #0b6ea8 !important;
}

html:not(.dark) main .badge-warning,
html:not(.dark) main .bg-warning-50,
html:not(.dark) main .bg-amber-50,
html:not(.dark) main .bg-orange-50,
html:not(.dark) main .bg-yellow-50 {
  border-color: rgba(18, 120, 255, 0.14) !important;
  background: rgba(247, 250, 253, 0.92) !important;
  color: #8a5b15 !important;
}

html:not(.dark) main .badge-danger,
html:not(.dark) main .bg-danger-50,
html:not(.dark) main .bg-red-50,
html:not(.dark) main .bg-rose-50 {
  border-color: rgba(229, 92, 115, 0.18) !important;
  background: rgba(255, 243, 246, 0.88) !important;
  color: #b23a54 !important;
}

.dark main .badge,
.dark main [class~="badge"] {
  border-color: rgba(99, 216, 255, 0.2) !important;
  background: rgba(24, 65, 118, 0.54) !important;
  color: #9be6ff !important;
}

.dark main .badge-warning {
  border-color: rgba(255, 194, 92, 0.2) !important;
  background: rgba(94, 69, 24, 0.34) !important;
  color: #ffd48a !important;
}

.dark main .badge-danger {
  border-color: rgba(255, 115, 139, 0.22) !important;
  background: rgba(105, 37, 56, 0.36) !important;
  color: #ff9ab0 !important;
}

main table button[class*="text-blue-"],
main table button[class*="text-cyan-"],
main table button[class*="text-sky-"],
main table button[class*="text-teal-"],
main table button[class*="text-green-"],
main table button[class*="text-emerald-"],
main table button[class*="text-orange-"],
main table button[class*="text-amber-"],
main table button[class*="text-yellow-"],
main table button[class*="text-red-"],
main table button[class*="text-rose-"],
main table a[class*="text-blue-"],
main table a[class*="text-cyan-"],
main table a[class*="text-sky-"],
main table a[class*="text-teal-"],
main table a[class*="text-green-"],
main table a[class*="text-emerald-"],
main table a[class*="text-orange-"],
main table a[class*="text-amber-"],
main table a[class*="text-yellow-"],
main table a[class*="text-red-"],
main table a[class*="text-rose-"] {
  min-height: 24px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  color: #255b86 !important;
  box-shadow: none !important;
  filter: none !important;
}

main table button[class*="text-blue-"]:hover,
main table button[class*="text-cyan-"]:hover,
main table button[class*="text-sky-"]:hover,
main table button[class*="text-teal-"]:hover,
main table button[class*="text-green-"]:hover,
main table button[class*="text-emerald-"]:hover,
main table a[class*="text-blue-"]:hover,
main table a[class*="text-cyan-"]:hover,
main table a[class*="text-sky-"]:hover,
main table a[class*="text-teal-"]:hover,
main table a[class*="text-green-"]:hover,
main table a[class*="text-emerald-"]:hover {
  background: rgba(224, 247, 255, 0.84) !important;
  color: #0d6fa8 !important;
}

main table button[class*="text-orange-"],
main table button[class*="text-amber-"],
main table button[class*="text-yellow-"],
main table a[class*="text-orange-"],
main table a[class*="text-amber-"],
main table a[class*="text-yellow-"] {
  color: #74602d !important;
}

main table button[class*="text-orange-"]:hover,
main table button[class*="text-amber-"]:hover,
main table button[class*="text-yellow-"]:hover,
main table a[class*="text-orange-"]:hover,
main table a[class*="text-amber-"]:hover,
main table a[class*="text-yellow-"]:hover {
  background: rgba(246, 250, 252, 0.94) !important;
  color: #6a5215 !important;
}

main table button[class*="text-red-"],
main table button[class*="text-rose-"],
main table a[class*="text-red-"],
main table a[class*="text-rose-"] {
  color: #9b4a5b !important;
}

main table button[class*="text-red-"]:hover,
main table button[class*="text-rose-"]:hover,
main table a[class*="text-red-"]:hover,
main table a[class*="text-rose-"]:hover {
  background: rgba(255, 243, 246, 0.9) !important;
  color: #a7354f !important;
}

.dark main table button[class*="text-blue-"],
.dark main table button[class*="text-cyan-"],
.dark main table button[class*="text-sky-"],
.dark main table button[class*="text-teal-"],
.dark main table button[class*="text-green-"],
.dark main table button[class*="text-emerald-"],
.dark main table button[class*="text-orange-"],
.dark main table button[class*="text-amber-"],
.dark main table button[class*="text-yellow-"],
.dark main table button[class*="text-red-"],
.dark main table button[class*="text-rose-"],
.dark main table a[class*="text-blue-"],
.dark main table a[class*="text-cyan-"],
.dark main table a[class*="text-sky-"],
.dark main table a[class*="text-teal-"],
.dark main table a[class*="text-green-"],
.dark main table a[class*="text-emerald-"],
.dark main table a[class*="text-orange-"],
.dark main table a[class*="text-amber-"],
.dark main table a[class*="text-yellow-"],
.dark main table a[class*="text-red-"],
.dark main table a[class*="text-rose-"] {
  background: transparent !important;
  background-image: none !important;
  color: #b8d8ee !important;
  box-shadow: none !important;
}

.dark main table button[class*="text-blue-"]:hover,
.dark main table button[class*="text-cyan-"]:hover,
.dark main table button[class*="text-sky-"]:hover,
.dark main table button[class*="text-teal-"]:hover,
.dark main table button[class*="text-green-"]:hover,
.dark main table button[class*="text-emerald-"]:hover,
.dark main table button[class*="text-orange-"]:hover,
.dark main table button[class*="text-amber-"]:hover,
.dark main table button[class*="text-yellow-"]:hover,
.dark main table button[class*="text-red-"]:hover,
.dark main table button[class*="text-rose-"]:hover,
.dark main table a[class*="text-blue-"]:hover,
.dark main table a[class*="text-cyan-"]:hover,
.dark main table a[class*="text-sky-"]:hover,
.dark main table a[class*="text-teal-"]:hover,
.dark main table a[class*="text-green-"]:hover,
.dark main table a[class*="text-emerald-"]:hover,
.dark main table a[class*="text-orange-"]:hover,
.dark main table a[class*="text-amber-"]:hover,
.dark main table a[class*="text-yellow-"]:hover,
.dark main table a[class*="text-red-"]:hover,
.dark main table a[class*="text-rose-"]:hover {
  background: rgba(99, 216, 255, 0.11) !important;
  color: #8fe3ff !important;
}

main table button.flex.flex-col,
main table a.flex.flex-col,
main table button[class*="hover:bg-gray"],
main table a[class*="hover:bg-gray"] {
  background: transparent !important;
  background-image: none !important;
  color: #52677e !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-radius: 8px !important;
}

html:not(.dark) main table button.flex.flex-col:hover,
html:not(.dark) main table a.flex.flex-col:hover,
html:not(.dark) main table button[class*="hover:bg-gray"]:hover,
html:not(.dark) main table a[class*="hover:bg-gray"]:hover {
  background: rgba(224, 247, 255, 0.76) !important;
  color: #176099 !important;
}

.dark main table button.flex.flex-col,
.dark main table a.flex.flex-col,
.dark main table button[class*="hover:bg-gray"],
.dark main table a[class*="hover:bg-gray"],
.dark main table button[class*="dark:hover:bg-dark"],
.dark main table a[class*="dark:hover:bg-dark"] {
  background: transparent !important;
  background-image: none !important;
  color: #a9c6dc !important;
  box-shadow: none !important;
}

.dark main table button.flex.flex-col:hover,
.dark main table a.flex.flex-col:hover,
.dark main table button[class*="hover:bg-gray"]:hover,
.dark main table a[class*="hover:bg-gray"]:hover,
.dark main table button[class*="dark:hover:bg-dark"]:hover,
.dark main table a[class*="dark:hover:bg-dark"]:hover {
  background: rgba(99, 216, 255, 0.11) !important;
  color: #8fe3ff !important;
}

main button.relative.inline-flex.h-5.w-9.rounded-full,
main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="inline-flex"] {
  width: 36px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-color: transparent !important;
  border-radius: 9999px !important;
  background-image: none !important;
  box-shadow: inset 0 1px 2px rgba(7, 26, 53, 0.12) !important;
  filter: none !important;
  transform: none !important;
}

html:not(.dark) main button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-500,
html:not(.dark) main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-primary-500"] {
  background: linear-gradient(135deg, #1278ff, #15c7ec) !important;
}

html:not(.dark) main button.relative.inline-flex.h-5.w-9.rounded-full.bg-gray-200,
html:not(.dark) main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-gray-200"] {
  background: #dbe8f2 !important;
}

.dark main button.relative.inline-flex.h-5.w-9.rounded-full.bg-primary-500,
.dark main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-primary-500"] {
  background: linear-gradient(135deg, #1b8eff, #32d8c5) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(99, 216, 255, 0.1) !important;
}

.dark main button.relative.inline-flex.h-5.w-9.rounded-full.bg-gray-200,
.dark main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-gray-200"],
.dark main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="bg-dark-600"] {
  background: #243b5a !important;
}

main button.relative.inline-flex.h-5.w-9.rounded-full:hover,
main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="inline-flex"]:hover {
  filter: brightness(0.98) saturate(1.04) !important;
  box-shadow: inset 0 1px 2px rgba(7, 26, 53, 0.12), 0 0 0 3px rgba(21, 199, 236, 0.12) !important;
}

main button.relative.inline-flex.h-5.w-9.rounded-full span,
main button[class*="h-5"][class*="w-9"][class*="rounded-full"][class*="inline-flex"] span {
  border-radius: 9999px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(7, 26, 53, 0.22) !important;
}

@media (max-width: 1024px) {
  .sidebar {
    box-shadow: 24px 0 54px rgba(18, 68, 118, 0.18) !important;
  }

  main h1::before {
    width: 36px;
    height: 4px;
    display: block;
    margin: 0 0 10px;
    vertical-align: initial;
    background: linear-gradient(90deg, var(--cjs-sky), var(--cjs-violet));
  }
}