@layer components {
  .aura-dashboard {
    @apply min-h-screen p-4 bg-aura-bg transition-colors duration-300 w-full;
  }

  .aura-header {
    @apply flex items-center justify-between mb-6 px-4 gap-6;
  }

  .aura-main-grid {
    @apply flex overflow-x-auto snap-x snap-mandatory xl:grid xl:grid-cols-12 gap-4 mb-4 h-[calc(100vh-120px)] min-h-[600px] xl:min-h-[750px] no-scrollbar;
  }

  .aura-col-action {
    @apply w-full flex-shrink-0 snap-center xl:w-auto xl:flex-shrink xl:snap-none xl:col-span-2 aura-card p-4 flex flex-col h-full overflow-hidden;
  }

  .aura-col-aura {
    @apply w-full flex-shrink-0 snap-center xl:w-auto xl:flex-shrink xl:snap-none xl:col-span-7 aura-card p-5 flex flex-col h-full relative overflow-hidden;
  }

  .aura-col-info {
    @apply w-full flex-shrink-0 snap-center xl:w-auto xl:flex-shrink xl:snap-none xl:col-span-3 aura-card p-4 flex flex-col h-full overflow-hidden;
  }

  .aura-bottom-grid {
    @apply grid grid-cols-1 xl:grid-cols-3 gap-4;
  }

  .aura-toolbar {
    @apply flex items-center gap-1 backdrop-blur-sm p-1.5 rounded-2xl border shadow-sm;
    background-color: color-mix(in srgb, var(--aura-surface), transparent 50%);
    border-color: color-mix(in srgb, var(--aura-border), transparent 50%);
  }

  .aura-toolbar-item {
    @apply flex items-center gap-2 rounded-xl cursor-pointer transition-all;
  }

  .aura-toolbar-item-active {
    @apply bg-aura-surface shadow-sm text-aura-accent-blue;
  }

  .aura-toolbar-item-inactive {
    @apply text-aura-text-muted hover:bg-aura-surface/50 hover:text-aura-text;
  }
}