/* ==========================================================
   Pocket Lineup
   Mobile
========================================================== */

@media (max-width: 768px) {
  :root {
    --app-navbar-height: 56px;
    --app-footer-height: 42px;
    --app-main-padding-y: 16px;

    --page-card-height: calc(var(--app-main-height) - 32px);
    --datatable-scroll-height: calc(100dvh - 300px);
  }

  .navbar-brand {
    font-size: 1.1rem;
  }

  .app-main {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  .app-footer {
    font-size: .72rem;
  }

  .card-header {
    padding: .55rem .75rem;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .card-body {
    padding: .75rem;
  }

  .dataTables_filter {
    margin-bottom: .5rem;
  }

  .dataTables_filter label {
    justify-content: flex-start;
    font-size: .85rem;
  }

  .dataTables_filter input {
    width: 100% !important;
    max-width: none;
  }

  table.dataTable {
    font-size: .82rem;
  }

  table.dataTable th,
  table.dataTable td {
    padding: .35rem .45rem;
  }

  #gamesTable th:nth-child(5),
  #gamesTable td:nth-child(5) {
    display: none;
  }

  #playersTable .btn,
  #gamesTable .btn {
    padding: .18rem .35rem;
    font-size: .72rem;
  }

  .statistics .dataTables_scrollBody {
    height: calc(100dvh - 285px) !important;
    max-height: calc(100dvh - 285px) !important;
  }

  .lineup .card-header .d-flex {
    width: 100%;
  }

  .lineup .card-header button {
    flex: 1 1 auto;
  }

  .stat-card .card-body {
    padding: .75rem;
  }

  .stat-value {
    font-size: 1.8rem;
  }

  .stat-value-text {
    font-size: .95rem;
  }

  #gameStatsModal .modal-dialog {
    margin: .25rem;
  }

  #gameStatsModal .modal-content {
    max-height: calc(100dvh - .5rem);
  }

  #gameStatsModal .modal-body {
    max-height: calc(100dvh - 155px);
    padding: .5rem;
    padding-bottom: .25rem;
  }

  #gameStatsModal .game-stats-footer {
    justify-content: space-between;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    gap: .5rem;
  }

  #gameStatsModal .game-stats-footer .btn {
    flex: 1 1 auto;
    padding-top: .45rem;
    padding-bottom: .45rem;
  }

  #gameStatsModal table {
    min-width: 620px;
    font-size: .8rem;
  }

  #gameStatsModal .stat-input {
    min-width: 25px;
    height: 34px;
    font-size: .85rem;
  }

  .stat-stepper {
    min-width: 88px;
  }

  .stat-stepper .stat-input {
    width: 30px;
    min-width: 30px;
    height: 34px;
    font-size: .85rem;
  }

  .stat-stepper-btn {
    width: 27px;
    min-width: 27px;
    height: 34px;
  }

  .lineup-player-layout {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .55rem;
  }

  .lineup-rank {
    width: 30px;
    height: 30px;
    min-height: 30px;

    border-radius: 50%;

    font-size: .88rem;
    margin-top: .1rem;
  }

  .lineup-player-name {
    font-size: .98rem;
  }

  .lineup-score {
    font-size: .7rem;
  }

  .lineup-details-toggle {
    font-size: .78rem;
  }

  .lineup-player-details {
    padding-top: .5rem;
  }
}

/* ==========================================================
   DataTables — colonnes Actions sur mobile
========================================================== */

@media (max-width: 768px) {

  /* Empêche DataTables de trop compresser les grilles */
  #playersTable,
  #gamesTable {
    width: 100% !important;
    min-width: 720px;
  }

  /* Les cellules restent distinctes */
  #playersTable th,
  #playersTable td,
  #gamesTable th,
  #gamesTable td {
    white-space: nowrap;
  }

  /* Colonne Actions */
  #playersTable th:last-child,
  #playersTable td:last-child,
  #gamesTable th:last-child,
  #gamesTable td:last-child {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    text-align: right;
    white-space: nowrap;
  }

  /* Les boutons restent dans leur cellule */
  #playersTable td:last-child,
  #gamesTable td:last-child {
    overflow: hidden;
  }

  #playersTable td:last-child .btn,
  #gamesTable td:last-child .btn {
    position: static !important;
    float: none !important;
    display: inline-block;
    margin: 0 0 0 .2rem;
    padding: .2rem .4rem;
    font-size: .72rem;
  }

  /* Le scroll horizontal appartient uniquement à la grille */
  .page-table .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   Modales mobile — correctif hauteur et footer visible
========================================================== */

@media (max-width: 768px) {
  /*
   * Les formulaires sont les enfants directs de .modal-content.
   * Ils doivent donc eux-mêmes devenir des conteneurs flex afin
   * que seul .modal-body défile et que .modal-footer reste visible.
   */
  #playerModal .modal-dialog,
  #gameModal .modal-dialog {
    margin: .5rem;
    max-width: none;
    max-height: calc(100dvh - 1rem);
  }

  #gameStatsModal .modal-dialog {
    height: calc(100dvh - .5rem);
    max-height: calc(100dvh - .5rem);
    margin: .25rem;
  }

  #playerModal .modal-content,
  #gameModal .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
  }

  #gameStatsModal .modal-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  #playerModal form,
  #gameModal form,
  #gameStatsModal form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
  }

  #gameStatsModal form {
    height: 100%;
  }

  #playerModal .modal-header,
  #gameModal .modal-header,
  #gameStatsModal .modal-header {
    flex: 0 0 auto;
  }

  #playerModal .modal-body,
  #gameModal .modal-body,
  #gameStatsModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #playerModal .modal-footer,
  #gameModal .modal-footer,
  #gameStatsModal .modal-footer,
  #gameStatsModal .game-stats-footer {
    position: static !important;
    bottom: auto !important;
    flex: 0 0 auto;
    min-height: 56px;
    margin: 0;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    z-index: auto;
  }

  #playerModal .modal-footer .btn,
  #gameModal .modal-footer .btn,
  #gameStatsModal .modal-footer .btn {
    min-height: 40px;
  }
}


@media (max-width: 768px) {
  .lineup-player-layout {
    grid-template-columns: 30px 20px minmax(0, 1fr);
    gap: .45rem;
  }

  .lineup-mode-summary {
    font-size: .72rem;
  }

  .lineup-generation-status {
    align-items: flex-start;
  }

  .lineup-generation-status-main {
    flex: 1 1 100%;
  }

  .lineup-generation-status > #toggleLineupOptionsBtn {
    flex: 0 0 auto;
  }

  .lineup-order-source-badge,
  .lineup-style-summary {
    font-size: .72rem;
  }

  #generateLineupBtn {
    white-space: nowrap;
  }
}


/* ==========================================================
   Lineup compact — mobile
========================================================== */

@media (max-width: 768px) {
  .lineup-player-card {
    margin-bottom: .3rem !important;
  }

  .lineup-player-card .card-body {
    padding: .38rem .45rem !important;
  }

  .lineup-player-layout {
    grid-template-columns: 18px minmax(0, 1fr) 38px;
    column-gap: .35rem;
    align-items: start;
  }

  .lineup-rank {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin-top: .12rem;

    font-size: .58rem;
    box-shadow: none;
  }

  .lineup-player-name {
    margin-bottom: .05rem;
    font-size: .86rem;
    line-height: 1.1;
  }

  .lineup-player-meta {
    gap: .14rem;
    margin-bottom: .12rem;

    font-size: .67rem;
    line-height: 1.15;
  }

  .lineup-player-summary-row {
    display: block;
  }

  .lineup-trend {
    margin-bottom: .12rem;
    padding: .05rem .32rem;

    font-size: .66rem;
    line-height: 1.2;
  }

  .lineup-stats {
    line-height: 1.15;
  }

  .stat-inline {
    margin-right: .24rem;
    font-size: .67rem;
  }

  .lineup-player-tools {
    gap: .18rem;
  }

  .lineup-score {
    padding: .22rem .3rem;
    font-size: .58rem;
  }

  .lineup-drag-handle {
    width: 30px;
    min-width: 30px;
    height: 30px;
    font-size: 1.5rem;
    border-radius: 5px;
  }

  .lineup-details-toggle {
    margin-top: .12rem !important;
    padding-top: 0;
    padding-bottom: 0;

    font-size: .66rem;
    line-height: 1.15;
  }

  .lineup-player-details {
    margin-top: .12rem;
    padding-top: .35rem;
  }
}


/* ==========================================================
   Aperçu des styles offensifs — mobile compact
========================================================== */

@media (max-width: 768px) {
  /*
   * Réduit l'espace sous l'ensemble des styles.
   */
  #lineupStrategySummary {
    margin-bottom: .45rem !important;
  }

  /*
   * Les classes Bootstrap p-2 et mb-2 présentes dans le HTML
   * sont volontairement surchargées ici pour conserver le
   * JavaScript intact.
   */
  .lineup-strategy-summary {
    min-height: 28px;
    margin-bottom: .28rem !important;
    padding: .22rem .48rem !important;

    display: flex;
    align-items: center;

    border-radius: 6px !important;

    font-size: .72rem !important;
    line-height: 1.05;
  }

  .lineup-strategy-summary strong {
    font-size: .74rem;
    line-height: 1.05;
  }

  /*
   * Le dernier bouton ne crée pas d'espace inutile avant
   * le premier joueur.
   */
  .lineup-strategy-summary:last-child {
    margin-bottom: 0 !important;
  }

  /*
   * Le libellé de section demeure lisible, mais plus compact.
   */
  #lineupStrategySummary + #lineupResult {
    margin-top: 0;
  }

  .lineup .card-body > .small.text-muted.mb-2 {
    margin-bottom: .3rem !important;
    font-size: .72rem;
  }
}


@media (max-width: 768px) {
  .pwa-install-section #installPwaBtn {
    width: 100%;
  }
}


@media (max-width: 768px) {
  .pwa-ios-instructions {
    padding: .7rem .8rem;
  }

  .pwa-install-steps {
    padding-left: 1.1rem;
    font-size: .85rem;
  }
}


@media (max-width: 768px) {
  .network-status-indicator {
    min-height: 28px;
    padding: .22rem .48rem;

    font-size: .7rem;
  }

  .network-status-dot {
    width: 7px;
    height: 7px;
  }
}


@media (max-width: 768px) {
  .auto-sync-section
  #checkAutoSyncBtn {
    width: 100%;
  }

  .auto-sync-status {
    padding: .65rem .7rem;
  }
}