/* =================================================
   MOBILE FOUNDATION - CLUB SIMULATOR
   Professional mobile-first adaptations.
   Loaded AFTER app.css to override desktop defaults.
   ================================================= */

/* ==================== SAFE AREA INSETS ====================
   Handles iPhone notch, Android cutouts, home indicator.
   viewport-fit=cover is set in index.html <meta viewport>. */

:root {
  --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);
  --header-height: 60px;
}

/* ==================== BODY & SCROLL LOCK ==================== */
html {
  /* Prevent overscroll bounce on iOS */
  overscroll-behavior: none;
}

body {
  /* Dynamic viewport height for mobile browsers (URL bar collapses) */
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* When a modal is open, lock body scroll */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* ==================== GLOBAL TOUCH TARGETS ====================
   Apple HIG + Material: minimum 44x44px interactive area.
   Applied to all interactive elements on touch devices. */

@media (pointer: coarse) {
  /* All buttons, links, and interactive elements */
  button,
  [role="button"],
  a,
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Lineup edit buttons: exempt from 44px minimum.
     These are small overlay buttons on tight player cards/field slots. */
  .btn-edit-player,
  .btn-edit-field {
    min-height: auto;
    min-width: auto;
  }

  /* Inputs need good tap height */
  input,
  textarea,
  select {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Disable hover effects on touch - they stick */
  .btn:hover:not(:disabled),
  .btn-primary:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled),
  .btn-accent:hover:not(:disabled),
  .card:hover,
  .dashboard-card:hover {
    transform: none;
  }

  /* Active states for touch feedback instead */
  .btn:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.1s;
  }

  .card:active,
  .dashboard-card:active {
    transform: scale(0.99);
    transition: transform 0.1s;
  }

  /* Specific small buttons that need enlargement */
  .modal-close,
  .btn-close,
  .page-btn,
  .btn-icon,
  .sidebar-toggle,
  .toast-close,
  .tutorial-btn-skip {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==================== TABLET (< 1024px) ==================== */
@media (max-width: 1024px) {
  /* Page containers need padding for safe area */
  .main-content {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
}

/* ==================== PHONE (< 768px) ==================== */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  body {
    font-size: 15px;
  }

  /* Cards tighter on mobile */
  .card-header {
    padding: 0.75rem 1rem;
  }

  .card-content, .card-body {
    padding: 1rem;
  }

  /* Form controls comfortable height */
  .form-group label {
    font-size: 0.85rem;
    margin-bottom: 0.375rem;
  }

  .form-control, input[type="text"], input[type="email"],
  input[type="password"], input[type="number"], select, textarea {
    padding: 0.75rem;
    font-size: 16px; /* iOS zoom prevention */
  }

  /* Pagination bigger touch targets */
  .page-btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .page-info {
    font-size: 0.85rem;
  }

  /* Modals full-width on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end; /* Slide up from bottom like native */
  }

  .modal-dialog, .modal {
    max-width: 100%;
    max-height: 92vh;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: modalSlideUp 0.3s ease;
  }

  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  @keyframes modalSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal-header {
    padding: 1rem;
    /* Handle bar indicator for mobile modals */
    position: relative;
  }

  .modal-header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
  }

  .modal-close, .btn-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .modal-close svg,
  .btn-close svg {
    width: 24px;
    height: 24px;
  }

  .modal-body {
    padding: 1rem;
    max-height: calc(92vh - 140px);
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + var(--safe-bottom));
  }

  /* Tables: scroll hint shadow */
  .table-container {
    position: relative;
  }

  .table-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--bg-dark), transparent);
    pointer-events: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  /* Smaller padding for table cells */
  th, td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  th {
    font-size: 0.7rem;
  }

  /* Login/Register full viewport */
  .login-container, .register-container {
    padding: 1rem;
    padding-top: calc(1rem + var(--safe-top));
    padding-bottom: calc(1rem + var(--safe-bottom));
    min-height: 100dvh;
  }

  .login-card, .register-card {
    padding: 1.5rem;
    box-shadow: none;
    border: 1px solid var(--border-color);
  }

  .login-header h1, .register-header h1 {
    font-size: 1.6rem;
  }

  /* Empty states more compact */
  .empty-state {
    padding: 2rem 1.5rem;
  }

  .empty-state-icon {
    font-size: 3rem;
  }

  /* Dashboard grid stacks */
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dashboard-card {
    padding: 1.25rem;
  }

  .dashboard-header h1 {
    font-size: 1.4rem;
  }

  /* Page containers need less padding */
  .competitions-container,
  .player-container,
  .team-container,
  .match-container,
  .training-container,
  .stadium-container,
  .scouting-container,
  .staff-container,
  .news-container,
  .player-market-container,
  .staff-market-container,
  .auction-house-container,
  .admin-container,
  .transactions-container,
  .shows-container {
    padding: 0.75rem;
    padding-top: 0.75rem;
  }

  /* Search results compact */
  .search-results-page {
    padding: 0.75rem;
  }

  /* Alerts compact */
  .alert {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  /* Error UI safe area */
  #blazor-error-ui {
    padding-bottom: calc(1rem + var(--safe-bottom));
  }
}

/* ==================== SMALL PHONE (< 480px) ==================== */
@media (max-width: 480px) {
  :root {
    --header-height: 52px;
  }

  body {
    font-size: 14px;
  }

  /* Even tighter cards */
  .card-header {
    padding: 0.625rem 0.75rem;
  }

  .card-header h2, .card-header h3 {
    font-size: 0.95rem;
  }

  .card-content, .card-body {
    padding: 0.75rem;
  }

  /* Buttons smaller on tiny phones */
  .btn {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
  }

  .btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
  }

  /* Competition type badges */
  .competition-type, .level-badge, .prize-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }

  /* Tab buttons stacked */
  .tab-buttons {
    gap: 0.375rem;
  }

  .tab-btn {
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Badges smaller */
  .badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }

  /* Game links compact */
  .game-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Not found page */
  .not-found h1 {
    font-size: 3rem;
  }

  .not-found p {
    font-size: 1rem;
  }
}

/* ==================== EXTRA SMALL (< 360px) ==================== */
@media (max-width: 360px) {
  body {
    font-size: 13px;
  }

  .card-content, .card-body {
    padding: 0.5rem;
  }

  .modal-body {
    padding: 0.75rem;
  }

  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Tab buttons wrap to 2 columns */
  .tab-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ==================== LANDSCAPE PHONE ==================== */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-dialog, .modal, .modal-content {
    max-height: 98vh;
  }

  .modal-body {
    max-height: calc(98vh - 120px);
  }

  /* Pre-match screen doesn't need full height in landscape */
  .prematch-epic {
    min-height: auto;
    padding: 1rem;
  }
}

/* ==================== PRINT ==================== */
@media print {
  .game-header,
  .sidebar-toggle,
  .matchday-sidebar,
  .goal-toasts,
  .feedback-fab,
  .pwa-install-banner {
    display: none !important;
  }
}