thrillwiki_laravel/resources/css/app.css

@import 'alerts.css';

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

/* Custom base styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply font-sans text-gray-900 bg-white dark:text-gray-100 dark:bg-gray-900 transition-colors duration-200;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold text-gray-900 dark:text-white;
    }
}

/* Custom components */
@layer components {
    /* Navigation */
    .nav-link {
        @apply flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200
               text-gray-600 hover:text-primary-600 hover:bg-gray-100
               dark:text-gray-300 dark:hover:text-primary-400 dark:hover:bg-gray-800;
    }

    .nav-link.active {
        @apply text-primary-600 bg-primary-50 dark:text-primary-400 dark:bg-gray-800;
    }

    .site-logo {
        @apply text-2xl font-bold text-primary-600 dark:text-primary-400;
    }

    /* Menu Items */
    .menu-item {
        @apply flex items-center gap-3 px-4 py-2 rounded-lg transition-all duration-200
               text-gray-600 hover:text-primary-600 hover:bg-gray-100
               dark:text-gray-300 dark:hover:text-primary-400 dark:hover:bg-gray-800;
    }

    /* Forms */
    .form-input {
        @apply w-full px-4 py-2 rounded-lg transition-all duration-200
               text-gray-900 bg-white border border-gray-200 
               focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20
               dark:text-gray-100 dark:bg-gray-800 dark:border-gray-700
               dark:focus:border-primary-400 dark:focus:ring-primary-400/20
               disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .form-label {
        @apply block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300;
    }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold
               transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed
               focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
    }

    .btn-primary {
        @apply btn bg-gradient-to-r from-primary-600 to-primary-500 text-white
               hover:from-primary-700 hover:to-primary-600
               focus:ring-primary-500/50
               dark:from-primary-500 dark:to-primary-400
               dark:hover:from-primary-600 dark:hover:to-primary-500;
    }

    .btn-secondary {
        @apply btn bg-white text-gray-700 border border-gray-200
               hover:bg-gray-50 hover:text-gray-900
               focus:ring-gray-500/50
               dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700
               dark:hover:bg-gray-700 dark:hover:text-gray-100;
    }

    /* Cards */
    .card {
        @apply bg-white border border-gray-200 rounded-lg shadow-sm
               dark:bg-gray-800 dark:border-gray-700;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
    }

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

    .card-footer {
        @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700;
    }
}

/* Custom utilities */
@layer utilities {
    .text-gradient {
        @apply text-transparent bg-clip-text bg-gradient-to-r 
               from-primary-600 to-secondary-500
               dark:from-primary-400 dark:to-secondary-400;
    }

    .bg-gradient {
        @apply bg-gradient-to-r from-primary-600 to-secondary-500
               dark:from-primary-500 dark:to-secondary-400;
    }
}