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

@layer components {
    .card {
        @apply bg-white dark:bg-gray-800 shadow-sm rounded-xl border border-gray-100 dark:border-gray-700;
    }

    /* Prevent elastic scrolling (pull-down effect) on native */
    html, body {
        overscroll-behavior-y: none;
    }

    /* =========================================
       NATIVE SCANNER TRANSPARENCY
       
       HOW IT WORKS:
       1. Camera renders BEHIND the WebView (native layer)
       2. We make all page backgrounds TRANSPARENT so camera shows through
       3. The #scanner element uses massive box-shadow to create an 
          OPAQUE "mask" everywhere EXCEPT the scanner hole
       4. The hole itself has no background, allowing camera to show
       ========================================= */
       
    html.is-native-scanning,
    body.is-native-scanning {
        background-color: transparent !important;
    }

    /* 1. Global Transparency - ALL page layers must be transparent */
    body.is-native-scanning #scan-wrapper, 
    body.is-native-scanning .min-h-screen,
    body.is-native-scanning main, 
    body.is-native-scanning #app,
    body.is-native-scanning #scanner-card {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* 2. Hide Decorative Elements */
    body.is-native-scanning .blur-3xl {
        display: none !important;
    }
    
    /* 3. Force Hide Placeholder (Icon) */
    body.is-native-scanning #scanner-placeholder {
        display: none !important;
    }

    /* 4. THE SCANNER HOLE - Creates visible mask with transparent center */
    body.is-native-scanning #scanner {
        background-color: transparent !important;
        position: relative;
        z-index: 10;
        border-radius: 1rem !important;
        /* CRITICAL: This massive box-shadow creates the OPAQUE mask around the hole */
        /* Light mode: white mask - FULLY OPAQUE */
        box-shadow: 0 0 0 9999px #ffffff !important;
        outline: none !important;
        border: 2px solid rgba(59, 130, 246, 0.5) !important;
    }

    .dark body.is-native-scanning #scanner {
        /* Dark mode: dark gray mask - FULLY OPAQUE */
        box-shadow: 0 0 0 9999px #1f2937 !important;
        border: 2px solid rgba(59, 130, 246, 0.5) !important;
    }

    /* 5. Hide Web Video (Only on Native) */
    body.is-native-scanning #scanner video {
        display: none !important; 
    }
    
    /* 6. Force Web Video Object Fit */
    #scanner video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 1rem;
    }

    /* 7. RESTORE HEADER/FOOTER VISIBILITY */
    /* Access classes added in scanner-card.blade.php */
    body.is-native-scanning .scanner-header,
    body.is-native-scanning .scanner-footer {
        background-color: #fff !important;
        position: relative;
        z-index: 60 !important;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 0.5rem;
    }
    
    .dark body.is-native-scanning .scanner-header,
    .dark body.is-native-scanning .scanner-footer {
        background-color: #1f2937 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* 8. GLOBAL APP HEADER FIX */
    body.is-native-scanning nav, 
    body.is-native-scanning header {
        position: fixed !important; 
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 70 !important;
        background-color: #fff !important; 
        padding-top: env(safe-area-inset-top) !important;
        box-sizing: content-box !important;
    }
    
    /* Ensure content is not hidden behind the fixed header */
    body.is-native-scanning main {
        /* Reduced to 0.1rem to minimalize gap, pushing title right against navbar */
        padding-top: calc(0.1rem + env(safe-area-inset-top)) !important;
    }

    /* Adjust main wrapper - reduce top margin, full width */
    body.is-native-scanning main > div {
        padding-top: 0 !important; 
        margin-top: 0 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    /* 9. DISABLE PULL-TO-REFRESH during native scanning */
    body.is-native-scanning {
        touch-action: pan-y !important; /* Allow vertical scroll */
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Allow scroll if content is long */
    }
    
    /* Force hide pulltorefresh element if it exists */
    body.is-native-scanning .ptr--ptr,
    body.is-native-scanning .ptr--box {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 10. AGGRESSIVE SPACING RESET for Native Scanning */
    body.is-native-scanning #scan-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    body.is-native-scanning #scan-wrapper > div {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Target py-6 utility class */
    body.is-native-scanning .py-6,
    body.is-native-scanning .py-4,
    body.is-native-scanning .pt-6,
    body.is-native-scanning .pt-4 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Target space-y gap utilities */
    body.is-native-scanning .space-y-4 > * + *,
    body.is-native-scanning .space-y-6 > * + * {
        margin-top: 0.5rem !important;
    }
    
    .dark body.is-native-scanning nav, 
    .dark body.is-native-scanning header {
        background-color: #1f2937 !important;
    }
    
    /* =========================================
       WEB SCANNER (Standard)
       ========================================= */ 
    
    /* Ensure strict square shape for Web Scanner */
    .scanner-container {
        aspect-ratio: 1 / 1 !important;
        max-height: 80vh; 
        width: 100% !important;
        overflow: hidden !important;
    }
}

@layer utilities {
    .pulse-dot {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    @keyframes scaleIn {
        0% { transform: scale(0); opacity: 0; }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); opacity: 1; }
    }
    @keyframes slideDown {
        0% { transform: translateY(-20px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }
    /* Provide utility classes if not using arbitrary values */
    .animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .animate-slide-down { animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

    /* Mosallas-Group Pull To Refresh Port */
    .refresh-container {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        transition: margin-top 0.2s; /* Faster for native feel */
        margin-top: -50px; /* Hide initially */
        position: fixed; /* Fixed to viewport to avoid static flow issues */
        top: 0; 
        left: 0; right: 0;
        z-index: 9999; /* Ensure high z-index above header */
        pointer-events: none; /* Don't block clicks when hidden */
    }
    
    .refresh-container.load-init,
    .refresh-container.load-start {
        pointer-events: auto; /* Allow interaction if needed, or keep none */
    }

    .refresh-container .spinner {
        width: 30px;
        height: 30px;
        z-index: 52; /* Above ripple */
        transition: transform 0.2s;
        color: #0430e2; /* Initial color */
    }

    .refresh-container.load-init .spinner * {
        color: #ffffff; /* White on blue bg */
    }

    .refresh-container.load-init::after {
        content: "";
        background-color: #0430e2;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        position: absolute;
        z-index: 51;
        transition: 0.5s; /* Smooth fill */
    }

    .refresh-container.load-start .spinner {
        animation: spin 0.5s linear infinite;
    }

    .refresh-container.load-start .spinner * {
        color: #000000; /* Black on expanded? Or stick to white if blue expands? */
        /* Mosallas original turns black on load start? Let's verify visual intent */
    }

    .refresh-container.load-start::after {
        content: "";
        background-color: #3b82f6; /* Tailwind Blue 500 */
        transform: scale(20); /* Expand to fill screen */
        opacity: 0.1; /* Make it subtle overlay instead of full block */
        z-index: 49;
        transition: transform 0.5s ease-out, opacity 0.5s;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
    }

    /* Indeterminate Progress Bar */
    .animate-progress-indeterminate {
        animation: progress-indeterminate 1.5s infinite linear;
        transform-origin: 0% 50%;
    }

    @keyframes progress-indeterminate {
        0% { transform: translateX(0) scaleX(0); }
        40% { transform: translateX(0) scaleX(0.4); }
        100% { transform: translateX(100%) scaleX(0.5); }
    }
}


    /* Tom Select Dark Mode Overrides */
    .dark .ts-control, 
    .dark .ts-control input {
        @apply bg-gray-900 border-gray-700 text-gray-100;
    }
    
    .dark .ts-wrapper.focus .ts-control {
        @apply border-primary-500 ring-primary-500 ring-2 ring-opacity-50 !important;
    }

    .dark .ts-dropdown {
        @apply bg-gray-800 border-gray-700 text-gray-100;
    }
    
    .dark .ts-dropdown .option:not(.disabled):hover,
    .dark .ts-dropdown .option.active {
        @apply bg-gray-700/50 text-white;
    }
    
    .dark .ts-dropdown .option[data-selectable] {
        @apply text-gray-300;
    }