@import 'tailwindcss';

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

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-500: #2563eb;
    --color-brand-600: #1d4ed8;
    --color-brand-900: #0f2f75;
}

@layer base {
    @keyframes admin-surface-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes admin-modal-in {
        from {
            opacity: 0;
            transform: translate(-50%, -46%) scale(.98);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes admin-toast-in {
        from {
            opacity: 0;
            transform: translateY(-8px) scale(.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    html {
        color-scheme: light;
    }

    html.dark {
        color-scheme: dark;
    }

    body {
        @apply bg-slate-100 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100;
    }

    input,
    select,
    textarea {
        @apply text-sm;
    }
}

@layer components {
    .admin-shell {
        @apply min-h-screen bg-slate-100 dark:bg-slate-950;
    }

    .admin-topbar {
        @apply sticky top-0 z-40 border-b border-slate-200/80 bg-white/90 shadow-sm shadow-slate-900/5 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90;
    }

    .admin-sidebar {
        @apply fixed inset-y-0 left-0 z-50 w-72 -translate-x-full border-r border-slate-200 bg-white shadow-xl transition-all duration-300 dark:border-slate-800 dark:bg-slate-900 lg:sticky lg:top-16 lg:z-30 lg:h-[calc(100vh-4rem)] lg:translate-x-0 lg:shadow-none;
    }

    .admin-sidebar.open {
        @apply translate-x-0;
    }

    .admin-sidebar-collapsed .admin-sidebar {
        @apply lg:w-20;
    }

    .admin-sidebar-collapsed .admin-sidebar [data-sidebar-label],
    .admin-sidebar-collapsed .admin-sidebar [data-sidebar-section-label],
    .admin-sidebar-collapsed .admin-sidebar [data-sidebar-status] {
        @apply lg:hidden;
    }

    .admin-sidebar-collapsed .admin-sidebar .nav-link {
        @apply lg:justify-center lg:px-2;
    }

    .admin-sidebar-collapsed .admin-sidebar nav,
    .admin-sidebar-collapsed .admin-sidebar nav + div {
        @apply lg:space-y-2;
    }

    .nav-link {
        @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-600 transition duration-200 hover:-translate-y-0.5 hover:bg-brand-50 hover:text-brand-600 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white;
    }

    .nav-link.active {
        @apply bg-brand-500 text-white shadow-sm shadow-blue-500/30 hover:bg-brand-500 hover:text-white;
    }

    .page-title {
        @apply text-2xl font-bold tracking-tight text-slate-950 dark:text-white;
    }

    .page-subtitle {
        @apply mt-1 text-sm text-slate-500 dark:text-slate-400;
    }

    .panel {
        @apply rounded-2xl border border-slate-200 bg-white shadow-sm transition duration-200 dark:border-slate-800 dark:bg-slate-900;
    }

    .panel-header {
        @apply border-b border-slate-200 px-5 py-4 dark:border-slate-800;
    }

    .panel-body {
        @apply p-5;
    }

    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus:ring-offset-slate-950;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-blue-500/25 transition hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus:ring-offset-slate-950;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus:ring-offset-slate-950;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-red-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus:ring-offset-slate-950;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:text-slate-300 dark:hover:bg-slate-800 dark:focus:ring-offset-slate-950;
    }

    .form-label {
        @apply mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200;
    }

    .form-control {
        @apply w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-white;
    }

    .form-error {
        @apply mt-1 text-xs font-medium text-red-600 dark:text-red-400;
    }

    .stat-card {
        @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition duration-200 hover:-translate-y-1 hover:border-brand-200 hover:shadow-lg hover:shadow-slate-900/10 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700;
    }

    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold;
    }

    .badge-blue {
        @apply inline-flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-600 dark:bg-blue-950 dark:text-blue-300;
    }

    .badge-green {
        @apply inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300;
    }

    .badge-red {
        @apply inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-1 text-xs font-semibold text-red-700 dark:bg-red-950 dark:text-red-300;
    }

    .badge-yellow {
        @apply inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700 dark:bg-amber-950 dark:text-amber-300;
    }

    .badge-slate {
        @apply inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300;
    }

    .data-table {
        @apply w-full min-w-[860px] text-left text-sm;
    }

    .data-table thead {
        @apply bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-slate-800/70 dark:text-slate-400;
    }

    .data-table th {
        @apply px-4 py-3 font-semibold;
    }

    .data-table td {
        @apply border-t border-slate-100 px-4 py-3 align-middle dark:border-slate-800;
    }

    .data-table tbody tr {
        @apply transition duration-150 hover:bg-slate-50 dark:hover:bg-slate-800/60;
    }

    .data-table tbody tr.row-selected {
        @apply bg-brand-50 ring-1 ring-inset ring-brand-200 dark:bg-blue-950/35 dark:ring-blue-900;
    }

    .icon-btn {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-xl text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white;
    }

    .action-bar {
        @apply sticky bottom-4 z-20 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-xl shadow-slate-900/10 backdrop-blur transition duration-200 dark:border-slate-700 dark:bg-slate-900/95;
    }

    [data-collapsible-filter] .panel-body {
        @apply overflow-hidden transition-all duration-300 ease-out;
    }

    .filter-panel-collapsed .panel-body {
        @apply py-0 opacity-0;
    }

    .filter-panel-collapsed [data-collapsible-filter-icon] {
        @apply rotate-180;
    }

    .surface-enter {
        animation: admin-surface-in .28s ease-out both;
    }

    .compact-density .panel-body {
        @apply p-3;
    }

    .compact-density .stat-card {
        @apply p-4;
    }

    .compact-density .data-table th {
        @apply px-3 py-2;
    }

    .compact-density .data-table td {
        @apply px-3 py-2;
    }

    .compact-density .badge-blue,
    .compact-density .badge-green,
    .compact-density .badge-red,
    .compact-density .badge-yellow,
    .compact-density .badge-slate {
        @apply px-2 py-0.5;
    }

    .command-item {
        @apply flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition duration-150 hover:bg-brand-50 focus:bg-brand-50 focus:outline-none dark:hover:bg-slate-800 dark:focus:bg-slate-800;
    }

    .command-icon {
        @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-brand-600 dark:bg-slate-800 dark:text-blue-300;
    }

    .quick-filter {
        @apply inline-flex min-h-9 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-xs font-black text-slate-600 shadow-sm shadow-slate-900/5 transition hover:-translate-y-0.5 hover:border-brand-200 hover:bg-brand-50 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white;
    }

    .quick-filter.active {
        @apply border-brand-500 bg-brand-500 text-white shadow-blue-500/25 hover:bg-brand-600 hover:text-white;
    }

    .active-filter-chip {
        @apply inline-flex min-h-9 items-center gap-2 rounded-full bg-white px-3 text-xs font-black text-brand-600 shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-500 hover:text-white dark:bg-slate-900 dark:text-blue-300 dark:hover:bg-brand-500 dark:hover:text-white;
    }

    .active-filter-chip.reset {
        @apply bg-slate-900 text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200;
    }

    .kbd {
        @apply rounded-md border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[11px] font-black text-slate-500 shadow-sm dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300;
    }

    [data-command-palette]:not(.hidden) > div:last-child,
    [data-confirm-modal]:not(.hidden) > div:last-child {
        animation: admin-modal-in .18s ease-out both;
    }

    [data-admin-toast]:not(.hidden) {
        animation: admin-toast-in .2s ease-out both;
    }
}