/* SchoolManagementSystem/static/css/main.css */

@layer base {
    body {
        @apply bg-slate-50 text-slate-900 antialiased;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
}

@layer components {
    /* --- Layout Components --- */
    .glass-effect {
        @apply bg-white/80 backdrop-blur-md border-white/20;
    }

    .premium-sidebar {
        @apply bg-white border-r border-slate-200 shadow-[20px_0_40px_rgba(0,0,0,0.02)];
    }

    .premium-header {
        @apply bg-white/70 backdrop-blur-lg border-b border-slate-200/60 sticky top-0 z-40;
    }

    /* --- UI Cards --- */
    .premium-card {
        @apply bg-white rounded-3xl border border-slate-200/60 shadow-sm transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/5 hover:-translate-y-0.5 overflow-hidden;
    }

    .card-header {
        @apply px-6 py-4 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between;
    }

    .card-body {
        @apply p-6;
    }

    /* --- Form Elements --- */
    .premium-input {
        @apply block w-100 rounded-2xl border-slate-200 py-3 px-4 text-sm transition-all duration-200 
               focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 hover:border-slate-300;
    }

    .premium-label {
        @apply block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 px-1;
    }

    .premium-form-group {
        @apply mb-5;
    }

    /* --- Buttons --- */
    .btn-premium {
        @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-2xl font-bold transition-all duration-200 active:scale-95 shadow-sm;
    }

    .btn-indigo {
        @apply bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-indigo-500/25 shadow-lg shadow-indigo-500/10;
    }

    .btn-slate {
        @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
    }

    .btn-danger {
        @apply bg-rose-50 text-rose-600 hover:bg-rose-100;
    }

    /* --- Tables --- */
    .premium-table-container {
        @apply overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm;
    }

    .premium-table {
        @apply min-w-full text-sm divide-y divide-slate-100;
    }

    .premium-table-thead {
        @apply bg-slate-50/50;
    }

    .premium-table-th {
        @apply px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-widest;
    }

    .premium-table-tr {
        @apply transition-colors hover:bg-slate-50/80;
    }

    .premium-table-td {
        @apply px-6 py-4 whitespace-nowrap;
    }

    /* --- Avatars --- */
    .premium-avatar {
        @apply h-10 w-10 rounded-2xl bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center flex-shrink-0 transition-transform hover:scale-105;
    }

    /* --- Badges --- */
    .premium-badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-bold tracking-wide;
    }

    /* --- Animations --- */
    .fade-in {
        animation: fadeIn 0.5s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}