/* ============================================================
   Play Tracker — Mobile & iOS Safari Compatibility Layer
   ============================================================ */

/* 1. 100dvh fix — Safari address bar bug */
:root {
  --vh: 1vh;
  --app-height: 100vh;
}
@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

/* 2. Base iOS resets */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  /* Do NOT set overflow-x or overflow-y on body — Android Chrome blocks scroll */
}
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, select, button {
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 16px;
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
textarea {
  font-size: 16px !important;
}

/* 3. App shell full height */
.app-shell {
  min-height: var(--app-height);
  min-height: 100dvh;
}
.login-bg {
  min-height: var(--app-height);
  min-height: 100dvh;
}

/* 4. Sidebar — iOS safe area + smooth scroll */
.sidebar {
  height: var(--app-height);
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-overflow-scrolling: touch;
}

/* 5. Topbar — notch/island safe area */
.topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* 6. Main content bottom padding for home indicator */
.main-content {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   Mobile Breakpoints — 480px / 600px / 768px / 1024px
   ============================================================ */

@media (max-width: 1024px) {
  .sidebar {
    width: 260px;
    -webkit-transform: translateX(-260px);
    transform: translateX(-260px);
  }
  .sidebar.open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.8);
  }
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip;
  }
  html {
    overflow-x: hidden;
  }
  body {
    width: 100%;
    max-width: 100%;
    /* Do NOT set overflow-y on body — breaks Android Chrome scroll */
  }
}

@media (max-width: 768px) {
  .container {
    padding: 16px 14px;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .card { padding: 14px; border-radius: 12px; }
  .stat-card { padding: 14px 12px; }
  .stat-card .num { font-size: 24px; }
  .page-title { font-size: 17px; }
  .btn { padding: 10px 16px; font-size: 13px; }
  .btn-lg { padding: 12px 20px; font-size: 14px; }
  table { font-size: 12px; }
  th, td { padding: 10px 10px; }
}

@media (max-width: 480px) {
  .container { padding: 12px 10px; }
  .card { padding: 12px; border-radius: 10px; }
  .stat-card .num { font-size: 22px; }
  .page-title { font-size: 16px; }
  .topbar { height: 48px; }
  .topbar-title { font-size: 12px; }
  .modal { padding: 16px; border-radius: 12px; }
  .modal-overlay { padding: 10px; }
  /* Stack flex rows on tiny screens */
  .flex-between { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   Touch targets — minimum 44x44px (Apple HIG)
   ============================================================ */
.nav-item {
  min-height: 44px;
  padding: 10px 12px;
}
.btn {
  min-height: 44px;
}
.btn-sm {
  min-height: 36px;
}
.sf-action-btn {
  min-height: 40px;
}

/* ============================================================
   iOS Safari — backdrop-filter fallback
   ============================================================ */
@supports not (backdrop-filter: blur(1px)) {
  .login-card {
    background: rgba(13, 21, 38, 0.97) !important;
    backdrop-filter: none !important;
  }
  .card-glass {
    background: rgba(13, 21, 38, 0.97) !important;
    backdrop-filter: none !important;
  }
  .modal {
    background: #131c2e !important;
  }
}

/* ============================================================
   Performance — disable expensive effects on mobile
   ============================================================ */
@media (max-width: 1024px) {
  /* Kill all CSS animations that cause repaints */
  .orb { display: none !important; }
  #bgCanvas { display: none !important; }

  /* Disable hover transforms — cause jank on touch */
  .card:hover,
  .stat-card:hover,
  .player-row:hover {
    transform: none !important;
    box-shadow: var(--card-shadow) !important;
  }
  .btn:hover { transform: none !important; }
  .nav-item:hover { transform: none !important; }

  /* Disable float animations */
  .stat-card .icon { animation: none !important; }
  .shuttle { animation: none !important; }

  /* Reduce box-shadow complexity */
  .btn-primary { box-shadow: none !important; }
  .btn-success { box-shadow: none !important; }
  .btn-danger  { box-shadow: none !important; }

  /* Promote sidebar to GPU layer */
  .sidebar {
    will-change: transform;
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px);
  }
  .sidebar.open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* ============================================================
   Video — mobile optimized
   ============================================================ */
@media (max-width: 768px) {
  video {
    max-height: 240px !important;
    width: 100% !important;
    object-fit: contain;
  }
  /* Prevent autoplay videos from blocking scroll */
  video[autoplay] {
    pointer-events: none;
  }
}

/* ============================================================
   Scrollable tables on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Wrap every table in a scroll container */
  .card table,
  .table-wrap table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
  }
  /* But allow td content to wrap */
  td, th {
    white-space: normal;
    min-width: 80px;
    max-width: 200px;
    word-break: break-word;
  }
  /* Remove fixed min-widths set inline */
  td[style*="min-width"] {
    min-width: 80px !important;
  }
}

/* ============================================================
   Flex rows — force wrap on mobile
   ============================================================ */
@media (max-width: 600px) {
  /* Any flex row that doesn't already wrap */
  .card > div[style*="display:flex"],
  .card > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* Topbar right side — hide chip on tiny screens */
  .topbar-chip { display: none !important; }
  /* Topbar title — allow truncation */
  .topbar-title {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================================
   Text overflow — prevent content cutting off screen
   ============================================================ */
@media (max-width: 768px) {
  /* All text containers */
  p, h1, h2, h3, h4, h5, span, div, a, td, th, label {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
  /* Badges and labels — allow wrap */
  .badge {
    white-space: normal;
    word-break: break-word;
  }
  /* Bar labels — shorter on mobile */
  .bar-label {
    width: 70px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Stat card numbers */
  .stat-card .num {
    font-size: 22px !important;
    word-break: break-all;
  }
  /* Page title */
  .page-title {
    font-size: 16px !important;
    white-space: normal;
    word-break: break-word;
  }
  /* Buttons — allow text wrap */
  .btn {
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
  /* Nav items */
  .nav-item {
    white-space: normal;
    word-break: break-word;
  }
}

/* ============================================================
   Cards — prevent overflow
   ============================================================ */
@media (max-width: 768px) {
  .card, .stat-card, .player-row, .modal {
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Inline flex rows inside cards */
  .flex-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .flex {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   Analysis page — video + correction panel
   ============================================================ */
@media (max-width: 768px) {
  #analysisVideo {
    max-height: 220px !important;
  }
  /* Guided nav overlay — full width on mobile */
  #guidedNav {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    width: auto !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Correction panel buttons */
  #cpClip, #cpFixClip, #cpDatasetClip {
    max-height: 140px !important;
  }
}

/* ============================================================
   Forms — full width on mobile
   ============================================================ */
@media (max-width: 600px) {
  input, select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .form-group {
    width: 100%;
  }
  /* Grid-2 forms (e.g. role selector) */
  .grid-2 input, .grid-2 select {
    width: 100% !important;
  }
}

/* ============================================================
   Player row — stack on mobile
   ============================================================ */
@media (max-width: 480px) {
  .player-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .player-row > div:last-child {
    width: 100%;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Stat cards — 2 col on mobile, 1 col on tiny
   ============================================================ */
@media (max-width: 600px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Login page — mobile
   ============================================================ */
@media (max-width: 480px) {
  .login-card {
    padding: 20px 16px;
    border-radius: 16px;
    margin: 12px;
    width: calc(100% - 24px);
  }
  .login-title { font-size: 20px; }
  .btn-login {
    padding: 14px;
    font-size: 15px;
    min-height: 50px;
  }
  /* Role selector — 2 per row on small screens */
  .role-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ============================================================
   Sidebar overlay — GPU composited
   ============================================================ */
#sidebarOverlay {
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================
   Smooth scrolling — but not on reduced motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Global catch-all — nothing should ever overflow the screen
   ============================================================ */
@media (max-width: 768px) {
  /* Use box-sizing but do NOT set max-width on * — breaks Android scroll */
  * {
    box-sizing: border-box;
  }
  /* Images/videos stay within bounds */
  img, video, canvas, svg {
    max-width: 100% !important;
    height: auto;
  }
  /* Bar labels — consistent width */
  .bar-label {
    width: 72px !important;
    min-width: 0 !important;
    flex-shrink: 0;
  }
  /* Any inline flex that could overflow */
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap;
    min-width: 0;
  }
  /* Scroll wrapper for any table not already wrapped */
  .card > table,
  .card > div > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}