/**
 * Unified Breakpoint System
 * 
 * BREAKPOINTS (Mobile-First):
 * - xs: 0-479px      (small phones)
 * - sm: 480-639px    (large phones)
 * - md: 640-849px    (large phones, phablets)
 * - lg: 850-1023px   (tablets)
 * - xl: 1024-1199px  (large tablets, small desktops)
 * - 2xl: 1200px+     (desktops)
 * 
 * KEY THRESHOLDS:
 * - Mobile: < 850px (body.is-mobile)
 * - Tablet: 850px - 1199px
 * - Desktop: >= 1200px
 * 
 * PWA is portrait-only by design.
 */

:root {
  /* Breakpoint CSS variables for JS access */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 850px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  
  /* Layout state classes added by layout-state.js:
   * body.is-mobile    - width < 850px
   * body.is-tablet    - width 850px - 1199px
   * body.is-desktop   - width >= 1200px
   * body.is-short-viewport - height < 600px
   * body.is-pwa       - running as installed PWA
   * body.is-ios       - iOS device
   * body.is-android   - Android device
   * body.has-notch    - device has notch/Dynamic Island
   * body.bp-xs, bp-sm, bp-md, bp-lg, bp-xl, bp-2xl - current breakpoint
   */
  
  /* Safe area insets with fallbacks */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  
  /* Dynamic viewport height - updated by JS for reliable mobile behavior */
  --vh: 1vh;
}

/* Fallback for browsers without dvh support */
@supports (height: 1dvh) {
  :root {
    --vh: 1dvh;
  }
}

/* ============================================
   BREAKPOINT-BASED UTILITY CLASSES
   Use these OR the body state classes
   ============================================ */

/* Hide on mobile (< 850px) */
@media (max-width: 849px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet (850px - 1199px) */
@media (min-width: 850px) and (max-width: 1199px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop (>= 1200px) */
@media (min-width: 1200px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 850px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Show only on tablet */
@media (max-width: 849px), (min-width: 1200px) {
  .show-tablet-only {
    display: none !important;
  }
}

/* Show only on desktop */
@media (max-width: 1199px) {
  .show-desktop-only {
    display: none !important;
  }
}

/* ============================================
   BODY STATE CLASS UTILITIES
   These work with layout-state.js classes
   ============================================ */

/* Hide based on body state class */
body.is-mobile .hide-on-mobile {
  display: none !important;
}

body.is-tablet .hide-on-tablet {
  display: none !important;
}

body.is-desktop .hide-on-desktop {
  display: none !important;
}

body.is-short-viewport .hide-on-short {
  display: none !important;
}

/* Show based on body state class */
body:not(.is-mobile) .show-on-mobile-only {
  display: none !important;
}

body:not(.is-tablet) .show-on-tablet-only {
  display: none !important;
}

body:not(.is-desktop) .show-on-desktop-only {
  display: none !important;
}

/* ============================================
   TOUCH TARGET SIZING
   Ensure minimum 44px touch targets on touch devices
   ============================================ */

@media (pointer: coarse) {
  .touch-target,
  .btn-touch {
    min-height: 44px;
    min-width: 44px;
  }
}

/* On mobile, ensure all interactive elements meet touch target size */
/* Exceptions added via :not() for buttons that need custom sizing */
body.is-mobile button:not(.btn-sm):not(.btn-xs):not(#reviewDuplicatesBtn):not(#importContactsBtn):not(#addContactBtn):not(#closeContactsBtn):not(#sourceFilterBtn),
body.is-mobile .btn:not(.btn-sm):not(.btn-xs),
body.is-mobile [role="button"]:not(.btn-sm):not(.btn-xs) {
  min-height: 44px;
}

/* ============================================
   DEBUG MODE
   Add body.debug-breakpoints to show current breakpoint
   ============================================ */

/* Debug panel container */
#debug-panel {
  position: fixed;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  z-index: 99999;
  pointer-events: none;
  line-height: 1.7;
  min-width: 140px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Hide debug panel when class is removed */
body:not(.debug-breakpoints) #debug-panel {
  display: none;
}