/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    @apply font-sans antialiased text-gray-100;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-500;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    @apply w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out;
}

/* Buttons */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 focus:ring-gray-500;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

/* Cards */
.card {
    @apply bg-gray-800 rounded-lg shadow-lg overflow-hidden;
}

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

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

/* Alerts */
.alert {
    @apply p-4 mb-4 rounded-lg;
}

.alert-success {
    @apply bg-green-900 text-green-100;
}

.alert-error {
    @apply bg-red-900 text-red-100;
}

.alert-info {
    @apply bg-blue-900 text-blue-100;
}

.alert-warning {
    @apply bg-yellow-900 text-yellow-100;
}

/* Tables */
.table {
    @apply min-w-full divide-y divide-gray-700;
}

.table th {
    @apply px-6 py-3 bg-gray-800 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300;
}

.table tr {
    @apply hover:bg-gray-800;
}

/* Custom Utilities */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
}

/* Custom animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Sci‑Fi UI Enhancements */
/* Fonts are loaded via <link> in base.html; here we map utility classes */
.font-display {
    font-family: 'Orbitron', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Cosmic Background */
.bg-cosmic {
    background-color: #0b1020; /* fallback */
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.0) 60%),
        radial-gradient(ellipse at 80% 0%, rgba(236,72,153,0.10) 0%, rgba(236,72,153,0.0) 55%),
        radial-gradient(ellipse at 10% 80%, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.0) 55%),
        radial-gradient(ellipse at 90% 85%, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0.0) 55%),
        linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(3,7,18,1) 100%);
}

/* Glassmorphism */
.glass {
    background-color: rgba(17, 24, 39, 0.65); /* gray-900 ~65% */
    backdrop-filter: blur(10px);
}

/* Neon Utilities */
.neon-text {
    text-shadow: 0 0 10px rgba(59,130,246,0.7), 0 0 20px rgba(168,85,247,0.5);
}

.neon-border {
    box-shadow: 0 0 0 1px rgba(99,102,241,0.25), inset 0 0 12px rgba(59,130,246,0.15);
}

.shadow-neon {
    box-shadow: 0 0 12px rgba(56,189,248,0.35), 0 0 24px rgba(168,85,247,0.25);
}

.hover-glow:hover {
    box-shadow: 0 0 0 1px rgba(99,102,241,0.35), 0 0 18px rgba(56,189,248,0.25), 0 0 36px rgba(168,85,247,0.2);
}

/* Accent Divider */
.accent-divider {
    background: linear-gradient(90deg, rgba(59,130,246,0.0) 0%, rgba(59,130,246,0.6) 20%, rgba(168,85,247,0.6) 80%, rgba(168,85,247,0.0) 100%);
    height: 1px;
}