/* =====================================================
   TranslateConnect Pro - Mobile Responsive Styles
   Comprehensive mobile-first responsive framework
   ===================================================== */

/* Reset & Base Mobile Styles */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Prevent horizontal scroll on mobile */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* iPhone Safe Areas for Notch and Home Indicator */
@supports (padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  
  .container,
  .dashboard-container,
  .main-content {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
  
  .fixed-bottom,
  .bottom-nav {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Ensure all images are responsive */
img,
video,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

/* Make tables responsive */
table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ==============================================
   MOBILE BREAKPOINTS
   ============================================== */

/* Dynamic Phone Optimizations - Fluid Scaling */
/* Import responsive variables for fluid units */
@import url('responsive-variables.css');

/* Small to Medium Phones (320px - 480px) - Continuous Scaling */
@media (max-width: 480px) {
  body {
    font-size: var(--fs-base) !important;
    line-height: var(--lh-normal);
  }
  
  /* Dynamic element spacing */
  .card,
  .section,
  .panel {
    margin-bottom: var(--spacing-md) !important;
    padding: var(--padding-card) !important;
    border-radius: var(--radius-md);
  }
  
  /* Navigation items with fluid spacing */
  .nav-item,
  .menu-item,
  .list-item {
    padding: clamp(0.625rem, 2.5vw, 1rem) !important;
    margin-bottom: var(--spacing-xs) !important;
    min-height: var(--touch-min);
  }
  
  /* Form elements with dynamic sizing */
  input,
  select,
  textarea {
    padding: clamp(0.625rem, 2.5vw, 0.875rem) !important;
    margin-bottom: var(--spacing-sm) !important;
    font-size: max(16px, var(--fs-base)) !important; /* Prevent iOS zoom */
    min-height: var(--input-height);
  }
  
  /* Dynamic container padding */
  .container {
    padding: var(--container-padding-y) var(--container-padding-x) !important;
  }
  
  /* Fluid touch targets */
  .btn,
  button {
    padding: var(--button-padding-y) var(--button-padding-x) !important;
    font-size: var(--fs-button) !important;
    min-height: var(--button-height);
  }
}

/* Continuous Scaling for All Screen Sizes */
/* Typography with fluid scaling */
body {
  font-size: var(--fs-base) !important;
  line-height: var(--lh-normal);
}

h1 {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-normal);
}

h4 { font-size: var(--fs-h4) !important; }
h5 { font-size: var(--fs-h5) !important; }
h6 { font-size: var(--fs-h6) !important; }

/* Container with dynamic padding */
.container,
.section,
.content {
  padding-left: var(--container-padding-x) !important;
  padding-right: var(--container-padding-x) !important;
  padding-top: var(--container-padding-y) !important;
  padding-bottom: var(--container-padding-y) !important;
}

/* Navigation logo with fluid sizing */
.nav-logo {
  font-size: clamp(0.875rem, 3.5vw, 1.25rem) !important;
  max-width: clamp(140px, 40vw, 220px) !important;
}

/* Mobile-First Base Styles - Fluid by Default */
@media (max-width: 768px) {
  /* Grid systems - single column on phones */
  [class*="grid"],
  [class*="cols"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important; /* Increased gap for better spacing */
  }
  
  /* Flex containers */
  .flex,
  .flex-row {
    flex-direction: column !important;
    gap: 1rem !important; /* Add gap between flex items */
  }
  
  /* Touch-friendly buttons with dynamic sizing */
  button,
  .btn,
  a.button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: var(--touch-min) !important;
    min-width: var(--touch-min) !important;
    padding: var(--button-padding-y) var(--button-padding-x) !important;
    font-size: var(--fs-button) !important;
    width: 100% !important;
    display: block !important;
    border-radius: var(--radius-md);
  }
  
  /* Form elements with fluid sizing */
  input,
  textarea,
  select {
    min-height: var(--input-height) !important;
    font-size: max(16px, var(--fs-base)) !important; /* Prevents zoom on iOS */
    padding: clamp(0.5rem, 2.5vw, 0.875rem) !important;
    width: 100% !important;
    border-radius: var(--radius-sm);
  }
  
  /* Navigation */
  nav,
  .navbar,
  .nav-menu {
    position: relative !important;
  }
  
  /* Keep navigation visible but scale it responsively */
  .nav-links {
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Only hide secondary nav items on very small screens */
  .nav-links a[href*="features"],
  .nav-links a[href*="support"] {
    display: none !important;
  }
  
  /* Fix nav logo text breaking on mobile */
  .nav-logo {
    white-space: nowrap !important;
    font-size: 1rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
  }
  
  /* Cards and panels with dynamic spacing */
  .card,
  .panel,
  .box {
    padding: var(--padding-card) !important;
    margin-bottom: var(--spacing-md) !important;
    border-radius: var(--radius-lg) !important;
  }
  
  /* Modals and dialogs */
  .modal,
  .dialog,
  .popup {
    width: 95% !important;
    max-width: 100% !important;
    margin: 0.5rem !important;
    padding: 1rem !important;
  }
  
  /* Typography with fluid scaling */
  p,
  li {
    font-size: var(--fs-base) !important;
    line-height: var(--lh-relaxed) !important;
  }
  
  /* Dynamic spacing utilities */
  .mt-4, .my-4 { margin-top: var(--spacing-md) !important; }
  .mb-4, .my-4 { margin-bottom: var(--spacing-md) !important; }
  .ml-4, .mx-4 { margin-left: var(--spacing-md) !important; }
  .mr-4, .mx-4 { margin-right: var(--spacing-md) !important; }
  .pt-4, .py-4 { padding-top: var(--spacing-md) !important; }
  .pb-4, .py-4 { padding-bottom: var(--spacing-md) !important; }
  .pl-4, .px-4 { padding-left: var(--spacing-md) !important; }
  .pr-4, .px-4 { padding-right: var(--spacing-md) !important; }
}

/* Large Phones & Small Tablets (415px - 768px) */
@media (min-width: 415px) and (max-width: 768px) {
  /* Grid adjustments */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Container padding */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Typography */
  h1 {
    font-size: 2.25rem !important;
  }
  
  h2 {
    font-size: 1.875rem !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
  }
  
  /* Buttons can be inline on tablets */
  .btn-group {
    display: flex !important;
    gap: 0.5rem !important;
  }
  
  .btn-group .btn {
    width: auto !important;
    flex: 1 !important;
  }
}

/* Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Grid systems */
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Container */
  .container {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ==============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase all interactive element sizes */
  a,
  button,
  [role="button"],
  .clickable,
  .interactive {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
  }
  
  /* Remove hover effects */
  *:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Add active states for feedback */
  button:active,
  .btn:active,
  a:active,
  .clickable:active {
    opacity: 0.8;
    transform: scale(0.98) !important;
  }
  
  /* Improve scroll performance */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ==============================================
   LANDSCAPE ORIENTATION
   ============================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .hero,
  .banner {
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  .modal,
  .dialog {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}

/* ==============================================
   HIGH DPI SCREENS (Retina)
   ============================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Sharper borders */
  * {
    border-width: 0.5px !important;
  }
  
  /* Optimize font rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* iPhone X and newer (with notch) */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
  
  .navbar {
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
  }
  
  .footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

/* ==============================================
   MOBILE NAVIGATION HEADER FIXES
   ============================================== */
@media (max-width: 768px) {
  /* Fix nav container on mobile */
  .nav-container {
    padding: 0.75rem 1rem !important;
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  
  /* Prevent nav logo text from breaking */
  .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 120px) !important; 
  }
  
  .nav-logo svg {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
  }
  
  /* Adjust nav actions spacing */
  .nav-actions {
    flex-shrink: 0 !important;
  }
}

/* ==============================================
   UTILITY CLASSES
   ============================================== */

/* Hide on mobile */
@media (max-width: 768px) {
  .desktop-only,
  .hide-mobile {
    display: none !important;
  }
  
  .mobile-only,
  .show-mobile {
    display: block !important;
  }
  
  /* Text alignment */
  .text-center-mobile {
    text-align: center !important;
  }
  
  .text-left-mobile {
    text-align: left !important;
  }
  
  /* Width utilities */
  .w-full-mobile {
    width: 100% !important;
  }
  
  /* Margin/Padding reset */
  .no-margin-mobile {
    margin: 0 !important;
  }
  
  .no-padding-mobile {
    padding: 0 !important;
  }
}

/* ==============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus styles for keyboard navigation */
@media (min-width: 768px) {
  :focus-visible {
    outline: 2px solid #3B82F6 !important;
    outline-offset: 2px !important;
  }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

  
  body {
    font-size: 12pt !important;
  }
  
  a {
    text-decoration: underline !important;
  }
}