/**
 * VedaCAD Global Style Foundation
 * File Location: assets/styles/base.css
 * Responsibilities: Vendor font mounting, Tailwind macro injection, SaaS-grade cross-platform scrollbars, 
 * device responsiveness, GPU acceleration, and Dark Mode defense lines.
 */

/* ==========================================================================
   📦 Phase 0: Local Infrastructure Asset Imports (Vendor Imports)
   ========================================================================== */
/* Globally mount RemixIcon, physical path aligned with Edge Router pass-through rules */
@import url('/assets/vendors/fonts/remixicon.css');

/* Inject Tailwind CSS core engines */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   🧱 Phase 1: Global Physics Rules & Absolute Dark Mode Defense (Base Layer)
   ========================================================================== */
@layer base {
  :root {
    /* Force native browser controls (calendars, dropdowns, etc.) to strictly follow the class-based theme to prevent OS-level overrides */
    color-scheme: light;
  }
  
  .dark {
    color-scheme: dark;
  }

  /* --- Root Node & Smooth Scrolling Infrastructure --- */
  html {
    /* [Core Defense]: Pre-allocate scrollbar space, completely eliminating horizontal layout shifts caused by Modal popups */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent; 
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Prevent iOS double-tap to zoom, ensuring an App-like native experience */
    touch-action: manipulation;
    
    /* Prevent font size mutation during mobile landscape/portrait transitions */
    -webkit-text-size-adjust: 100%;
    
    /* Global anchor smooth scrolling experience */
    scroll-behavior: smooth;
    
    /* Establish the global modern SaaS font stack (bypassing certain systems' default serif fonts) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  html.dark {
    scrollbar-color: #374151 transparent; 
  }

  /* --- Mobile Explosion Prevention & Visual Containment --- */
  * {
    /* Completely eliminate the native blue flashing rectangle when tapping buttons on mobile. Visual feedback is handed over to CSS Hover */
    -webkit-tap-highlight-color: transparent;
  }

  body {
    /* Solidify background: soft gray for light mode, pure CAD black (#0a0a0a) for dark mode */
    @apply bg-gray-50 text-gray-900 dark:bg-[#0a0a0a] dark:text-gray-100;
    
    /* Global smooth transition to prevent abrupt flashes when switching between dark/light modes */
    @apply transition-colors duration-300 ease-in-out;
    
    /* Eliminate horizontal layout jumping during route switching. Works in tandem with scrollbar-gutter to form a double shield */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* [Core Patch]: iOS Webview Ultimate Viewport Defense */
  @supports (-webkit-touch-callout: none) {
    body {
      min-height: -webkit-fill-available;
    }
  }

  /* --- Text Selection Highlight Defense --- */
  ::selection {
    @apply bg-indigo-500/30 text-indigo-900;
  }
  html.dark ::selection {
    @apply bg-indigo-500/40 text-indigo-100;
  }

  /* --- Vision Protection: Dark Mode Image Comfort Filter --- */
  /* Automatically reduce image brightness in dark mode to prevent glaring white backgrounds. Adding .no-filter grants immunity. */
  html.dark img:not(.no-filter) {
    filter: brightness(0.85) contrast(1.1);
    @apply transition-all duration-300;
  }
  html.dark img:not(.no-filter):hover {
    filter: brightness(1) contrast(1); /* Restore original state on hover */
  }

  /* --- Native Dialog Backdrop Dark Mode Adaptation --- */
  html.dark dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
  }

  /* --- Form Interaction Infrastructure & WCAG Accessibility Fallback --- */
  input, select, textarea, button {
    outline: none !important; /* Primarily block browser default highlights */
  }
  
  /* [Core Defense]: If a frontend component misses the focus-visible:ring class, this fallback ensures keyboard Tab navigators don't get lost */
  :focus-visible {
    outline: 2px solid #4f46e5 !important;
    outline-offset: 2px !important;
  }

  /* --- Form Defense Line A: Force iOS input field font anti-zooming --- */
  input, select, textarea {
    font-size: 16px !important;
  }
  @media (min-width: 768px) {
    input, select, textarea {
      font-size: inherit !important;
    }
  }

  /* --- Form Defense Line B: Completely eradicate Chrome's autofill white/yellow background --- */
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #111827 !important; 
    transition: background-color 5000s ease-in-out 0s;
  }

  html.dark input:-webkit-autofill,
  html.dark input:-webkit-autofill:hover, 
  html.dark input:-webkit-autofill:focus, 
  html.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1f2937 inset !important; 
    -webkit-text-fill-color: #f3f4f6 !important; 
    transition: background-color 5000s ease-in-out 0s;
    /* Ensure cursor color remains clearly visible in dark mode autofill states */
    caret-color: #f3f4f6 !important;
  }

  /* [Core Patch]: WCAG Vestibular Disorder Protection */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto !important;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   🛠️ Phase 2: Responsiveness & High-Frequency Utility Macro Injections
   ========================================================================== */
@layer utilities {
  
  /* --- Mobile Responsive Defense (The Mobile Screen Fix) --- */
  .min-h-screen-safe {
    min-height: 100vh;
    min-height: 100dvh; /* Perfectly bypass Safari bottom toolbar obstruction */
  }
  
  .h-screen-safe {
    height: 100vh;
    height: 100dvh;
  }

  /* Safety Area Padding to adapt to iPhone notches and home indicators */
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
  .pt-safe { padding-top: env(safe-area-inset-top); }
  .pl-safe { padding-left: env(safe-area-inset-left); }
  .pr-safe { padding-right: env(safe-area-inset-right); }

  /* --- SaaS-Grade Global Webkit Custom Scrollbars --- */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300/80 rounded-full transition-colors;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
  
  html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-700/80;
  }
  html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
  
  html::-webkit-scrollbar {
    width: 8px;
  }
  html::-webkit-scrollbar-track {
    background: transparent;
  }
  html::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  html::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }

  html.dark::-webkit-scrollbar-thumb {
    @apply bg-gray-800;
  }
  html.dark::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-700;
  }

  /* --- Glassmorphism Infrastructure (GPU Accelerated) --- */
  .glass-panel {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    z-index: 50;
    /* [Core Defense]: Force enable GPU hardware acceleration layers, preventing frame drops on older enterprise PCs when scrolling massive dictionaries */
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
  }
  .dark .glass-panel {
    background-color: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
  }
  @supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
    .glass-panel {
      background-color: rgba(255, 255, 255, 0.35);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
    }
    .dark .glass-panel {
      background-color: rgba(10, 10, 10, 0.35);
    }
  }

  /* --- Geek-Exclusive Monospace Font --- */
  .font-mono-geek {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  }

  /* --- Absolute Text Truncation Defense --- */
  .text-truncate-safe {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   🎬 Phase 3: Global Skeleton Animations & Print Shields (Keyframes & Print Media)
   ========================================================================== */

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Cyberpunk scanline interference effect */
.glitch-overlay {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

/* --- VedaCAD / J11 Unified Drawer UI Transitions --- */

/* Drawer Overlay Fade */
.drawer-fade-enter-active, .drawer-fade-leave-active {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-fade-enter-from, .drawer-fade-leave-to {
  opacity: 0;
}
.drawer-fade-enter-to, .drawer-fade-leave-from {
  opacity: 1;
}

/* Drawer Panel Slide (J11 Spring Damper) */
.drawer-slide-enter-active, .drawer-slide-leave-active {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-slide-enter-from, .drawer-slide-leave-to {
  /* Translate fully off-screen, adding 2rem to account for right-4 margins */
  transform: translateX(calc(100% + 2rem));
}
.drawer-slide-enter-to, .drawer-slide-leave-from {
  transform: translateX(0);
}

/* --- Enterprise Compliance Print Shield (The Toner Saver) --- */
@media print {
  html, body {
    /* Force physical black text on white background, overriding user dark mode to save enterprise toner */
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  
  /* [Core Defense]: Not only hide navbars but forcibly uproot all Toasts, modal backdrops, and system notification layers to avoid printing a solid black page */
  .glass-panel, button, .custom-scrollbar, [role="dialog"], .fixed {
    display: none !important;
  }
  
  /* Break all scroll restrictions, ensuring documentary evidence and logs can be fully printed across multiple pages */
  body, .overflow-y-auto, .overflow-y-scroll, .overflow-x-auto, .overflow-x-scroll {
    overflow: visible !important;
    height: auto !important;
  }
}