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

@layer base {
    body {
        @apply bg-slate-50 text-slate-800;
    }
}

@layer components {
    /* Admin / operator shell (layouts.admin) */
    .admin-content-card {
        @apply rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm shadow-slate-200/50;
    }

    .admin-page-title {
        @apply text-xl font-semibold tracking-tight text-slate-900 sm:text-2xl;
    }

    .admin-kicker {
        @apply text-xs font-semibold uppercase tracking-wider text-teal-600;
    }

    .admin-stat-card {
        @apply relative overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-200/40 transition hover:border-teal-200/60 hover:shadow-md;
    }

    .admin-stat-card::before {
        content: '';
        @apply pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-teal-500 via-cyan-500 to-sky-500 opacity-90;
    }

    .admin-btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-teal-600 to-cyan-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-teal-900/20 transition hover:from-teal-500 hover:to-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500;
    }

    .admin-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-800 shadow-sm transition hover:border-slate-300 hover:bg-slate-50;
    }

    .admin-btn-warning {
        @apply inline-flex items-center justify-center gap-2 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-500 to-orange-500 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-amber-900/15 transition hover:from-amber-400 hover:to-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500;
    }

    .admin-btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-xl border border-red-200 bg-white px-3 py-2 text-xs font-semibold text-red-700 shadow-sm transition hover:border-red-300 hover:bg-red-50;
    }

    .admin-btn-text {
        @apply text-xs font-semibold text-red-600 underline decoration-red-600/30 underline-offset-2 transition hover:text-red-800;
    }

    .admin-btn-dark {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-slate-900/20 transition hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900;
    }

    .admin-form-label {
        @apply mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-600;
    }

    .admin-input {
        @apply w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/25 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500;
    }

    .admin-file-input {
        @apply mt-1 block w-full text-sm text-slate-600 file:mr-4 file:cursor-pointer file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-800 hover:file:bg-slate-200;
    }

    .admin-card-title {
        @apply text-sm font-semibold text-slate-900;
    }

    .admin-card-desc {
        @apply mt-1 text-xs text-slate-500;
    }

    .admin-list-row {
        @apply flex items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50/80 px-4 py-3 text-sm transition hover:border-slate-200 hover:bg-slate-50;
    }

    .admin-table-wrap {
        @apply overflow-hidden rounded-xl border border-slate-100;
    }

    .admin-table {
        @apply w-full text-left text-sm;
    }

    .admin-table thead {
        @apply bg-slate-50/90 text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .admin-table th {
        @apply border-b border-slate-100 px-4 py-3;
    }

    .admin-table td {
        @apply border-b border-slate-50 px-4 py-3 text-slate-700;
    }

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

    .admin-table tbody tr:hover td {
        @apply bg-slate-50/50;
    }

    .admin-checkbox {
        @apply h-4 w-4 rounded border-slate-300 text-teal-600 focus:ring-teal-500/30;
    }

    .a4w-card {
        @apply rounded-2xl bg-white p-6 shadow-xl ring-1 ring-slate-100;
    }

    .a4w-stat-value {
        @apply mt-2 text-3xl font-bold;
    }

    .a4w-page-shell {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .a4w-section {
        @apply mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8;
    }

    .a4w-heading {
        @apply text-3xl font-bold tracking-tight text-slate-900 md:text-4xl;
    }

    .a4w-subheading {
        @apply mt-3 max-w-3xl text-slate-600;
    }

    .a4w-kicker {
        @apply inline-flex rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-blue-700;
    }

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

    .a4w-badge-blue {
        @apply a4w-badge bg-blue-100 text-blue-700 ring-blue-200;
    }

    .a4w-badge-green {
        @apply a4w-badge bg-emerald-100 text-emerald-700 ring-emerald-200;
    }

    .a4w-soft-panel {
        @apply rounded-2xl bg-gradient-to-br from-white to-slate-50 ring-1 ring-slate-100;
    }

    .a4w-icon-chip {
        @apply mb-3 h-10 w-10 rounded-xl ring-4;
    }
}