@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Custom properties ───────────────────────────────────────────────── */
:root {
    --color-brand: #6366F1;
    --color-brand-dark: #4F46E5;
    --color-brand-light: #EEF2FF;
}

/* ── Base ────────────────────────────────────────────────────────────── */
@layer base {
    * { @apply border-border; }
    body {
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
    }
    [x-cloak] { display: none !important; }
}

/* ── Component layer ─────────────────────────────────────────────────── */
@layer components {

    /* Sidebar navigation */
    .sidebar-link {
        @apply flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-all text-sm font-medium;
    }
    .sidebar-link.active {
        @apply bg-indigo-600/20 text-indigo-300;
    }
    .sidebar-icon {
        @apply w-4 h-4 shrink-0;
    }
    .sidebar-label {
        @apply truncate;
    }
    .sidebar-section {
        @apply text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-2.5 py-2 mt-1;
    }
    .sidebar-badge {
        @apply ml-auto text-[11px] font-bold bg-indigo-500 text-white px-1.5 py-0.5 rounded-full min-w-[18px] text-center leading-none;
    }
    .sidebar-badge-danger {
        @apply sidebar-badge bg-rose-500;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-2xl border border-slate-200 overflow-hidden;
    }
    .card-header {
        @apply flex items-center justify-between px-5 py-4 border-b border-slate-100;
    }
    .card-title {
        @apply text-sm font-semibold text-slate-800;
    }
    .card-body {
        @apply p-5;
    }

    /* Stat cards */
    .stat-card {
        @apply card px-5 py-4;
    }
    .stat-label {
        @apply text-xs font-medium text-slate-500 mb-1;
    }
    .stat-value {
        @apply text-2xl font-bold text-slate-900 leading-none;
    }
    .stat-icon {
        @apply w-9 h-9 rounded-xl flex items-center justify-center;
    }
    .stat-link {
        @apply block text-xs text-indigo-600 hover:underline mt-2;
    }

    /* Buttons */
    .btn-primary {
        @apply inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-xl text-sm transition-all shadow-sm hover:shadow;
    }
    .btn-secondary {
        @apply inline-flex items-center gap-1.5 bg-white hover:bg-slate-50 text-slate-700 font-semibold px-4 py-2 rounded-xl text-sm border border-slate-200 hover:border-slate-300 transition-all;
    }
    .btn-ghost {
        @apply inline-flex items-center gap-1.5 text-slate-500 hover:text-slate-800 hover:bg-slate-100 font-medium px-3 py-1.5 rounded-xl text-sm transition-all;
    }
    .btn-danger {
        @apply inline-flex items-center gap-1.5 bg-rose-600 hover:bg-rose-700 text-white font-semibold px-4 py-2 rounded-xl text-sm transition-all;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs rounded-lg;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold;
    }
    .badge-green    { @apply badge bg-emerald-100 text-emerald-700; }
    .badge-amber    { @apply badge bg-amber-100 text-amber-700; }
    .badge-red      { @apply badge bg-rose-100 text-rose-700; }
    .badge-blue     { @apply badge bg-sky-100 text-sky-700; }
    .badge-indigo   { @apply badge bg-indigo-100 text-indigo-700; }
    .badge-slate    { @apply badge bg-slate-100 text-slate-600; }

    /* Status badges */
    .status-badge {
        @apply badge;
    }
    .status-published   { @apply badge-green; }
    .status-draft       { @apply badge-slate; }
    .status-pending     { @apply badge-amber; }
    .status-archived    { @apply badge-slate; }
    .status-active      { @apply badge-green; }
    .status-trialing    { @apply badge-blue; }
    .status-past_due    { @apply badge-red; }
    .status-suspended   { @apply badge-red; }
    .status-cancelled   { @apply badge-slate; }

    /* Form fields */
    .field-input {
        @apply w-full border border-slate-200 rounded-xl px-3 py-2 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition;
    }
    .field-label {
        @apply block text-sm font-semibold text-slate-700 mb-1.5;
    }
    .field-error {
        @apply text-xs text-rose-600 mt-1;
    }
    .field-hint {
        @apply text-xs text-slate-400 mt-1;
    }
    .form-group {
        @apply space-y-1;
    }

    /* Tables */
    .table-wrapper {
        @apply overflow-x-auto;
    }
    .data-table {
        @apply w-full text-sm;
    }
    .data-table thead tr {
        @apply border-b border-slate-200 bg-slate-50;
    }
    .data-table th {
        @apply px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider;
    }
    .data-table tbody tr {
        @apply border-b border-slate-100 hover:bg-slate-50 transition;
    }
    .data-table td {
        @apply px-4 py-3 text-slate-700;
    }

    /* Pagination */
    .pagination {
        @apply flex items-center gap-1;
    }
    .pagination a, .pagination span {
        @apply px-3 py-1.5 text-sm rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-100 transition;
    }
    .pagination .active {
        @apply bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-600;
    }

    /* SEO score bar */
    .seo-score-bar {
        @apply h-2 rounded-full bg-slate-100 overflow-hidden;
    }
    .seo-score-fill {
        @apply h-full rounded-full transition-all duration-500;
    }

    /* Builder field input */
    .builder-field-input {
        @apply w-full bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-sm text-slate-800 focus:outline-none focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 placeholder-slate-400;
    }

    /* Empty states */
    .empty-state {
        @apply flex flex-col items-center justify-center py-16 text-center;
    }
    .empty-state-icon {
        @apply w-12 h-12 rounded-2xl flex items-center justify-center mb-4;
    }
    .empty-state-title {
        @apply text-base font-semibold text-slate-800 mb-1;
    }
    .empty-state-desc {
        @apply text-sm text-slate-500 mb-5 max-w-sm;
    }

    /* Loading skeleton */
    .skeleton {
        @apply bg-slate-200 rounded-xl animate-pulse;
    }

    /* Toast notifications */
    .toast {
        @apply fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-2xl shadow-xl border border-slate-200 p-4 flex items-start gap-3;
    }

    /* Page header */
    .page-header {
        @apply flex items-center justify-between mb-6;
    }
    .page-title {
        @apply text-xl font-bold text-slate-900;
    }
    .page-subtitle {
        @apply text-sm text-slate-500 mt-0.5;
    }
}

/* ── Utilities ────────────────────────────────────────────────────────── */
@layer utilities {
    .text-brand { color: var(--color-brand); }
    .bg-brand { background-color: var(--color-brand); }
    .border-brand { border-color: var(--color-brand); }
    .ring-brand { --tw-ring-color: var(--color-brand); }

    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
    .scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
    .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
    .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
}