/* =====================================================
   Tablet and Medium Device Fixes (431px - 932px)
   ===================================================== */

/* ===== Tablet Layout Fixes ===== */
@media screen and (min-width: 431px) and (max-width: 932px) {
  /* Ensure proper scrolling on tablets */
  html, body {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #app {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Header positioning */
  .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--bg-primary) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  /* Main content scrolling */
  .main-content,
  .main-content-new {
    position: relative !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 2rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
  }

  /* Top navigation for tablets */
  .top-navigation {
    position: sticky !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 999 !important;
  }

  /* Tab content */
  .tab-pane {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
  }

  /* Admin tab needs full width for drills table */
  #adminTab.tab-pane {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Stats and grids */
  .stats-grid,
  .stats-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Forms */
  input,
  textarea,
  select {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Touch targets */
  button,
  .btn,
  a {
    min-height: 48px !important;
  }
}

/* ===== iPad Specific (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .header-container {
    padding: 0 2rem !important;
  }

  .nav-container {
    padding: 0.75rem 1rem !important;
  }

  .tab-pane {
    max-width: 768px !important;
    padding: 2rem !important;
  }

  /* Admin tab needs UNLIMITED width for drills table */
  #adminTab.tab-pane,
  #adminTab .admin-dashboard,
  #adminTab .admin-tab-content,
  #adminTab .admin-drills-v2,
  #adminTab .drills-view {
    max-width: none !important;
    width: 100% !important;
  }

  /* Grid layouts */
  .goals-layout {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .achievement-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== Tablet Landscape ===== */
@media screen and (min-width: 431px) and (max-width: 932px) and (orientation: landscape) {
  .app-header {
    height: 60px !important;
  }

  .main-content {
    padding: 1.5rem 2rem !important;
  }

  .modal-content {
    max-height: 85vh !important;
  }
}

/* ===== Ensure proper scrolling behavior ===== */
@media screen and (min-width: 431px) and (max-width: 932px) {
  /* Allow browser scrolling */
  .history-list,
  .session-list,
  .goals-list {
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Tab content flows naturally */
  .tab-content,
  .tab-content-container {
    height: auto !important;
    overflow: visible !important;
  }

  /* Modal scrolling */
  .modal {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}