/* ==========================================================================
   MEETINGS — Responsivo (Media Queries)
   ========================================================================== */

/* ── Telas médias (tablets) ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Confirm modal: empilhar data + observações */
  #confirmForm [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer do confirm: reduzir padding */
  .confirm-footer {
    padding: var(--space-4);
  }

  .confirm-footer-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {

  /* ── Grid de cards ─────────────────────────────────────────────────────── */
  .meetings-grid {
    grid-template-columns: 1fr;
  }

  /* ── Formulário de criação ─────────────────────────────────────────────── */
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .form-row-3 .form-group:nth-child(2),
  .form-row-3 .form-group:nth-child(3) {
    grid-column: 1;
  }

  /* ── Modal tamanhos ────────────────────────────────────────────────────── */
  .modal-large,
  .modal-xlarge {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95vh;
    margin-top: auto;
  }

  /* ── Stepper: esconde labels ───────────────────────────────────────────── */
  .meeting-stepper {
    padding: var(--space-3) var(--space-4);
  }

  .meeting-step-label {
    display: none;
  }

  /* ── Attendance: 2-3 colunas em telas médias ───────────────────────────── */
  .attendance-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-2);
  }

  /* ── Requisitos: coluna única para garantir visibilidade ────────────────── */
  .req-children-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Confirm footer ────────────────────────────────────────────────────── */
  .confirm-summary-bar {
    gap: var(--space-6);
  }

  .confirm-footer {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .confirm-footer-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .btn-cancel-meeting {
    width: 100%;
    justify-content: center;
  }

  .btn-draft-meeting {
    width: 100%;
    justify-content: center;
  }

  .btn-confirm-meeting {
    width: 100%;
    justify-content: center;
  }

  .draft-badge {
    justify-content: center;
    width: 100%;
  }

  /* ── Photo preview ─────────────────────────────────────────────────────── */
  .photo-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  /* ── Confirm form: empilhar data + observações ─────────────────────────── */
  #confirmForm [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Attendance bulk actions: melhor em mobile ─────────────────────────── */
  .attendance-bulk-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  #attCounter {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
  }

  /* ── Seletor RSS: bottom sheet no mobile ───────────────────────────────── */
  .rss-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    margin: 0 !important;
  }

  .rss-header {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .rss-footer {
    flex-direction: column;
    align-items: stretch;
    border-radius: 0;
    gap: var(--space-2);
  }

  .rss-footer-count {
    justify-content: center;
  }

  .rss-footer-actions {
    justify-content: stretch;
    width: 100%;
  }

  .rss-btn--confirm {
    flex: 1;
  }

  /* Tags: tamanho máximo menor em mobile */
  .req-tag {
    max-width: 200px;
  }

  /* ── Confirm meeting info: empilhar no mobile ──────────────────────────── */
  .confirm-meeting-info {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .confirm-meeting-info-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* ── Upload zone: botões menores ───────────────────────────────────────── */
  .upload-zone-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .upload-zone-btn {
    justify-content: center;
    width: 100%;
  }

  .photo-upload-zone {
    padding: var(--space-5) var(--space-4);
  }
}

/* ── Telas muito pequenas (smartphones compactos) ────────────────────────── */
@media (max-width: 420px) {

  /* Attendance: coluna única para smartphones pequenos */
  .attendance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .attendance-card {
    padding: var(--space-3) var(--space-2);
  }

  .att-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .att-name {
    font-size: 0.75rem;
  }

  /* Requisitos: sempre coluna única */
  .req-children-grid {
    grid-template-columns: 1fr !important;
    padding: var(--space-2) var(--space-3);
  }

  .req-child-checkbox {
    padding: var(--space-2);
  }

  .req-child-name {
    font-size: 0.8125rem;
  }

  /* Section titles menores */
  .confirm-section-title {
    font-size: 0.9375rem;
  }

  /* Meeting modal body: menos padding */
  .meeting-modal-body {
    padding: var(--space-4) !important;
  }
}