/* ================================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   Enhanced touch targets, spacing, and interactions
   ================================================ */

/* Touch-friendly minimum sizes */
:root {
  --touch-target-min: 44px; /* WCAG 2.1 AA minimum */
  --touch-target-optimal: 48px; /* Material Design recommendation */
  --mobile-spacing-sm: 0.75rem;
  --mobile-spacing-md: 1rem;
  --mobile-spacing-lg: 1.5rem;
  --mobile-spacing-xl: 2rem;
}

/* ================================================
   BASE MOBILE IMPROVEMENTS
   ================================================ */

/* Improve tap highlighting */
* {
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
  -webkit-touch-callout: none;
}

/* Better font rendering on mobile */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ================================================
   MOBILE TYPOGRAPHY ENHANCEMENTS
   ================================================ */

@media (max-width: 640px) {
  /* Improve readability with optimal line height */
  body {
    font-size: 16px; /* Prevents zoom on input focus in iOS */
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(1.875rem, 8vw, 3rem);
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.3;
    margin-bottom: 0.875rem;
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.875rem);
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
  }

  /* Better text spacing on mobile */
  .text-tight {
    letter-spacing: -0.01em;
  }

  .text-comfortable {
    letter-spacing: 0.01em;
  }
}

/* ================================================
   TOUCH-FRIENDLY BUTTONS
   ================================================ */

@media (max-width: 768px) {
  /* Ensure all buttons meet minimum touch target size */
  .btn,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    position: relative;
  }

  /* Add spacing between stacked buttons */
  .btn + .btn,
  button + button {
    margin-top: 0.75rem;
  }

  /* Larger tap area for icon buttons */
  .btn-icon,
  button[aria-label] {
    min-width: var(--touch-target-optimal);
    min-height: var(--touch-target-optimal);
    padding: 0.75rem;
  }

  /* Full width buttons on mobile */
  .btn-mobile-full {
    width: 100%;
    display: block;
  }

  /* Better feedback on touch */
  .btn:active,
  button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }
}

/* ================================================
   MOBILE NAVIGATION ENHANCEMENTS
   ================================================ */

@media (max-width: 1024px) {
  /* Larger touch targets for nav links */
  .nav-link,
  .mobile-nav-link {
    min-height: var(--touch-target-min);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
  }

  /* Better spacing in mobile menu */
  #mobile-menu {
    padding: 1.5rem 1rem;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Add spacing between mobile menu items */
  #mobile-menu a {
    margin-bottom: 0.5rem;
  }

  #mobile-menu a:last-child {
    margin-bottom: 0;
  }

  /* Larger hamburger menu button */
  #mobile-menu-toggle {
    min-width: var(--touch-target-optimal);
    min-height: var(--touch-target-optimal);
    padding: 0.75rem;
  }

  /* Improve mobile menu icons */
  #mobile-menu svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }
}

/* ================================================
   MOBILE FORM IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Better input sizing */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    min-height: var(--touch-target-optimal);
    font-size: 16px; /* Prevents iOS zoom */
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
  }

  /* Stack form elements */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Full width form inputs */
  .input,
  input,
  select,
  textarea {
    width: 100%;
  }

  /* Better label visibility */
  label,
  .label {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
  }

  /* Improve textarea on mobile */
  textarea,
  .textarea {
    min-height: 150px;
    resize: vertical;
  }

  /* Better checkbox and radio sizes */
  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.625rem;
  }

  /* Improve select dropdown */
  select {
    background-size: 1.25rem;
    padding-right: 2.5rem;
  }

  /* Better form error messages */
  .form-error,
  .field-error {
    font-size: 0.875rem;
    margin-top: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
  }
}

/* ================================================
   MOBILE CARD IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Better card spacing */
  .card,
  .service-card,
  .platform-card {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
  }

  /* Single column for card grids */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  /* Improve card shadows on mobile */
  .card:hover,
  .service-card:hover,
  .platform-card:hover {
    transform: translateY(-2px); /* Less movement on mobile */
  }

  /* Better card header spacing */
  .card h3,
  .card h4 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
  }

  /* Improve card content readability */
  .card p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ================================================
   MOBILE DASHBOARD IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Stack dashboard stats */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .md\\:grid-cols-2,
  .lg\\:grid-cols-3,
  .lg\\:grid-cols-4,
  .xl\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Better stat card sizing */
  .stat-card {
    min-height: 120px;
    padding: 1.25rem;
  }

  /* Improve stat numbers */
  .stat-card .text-4xl {
    font-size: 2rem;
  }

  /* Better quick action buttons */
  .quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  /* Single column for two-column layouts */
  .lg\\:grid-cols-2,
  .md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   MOBILE HEADER IMPROVEMENTS
   ================================================ */

@media (max-width: 1024px) {
  /* Better header sizing */
  header,
  #main-header {
    height: 64px;
    padding: 0.75rem 1rem;
  }

  /* Adjust body padding for fixed header */
  body.has-sticky-header {
    padding-top: 64px;
  }

  /* Better logo sizing */
  header .logo {
    height: 32px;
  }

  /* Improve header button spacing */
  header .flex.items-center.space-x-2 > * + * {
    margin-left: 0.5rem;
  }

  /* Hide secondary text on small screens */
  header .hidden.sm\\:block {
    display: none !important;
  }

  @media (min-width: 640px) {
    header .hidden.sm\\:block {
      display: block !important;
    }
  }
}

/* ================================================
   MOBILE MODAL & DROPDOWN IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Full-width modals on mobile */
  .modal,
  [role="dialog"] {
    width: calc(100% - 2rem);
    max-width: none;
    margin: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  /* Better dropdown positioning */
  .dropdown-menu,
  [role="menu"] {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100% - 2rem) !important;
    max-width: none !important;
  }

  /* Improve dropdown items */
  .dropdown-menu a,
  [role="menuitem"] {
    min-height: var(--touch-target-min);
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}

/* ================================================
   MOBILE TABLE IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Responsive tables */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  table {
    min-width: 600px;
    font-size: 0.875rem;
  }

  /* Better table cell padding */
  td,
  th {
    padding: 0.75rem 0.5rem;
  }

  /* Stack table rows as cards on very small screens */
  @media (max-width: 480px) {
    .table-card-mobile thead {
      display: none;
    }

    .table-card-mobile tbody tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid hsl(var(--border));
      border-radius: 0.75rem;
      padding: 1rem;
    }

    .table-card-mobile tbody td {
      display: block;
      text-align: left !important;
      padding: 0.5rem 0;
      border-bottom: 1px solid hsl(var(--border) / 0.3);
    }

    .table-card-mobile tbody td:last-child {
      border-bottom: none;
    }

    .table-card-mobile tbody td::before {
      content: attr(data-label);
      font-weight: 600;
      display: block;
      margin-bottom: 0.25rem;
      font-size: 0.75rem;
      text-transform: uppercase;
      color: hsl(var(--muted-foreground));
    }
  }
}

/* ================================================
   MOBILE SPACING UTILITIES
   ================================================ */

@media (max-width: 768px) {
  /* Reduce excessive padding */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Container padding */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Section spacing */
  section {
    padding: 2rem 0;
  }

  /* Gap adjustments */
  .gap-8 {
    gap: 1.25rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  .gap-4 {
    gap: 0.75rem !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-12 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ================================================
   MOBILE IMAGE & MEDIA IMPROVEMENTS
   ================================================ */

@media (max-width: 768px) {
  /* Responsive images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Better video embedding */
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Aspect ratio containers */
  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  /* Better icon sizing */
  .icon-lg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .icon-md {
    width: 2rem;
    height: 2rem;
  }

  .icon-sm {
    width: 1.5rem;
    height: 1.5rem;
  }
}

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

@media (max-width: 768px) {
  /* Larger focus indicators */
  *:focus-visible {
    outline: 3px solid hsl(var(--primary));
    outline-offset: 3px;
  }

  /* Better skip link */
  .skip-link:focus {
    top: 0.5rem;
    left: 0.5rem;
    padding: 1rem;
    font-size: 1rem;
  }

  /* Improve contrast for better readability */
  .text-muted-foreground {
    color: hsl(var(--foreground) / 0.7);
  }
}

/* ================================================
   MOBILE ANIMATION PERFORMANCE
   ================================================ */

@media (max-width: 768px) {
  /* Reduce motion for better performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
  }

  /* Disable complex animations on mobile */
  .service-card::before,
  .platform-card::before,
  .neon-glow::before {
    animation: none !important;
  }

  /* Simpler hover effects */
  .hover-elevate:hover {
    transform: translateY(-1px);
  }

  .hover-scale:hover {
    transform: scale(1.02);
  }
}

/* ================================================
   MOBILE LANDSCAPE MODE
   ================================================ */

@media (max-width: 896px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Better header in landscape */
  header,
  #main-header {
    height: 56px;
  }

  body.has-sticky-header {
    padding-top: 56px;
  }

  /* Reduce mobile menu height */
  #mobile-menu {
    max-height: calc(100vh - 70px);
  }
}

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

/* Touch-friendly spacing */
.touch-spacing-sm {
  padding: 0.5rem;
}

.touch-spacing-md {
  padding: 0.75rem;
}

.touch-spacing-lg {
  padding: 1rem;
}

/* Mobile text utilities */
.mobile-text-sm {
  font-size: 0.875rem;
}

.mobile-text-base {
  font-size: 1rem;
}

.mobile-text-lg {
  font-size: 1.125rem;
}

/* Mobile display utilities */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none !important;
  }

  .mobile-block {
    display: block !important;
  }

  .mobile-flex {
    display: flex !important;
  }

  .mobile-grid {
    display: grid !important;
  }

  /* Mobile flex utilities */
  .mobile-flex-col {
    flex-direction: column !important;
  }

  .mobile-flex-row {
    flex-direction: row !important;
  }

  /* Mobile alignment */
  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-text-left {
    text-align: left !important;
  }

  .mobile-justify-center {
    justify-content: center !important;
  }

  .mobile-items-center {
    align-items: center !important;
  }
}

/* ================================================
   SAFE AREA INSETS FOR NOTCHED DEVICES
   ================================================ */

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  header,
  #mobile-menu {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  #cookie-banner {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ================================================
   DARK MODE MOBILE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
  .dark .btn-primary {
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
  }

  .dark .card {
    background: linear-gradient(145deg, hsl(var(--dark-surface-1)), hsl(var(--dark-surface-2) / 0.9));
    box-shadow: 0 4px 6px hsl(var(--dark-shadow) / 0.3);
  }

  .dark .input:focus {
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
  }

  .dark #mobile-menu {
    background: linear-gradient(145deg, hsla(var(--background) / 0.98), hsla(var(--dark-surface-1) / 0.95));
    backdrop-filter: blur(16px) saturate(180%);
  }
}