/* =====================================================================================
   EFICÁCIA CRM — mod-contabilidade.css
   Só o que o design system (design-system.css) NÃO cobre. Prefixo: mc-
   Mobile-first. Nenhuma regra faz o body ter scroll horizontal.
   ===================================================================================== */

/* `.mc-espaco`, `.mc-grid-3`, `.mc-kpi-2`, `.mc-kpi-6`, `.mc-presets` e `.mc-pago`
   foram apagados com a vista de horas que os usava (agora em mod-tempo.css). */

/* ---------- Grelhas de cartões (estatísticas) ----------------------------------- */
.mc-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-page-gap, 18px);
    min-width: 0;
}
@media (min-width: 900px) {
    .mc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- KPIs: nunca 1 coluna em mobile (perde-se a comparação) -------------- */
.ds-kpi-grid.mc-kpi-3,
.ds-kpi-grid.mc-kpi-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .ds-kpi-grid.mc-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-kpi-grid.mc-kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mc-tab-num { font-variant-numeric: tabular-nums; }

/* ---------- Gráficos: altura FIXA, legenda por baixo, zero overflow ------------- */
.mc-chart {
    --mc-chart-h: 260px;
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--mc-chart-h);
    overflow: hidden;
}
.mc-chart-inner { position: relative; height: 100%; width: 100%; min-width: 0; }
.mc-chart canvas { max-width: 100%; }

/* Gráfico largo (48 rubricas): scroll horizontal PRÓPRIO, nunca no body */
@media (min-width: 768px) {
    .mc-chart--largo {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .mc-chart--largo .mc-chart-inner { min-width: 1100px; }
}

/* ---------- Legenda manual (doughnuts) ------------------------------------------ */
.mc-legenda {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 210px;
    overflow-y: auto;
    min-width: 0;
}
.mc-legenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm, 13px);
    min-width: 0;
}
.mc-legenda-cor {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.mc-legenda-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--neutral-700);
}
.mc-legenda-valor {
    font-weight: 700;
    color: var(--neutral-800);
    flex-shrink: 0;
}

/* ---------- Chips de período / filtros ativos ----------------------------------- */
.mc-chips-ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    min-width: 0;
}
.mc-anos { flex-wrap: wrap; }

/* ---------- Lista de Despesas: cartões até 1024px (spec §11.5) ------------------ */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mc-cartoes-1024 { background: transparent; border: none; box-shadow: none; overflow-x: visible; }
    .mc-cartoes-1024 .ds-table { display: block; }
    .mc-cartoes-1024 .ds-table thead { display: none; }
    .mc-cartoes-1024 .ds-table tbody { display: flex; flex-direction: column; gap: 10px; }
    .mc-cartoes-1024 .ds-table tbody tr {
        display: block;
        background: var(--neutral-0);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-lg);
        padding: 6px 14px;
        box-shadow: var(--shadow-xs);
    }
    .mc-cartoes-1024 .ds-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--neutral-100);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mc-cartoes-1024 .ds-table tbody td:last-child { border-bottom: none; }
    .mc-cartoes-1024 .ds-table tbody td::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--neutral-400);
        text-align: left;
        flex-shrink: 0;
    }
    .mc-cartoes-1024 .ds-table td.ds-td-hero,
    .mc-cartoes-1024 .ds-table td.ds-td-actions { justify-content: space-between; }
    .mc-cartoes-1024 .ds-table td.ds-td-hero::before,
    .mc-cartoes-1024 .ds-table td.ds-td-actions::before { content: none; }
    .mc-cartoes-1024 .ds-table td.ds-td-actions { justify-content: flex-end; }
    .mc-cartoes-1024 .ds-row-actions { opacity: 1 !important; }
}

/* ---------- FAB (mobile) --------------------------------------------------------- */
.mc-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: var(--ds-z-sticky, 40);
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-lg, 0 10px 24px -6px rgba(15, 23, 42, 0.35));
}
.mc-fab > svg { margin: 0; }

/* ---------- Barras de progresso do orçamento ------------------------------------ */
.mc-progresso {
    position: relative;
    height: 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--neutral-100);
    overflow: hidden;
    margin: 6px 0;
}
.mc-progresso-barra {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-500, #3b82f6);
    transition: width var(--transition-base, 200ms) ease;
}
.mc-progresso--excede .mc-progresso-barra { background: var(--error-500, #ef4444); }

/* ---------- Orçamento: lista mobile agrupada por família ------------------------ */
.mc-orc-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mc-familia {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    overflow: hidden;
}
.mc-familia > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    min-height: var(--ds-touch, 44px);
    cursor: pointer;
    font-weight: 700;
    color: var(--neutral-800);
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.mc-familia > summary::-webkit-details-marker { display: none; }
.mc-familia > summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--neutral-400);
    border-bottom: 2px solid var(--neutral-400);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform var(--transition-fast, 150ms);
}
.mc-familia[open] > summary::after { transform: rotate(-135deg); }
.mc-familia-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mc-orc-item { padding: 10px 14px; border-top: 1px solid var(--neutral-100); }
.mc-orc-item-top,
.mc-orc-item-bot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-sm, 13px);
    min-width: 0;
}
.mc-orc-item-bot { font-size: var(--text-xs, 11.5px); }
.mc-orc-item-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--neutral-700); }

/* Linha de cabeçalho de família na tabela do orçamento (desktop) */
.mc-tabela-orc tbody tr.mc-linha-familia td {
    background: var(--neutral-50);
    font-size: var(--text-xs, 11.5px);
    letter-spacing: 0.02em;
}
.mc-tabela-orc tbody tr.mc-linha-familia td .ds-cell-muted { margin-left: 8px; font-weight: 500; }
.mc-tabela-orc tbody tr.mc-linha-familia:hover td { background: var(--neutral-50); }

/* ---------- Aviso orçamental no modal de despesa -------------------------------- */
.mc-orcamento-aviso {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md, 8px);
    background: var(--neutral-25, #fafafa);
}
.mc-orcamento-aviso--excede {
    border-color: var(--warning-300, #fcd34d);
    background: var(--warning-50, #fffbeb);
}
.mc-orcamento-aviso .ds-help { margin-top: 6px; display: flex; align-items: center; gap: 5px; }

/* ---------- Editor de Orçamento -------------------------------------------------- */
.mc-editor { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.mc-editor-familia {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--neutral-0);
}
.mc-editor-familia-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
}
.mc-editor-familia-cab h3 {
    margin: 0;
    font-size: var(--text-sm, 13px);
    font-weight: 700;
    color: var(--neutral-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mc-editor-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--neutral-100);
    min-width: 0;
}
.mc-editor-linha:first-of-type { border-top: none; }
.mc-editor-nome {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm, 13px);
    color: var(--neutral-700);
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.mc-editor-campo { width: 132px; flex: 0 0 auto; }
.mc-editor-campo .ds-input { text-align: right; font-variant-numeric: tabular-nums; }

/* Barra de ações fixa no fundo (mobile) / sticky (desktop) */
.mc-barra-acoes {
    position: sticky;
    bottom: 0;
    z-index: var(--ds-z-sticky, 40);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px var(--ds-card-pad, 16px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0 calc(-1 * var(--ds-page-pad, 16px));
    background: var(--neutral-0);
    border-top: 1px solid var(--neutral-200);
    box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.2);
    min-width: 0;
}
.mc-barra-acoes > .ds-btn { flex: 1 1 auto; min-width: 0; }
.mc-barra-acoes > .ds-cell-muted { flex: 1 1 auto; }
.mc-barra-acoes .mc-sujo { color: var(--warning-600, #d97706); font-weight: 700; }
@media (min-width: 768px) {
    .mc-barra-acoes { margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--neutral-200); }
    .mc-barra-acoes > .ds-btn { flex: 0 0 auto; }
}
.mc-com-barra { padding-bottom: 4px; }

/* ---------- Anexo / dropzone ----------------------------------------------------- */
.mc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 18px 14px;
    border: 1.5px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, #fafafa);
    color: var(--neutral-600);
    font-size: var(--text-sm, 13px);
    cursor: pointer;
    min-height: var(--ds-touch, 44px);
    transition: var(--transition-fast, 150ms);
}
.mc-dropzone:hover,
.mc-dropzone:focus-visible { border-color: var(--primary-400, #60a5fa); background: var(--primary-50, #eff6ff); }
.mc-dropzone .ds-cell-muted { font-size: var(--text-xs, 11.5px); }
.mc-dropzone .ds-btn { margin-top: 4px; }

.mc-anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    min-width: 0;
}
.mc-anexo-ico { color: var(--neutral-400); flex-shrink: 0; display: inline-flex; }
.mc-anexo-nome {
    font-weight: 600;
    color: var(--neutral-800);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-anexo-acoes { display: inline-flex; gap: 4px; flex-shrink: 0; }

/* ---------- Diversos -------------------------------------------------------------- */
.mc-ponto-cor {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.ds-input.mc-cor {
    padding: 4px;
    height: var(--ds-control-h-md, 44px);
    cursor: pointer;
}

/* Editor rich text: barra com scroll horizontal em mobile, altura mínima usável */
.ds-richtext-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.ds-richtext-toolbar::-webkit-scrollbar { height: 0; }
.ds-richtext-content { min-height: 120px; }
.ds-richtext-content:empty::before { content: attr(data-placeholder); color: var(--neutral-400); }

/* Alvo de toque mínimo nas linhas clicáveis das tabelas do módulo */
.ds-table tbody tr.ds-row-link td { min-height: 24px; }
@media (max-width: 767.98px) {
    .ds-table tbody tr.ds-row-link { min-height: var(--ds-touch, 44px); }
}

/* Nunca deixar o conteúdo do módulo empurrar o body na horizontal */
[data-mc-vista] { min-width: 0; max-width: 100%; overflow-x: clip; }

/* ---------- Alvos de toque >= 44px (independente do mobile-toque.css) ----------- */
@media (max-width: 1023.98px) {
    [data-mc-vista] .ds-chip,
    [data-mc-vista] .ds-icon-btn,
    [data-mc-vista] .ds-btn,
    [data-mc-vista] .ds-page-btn,
    [data-mc-vista] .ds-tab,
    .ds-modal .ds-btn,
    .ds-modal .ds-icon-btn,
    .ds-modal .ds-richtext-btn {
        min-height: 44px;
    }
    [data-mc-vista] .ds-icon-btn,
    [data-mc-vista] .ds-page-btn,
    .ds-modal .ds-icon-btn { min-width: 44px; }

    [data-mc-vista] .ds-input,
    [data-mc-vista] .ds-select,
    .ds-modal .ds-input,
    .ds-modal .ds-select { min-height: 44px; }

    /* o editor de orçamento tem 48 campos: alvo confortável sem partir a grelha */
    .mc-editor-campo { width: 128px; }
    .mc-editor-campo .ds-input { min-height: 44px; }
    .mc-familia > summary { min-height: 48px; }
}

/* Telemóvel em paisagem (844x390): o modal tem de caber com cabeçalho e rodapé */
@media (max-height: 520px) {
    .mc-chart { --mc-chart-h: 200px; }
    .ds-modal .ds-richtext-content { min-height: 80px; }
    .mc-dropzone { padding: 10px; }
}