:root {
  --orbit-panel-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.28);
  --orbit-soft-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.22);
  --orbit-sidebar-border: rgba(148, 163, 184, 0.22);
  --orbit-surface-border: rgba(148, 163, 184, 0.18);
}

.fi-body {
  background:
    radial-gradient(circle at top left, rgba(var(--primary-100), 0.35), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.dark .fi-body {
  background:
    radial-gradient(circle at top left, rgba(var(--primary-900), 0.18), transparent 24rem),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

.fi-topbar {
  backdrop-filter: blur(18px);
}

.fi-topbar > nav,
.fi-sidebar-header,
.fi-section,
.fi-ta,
.fi-wi-stats-overview-stat,
.fi-page-sub-navigation-sidebar,
.fi-modal-window {
  border: 1px solid var(--orbit-surface-border);
  box-shadow: var(--orbit-soft-shadow);
}

.fi-topbar > nav,
.fi-section,
.fi-ta,
.fi-page-sub-navigation-sidebar,
.fi-modal-window {
  background-color: rgba(255, 255, 255, 0.82);
}

.fi-topbar > nav {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.dark .fi-topbar > nav,
.dark .fi-section,
.dark .fi-ta,
.dark .fi-wi-stats-overview-stat,
.dark .fi-page-sub-navigation-sidebar,
.dark .fi-modal-window {
  border-color: rgba(71, 85, 105, 0.34);
  box-shadow: 0 18px 40px -24px rgba(2, 6, 23, 0.6);
}

.dark .fi-topbar > nav,
.dark .fi-section,
.dark .fi-ta,
.dark .fi-page-sub-navigation-sidebar,
.dark .fi-modal-window {
  background-color: rgba(15, 23, 42, 0.78);
}

.fi-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.98) 100%);
  border-inline-end: 1px solid var(--orbit-sidebar-border);
  box-shadow: var(--orbit-panel-shadow);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.dark .fi-sidebar {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-inline-end-color: rgba(71, 85, 105, 0.3);
}

.fi-sidebar-header {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--orbit-surface-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
  z-index: 3;
}

.fi-sidebar-nav {
  padding-top: 0.35rem;
}

.fi-sidebar-header .fi-logo {
  max-width: 100%;
  object-fit: contain;
}

.fi-sidebar-nav-groups {
  padding-top: 0.25rem;
}

.dark .fi-sidebar-header {
  border-bottom-color: rgba(71, 85, 105, 0.34);
}

.fi-sidebar-group-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.fi-sidebar-item-button,
.fi-topbar-item-button {
  border: 1px solid transparent;
}

.fi-sidebar-item-button {
  border-radius: 0.95rem;
  padding: 0.72rem 0.85rem;
}

.fi-sidebar-item-button:hover,
.fi-topbar-item-button:hover {
  background-color: rgba(var(--primary-500), 0.08);
  border-color: rgba(var(--primary-500), 0.14);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-topbar-item.fi-active .fi-topbar-item-button {
  background: linear-gradient(135deg, rgba(var(--primary-500), 0.16), rgba(var(--primary-600), 0.08));
  border-color: rgba(var(--primary-600), 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -18px rgba(var(--primary-700), 0.7);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-topbar-item.fi-active .fi-topbar-item-icon {
  color: rgba(var(--primary-700), 1);
}

.dark .fi-sidebar-item-button:hover,
.dark .fi-topbar-item-button:hover {
  background-color: rgba(var(--primary-400), 0.12);
  border-color: rgba(var(--primary-400), 0.18);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button,
.dark .fi-topbar-item.fi-active .fi-topbar-item-button {
  background: linear-gradient(135deg, rgba(var(--primary-500), 0.2), rgba(var(--primary-700), 0.18));
  border-color: rgba(var(--primary-400), 0.22);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-topbar-item.fi-active .fi-topbar-item-label,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.dark .fi-topbar-item.fi-active .fi-topbar-item-icon {
  color: rgba(var(--primary-200), 1);
}

.fi-ta {
  border-radius: 1rem;
  overflow: hidden;
}

.fi-ta-table thead tr {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
}

.fi-ta-table thead th {
  color: rgb(15, 23, 42) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.fi-ta-table thead th *,
.fi-ta-table thead th button,
.fi-ta-table thead th span,
.fi-ta-table thead th svg {
  color: rgb(15, 23, 42) !important;
  fill: rgb(15, 23, 42) !important;
}

.fi-ta-table tbody tr:nth-child(even) {
  background-color: rgba(241, 245, 249, 0.82);
}

.fi-ta-table tbody tr:hover {
  background-color: rgba(var(--primary-50), 0.9);
}

.dark .fi-ta-table thead tr {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
}

.dark .fi-ta-table tbody tr:nth-child(even) {
  background-color: rgba(15, 23, 42, 0.7);
}

.dark .fi-ta-table tbody tr:hover {
  background-color: rgba(var(--primary-900), 0.35);
}

.fi-user-menu .fi-palette-switcher,
.fi-user-menu .fi-dropdown-panel > .fi-theme-switcher {
  min-width: 11rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
}

.fi-user-menu .fi-palette-switcher-swatch,
.fi-user-menu .fi-dropdown-panel > .fi-theme-switcher [wire\:click^="apply"] {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  cursor: pointer;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.fi-user-menu .fi-palette-switcher-swatch:hover,
.fi-user-menu .fi-dropdown-panel > .fi-theme-switcher [wire\:click^="apply"]:hover {
  transform: scale(1.08);
}

.fi-user-menu .fi-palette-switcher-swatch-active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(15, 23, 42, 0.14);
}

.fi-user-menu .fi-dropdown-panel > .fi-theme-switcher [wire\:click^="apply"].border-2 {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(15, 23, 42, 0.14);
}

.fi-wi-stats-overview-stat {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
}

.dark .fi-wi-stats-overview-stat {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.98));
}