@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* ═══════════════════════════════════════════
   HELIUMPW UNIFIED DESIGN SYSTEM
   Warm Dark + Gold Theme
═══════════════════════════════════════════ */

@layer base {
    /* === BASE STYLES === */
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-dark-950 text-warm-300 antialiased;
        font-family: 'Lato', sans-serif;
    }

    /* === SCROLLBAR === */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #0a0705; }
    ::-webkit-scrollbar-thumb { background: #3a2e24; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #6b5d4a; }

    /* === SELECTION === */
    ::selection {
        background: rgba(201, 168, 62, 0.3);
        color: #f5eccc;
    }

    /* === HIDE ALPINE UNTIL READY === */
    [x-cloak] { display: none !important; }
}

@layer components {
    /* ═══════════════════════════════════════
       GLASS MORPHISM
    ═══════════════════════════════════════ */
    .glass {
        background: rgba(10, 7, 5, 0.75);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
    }

    .glass-card {
        @apply rounded-xl border;
        background: rgba(26, 20, 16, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-color: rgba(150, 134, 104, 0.08);
    }

    .glass-nav {
        background: rgba(5, 3, 2, 0.95);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    /* ═══════════════════════════════════════
       GLOW EFFECTS
    ═══════════════════════════════════════ */
    .glow-gold {
        box-shadow: 0 0 20px rgba(201, 168, 62, 0.08);
    }

    .glow-gold-hover:hover {
        box-shadow: 0 0 25px rgba(201, 168, 62, 0.15);
    }

    /* ═══════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════ */
    .btn-gold {
        @apply inline-flex items-center gap-2 px-5 py-2.5 text-sm font-nav font-bold uppercase tracking-wider
               text-dark-950 bg-gradient-to-r from-gold-300 to-gold-500 rounded-lg
               border border-gold-400/50 shadow-lg shadow-gold-500/20
               hover:shadow-gold-400/40 hover:from-gold-200 hover:to-gold-400
               transition-all hover:-translate-y-0.5;
    }

    .btn-gold-ghost {
        @apply inline-flex items-center gap-2 px-5 py-2 text-sm font-nav font-bold uppercase tracking-wider
               text-gold-300 border border-gold-500/40 rounded-lg
               hover:bg-gold-600/10 hover:border-gold-400/60 transition-all;
    }

    .btn-dark {
        @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
               text-warm-300 bg-dark-800 border border-dark-700/50 rounded-lg
               hover:text-white hover:border-dark-600 transition-colors;
    }

    /* ═══════════════════════════════════════
       SIDEBAR (Admin/App/GM)
    ═══════════════════════════════════════ */
    .sidebar-link {
        @apply flex items-center gap-3 px-5 py-2.5 text-sm font-medium
               text-dark-300 rounded-r-lg transition-all duration-200
               border-l-3 border-transparent;
    }

    .sidebar-link:hover {
        @apply text-warm-200 bg-gold-500/5;
    }

    .sidebar-link.active {
        @apply text-gold-300 bg-gold-500/10 border-gold-400;
    }

    .sidebar-link.active .sidebar-icon {
        @apply text-gold-400;
    }

    .sidebar-icon {
        @apply w-5 text-center text-dark-500 text-xs;
    }

    /* ═══════════════════════════════════════
       STAT CARDS
    ═══════════════════════════════════════ */
    .stat-card {
        @apply glass-card p-5 transition-all duration-300;
    }

    .stat-card:hover {
        @apply -translate-y-0.5;
        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
    }

    /* ═══════════════════════════════════════
       FORM INPUTS
    ═══════════════════════════════════════ */
    .input-dark {
        @apply w-full bg-dark-800 border border-dark-700/50 rounded-lg px-4 py-2.5
               text-sm text-warm-300 placeholder-dark-500
               focus:outline-none focus:border-gold-500/40 focus:ring-1 focus:ring-gold-500/20
               transition-colors;
    }

    .select-dark {
        @apply w-full bg-dark-800 border border-dark-700/50 rounded-lg px-4 py-2.5
               text-sm text-warm-300
               focus:outline-none focus:border-gold-500/40 focus:ring-1 focus:ring-gold-500/20
               transition-colors;
    }

    /* ═══════════════════════════════════════
       TABLE STYLES
    ═══════════════════════════════════════ */
    .table-dark {
        @apply w-full;
    }

    .table-dark thead th {
        @apply text-left text-2xs font-bold uppercase tracking-widest text-dark-500 pb-3 border-b border-dark-700/30;
    }

    .table-dark tbody td {
        @apply py-3 text-sm text-warm-300;
    }

    .table-dark tbody tr {
        @apply border-b border-dark-700/20 hover:bg-dark-800/40 transition-colors;
    }

    /* ═══════════════════════════════════════
       BADGES
    ═══════════════════════════════════════ */
    .badge-success {
        @apply inline-flex items-center gap-1 text-2xs font-bold uppercase tracking-wider
               text-green-400 bg-green-500/10 px-2 py-0.5 rounded-full;
    }

    .badge-danger {
        @apply inline-flex items-center gap-1 text-2xs font-bold uppercase tracking-wider
               text-red-400 bg-red-500/10 px-2 py-0.5 rounded-full;
    }

    .badge-warning {
        @apply inline-flex items-center gap-1 text-2xs font-bold uppercase tracking-wider
               text-yellow-400 bg-yellow-500/10 px-2 py-0.5 rounded-full;
    }

    .badge-gold {
        @apply inline-flex items-center gap-1 text-2xs font-bold uppercase tracking-wider
               text-gold-400 bg-gold-500/10 px-2 py-0.5 rounded-full;
    }

    /* ═══════════════════════════════════════
       SECTION DIVIDER
    ═══════════════════════════════════════ */
    .section-divider {
        @apply h-px bg-gradient-to-r from-transparent via-gold-400/20 to-transparent;
    }

    /* ═══════════════════════════════════════
       PORTAL SPECIFIC
    ═══════════════════════════════════════ */
    .portal-shell {
        background:
            radial-gradient(circle at 70% 0%, rgba(139, 26, 26, .18), transparent 30rem),
            radial-gradient(circle at 20% 8%, rgba(201, 168, 76, .13), transparent 28rem),
            linear-gradient(180deg, #0a0705 0%, #100c08 48%, #0a0505 100%);
    }

    .news-card {
        @apply glass-card overflow-hidden transition-all duration-300;
    }

    .news-card:hover {
        @apply border-gold-500/20;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 168, 62, 0.06);
    }

    /* ═══════════════════════════════════════
       SHIMMER ANIMATION
    ═══════════════════════════════════════ */
    .shimmer {
        background-size: 200% 100%;
        animation: shimmer 2s linear infinite;
    }

    /* ═══════════════════════════════════════
       UTILITY: BORDER LEFT 3px
    ═══════════════════════════════════════ */
    .border-l-3 {
        border-left-width: 3px;
    }
}