@layer components {

    /* ========= Wrapper ========= */
    .table-wrap {
        @apply overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    .table-scroll {
        @apply overflow-x-auto;
    }

    /* ========= Base table ========= */
    .table {
        @apply w-full text-sm;
    }

    .table thead th {
        @apply bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-600;
    }

    .table tbody td {
        @apply px-4 py-4 text-sm text-slate-800;
    }

    .table tbody tr {
        @apply border-t border-slate-200;
    }

    /* Align helpers */
    .table .td-muted {
        @apply text-slate-600;
    }

    .table .td-strong {
        @apply font-semibold text-slate-900;
    }

    .table .td-actions {
        @apply whitespace-nowrap;
    }

    /* ========= Hover / striped ========= */
    .table-hover tbody tr {
        @apply hover:bg-slate-50 transition;
    }

    .table-striped tbody tr:nth-child(even) {
        @apply bg-slate-50/50;
    }

    /* ========= Compact ========= */
    .table-compact thead th {
        @apply px-3 py-2;
    }

    .table-compact tbody td {
        @apply px-3 py-3;
    }

    /* ========= Check column ========= */
    .table-check {
        @apply w-10;
    }

    .table-check input {
        @apply h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-2 focus:ring-slate-300;
    }

    /* ========= Caption / title bar ========= */
    .table-bar {
        @apply flex flex-col gap-3 border-b border-slate-200 bg-white p-5 sm:flex-row sm:items-center sm:justify-between;
    }

    .table-bar-title {
        @apply text-base font-semibold text-slate-900;
    }

    .table-bar-subtitle {
        @apply mt-1 text-sm text-slate-600;
    }

    .table-bar-actions {
        @apply flex flex-wrap items-center gap-2;
    }

    /* ========= Empty state row ========= */
    .table-empty {
        @apply px-4 py-10 text-center;
    }

    .table-empty-title {
        @apply text-sm font-semibold text-slate-900;
    }

    .table-empty-text {
        @apply mt-1 text-sm text-slate-600;
    }

    .table-empty-actions {
        @apply mt-4 flex flex-col gap-2 sm:flex-row sm:justify-center;
    }

    /* ========= Footer / pagination block ========= */
    .table-footer {
        @apply flex flex-col gap-3 border-t border-slate-200 bg-white p-4 sm:flex-row sm:items-center sm:justify-between;
    }

    .table-footer-meta {
        @apply text-sm text-slate-600;
    }

    .table-footer-actions {
        @apply flex items-center gap-2;
    }
}