/* ===================================================================
   Mobile — Lançamentos (#view-financeiro) e Solicitações (#view-board)
   Carrega por último: precisa vencer design-v2.css / styles.css.
   Regra: nada de overflow oculto para esconder largura — o conteúdo é
   reorganizado (cards, uma coluna) para caber; roladores internos só onde
   são deliberados.
   =================================================================== */

/* Seletor "Mover para…" do card — só existe no celular */
.task-move { display: none; }

/* ---------- Lançamentos: extrato em cards ---------- */
@media (max-width: 720px) {
    #view-financeiro .view-actions { width: 100%; }
    #view-financeiro .view-actions > * { min-width: 0; }
    #view-financeiro .view-actions .filter-select,
    #view-financeiro .view-actions .fin-category-filter,
    #view-financeiro .view-actions .btn-primary,
    #view-financeiro .view-actions .btn-outline { width: 100%; }

    .financeiro-extrato { overflow: visible; padding: 0 16px 24px; background: transparent; border: 0; box-shadow: none; }
    .financeiro-extrato .extrato-table-header { padding: 4px 2px 10px; }

    .extrato-table, .extrato-table tbody, .extrato-table tr, .extrato-table td { display: block; width: 100%; box-sizing: border-box; }
    /* cabeçalho continua disponível para leitores de tela */
    .extrato-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .extrato-table tbody tr {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon desc  desc"
            "icon data  valor"
            ".    validade validade"
            "status status acoes";
        gap: 6px 12px;
        align-items: center;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface, var(--bg-surface));
    }
    .extrato-table td { padding: 0; border: 0; min-width: 0; }
    .extrato-table td:first-child { min-width: 0; }
    .extrato-table .tx-cell-date { grid-area: data; font-size: 12px; }
    .extrato-table td:nth-child(2) { grid-area: icon; }
    .extrato-table .tx-cell-desc { grid-area: desc; overflow-wrap: anywhere; word-break: break-word; font-weight: 600; }
    .extrato-table .tx-cell-valor { grid-area: valor; justify-self: end; white-space: nowrap; text-align: right; }
    .extrato-table .tx-cell-validade { grid-area: validade; font-size: 12px; color: var(--muted); }
    .extrato-table .tx-cell-validade::before { content: attr(data-label) ": "; }
    .extrato-table .tx-cell-validade.tx-cell-empty { display: none; }
    .extrato-table .tx-cell-status { grid-area: status; }
    .extrato-table .tx-cell-acoes { grid-area: acoes; justify-self: end; }
    .extrato-table .status-inline-select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2, transparent); }
    .extrato-table .tx-cell-acoes button { min-width: 44px; min-height: 44px; }

    .extrato-footer-row { flex-wrap: wrap; gap: 8px 16px; }
    #financeiro-relatorio, #cashback-relatorio { overflow-wrap: anywhere; }
}

/* ---------- Modal de lançamento / observação ---------- */
@media (max-width: 560px) {
    #lancamento-modal .modal { max-height: 100dvh; max-height: calc(100dvh - 16px); }
    #lancamento-modal .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    #lancamento-modal .form-group { min-width: 0; }
    #lancamento-modal :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
    #lancamento-modal .modal-footer { position: sticky; bottom: 0; gap: 8px; padding: 10px 0 2px; background: var(--bg-surface); }
    #lancamento-modal .modal-footer .btn-primary { flex: 1; }
}

/* ---------- Solicitações: quadro em uma coluna, sem arrastar ---------- */
@media (max-width: 720px) {
    #view-board .board-page-header { padding-left: 16px; padding-right: 16px; }
    #view-board .board-page-actions { width: 100%; }
    #view-board .board-page-actions > * { width: 100%; }

    #board-filtros { padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    #board-filtros :is(select, input, button) { width: 100%; max-width: 100%; min-width: 0 !important; box-sizing: border-box; min-height: 44px; }

    #board.board { display: flex; flex-direction: column; overflow: visible; align-items: stretch; gap: 14px; padding: 8px 16px 28px; }
    #board .column { min-width: 0 !important; max-width: none !important; width: 100% !important; max-height: none !important; flex-shrink: 1 !important; box-sizing: border-box; }
    #board .column-cards { overflow: visible !important; max-height: none !important; }
    #board .column-name { overflow-wrap: anywhere; }
    #board .task-card .card-title { overflow-wrap: anywhere; word-break: break-word; }
    #board .task-card { -webkit-user-drag: none; }

    .task-move { display: grid; gap: 4px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .task-move-select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 16px; }
}

/* ---------- Modal da tarefa (Solicitações) ---------- */
@media (max-width: 768px) {
    /* 1fr = minmax(auto, 1fr): um <select> com nome longo definia a largura mínima da coluna */
    #task-modal .task-layout { grid-template-columns: minmax(0, 1fr) !important; }
    #task-modal .task-content,
    #task-modal .task-sidebar,
    #task-modal .task-person-card,
    #task-modal .form-group,
    #task-modal .custom-field-item { min-width: 0; max-width: 100%; }
    #task-modal :is(input, select, textarea) { max-width: 100%; box-sizing: border-box; }
    #task-modal #task-form { padding: 20px 16px !important; }
    #task-modal .tpc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}