@layer components {
  .sl-dashboard-body {
    background:
      radial-gradient(
        circle at top left,
        rgba(208, 217, 255, 0.35),
        transparent 18%
      ),
      linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
  }

  .sl-dashboard-shell {
    @apply flex min-h-screen gap-0 p-0;
  }

  .sl-dashboard-main {
    @apply flex min-h-0 min-w-0 flex-1 flex-col;
  }

  .sl-dashboard-sidebar {
    @apply hidden w-[214px] shrink-0 rounded-l-[12px] rounded-r-none border border-r-0 border-[#cfd8ef] bg-white lg:block xl:w-[228px];
    box-shadow: none;
  }

  .sl-dashboard-sidebar__inner {
    @apply flex h-full flex-col overflow-visible rounded-l-[12px] rounded-r-none;
  }

  .sl-dashboard-sidebar__brand {
    @apply flex min-h-[68px] items-center gap-3 border-b border-[#dfe5f4] px-3 py-3 no-underline;
  }

  .sl-dashboard-sidebar__brand-mark {
    @apply flex h-[52px] w-[52px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white;
  }

  .sl-dashboard-sidebar__brand-mark img {
    @apply h-full w-full object-contain;
  }

  .sl-dashboard-sidebar__brand-meta {
    @apply min-w-0;
  }

  .sl-dashboard-sidebar__brand-meta strong {
    @apply block text-[9.5px] font-extrabold leading-[1.15] text-slate-800;
  }

  .sl-dashboard-sidebar__brand-meta small {
    @apply mt-0.5 block text-[7.5px] font-medium leading-[1.1] text-slate-400;
  }

  .sl-dashboard-sidebar__nav {
    @apply flex-1 space-y-1.5 px-2 py-3;
  }

  .sl-dashboard-side-link {
    @apply flex min-h-[48px] items-center gap-3 rounded-[10px] px-4 py-2.5 text-[12.5px] font-medium text-slate-500 no-underline transition hover:bg-[#eef3ff] hover:text-[#5f87d6];
  }

  .sl-dashboard-side-link.is-active {
    @apply bg-[#e7efff] text-[#5f87d6];
    box-shadow: inset 0 0 0 1px rgba(150, 179, 234, 0.14);
  }

  .sl-dashboard-side-link__icon {
    @apply flex h-7 w-7 shrink-0 items-center justify-center text-[#9ab2de] transition;
  }

  .sl-dashboard-side-link__icon svg {
    @apply h-[18px] w-[18px];
  }

  .sl-dashboard-side-link__label {
    @apply min-w-0 flex-1 leading-none;
  }

  .sl-dashboard-side-link.is-active .sl-dashboard-side-link__label {
    @apply font-semibold text-[#4f76c8];
  }

  .sl-dashboard-side-link.is-active .sl-dashboard-side-link__icon {
    @apply text-[#8aa5d8];
  }

  .sl-dashboard-side-link__icon.is-dot {
    @apply rounded-full bg-[#e8efff];
  }

  .sl-dashboard-side-link__dot {
    @apply h-2 w-2 rounded-full bg-current;
  }

  .sl-dashboard-side-group {
    @apply relative;
  }

  .sl-dashboard-side-link__caret {
    @apply ml-2 flex h-4 w-4 shrink-0 items-center justify-center text-[#8aa5d8];
  }

  .sl-dashboard-side-link__caret svg {
    @apply h-3.5 w-3.5 transition;
  }

  .sl-dashboard-side-group[open] .sl-dashboard-side-link__caret svg {
    @apply rotate-90;
  }

  .sl-dashboard-side-dropdown {
    @apply absolute left-[calc(100%+12px)] top-0 z-30 hidden min-w-[260px] rounded-[14px] border border-[#d9e2f3] p-2 shadow-[0_18px_40px_rgba(88,107,152,0.18)];
    background: #e7ecf7;
  }

  .sl-dashboard-side-group[open] .sl-dashboard-side-dropdown {
    @apply block;
  }

  .sl-dashboard-side-dropdown__link {
    @apply block rounded-[10px] px-3 py-2.5 text-[13px] font-semibold no-underline transition hover:bg-white/50;
    color: #6187ca;
  }

  .sl-dashboard-side-dropdown__link.is-active {
    @apply bg-white/70;
    color: #6187ca;
  }

  .sl-dashboard-topbar {
    @apply flex flex-wrap items-center justify-between gap-4 rounded-r-[12px] rounded-l-none border border-[#cad5ee] border-l border-l-[#cfd8ef] bg-white px-4 py-3 md:px-5;
  }

  .sl-dashboard-topbar__left,
  .sl-dashboard-topbar__right {
    @apply flex items-center gap-4;
  }

  .sl-dashboard-brand {
    @apply flex items-center gap-3 no-underline;
  }

  .sl-dashboard-brand__mark {
    @apply flex h-[40px] w-[40px] shrink-0 items-center justify-center overflow-hidden rounded-lg;
  }

  .sl-dashboard-brand__mark img {
    @apply h-full w-full object-contain;
  }

  .sl-dashboard-brand__meta {
    @apply min-w-0;
  }

  .sl-dashboard-brand__meta strong {
    @apply block text-[11px] font-extrabold leading-4 text-slate-800;
  }

  .sl-dashboard-brand__meta small {
    @apply mt-0.5 block text-[10px] font-medium leading-4 text-slate-400;
  }

  .sl-dashboard-iconbtn {
    @apply relative inline-flex h-11 w-11 items-center justify-center rounded-xl border border-[#cad5ee] bg-white text-slate-700 no-underline transition hover:bg-slate-50;
  }

  .sl-dashboard-badge {
    @apply absolute -right-1 -top-1 inline-flex min-h-6 min-w-6 items-center justify-center rounded-full bg-rose-500 px-1.5 text-[11px] font-bold text-white;
  }

  .sl-dashboard-user {
    @apply inline-flex items-center gap-3 rounded-xl border border-[#cad5ee] bg-white px-3 py-2 text-slate-700 no-underline transition hover:bg-slate-50;
  }

  .sl-dashboard-user__avatar {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--sl-primary)] text-sm font-extrabold text-white;
  }

  .sl-dashboard-user__meta {
    @apply hidden min-w-0 flex-col md:flex;
  }

  .sl-dashboard-user__meta strong {
    @apply truncate text-sm font-extrabold text-slate-800;
  }

  .sl-dashboard-user__meta small {
    @apply text-xs font-medium text-slate-500;
  }

  .sl-dashboard-page {
    @apply flex w-full flex-1 flex-col gap-5 px-5 py-4 md:px-6 md:py-5;
  }

  .sl-dashboard-footer {
    @apply mt-auto px-5 py-3 text-center text-[10px] font-medium text-slate-400;
  }

  .sl-dashboard-stack {
    @apply space-y-4;
  }

  .sl-dashboard-breadcrumb {
    @apply inline-flex rounded-[4px] bg-[#4a505d] px-3 py-2 text-sm font-medium text-white;
  }

  .sl-dashboard-toolbar {
    @apply flex items-center justify-start gap-4;
  }

  .sl-dashboard-menu-trigger {
    @apply flex h-11 w-11 shrink-0 flex-col items-center justify-center gap-1.5 rounded-xl border border-[#cad5ee] bg-white;
  }

  .sl-dashboard-menu-trigger span {
    @apply block h-0.5 w-5 rounded-full bg-slate-700;
  }

  .sl-dashboard-search {
    @apply min-w-0 flex-1;
  }

  .sl-dashboard-search input {
    @apply h-11 rounded-full border-[#cad5ee] bg-[#fbfbff] text-sm;
  }

  .sl-dashboard-topbar__cta {
    @apply h-11 min-w-[162px] rounded-xl px-6 text-sm;
  }

  .sl-figma-stat-card {
    @apply flex min-h-[82px] items-center gap-4 rounded-[16px] border border-[#ebeffb] bg-white px-5 py-4;
  }

  .sl-figma-stat-card__icon {
    @apply flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] bg-[#edf2ff] text-[#6f93d2];
  }

  .sl-figma-stat-card__icon svg {
    @apply h-[18px] w-[18px];
  }

  .sl-figma-stat-card__title {
    @apply truncate text-[13px] font-extrabold leading-[1.1] text-slate-600;
  }

  .sl-figma-stat-card__meta {
    @apply mt-1.5 flex items-end justify-between gap-3;
  }

  .sl-figma-stat-card__meta span {
    @apply text-[12px] font-semibold leading-none text-slate-500;
  }

  .sl-figma-stat-card__meta strong {
    @apply text-[18px] font-extrabold leading-none text-slate-700;
  }

  .sl-panel {
    @apply rounded-[22px] border border-[#e7ebfb] bg-white px-6 py-2;
    box-shadow: none;
  }

  .sl-panel__header {
    @apply mb-5 flex items-center justify-between gap-3 border-b border-[#edf0fb] pb-4;
  }

  .sl-panel__header h2 {
    @apply m-0 text-[16px] font-extrabold text-slate-700;
  }

  .sl-panel__action {
    @apply inline-flex h-9 items-center rounded-[12px] bg-[#f3f5fb] px-5 text-[12px] font-semibold text-slate-500 transition hover:bg-[#eef2ff] hover:text-[#6f93d2];
  }

  .sl-chart {
    @apply relative grid grid-cols-4 gap-5 overflow-hidden rounded-[12px] border border-[#edf0fb] bg-white px-6 pb-4 pt-6;
    min-height: 230px;
    background-image:
      linear-gradient(to top, rgba(236, 240, 251, 0.95) 1px, transparent 1px),
      linear-gradient(to right, rgba(236, 240, 251, 0.95) 1px, transparent 1px);
    background-size:
      100% 25%,
      25% 100%;
  }

  .sl-chart__item {
    @apply flex flex-col items-center justify-end gap-3;
  }

  .sl-chart__bar-wrap {
    @apply flex h-[150px] w-full items-end justify-center bg-transparent;
  }

  .sl-chart__bar {
    @apply w-[72%] rounded-none;
  }

  .sl-chart__label {
    @apply text-center text-[11px] font-medium leading-[1.15] text-slate-400;
  }

  @media (max-width: 1023px) {
    .sl-chart {
      @apply grid-cols-2 gap-4 px-4 pb-4 pt-5;
      background-size:
        100% 25%,
        50% 100%;
      min-height: 0;
    }
  }

  .sl-figma-panel-item {
    @apply flex items-center gap-5 border-b border-[#edf0fb] py-5 last:border-b-0;
  }

  .sl-figma-panel-item__icon {
    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px];
  }

  .sl-figma-panel-item__icon svg {
    @apply h-5 w-5;
  }

  .sl-figma-panel-item__icon.is-blue {
    @apply bg-[#edf2ff] text-[#8ea7d9];
  }

  .sl-figma-panel-item__icon.is-amber {
    @apply bg-[#fff3df] text-[#efcb88];
  }

  .sl-figma-panel-item__content {
    @apply min-w-0 flex-1;
  }

  .sl-figma-panel-item h3 {
    @apply truncate text-[15px] font-bold leading-[1.25] text-slate-600;
  }

  .sl-figma-panel-item p {
    @apply text-[14px] font-bold leading-[1.15] text-[#5c88d6];
  }

  .sl-figma-panel-item span {
    @apply text-[13px] font-semibold leading-[1.15] text-slate-500;
  }

  .sl-figma-panel-item__action {
    @apply inline-flex h-9 min-w-[152px] items-center justify-center rounded-[12px] bg-[#f1f3fb] px-5 text-[12px] font-semibold text-slate-500 no-underline;
  }

  .sl-dashboard-summary-list {
    @apply space-y-3;
  }

  .sl-dashboard-summary-item {
    @apply flex items-center justify-between gap-4 rounded-2xl border border-[var(--sl-border-soft)] bg-slate-50/70 px-4 py-4 text-sm font-semibold text-slate-600 no-underline transition hover:border-[var(--sl-border)] hover:bg-slate-50;
  }

  .sl-dashboard-summary-item strong {
    @apply text-base font-extrabold text-slate-800;
  }

  .sl-dashboard-dropdown-link {
    @apply inline-flex w-full items-center justify-center rounded-xl bg-[var(--sl-primary)] px-4 py-2 text-sm font-semibold text-white no-underline hover:text-white;
  }

  .sl-dashboard-popover {
    @apply absolute z-30 overflow-hidden rounded-3xl border border-[#dce3f3] bg-white shadow-[0_24px_48px_rgba(88,107,152,0.18)];
  }

  .sl-dashboard-menu-link {
    @apply rounded-2xl px-4 py-3 text-sm font-semibold text-slate-600 no-underline transition hover:bg-slate-50 hover:text-slate-900;
  }

  .sl-dashboard-sidebar__footer {
    @apply mt-auto flex flex-col items-center gap-1.5 border-t border-[#dfe5f4] px-2 py-3.5 text-center;
  }

  .sl-dashboard-sidebar__footer img {
    @apply h-[22px] w-auto opacity-90;
  }

  .sl-dashboard-sidebar__footer p {
    @apply m-0 text-[6.5px] font-medium leading-[1.2] text-slate-400;
  }

  @media (max-width: 1023px) {
    .sl-shell {
      @apply gap-0 p-0;
    }

    .sl-topbar {
      @apply rounded-none border-x-0 border-t-0;
    }

    .sl-dashboard-shell {
      @apply gap-0 p-0;
    }

    .sl-dashboard-topbar {
      @apply px-4 py-3;
    }

    .sl-dashboard-topbar__left {
      @apply w-full;
    }

    .sl-dashboard-topbar__right {
      @apply w-full justify-end;
    }

    .sl-dashboard-search input {
      @apply w-full;
    }
  }

  @media (max-width: 767px) {
    .sl-dashboard-topbar {
      @apply gap-3;
    }

    .sl-chart {
      @apply grid-cols-1 px-3.5;
      background-size:
        100% 25%,
        100% 100%;
    }

    .sl-dashboard-menu-trigger {
      @apply h-10 w-10;
    }

    .sl-dashboard-search input {
      @apply h-10 text-[13px];
    }

    .sl-dashboard-topbar__cta {
      @apply h-10 min-w-0 w-full justify-center px-4 text-[13px];
    }

    .sl-dashboard-page {
      @apply px-3 py-4;
    }
  }
}