@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@source '../views/admin/**/*.blade.php';
@source '../views/components/admin/**/*.blade.php';
@source '../views/components/site/icon.blade.php';
@source '../js/admin.js';
@source '../js/admin/**/*.js';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/tailwind.blade.php';

/* Back-office identity: shared by every project (indigo + slate). */
@theme {
    --font-sans: 'Inter var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --color-brand-50: oklch(0.97 0.02 277);
    --color-brand-100: oklch(0.93 0.04 277);
    --color-brand-500: oklch(0.59 0.2 277);
    --color-brand-600: oklch(0.51 0.23 277);
    --color-brand-700: oklch(0.46 0.21 277);
}

[x-cloak] {
    display: none !important;
}

@utility a-btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-semibold whitespace-nowrap shadow-xs transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:cursor-not-allowed disabled:opacity-50;
}

@utility a-card {
    @apply rounded-2xl bg-white shadow-xs ring-1 ring-slate-200/80;
}

@layer base {
    body {
        @apply antialiased;
        font-feature-settings: 'cv11', 'ss01';
    }
}

@layer components {
    .a-input {
        @apply block w-full rounded-lg border-slate-300 text-sm shadow-xs transition placeholder:text-slate-400 focus:border-brand-500 focus:ring-brand-500;
    }

    .a-btn-primary {
        @apply a-btn bg-brand-600 text-white hover:bg-brand-500;
    }

    .a-btn-secondary {
        @apply a-btn bg-white text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50 hover:text-slate-900;
    }

    .a-btn-danger {
        @apply a-btn bg-rose-600 text-white hover:bg-rose-500;
    }

    .a-btn-ghost {
        @apply a-btn text-slate-600 shadow-none hover:bg-slate-100 hover:text-slate-900;
    }

    .a-card-header {
        @apply flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4;
    }

    .a-card-title {
        @apply text-[15px] font-semibold text-slate-900;
    }

    /* Data tables */
    .a-table {
        @apply min-w-full text-sm;
    }

    .a-table thead {
        @apply sticky top-0 z-10 bg-slate-50/95 backdrop-blur;
    }

    .a-table th {
        @apply border-b border-slate-200 px-4 py-2.5 text-left text-xs font-semibold tracking-wide whitespace-nowrap text-slate-500 uppercase;
    }

    .a-table td {
        @apply border-b border-slate-100 px-4 py-3 align-middle;
    }

    .a-table tbody tr {
        @apply transition-colors hover:bg-slate-50/80;
    }

    .a-table tbody tr:last-child td {
        @apply border-b-0;
    }

    /* Navigation */
    .a-nav-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-400 transition hover:bg-white/5 hover:text-white;
    }

    .a-nav-link.is-active {
        @apply bg-white/10 text-white shadow-[inset_3px_0_0_var(--color-brand-500)];
    }

    .a-nav-heading {
        @apply px-3 pt-5 pb-1.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase;
    }

    /* Settings-style form sections: description on the left, fields on the right */
    .a-section {
        @apply grid gap-6 py-8 first:pt-0 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)];
    }

    .a-section + .a-section {
        @apply border-t border-slate-200;
    }

    .a-kpi-icon {
        @apply grid size-10 place-items-center rounded-xl;
    }

    .a-progress {
        @apply h-1.5 w-full overflow-hidden rounded-full bg-slate-100;
    }
}

/* Visual editor (Tiptap) ----------------------------------------------- */
.rich-editor {
    @apply overflow-hidden rounded-lg border border-slate-300 bg-white shadow-xs focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500;
}

.re-toolbar {
    @apply sticky top-16 z-10 flex flex-wrap items-center gap-0.5 border-b border-slate-200 bg-slate-50 p-1;
}

.re-toolbar button {
    @apply grid size-8 place-items-center rounded-md text-slate-600 hover:bg-white hover:text-slate-900 hover:shadow-xs;
}

.re-toolbar button[aria-pressed='true'] {
    @apply bg-indigo-100 text-indigo-700;
}

.re-select {
    @apply h-8 rounded-md border-slate-200 py-0 ps-2 pe-7 text-sm;
}

.re-sep {
    @apply mx-1 h-5 w-px bg-slate-200;
}

.re-table-tools {
    @apply flex flex-wrap items-center gap-1 border-b border-slate-200 bg-amber-50 px-2 py-1 text-xs text-slate-600;
}

.re-table-tools button {
    @apply rounded px-2 py-0.5 font-medium hover:bg-white;
}

.re-content .ProseMirror {
    @apply px-4 py-3;
}

.re-source {
    @apply block min-h-64 w-full border-0 bg-slate-900 p-4 font-mono text-xs leading-relaxed text-slate-100 focus:ring-0;
}

.re-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    @apply pointer-events-none float-left h-0 text-slate-400;
}

.re-content .ProseMirror table {
    @apply my-4 w-full table-fixed border-collapse;
}

.re-content .ProseMirror :is(td, th) {
    @apply relative border border-slate-300 px-2 py-1 align-top;
}

.re-content .ProseMirror th {
    @apply bg-slate-50 font-semibold;
}

.re-content .ProseMirror .selectedCell::after {
    content: '';
    @apply pointer-events-none absolute inset-0 bg-indigo-200/40;
}

.re-content .ProseMirror img {
    @apply rounded-lg;
}

.re-content .ProseMirror img.ProseMirror-selectednode {
    @apply ring-2 ring-indigo-500;
}

.re-content .ProseMirror div[data-youtube-video] iframe {
    @apply aspect-video h-auto w-full rounded-lg;
}