/* ============================================================
   RESPONSIVIDADE GERAL (TABLETS / ECRÃS MÉDIOS)
   ============================================================ */
@media (max-width: 900px) {
    .meusfrm .frm-grid,
    .meusfrm .frm-grid_top {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 768px) {
    .disp-consulta .disp-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        text-align: center;
    }
    .disp-consulta .disp-filter-container {
        width: 100%;
        order: 1;
    }
    .disp-consulta .disp-nav-center {
        width: 100%;
        justify-content: center;
        order: 2;
    }
    .disp-consulta .disp-nav h3 {
        width: 100%;
        order: 3;
        margin-top: 0.5rem;
    }
}

/* ============================================================
   MOBILE (TELEMÓVEIS E TABLETS PEQUENOS < 600px)
   ============================================================ */
@media (max-width: 600px) {
    /* Estrutura de Grelha e Blocos */
    .meusfrm .frm-grid,
    .meusfrm .frm-grid_top {
        display: flex !important; /* Em vez de grid, usamos flex para empilhar */
        flex-direction: column;
    }
    .meusfrm .frm-grid .frm-field,
    .meusfrm .frm-grid_top .frm-field {
        grid-column: span 1 !important;
    }

    .meusfrm .premios_escolhidos-row,
    .meusfrm .premios_entregues-row {
        align-items: center !important;
    }

    .frm-actions,
    .frm-actions-left,
    .frm-actions-right,
    .produto-row,
    .pagamento-row,
    .produtos-header,
    .pagamentos-header {
        display: block !important;
        width: 100% !important;
    }

    /* Campos e Inputs */
    .meusfrm input,
    .meusfrm select,
    .meusfrm textarea,
    .produto-row input,
    .produto-row select,
    .pagamento-row input,
    .pagamento-row select,
    .aql-localizar-input {
        width: 100% !important;
        font-size: 1rem;
        padding: 0.6rem 0.75rem;
    }

    /* Larguras específicas de colunas (Reset) */
    .produto-row [class*='frm-col-'],
    .pagamento-row [class*='frm-col-'],
    .produtos-header > div,
    .pagamentos-header > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    /* Botões */
    .frm-actions button,
    .aql-localizar-btn {
        width: 100% !important;
        margin-bottom: 10px;
        font-size: 1.1rem;
        justify-content: center !important;
        padding: 12px 0 !important;
    }
    .produto-row .btn-remove-produto {
        width: 100% !important;
        margin-bottom: 10px;
        font-size: 1.1rem;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Cabeçalhos de Secções (Tabelas transformadas) */
    .produtos-header div,
    .pagamentos-header div {
        font-weight: 600;
        padding-bottom: 3px;
        border-bottom: 1px solid #ddd;
    }

    /* Cabeçalho do Formulário (Datas e Títulos) */
    .meusfrm .frm-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }
    .meusfrm .frm-header-left,
    .meusfrm .frm-header-center,
    .meusfrm .frm-header-right {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0;
    }

    .meusfrm .frm-header-left input {
        margin-bottom: 10px;
    }

    .meusfrm .meusfrm-datefilter,
    .meusfrm .meusfrm-date-navigator {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    .meusfrm #aql-date-mode {
        width: 100%;
    }

    /* Modal Localizar */
    .aql-localizar-modal-content {
        width: 95% !important;
        padding: 12px !important;
    }
    .aql-localizar-loc1,
    .aql-localizar-loc2 {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .aql-localizar-tabela {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .euro-wrapper::before {
        left: 10px;
    }
    html,
    body {
        overflow-x: hidden; /* Impede o scroll lateral que causa o efeito de "cortado" */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .meusfrm #password {
        margin-bottom: 20px !important;
    }
}

/* Ajustes adicionais para garantir que o site não "estique" ou "corte" em telas pequenas */
@media (max-width: 600px) {
    /* Reset de larguras fixas que vieram do HTML */
    .aql-localizar-input,
    .meusfrm input[style],
    .meusfrm select[style] {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Impedir que as tabelas "estiquem" o ecrã */
    .meusfrm-tabela,
    .aql-localizar-tabela {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* Cria scroll apenas na tabela, não no site todo */
        -webkit-overflow-scrolling: touch;
    }

    /* Garantir que o container principal não transborda */
    .frm-container,
    .frm-wrap {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 5px !important;
    }
}

/* Ajustes específicos para checkboxes */
@media (max-width: 600px) {
    /* Corrige o container da checkbox */
    .meusfrm .frm-check {
        display: block !important;
        width: 100% !important;
    }

    /* Checkboxes e Outros Detalhes */
    .meusfrm .frm-check label {
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        width: 100% !important;
        white-space: normal !important; /* Força o texto a quebrar linha */
        cursor: pointer;
    }

    /* Garante que o input (o quadrado) não encolha */
    .frm-check input[type='checkbox'] {
        flex-shrink: 0;
        width: 20px !important;
        height: 20px !important;
        margin-top: 2px;
    }

    .frm-row input {
        width: 100% !important; /* Garante que os campos de texto da confirmação não fujam */
        margin-bottom: 5px;
    }

    /* MATA as margens fixas que estão a empurrar o texto */
    .meusfrm .frm-field label[style*='margin-left'],
    .meusfrm .frm-row[style*='gap'] {
        margin-left: 0 !important;
        gap: 10px !important;
    }

    /* Ajuste para a linha "Confirmada por" */
    .meusfrm .frm-row {
        display: flex !important;
        flex-direction: column !important; /* Empilha tudo verticalmente no iPhone */
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .meusfrm .frm-row label {
        margin-left: 0 !important; /* Remove aquele margin-left de 8.8rem */
    }
}

/* ============================================================
   RESOLUÇÃO DE ECRÃS (DESKTOPS / LAPTOPS) 1366px
   ============================================================ */
@media (max-width: 1366px) {
    .meusfrm .ignorar-duplicados label {
        font-size: 0.75rem !important;
    }

    .btn-adicionar-outra {
        font-size: 0.7rem !important;
    }

    .meusfrm .frm-section input[type='datetime-local'] {
        font-size: 0.7rem !important;
    }
}