@import "tailwindcss";
@source "../../themes/**/*.blade.php";
@source "../views/**/*.blade.php";
@source "../../app/Modules/**/*.blade.php";

@theme {
    /* Fonts */
    --font-sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;

    /* Dynamic Theme Mapper */
    --color-bg-main: var(--bg-main);
    --color-surface-primary: var(--surface-primary);
    --color-surface-secondary: var(--surface-secondary);
    --color-border-subtle: var(--border-subtle);

    /* Brand Emerald Glow */
    --color-brand-200: #A7F3D0;
    --color-brand-300: #6EE7B7;
    --color-brand-400: #34D399;
    --color-brand-500: #10B981;
    --color-brand-600: #059669;

    /* Premium Button System Tokens */
    --color-premium-emerald: #065f46;
    --color-premium-emerald-hover: #059669;
    --color-premium-glow: rgba(16, 185, 129, 0.4);
    
    /* Animation Tokens */
    --animate-float: float 6s ease-in-out infinite;
    --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    /* Text Colors */
    --color-text-base: var(--text-base);
    --color-text-muted: var(--text-muted);
    --color-text-dim: var(--text-dim);

    /* Grid & Auth Specific */
    --color-auth-bg: var(--auth-bg);
    --auth-grid-line: var(--grid-line);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@utility animate-float {
    animation: var(--animate-float);
}

@utility animate-shimmer {
    animation: shimmer 4s infinite linear;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@utility animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- THEME ARCHITECTURE (SLATE REFINEMENT) --- */
@layer base {
    :root {
        color-scheme: light;
        --bg-main: #f8fafc;
        --surface-primary: #ffffff;
        --surface-secondary: #f1f5f9;
        --border-subtle: rgba(0, 0, 0, 0.05);
        --text-base: #0f172a;
        --text-muted: #475569;
        --text-dim: #94a3b8;
        --input-bg: #ffffff;
        --scroll-thumb: rgba(0, 0, 0, 0.1);
        --auth-bg: #f8fafc;
        --grid-line: rgba(15, 23, 42, 0.04);
    }

    .dark { 
        color-scheme: dark;
        --bg-main: #0b0f17; /* High-end Deep Slate, not too black */
        --surface-primary: rgba(255, 255, 255, 0.03); /* Translucent depth */
        --surface-secondary: #0e121b;
        --border-subtle: rgba(255, 255, 255, 0.06);
        --text-base: #f8fafc;
        --text-muted: #94a3b8;
        --text-dim: #64748b;
        --input-bg: rgba(255, 255, 255, 0.02);
        --scroll-thumb: rgba(255, 255, 255, 0.06);
        --auth-bg: #0b0f17;
        --grid-line: rgba(248, 250, 252, 0.08);
    }

    body {
        font-family: var(--font-sans);
        background-color: var(--bg-main);
        color: var(--text-base);
        -webkit-font-smoothing: antialiased;
    }

    /* Global Select Dropdown Fix — FORCED FOR DARK MODE */
    select {
        color-scheme: dark !important;
    }

    select option {
        background-color: #111118 !important; /* Extremely dark slate */
        color: #ffffff !important;
        padding: 12px !important;
    }

    /* Target specific classes that might be used */
    .form-select option,
    .filter-select option,
    .sel option {
        background-color: #111118 !important;
        color: #ffffff !important;
    }

    /* Ensure dropdowns look consistent in both themes */
    :root:not(.dark) select option {
        background-color: #ffffff !important;
        color: #0f172a !important;
    }

    *, ::after, ::before {
        border-color: var(--border-subtle);
    }

    /* --- PREMIUM BLOG TYPOGRAPHY --- */
    .blog-content {
        line-height: 1.85;
        font-size: 1.15rem;
        color: var(--text-muted);
        letter-spacing: -0.011em;
    }

    .blog-content h1, .blog-content h2, .blog-content h3 {
        color: var(--text-base);
        font-weight: 800;
        line-height: 1.2;
        margin-top: 3.5rem;
        margin-bottom: 1.5rem;
        letter-spacing: -0.04em;
    }

    .blog-content h2 { font-size: 2.25rem; }
    .blog-content h3 { font-size: 1.75rem; }

    .blog-content p {
        margin-bottom: 2rem;
    }

    .blog-content strong {
        color: var(--text-base);
        font-weight: 700;
    }

    .blog-content ul, .blog-content ol {
        margin-bottom: 2.5rem;
        padding-left: 1.5rem;
    }

    .blog-content li {
        margin-bottom: 1rem;
        position: relative;
    }

    .blog-content ul li::before {
        content: "•";
        color: var(--color-brand-500);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }
}

/* --- GLOBAL AUTOMATIC RESPONSIVENESS --- */
@layer components {
    @media (max-width: 768px) {
        /* Standard Page Container */
        .pg, [class*="page-container"] { 
            padding: 15px !important; 
            width: 100% !important;
            max-width: 100vw !important;
            overflow-x: hidden !important;
        }
        
        /* Grid Layouts */
        .layout, .ct-layout, .grid-layout { 
            display: flex !important;
            flex-direction: column !important;
            grid-template-columns: 1fr !important; 
            gap: 20px !important; 
        }
        
        /* Sidebar & Main Columns */
        .side-col, .ct-side-col, .form-sidebar, [class*="sidebar-col"] { 
            width: 100% !important; 
            order: 2 !important; 
            margin-top: 0 !important;
        }
        
        .main-col, .ct-main-col, [class*="main-col"] {
            width: 100% !important;
            order: 1 !important;
        }

        /* Cards */
        .card, .stat-card, [class*="card-container"] { 
            padding: 15px !important; 
            border-radius: 12px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
        }

        /* Form Grids & Stats */
        .fg2, .fg3, .form-grid, .form-grid-2, .form-grid-3, .stats { 
            display: grid !important;
            grid-template-columns: 1fr !important; 
            gap: 15px !important; 
        }
        
        /* Page Headers */
        .ph, .page-header {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 15px !important;
            padding: 0 !important;
        }
        
        .ph div, .page-header div {
            width: 100% !important;
        }
        
        .ph-title, .page-title {
            font-size: 20px !important;
        }

        /* Tab Navigation Scroll */
        .tab-nav, [class*="tab-list"] {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            gap: 5px !important;
            padding: 5px !important;
        }
        
        .tab-nav::-webkit-scrollbar, [class*="tab-list"]::-webkit-scrollbar {
            display: none !important;
        }
        
        .tab-btn, [class*="tab-item"] {
            white-space: nowrap !important;
            min-width: max-content !important;
            flex-shrink: 0 !important;
        }

        /* Global Input Fixes */
        input, select, textarea {
            font-size: 16px !important; /* Prevent iOS zoom */
        }
    }
}