/* =========================================
   ADMIN LAYOUT & DASHBOARD
   ========================================= */

@layer components {
    /* --- Base Layout --- */
    .admin-body {
        @apply bg-gray-950 text-gray-300 font-sans min-h-screen flex w-full overflow-hidden;
    }

    /* --- Sidebar --- */
    .admin-sidebar {
        @apply fixed inset-y-0 left-0 z-50 w-64 bg-gray-900 border-r border-gray-800 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out flex flex-col shadow-2xl md:shadow-none;
    }
    .admin-sidebar-header {
        @apply h-16 flex items-center justify-between px-6 border-b border-gray-800;
    }
    .admin-logo {
        @apply text-xl font-black text-red-600 tracking-tight flex items-center gap-2;
    }
    .admin-nav {
        @apply flex-1 overflow-y-auto py-4 flex flex-col gap-2 px-4;
    }
    .admin-nav-link {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 transition-colors relative;
    }
    .admin-nav-link.active {
        @apply bg-red-600 text-white hover:bg-red-700 shadow-md;
    }
    .admin-nav-link.active::before {
        content: '';
        @apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-white rounded-r-md;
    }

    /* --- Main Content Area --- */
    .admin-main {
        @apply flex-1 flex flex-col min-w-0 md:ml-64 transition-all duration-300 h-screen overflow-hidden;
    }

    /* --- Header --- */
    .admin-header {
        @apply h-16 bg-gray-900 border-b border-gray-800 flex items-center justify-between px-4 sm:px-6 sticky top-0 z-40 shadow-sm;
    }
    .admin-header-right {
        @apply flex items-center gap-4;
    }

    /* --- Content --- */
    .admin-content {
        @apply flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8 bg-gray-950;
    }
    .admin-card {
        @apply bg-gray-900 border border-gray-800 rounded-xl p-6 shadow-sm;
    }

    /* --- KPIs --- */
    .admin-kpi-grid {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8;
    }
    .admin-kpi-card {
        @apply bg-gray-900 border border-gray-800 rounded-xl p-6 flex flex-col gap-4 shadow-sm hover:border-red-600/50 transition-colors duration-300;
    }
    .admin-kpi-header {
        @apply flex items-center justify-between;
    }
    .admin-kpi-title {
        @apply text-sm font-bold text-gray-400 uppercase tracking-wider transition-colors;
    }
    .admin-kpi-card:hover .admin-kpi-title {
        @apply text-gray-300;
    }
    .admin-kpi-icon {
        @apply w-10 h-10 flex items-center justify-center rounded-lg bg-gray-800 text-red-500 transition-colors duration-300;
    }
    .admin-kpi-card:hover .admin-kpi-icon {
        @apply bg-red-600 text-white;
    }
    .admin-kpi-value {
        @apply text-3xl font-black text-white;
    }

    /* --- Tables --- */
    .admin-table-container {
        @apply overflow-x-auto rounded-lg border border-gray-800;
    }
    .admin-table {
        @apply w-full text-left border-collapse bg-gray-900;
    }
    .admin-table th {
        @apply py-4 px-5 text-xs font-bold text-gray-400 uppercase tracking-wider border-b border-gray-800 bg-gray-950/50;
    }
    .admin-table td {
        @apply py-4 px-5 text-sm text-gray-300 border-b border-gray-800 whitespace-nowrap;
    }
    .admin-table tr:last-child td {
        @apply border-b-0;
    }
    .admin-table tr:hover td {
        @apply bg-gray-800/50;
    }

    /* --- Badges --- */
    .admin-badge {
        @apply px-3 py-1 rounded-full text-xs font-bold inline-flex items-center gap-1.5;
    }
    .admin-badge::before {
        content: '';
        @apply w-1.5 h-1.5 rounded-full;
    }
    .admin-badge-success {
        @apply bg-green-500/10 text-green-400 border border-green-500/20;
    }
    .admin-badge-success::before {
        @apply bg-green-400;
    }
    .admin-badge-warning {
        @apply bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
    }
    .admin-badge-warning::before {
        @apply bg-yellow-400;
    }
    .admin-badge-danger {
        @apply bg-red-500/10 text-red-400 border border-red-500/20;
    }
    .admin-badge-danger::before {
        @apply bg-red-400;
    }

    /* --- Grids --- */
    .admin-grid-2 {
        @apply grid grid-cols-1 xl:grid-cols-2 gap-8;
    }
}