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

/* ── Theme Color Variables (overridden by JS from settings) ── */
:root {
    --primary-50:  238 242 255;
    --primary-100: 224 231 255;
    --primary-200: 199 210 254;
    --primary-300: 165 180 252;
    --primary-400: 129 140 248;
    --primary-500: 99 102 241;
    --primary-600: 79 70 229;
    --primary-700: 67 56 202;
    --primary-800: 55 48 163;
    --primary-900: 49 46 129;
    /* Sidebar */
    --sidebar-from: 15 23 42;
    --sidebar-via:  15 23 42;
    --sidebar-to:   2 6 23;
    --sidebar-light: 0;
}

@layer base {
    body {
        @apply bg-gray-50 text-gray-900 antialiased;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
    * {
        @apply border-gray-200;
    }
    ::selection {
        @apply bg-primary-100 text-primary-900;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400;
    }
}

@layer components {
    /* ── Buttons ───────────────────────────────── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg
               transition-all duration-150 ease-in-out
               focus:outline-none focus:ring-2 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none
               cursor-pointer select-none;
    }
    .btn-primary {
        @apply btn bg-gradient-to-b from-primary-500 to-primary-600 text-white
               shadow-sm shadow-primary-500/25
               hover:from-primary-600 hover:to-primary-700 hover:shadow-md hover:shadow-primary-500/30
               focus:ring-primary-500 active:from-primary-700 active:to-primary-800;
    }
    .btn-secondary {
        @apply btn bg-white text-gray-700 border border-gray-200
               shadow-sm
               hover:bg-gray-50 hover:border-gray-300 hover:shadow
               focus:ring-gray-300 active:bg-gray-100;
    }
    .btn-danger {
        @apply btn bg-gradient-to-b from-red-500 to-red-600 text-white
               shadow-sm shadow-red-500/25
               hover:from-red-600 hover:to-red-700 hover:shadow-md hover:shadow-red-500/30
               focus:ring-red-500;
    }
    .btn-success {
        @apply btn bg-gradient-to-b from-emerald-500 to-emerald-600 text-white
               shadow-sm shadow-emerald-500/25
               hover:from-emerald-600 hover:to-emerald-700
               focus:ring-emerald-500;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }
    .btn-xs {
        @apply px-2 py-1 text-xs gap-1;
    }
    .btn-lg {
        @apply px-6 py-3 text-base;
    }
    .btn-icon {
        @apply btn p-2 rounded-lg;
    }

    /* ── Form Inputs ──────────────────────────── */
    .form-input {
        @apply w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm
               shadow-sm
               placeholder:text-gray-400
               focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:shadow-none
               outline-none transition-all duration-150;
    }
    .form-input:disabled {
        @apply bg-gray-50 text-gray-500 cursor-not-allowed;
    }
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1.5;
    }
    .form-error {
        @apply text-xs text-red-600 mt-1 font-medium;
    }

    /* ── Cards ────────────────────────────────── */
    .card {
        @apply bg-white rounded-xl border border-gray-100 shadow-sm;
    }
    .card-hover {
        @apply card hover:shadow-md hover:border-gray-200 transition-all duration-200;
    }

    /* ── Table ────────────────────────────────── */
    .table-header {
        @apply text-xs font-semibold text-gray-500 uppercase tracking-wider;
    }

    /* ── Sidebar (dark theme) ────────────────── */
    .sidebar {
        background: linear-gradient(to bottom,
            rgb(var(--sidebar-from)),
            rgb(var(--sidebar-via)),
            rgb(var(--sidebar-to))
        );
        @apply text-gray-300 flex flex-col;
    }
    .sidebar-link {
        @apply flex items-center gap-3 px-3 py-2 text-sm rounded-lg
               transition-all duration-150 text-gray-400
               hover:bg-white/5 hover:text-gray-200;
    }
    .sidebar-link > svg,
    .sidebar-link > .nav-icon {
        @apply transition-transform duration-200 ease-out;
    }
    .sidebar-link:hover > svg,
    .sidebar-link:hover > .nav-icon {
        transform: scale(1.18) rotate(-6deg);
    }
    .sidebar-link-active {
        @apply sidebar-link bg-primary-600/15 text-primary-400 font-medium
               shadow-sm;
    }
    .sidebar-link-active > svg,
    .sidebar-link-active > .nav-icon {
        @apply text-primary-400;
        animation: icon-bounce 0.4s ease-out;
    }
    .sidebar-child {
        @apply block px-3 py-1.5 text-sm rounded-md
               transition-all duration-150 text-gray-500
               hover:bg-white/5 hover:text-gray-300;
    }
    .sidebar-child-active {
        @apply sidebar-child bg-primary-600/10 text-primary-400 font-medium;
    }

    /* Light sidebar overrides */
    .sidebar-light-mode .sidebar-link {
        @apply text-gray-600 hover:bg-gray-100 hover:text-gray-900;
    }
    .sidebar-light-mode .sidebar-link-active {
        @apply bg-primary-50 text-primary-700 font-medium;
    }
    .sidebar-light-mode .sidebar-child {
        @apply text-gray-500 hover:bg-gray-100 hover:text-gray-800;
    }
    .sidebar-light-mode .sidebar-child-active {
        @apply bg-primary-50 text-primary-700 font-medium;
    }

    /* ── Topbar ───────────────────────────────── */
    .topbar {
        @apply bg-white/95 backdrop-blur-xl border-b border-gray-100
               px-4 sm:px-6 py-2.5 flex items-center gap-3 sticky top-0 z-30
               shadow-[0_1px_3px_rgba(0,0,0,0.04)];
    }

    /* ── Stat card ────────────────────────────── */
    .stat-card {
        @apply card p-5 relative overflow-hidden;
    }
    .stat-card::after {
        content: '';
        @apply absolute top-0 right-0 w-24 h-24 rounded-full opacity-5;
        transform: translate(30%, -30%);
    }
}

/* ── Print styles ─────────────────────────── */
@media print {
    .sidebar, .topbar, .btn, button, nav { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    main { padding: 0 !important; overflow: visible !important; }
}

/* ── Animations ───────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes icon-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.25) rotate(-8deg); }
    70% { transform: scale(0.95) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.2s ease-out; }