/* Pickle BERRY Universal Device Support
   Comprehensive responsive design for all screen sizes and device types */

/* ===== DEVICE-SPECIFIC BREAKPOINTS ===== */

/* Apple Watch Series (38mm, 40mm, 42mm, 44mm, 45mm, 49mm) */
@media screen and (max-width: 195px) and (max-height: 244px) {
  .watch-hidden { display: none !important; }
  .watch-only { display: block !important; }
  
  body {
    font-size: 12px;
    padding: 4px;
    background: var(--bg-primary);
  }
  
  .main-nav { display: none; }
  
  .watch-widget {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px;
  }
  
  .watch-court-status {
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-align: center;
    margin: 0 auto 8px;
  }
  
  .watch-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .watch-btn {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 12px;
    padding: 8px;
    font-size: 10px;
    color: var(--text-primary);
    text-align: center;
  }
}

/* Samsung Galaxy Watch, Wear OS (280x280, 360x360) */
@media screen and (min-width: 240px) and (max-width: 320px) and (max-height: 320px) {
  .circular-watch-layout {
    width: 100vw;
    height: 100vh;
    border-radius: 50%;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .watch-time-display {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
  }
  
  .watch-court-circle {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
  }
  
  .watch-court-count {
    font-size: 24px;
    font-weight: bold;
  }
  
  .watch-court-label {
    font-size: 10px;
    margin-top: 4px;
  }
}

/* Fitness Bands (Mi Band, Fitbit) */
@media screen and (max-width: 126px) and (max-height: 294px) {
  body {
    font-size: 10px;
    padding: 2px;
    background: #000;
    color: white;
  }
  
  .fitness-band-display {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    padding: 4px;
  }
  
  .band-icon {
    font-size: 20px;
    margin: 4px 0;
  }
  
  .band-text {
    font-size: 8px;
    font-weight: bold;
  }
  
  .band-status {
    font-size: 6px;
    opacity: 0.8;
  }
}

/* Small Mobile Phones (iPhone SE, older Android) */
@media screen and (max-width: 375px) and (min-height: 500px) {
  .container {
    padding: 8px;
  }
  
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 1000;
  }
  
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    font-size: 10px;
    color: var(--text-secondary);
    text-decoration: none;
  }
  
  .mobile-nav-item.active {
    color: var(--accent-primary);
  }
  
  .mobile-nav-item i {
    font-size: 16px;
    margin-bottom: 2px;
  }
  
  .court-card {
    margin-bottom: 12px;
    padding: 12px;
  }
  
  .court-card-title {
    font-size: 14px;
    font-weight: 600;
  }
  
  .court-card-details {
    font-size: 12px;
    margin-top: 4px;
  }
  
  .btn-primary {
    font-size: 12px;
    padding: 8px 16px;
  }
}

/* Medium Mobile (iPhone 12, Galaxy S21) */
@media screen and (min-width: 376px) and (max-width: 428px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .court-list-item {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  
  .equipment-card {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .tournament-bracket {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Large Mobile / Small Tablets */
@media screen and (min-width: 429px) and (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .sidebar {
    position: fixed;
    left: -100%;
    transition: left 0.3s ease;
  }
  
  .sidebar.active {
    left: 0;
  }
  
  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .overlay.active {
    display: block;
  }
}

/* Tablets (iPad, Android tablets) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .tablet-layout {
    display: flex;
    flex-direction: row;
  }
  
  .tablet-sidebar {
    width: 280px;
    min-height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
  }
  
  .tablet-main {
    flex: 1;
    padding: 24px;
  }
  
  .court-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Large Tablets / Small Desktops */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  .desktop-sidebar {
    width: 320px;
  }
  
  .court-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* ===== DEVICE-SPECIFIC COMPONENTS ===== */

/* Touch-Friendly Interactive Elements */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  .hover-effect:hover {
    transform: none;
  }
  
  .touch-feedback:active {
    transform: scale(0.98);
    background-color: var(--bg-tertiary);
  }
  
  button, .btn {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  input, textarea, select {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* ===== DEVICE ORIENTATION SUPPORT ===== */

/* Landscape orientation for phones */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .landscape-hide { display: none; }
  
  .header {
    height: 50px;
    padding: 8px 16px;
  }
  
  .court-card {
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }
  
  .court-card-content {
    flex: 1;
    margin-left: 12px;
  }
  
  .mobile-nav {
    flex-direction: row;
    height: 50px;
    padding: 4px 0;
  }
  
  .mobile-nav-item {
    flex-direction: row;
    gap: 8px;
  }
}

/* Portrait orientation specific */
@media screen and (orientation: portrait) {
  .portrait-only { display: block; }
  .landscape-only { display: none; }
}

/* Landscape orientation specific */
@media screen and (orientation: landscape) {
  .portrait-only { display: none; }
  .landscape-only { display: block; }
}

/* ===== FOLDABLE DEVICE SUPPORT ===== */

/* Samsung Galaxy Z Fold (unfolded) */
@media screen and (min-width: 717px) and (max-width: 884px) {
  .foldable-dual-pane {
    display: flex;
    gap: 20px;
  }
  
  .foldable-left-pane,
  .foldable-right-pane {
    flex: 1;
  }
  
  .fold-aware-layout {
    padding: 0 calc(env(keyboard-inset-width) + 20px) 0 20px;
  }
}

/* Surface Duo dual screen */
@media (spanning: single-fold-vertical) {
  .dual-screen-layout {
    display: flex;
    flex-direction: row;
  }
  
  .screen-left {
    width: env(fold-left);
    padding-right: 10px;
  }
  
  .screen-right {
    width: env(fold-right);
    padding-left: 10px;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon {
    image-rendering: -webkit-optimize-contrast;
  }
  
  .logo {
    transform: scale(0.5);
    transform-origin: top left;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid;
  }
  
  .card {
    border: 1px solid;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration for smooth scrolling */
.smooth-scroll {
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 0, 0);
}

/* Optimize for 60fps animations */
.animate {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== DEVICE-SPECIFIC FEATURES ===== */

/* iOS Safari specific */
@supports (-webkit-touch-callout: none) {
  .ios-only { display: block; }
  
  /* Fix for viewport height on iOS */
  .ios-vh-fix {
    height: -webkit-fill-available;
  }
  
  /* iOS safe area support */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* Android Chrome specific */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .android-only { display: block; }
}

/* ===== PRINT OPTIMIZATION ===== */
@media print {
  .no-print { display: none !important; }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: black;
    background: white;
  }
  
  .print-page-break {
    page-break-before: always;
  }
  
  .court-card {
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 10pt;
    padding: 10pt;
  }
}

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

.hide-mobile { display: none; }
@media screen and (min-width: 768px) {
  .hide-mobile { display: block; }
  .show-mobile { display: none; }
}

.text-responsive {
  font-size: clamp(14px, 4vw, 18px);
}

.container-responsive {
  width: 100%;
  max-width: min(1200px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 0 16px;
}

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ===== LOADING STATES FOR SLOW CONNECTIONS ===== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.progressive-image {
  filter: blur(5px);
  transition: filter 0.3s;
}

.progressive-image.loaded {
  filter: blur(0);
}

/* ===== ERROR STATES ===== */

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff6b6b;
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-indicator.show {
  transform: translateY(0);
}

/* ===== DEVICE DETECTION HELPERS ===== */

.device-phone { display: none; }
.device-tablet { display: none; }
.device-desktop { display: none; }
.device-watch { display: none; }

@media screen and (max-width: 767px) {
  .device-phone { display: block; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .device-tablet { display: block; }
}

@media screen and (min-width: 1025px) {
  .device-desktop { display: block; }
}

@media screen and (max-width: 320px) and (max-height: 320px) {
  .device-watch { display: block; }
  .device-phone { display: none; }
}