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

@layer base {
    html {
        @apply antialiased;
    }
    body {
        @apply font-sans text-slate-700 bg-slate-100;
    }
    ::selection {
        @apply bg-blue-100 text-blue-900;
    }
}

@layer components {
    /* ── Sidebar ─────────────────────────────── */
    .sidebar-link {
        @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-slate-300 hover:bg-white/10 hover:text-white transition-all duration-150;
    }
    .sidebar-link.active {
        @apply bg-primary-600 text-white shadow-lg shadow-blue-900/30;
    }
    .sidebar-submenu-link {
        @apply flex items-center gap-3 rounded-lg text-sm font-medium text-slate-400 hover:bg-white/10 hover:text-white transition-colors duration-150;
    }
    .sidebar-submenu-link.active {
        @apply text-white bg-white/10;
    }
    .sidebar-group-btn {
        @apply flex items-center w-full px-3 py-2.5 rounded-xl text-sm font-medium text-slate-300 hover:bg-white/10 hover:text-white transition-all duration-150;
    }
    .sidebar-group-btn.active {
        @apply bg-primary-600 text-white shadow-lg shadow-blue-900/30;
    }

    /* ── Cards ───────────────────────────────── */
    .card {
        @apply bg-white rounded-2xl shadow-soft border border-slate-200/80;
    }
    .card-header {
        @apply px-5 sm:px-6 py-4 border-b border-slate-100 flex items-center justify-between gap-3;
    }
    .card-body {
        @apply px-5 sm:px-6 py-5;
    }
    .card-footer {
        @apply px-5 sm:px-6 py-4 border-t border-slate-100 bg-slate-50/60 rounded-b-2xl;
    }

    /* ── Buttons ─────────────────────────────── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer select-none active:scale-[0.98];
    }
    .btn-primary {
        @apply btn bg-primary-gradient text-white shadow-sm shadow-blue-900/20 hover:shadow-md hover:shadow-blue-900/30 focus-visible:ring-primary-500 hover:brightness-105;
    }
    .btn-secondary {
        @apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 hover:border-slate-300 focus-visible:ring-slate-400;
    }
    .btn-success {
        @apply btn bg-accent-gradient text-white shadow-sm shadow-green-900/20 hover:shadow-md hover:shadow-green-900/30 focus-visible:ring-accent-500 hover:brightness-105;
    }
    .btn-danger {
        @apply btn bg-red-600 text-white shadow-sm shadow-red-900/20 hover:bg-red-700 focus-visible:ring-red-500;
    }
    .btn-info {
        @apply btn bg-sky-600 text-white shadow-sm shadow-sky-900/20 hover:bg-sky-700 focus-visible:ring-sky-500;
    }
    .btn-warning {
        @apply btn bg-amber-500 text-white shadow-sm shadow-amber-900/20 hover:bg-amber-600 focus-visible:ring-amber-400;
    }
    .btn-ghost {
        @apply btn text-slate-600 hover:bg-slate-100 focus-visible:ring-slate-300;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs rounded-lg;
    }

    /* ── Forms ───────────────────────────────── */
    .form-input {
        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-800 placeholder-slate-400 shadow-sm transition-all duration-150 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:shadow-glow;
    }
    .form-select {
        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-800 shadow-sm transition-all duration-150 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:shadow-glow;
    }
    .form-label {
        @apply block text-sm font-semibold text-slate-700 mb-1.5;
    }

    /* ── Badges ──────────────────────────────── */
    .badge {
        @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold;
    }
    .badge-pending {
        @apply badge bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200;
    }
    .badge-signed {
        @apply badge bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200;
    }
    .badge-rejected {
        @apply badge bg-red-50 text-red-700 ring-1 ring-inset ring-red-200;
    }
    .badge-draft {
        @apply badge bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-200;
    }

    /* ── Tables ──────────────────────────────── */
    .table-wrap {
        @apply overflow-x-auto;
    }
    .table {
        @apply min-w-full divide-y divide-slate-200;
    }
    .table thead {
        @apply bg-slate-50;
    }
    .table thead th {
        @apply px-5 py-3.5 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500;
    }
    .table tbody {
        @apply bg-white divide-y divide-slate-100;
    }
    .table tbody td {
        @apply px-5 py-3.5 text-sm text-slate-600;
    }
    .table tbody tr {
        @apply transition-colors duration-100 hover:bg-slate-50/80;
    }

    /* ── Stat cards ──────────────────────────── */
    .stat-card {
        @apply card p-5 flex items-center gap-4 hover:shadow-soft-lg transition-shadow duration-200;
    }
    .stat-icon {
        @apply w-12 h-12 rounded-2xl flex items-center justify-center shrink-0;
    }
}