@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    }

    ::selection {
        background: rgba(15, 23, 42, 0.12);
    }
}

@layer components {
    .section-card {
        @apply rounded-xl bg-white shadow-[0_8px_12px_rgba(13,10,44,0.04)];
    }

    .muted-label {
        @apply text-sm font-semibold text-[#2D68F8];
    }

    .metric-card {
        @apply rounded-[20px] border border-slate-200 bg-slate-50 p-5;
    }

    .template-input {
        @apply w-full rounded-md border border-[#D1D5DB] bg-white px-6 py-3.5 text-[#15171A] outline-hidden duration-200 placeholder:text-[#979797] focus:border-transparent focus:ring-2 focus:ring-[#5C6A78]/20;
    }

    .template-button-dark {
        @apply inline-flex items-center justify-center rounded-md bg-[#15171A] px-5 py-3.5 font-medium text-white transition duration-200 hover:opacity-90;
    }

    .dashboard-shell {
        @apply mx-auto flex max-w-[1400px] gap-6 px-4 pb-10 pt-24 sm:px-6 xl:px-8;
    }

    .dashboard-sidebar {
        @apply hidden w-full max-w-[290px] shrink-0 lg:block;
    }

    .dashboard-sidebar-card {
        @apply sticky top-24 rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-[0_8px_12px_rgba(13,10,44,0.04)];
    }

    .dashboard-sidebar-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-[#374151] transition hover:bg-[#F9FAFB] hover:text-[#15171A];
    }

    .dashboard-sidebar-link-active {
        @apply bg-[#15171A] text-white hover:bg-[#15171A] hover:text-white;
    }

    .dashboard-sidebar-group {
        @apply mt-5;
    }

    .dashboard-sidebar-group-label {
        @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold text-[#15171A];
    }

    .dashboard-sidebar-submenu {
        @apply ml-4 mt-1 space-y-1 border-l border-[#E5E7EB] pl-3.5;
    }

    .dashboard-sidebar-icon {
        @apply inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center text-[#7A8594];
    }

    .dashboard-sidebar-link-active .dashboard-sidebar-icon {
        @apply text-white;
    }

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