@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

@layer base {
    :root {
        color-scheme: light dark;
    }

    * {
        @apply transition-colors duration-150;
    }

    body {
        @apply antialiased;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        @apply w-1.5 h-1.5;
    }
    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    ::-webkit-scrollbar-thumb {
        @apply rounded-full bg-primary-300 dark:bg-primary-800;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-primary-400 dark:bg-primary-700;
    }
}

@layer components {
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium
               transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply btn bg-primary-600 text-white hover:bg-primary-500 focus:ring-primary-500
               dark:bg-primary-700 dark:hover:bg-primary-600
               shadow-sm hover:shadow-glow-purple active:scale-95;
    }
    .btn-accent {
        @apply btn bg-accent-600 text-white hover:bg-accent-500 focus:ring-accent-500
               dark:bg-accent-700 dark:hover:bg-accent-600
               shadow-sm hover:shadow-glow-green active:scale-95;
    }
    .btn-ghost {
        @apply btn bg-transparent text-gray-600 hover:bg-gray-100 focus:ring-gray-400
               dark:text-gray-300 dark:hover:bg-white/10;
    }
    .btn-danger {
        @apply btn bg-red-600 text-white hover:bg-red-500 focus:ring-red-500 active:scale-95;
    }
    .btn-outline {
        @apply btn border border-primary-300 text-primary-700 hover:bg-primary-50 focus:ring-primary-400
               dark:border-primary-700 dark:text-primary-300 dark:hover:bg-primary-900/30;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }
    .btn-lg {
        @apply px-6 py-3 text-base;
    }

    /* Cards */
    .card {
        @apply bg-white dark:bg-surface-850 border border-gray-200/80 dark:border-white/5
               rounded-xl shadow-sm dark:shadow-none;
    }
    .card-header {
        @apply px-6 py-4 border-b border-gray-200/80 dark:border-white/5 flex items-center justify-between;
    }
    .card-body {
        @apply px-6 py-5;
    }

    /* Form inputs */
    .input {
        @apply w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900
               placeholder-gray-400 shadow-sm transition
               focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none
               dark:border-white/10 dark:bg-surface-800 dark:text-gray-100 dark:placeholder-gray-500
               dark:focus:border-primary-500 dark:focus:ring-primary-500/20;
    }
    select.input {
        @apply appearance-none bg-no-repeat;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }
    select.input option {
        @apply bg-white text-gray-900;
    }
    .dark select.input option {
        background-color: #1e1a2e;
        color: #e5e7eb;
    }
    .input-error {
        @apply border-red-400 focus:border-red-500 focus:ring-red-500/20
               dark:border-red-500/50 dark:focus:border-red-500;
    }
    .label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .badge-green {
        @apply badge bg-accent-100 text-accent-700 dark:bg-accent-900/40 dark:text-accent-400;
    }
    .badge-yellow {
        @apply badge bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400;
    }
    .badge-red {
        @apply badge bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400;
    }
    .badge-purple {
        @apply badge bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-400;
    }
    .badge-gray {
        @apply badge bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-gray-400;
    }

    /* Tables */
    .table-wrapper {
        @apply overflow-x-auto rounded-xl border border-gray-200/80 dark:border-white/5;
    }
    .table {
        @apply min-w-full divide-y divide-gray-200/80 dark:divide-white/5;
    }
    .table thead {
        @apply bg-gray-50 dark:bg-white/3;
    }
    .table th {
        @apply px-5 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider;
    }
    .table tbody {
        @apply divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-surface-850;
    }
    .table tr {
        @apply hover:bg-gray-50/80 dark:hover:bg-white/3 transition-colors;
    }
    .table td {
        @apply px-5 py-3.5 text-sm;
    }

    /* Alert */
    .alert-success {
        @apply flex items-start gap-3 p-4 rounded-xl bg-accent-50 border border-accent-200
               text-accent-800 dark:bg-accent-900/20 dark:border-accent-700/30 dark:text-accent-300;
    }
    .alert-error {
        @apply flex items-start gap-3 p-4 rounded-xl bg-red-50 border border-red-200
               text-red-800 dark:bg-red-900/20 dark:border-red-700/30 dark:text-red-300;
    }

    /* Stat cards */
    .stat-card {
        @apply card p-5 flex items-center gap-4 hover:shadow-md dark:hover:border-primary-800/50 transition-all;
    }
    .stat-icon {
        @apply w-12 h-12 rounded-xl flex items-center justify-center text-xl flex-shrink-0;
    }

    /* CLI terminal */
    .terminal {
        @apply bg-surface-950 dark:bg-black/50 rounded-xl border border-white/5
               font-mono text-sm leading-relaxed overflow-auto;
    }

    /* Nav link */
    .nav-link {
        @apply px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150;
    }
    .nav-link-active {
        @apply bg-primary-600/20 text-primary-300 dark:text-primary-300;
    }
    .nav-link-inactive {
        @apply text-gray-400 hover:text-gray-200 hover:bg-white/8;
    }

    /* Sidebar separator */
    .section-title {
        @apply text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 px-3 mb-2;
    }
}

@layer utilities {
    .bg-white\/3  { background-color: rgba(255,255,255,0.03); }
    .bg-white\/8  { background-color: rgba(255,255,255,0.08); }
    .text-balance { text-wrap: balance; }

    /* Gradient text */
    .text-gradient {
        @apply bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent;
    }

    /* Glass effect */
    .glass {
        @apply bg-white/70 dark:bg-surface-850/80 backdrop-blur-md;
    }
}