:root {
  color-scheme: light;
  --navy-50: #e7e9ef;
  --navy-100: #c2c9d6;
  --navy-200: #a3adc2;
  --navy-300: #697a9b;
  --navy-450: #465675;
  --navy-600: #313e59;
  --navy-700: #26334d;
  --navy-750: #222e45;
  --navy-800: #202b40;
  --navy-900: #192132;
  --slate-150: #e9eef5;
  --primary: #4f46e5;
  --primary-focus: #4338ca;
  --accent-light: #818cf8;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.theme-light {
  color-scheme: light;
}

html.theme-dark {
  color-scheme: dark;
}

html.theme-light body {
  background: #f8fafc !important;
  color: #334155 !important;
}

html.theme-dark body {
  background: var(--navy-900) !important;
  color: var(--navy-200) !important;
}

html.theme-light #sidebar {
  background: #ffffff !important;
  border-color: var(--slate-150) !important;
}

html.theme-dark #sidebar {
  background: var(--navy-800) !important;
  border-color: var(--navy-700) !important;
}

html.theme-dark #sidebar .main-sidebar {
  background: var(--navy-800) !important;
  border-color: var(--navy-700) !important;
}

html.theme-dark #sidebar .sidebar-panel {
  background: var(--navy-900) !important;
  border-color: var(--navy-700) !important;
}

html.theme-dark #sidebar .sidebar-panel > div:first-child {
  border-color: var(--navy-700) !important;
}

html.theme-dark #sidebar-panel-title {
  color: var(--navy-50) !important;
}

html.theme-light header.sticky {
  background: rgb(255 255 255 / 0.95) !important;
  border-color: var(--slate-150) !important;
}

html.theme-dark header.sticky {
  background: rgb(34 46 69 / 0.95) !important; /* navy-750 */
  border-color: var(--navy-700) !important;
}

html.theme-dark #page-title {
  color: var(--navy-50) !important;
}

.menu-link-default {
  border: 1px solid transparent;
}

html.theme-light .menu-link-default {
  color: #334155 !important;
}

html.theme-dark .menu-link-default {
  color: var(--navy-200) !important;
}

html.theme-dark .menu-link-default:hover {
  background: var(--navy-700) !important;
}

.menu-link-active {
  background: rgb(79 70 229 / 0.12);
  color: var(--primary-focus);
  border: 1px solid rgb(79 70 229 / 0.18);
}

html.theme-dark .menu-link-active {
  background: rgb(95 90 246 / 0.2); /* accent */
  color: var(--accent-light);
  border: 1px solid rgb(95 90 246 / 0.4);
}

html.theme-light #demo-cards article {
  background: #ffffff !important;
  border-color: var(--slate-150) !important;
}

html.theme-dark #demo-cards article {
  background: var(--navy-750) !important;
  border-color: var(--navy-700) !important;
}

html.theme-dark #demo-cards h2 {
  color: var(--navy-50) !important;
}

html.theme-dark #demo-cards p,
html.theme-dark #demo-cards li {
  color: var(--navy-100) !important;
}

html.theme-dark #demo-cards li {
  background: var(--navy-700) !important;
}

html.theme-light #notification-box .popper-box,
html.theme-light #profile-box .popper-box {
  background: #ffffff !important;
  border-color: var(--slate-150) !important;
}

html.theme-dark #notification-box .popper-box,
html.theme-dark #profile-box .popper-box {
  background: var(--navy-750) !important;
  border-color: var(--navy-700) !important;
}

html.theme-dark #notification-box a,
html.theme-dark #profile-box a {
  color: var(--navy-100) !important;
}

html.theme-dark #notification-box a:hover,
html.theme-dark #profile-box a:hover {
  background: var(--navy-700) !important;
}

html.theme-dark #profile-box .bg-slate-100 {
  background: var(--navy-800) !important;
}

html.theme-dark input[placeholder="Search here..."] {
  background: var(--navy-900) !important;
  border-color: var(--navy-700) !important;
  color: var(--navy-50) !important;
}

html.theme-dark .rounded-full.border,
html.theme-dark .rounded-lg.border {
  border-color: var(--navy-700) !important;
}

html.theme-dark .text-slate-500,
html.theme-dark .text-slate-400 {
  color: var(--navy-300) !important;
}

html.theme-dark .text-slate-700 {
  color: var(--navy-100) !important;
}

.submenu-hidden {
  display: none;
}

/* Two-level sidebar look */
.main-sidebar-link {
  color: #64748b;
}

.main-sidebar-link:hover {
  background: rgb(79 70 229 / 0.14);
  color: var(--primary);
}

.main-sidebar-link.is-active {
  background: rgb(79 70 229 / 0.14);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.2);
}

html.theme-dark .main-sidebar-link {
  color: var(--navy-200);
}

html.theme-dark .main-sidebar-link:hover {
  background: rgb(105 122 155 / 0.2);
  color: var(--accent-light);
}

html.theme-dark .main-sidebar-link.is-active {
  background: rgb(70 86 117 / 0.5);
  color: var(--accent-light);
  box-shadow: inset 0 0 0 1px rgb(129 140 248 / 0.35);
}

#sidebar-panel-title {
  letter-spacing: 0.03em;
}

.sidebar-panel-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
}

html.theme-light .sidebar-panel-link {
  color: #475569;
}

html.theme-light .sidebar-panel-link:hover {
  color: #1e293b;
  background: #f1f5f9;
}

html.theme-dark .sidebar-panel-link {
  color: var(--navy-200);
}

html.theme-dark .sidebar-panel-link:hover {
  color: var(--navy-50);
  background: var(--navy-700);
}

html.theme-dark .menu-link-active.sidebar-panel-link {
  color: var(--accent-light) !important;
}

/* Lineone-like utility classes used in demo markup */
.bg-secondary {
  background-color: #f000b9 !important;
}

.text-secondary {
  color: #f000b9 !important;
}

.bg-secondary\/10 {
  background-color: rgb(240 0 185 / 0.1) !important;
}

.bg-primary\/10 {
  background-color: rgb(79 70 229 / 0.1) !important;
}

.text-primary {
  color: #4f46e5 !important;
}

.bg-info\/10 {
  background-color: rgb(14 165 233 / 0.1) !important;
}

.bg-warning\/10 {
  background-color: rgb(255 152 0 / 0.1) !important;
}

.bg-error\/10 {
  background-color: rgb(255 87 36 / 0.1) !important;
}

html.theme-dark #notification-box .rounded-t-lg.bg-slate-100 {
  background: var(--navy-800) !important;
  color: var(--navy-200) !important;
}

html.theme-dark #notification-box .tab {
  color: var(--navy-200) !important;
}

html.theme-dark #notification-box .tab.is-active {
  color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
}

html.theme-dark #notification-box .text-slate-600 {
  color: var(--navy-100) !important;
}

html.theme-dark #notification-box .text-slate-400 {
  color: var(--navy-300) !important;
}

.is-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
}

.right-sidebar-tab-btn {
  color: #64748b;
  transition: all 0.2s ease;
}

.right-sidebar-tab-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.right-sidebar-tab-btn.is-active {
  background: rgb(79 70 229 / 0.14);
  color: var(--primary);
}

html.theme-dark .right-sidebar-tab-btn {
  color: var(--navy-200);
}

html.theme-dark .right-sidebar-tab-btn:hover {
  background: var(--navy-700);
  color: var(--navy-50);
}

html.theme-dark .right-sidebar-tab-btn.is-active {
  background: rgb(95 90 246 / 0.2);
  color: var(--accent-light);
}