/* =========================================================
   myMusicApp — camada responsiva global
   Aplica-se a todas as páginas (incluindo as antigas em
   Bootstrap 4) para que funcionem bem no telemóvel.
   ========================================================= */

@media (max-width: 992px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }

  /* Tabelas antigas passam a deslizar na horizontal em vez de rebentar */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-responsive > table {
    display: table;
    white-space: normal;
  }

  /* Elementos fixos (pesquisa/logout) deixam de tapar o conteúdo */
  .search-fixed,
  .logout-btn {
    position: static !important;
    width: 100%;
    margin: 0 0 10px;
    justify-content: center;
  }

  .search-fixed input {
    width: 100%;
  }

  body[style*="padding-top"],
  body {
    padding-top: 12px;
  }

  /* Botões e formulários ocupam a largura toda */
  .btn-block,
  form .btn-lg {
    width: 100%;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px; /* evita o zoom automático no iOS */
  }

  iframe,
  embed,
  object,
  video {
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .card,
  .panel {
    border-radius: 14px;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
}

@media (max-width: 576px) {
  .btn + .btn {
    margin-top: 6px;
  }

  .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pagination {
    flex-wrap: wrap;
  }
}

/* Áreas seguras (iPhone com notch) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}