@layer components {
    /* Dashboard container */
    .dashboard {
        @apply space-y-12;
    }

    /* Stats cards grid - using DaisyUI stats */
    .dashboard-stats {
        @apply grid gap-6 lg:grid-cols-4;
    }

    .stat-dashboard {
        @apply !relative !flex !flex-col !items-start !justify-center !gap-2 !rounded-xl !bg-primary !p-6 !text-primary-content;
    }

    .stat-dashboard .stat-title {
        @apply !m-0 !block !w-full !text-xs !font-medium !uppercase !tracking-wide !text-primary-content/70;
    }

    .stat-dashboard .stat-value {
        @apply !m-0 !block !text-4xl !font-bold !text-primary-content;
    }

    .stat-dashboard .stat-figure {
        @apply !absolute !right-6 !top-1/2 !-translate-y-1/2 !flex !h-16 !w-16 !shrink-0 !items-center !justify-center !rounded-full !text-2xl bg-primary-strong text-primary-content;
    }

    /* Feature cards grid - using DaisyUI cards */
    .dashboard-cards {
        @apply grid gap-6 lg:grid-cols-3;
    }

    .card-dashboard {
        @apply rounded-lg border border-base-300 bg-base-100 shadow-sm;
    }

    .card-dashboard .card-body {
        @apply gap-4 p-6;
    }

    .card-dashboard .card-title {
        @apply text-base font-bold uppercase text-primary;
    }

    .card-dashboard .card-content {
        @apply text-sm text-base-content;
    }

    .card-dashboard .stat-figure {
        @apply relative flex h-16 w-16 shrink-0 items-center justify-center rounded-full border-2 border-primary text-2xl bg-primary text-primary-content;
    }

    /* Override DaisyUI button styling for dashboard buttons */
    .card-dashboard .btn {
        @apply !w-full !border-0 !bg-primary !px-4 !py-3 !text-center !text-sm !font-bold !uppercase !text-primary-content !transition-colors;
    }

    .card-dashboard .btn:hover {
        @apply !bg-primary-strong;
    }

    .card-dashboard .btn:active {
        @apply !bg-neutral;
    }

    .card-dashboard .btn:focus {
        @apply !outline-none !ring-2 !ring-primary/30;
    }
}
