/* =========================================================================
   Bandeira Stay — Camada Mobile (PWA)
   Tudo aqui e escopado em `body.mobile-ui`, aplicada por mobile.js apenas
   em telas pequenas. O desktop nunca ve nenhuma destas regras.
   ========================================================================= */

body.mobile-ui {
    --mb-appbar-h: calc(56px + env(safe-area-inset-top, 0px));
    --mb-tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px));
    --mb-gutter: 14px;
    --mb-radius: 16px;
    --mb-surface: #ffffff;
    --mb-canvas: #f1f4f6;
    --mb-ink: #16202b;
    --mb-ink-soft: #64748b;
    --mb-line: #e4e9ee;
    --mb-brand: #2d7a7a;
    --mb-brand-deep: #0d1b2a;
    --mb-accent: #d4a574;
    --mb-shadow: 0 1px 2px rgba(16,32,45,.06), 0 4px 16px rgba(16,32,45,.06);

    background: var(--mb-canvas);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

/* Numeros monetarios alinhados: tabular-nums evita a "danca" dos digitos */
body.mobile-ui .indicador-valor,
body.mobile-ui .analitica-card-value,
body.mobile-ui .mb-kpi-value,
body.mobile-ui td { font-variant-numeric: tabular-nums; }

/* ---------- 1. Shell: some com a sidebar, abre espaco pro app bar ---------- */

body.mobile-ui .container { flex-direction: column; }
body.mobile-ui .sidebar,
body.mobile-ui .menu-toggle { display: none !important; }

body.mobile-ui .main {
    margin-left: 0;
    width: 100%;
    padding: 16px var(--mb-gutter) 24px;
    background: var(--mb-canvas);
}
/* espaco para app bar + tab bar so quando a casca esta no ar (pos-login) */
body.mobile-ui.mb-authed .main {
    padding: calc(var(--mb-appbar-h) + 8px) var(--mb-gutter)
             calc(var(--mb-tabbar-h) + 24px);
}
body.mobile-ui.mb-authed.mb-has-chips .main { padding-top: calc(var(--mb-appbar-h) + 52px); }

/* ---------- 2. App bar ---------- */

.mb-appbar {
    position: fixed; inset: 0 0 auto 0; z-index: 900;
    height: var(--mb-appbar-h);
    padding: env(safe-area-inset-top, 0px) 6px 0 14px;
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #1e2d3d 0%, var(--mb-brand-deep) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 14px rgba(0,0,0,.18);
}
.mb-appbar__title {
    font-size: 17px; font-weight: 700; letter-spacing: -.01em;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-appbar__actions { display: flex; align-items: center; gap: 2px; }
.mb-iconbtn {
    appearance: none; border: 0; background: transparent; color: #fff;
    min-width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; position: relative;
    transition: background .15s;
}
.mb-iconbtn:active { background: rgba(255,255,255,.16); }
.mb-iconbtn__badge {
    position: absolute; top: 6px; right: 6px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--mb-accent); color: #2b1c08;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--mb-brand-deep);
}

/* ---------- 3. Barra de chips (filtros ativos) ---------- */

.mb-chips {
    position: fixed; z-index: 880;
    top: var(--mb-appbar-h); left: 0; right: 0;
    display: flex; gap: 7px; align-items: center;
    padding: 8px var(--mb-gutter);
    background: var(--mb-canvas);
    border-bottom: 1px solid var(--mb-line);
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mb-chips::-webkit-scrollbar { display: none; }
.mb-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 16px;
    background: #fff; border: 1px solid var(--mb-line);
    font-size: 13px; font-weight: 600; color: var(--mb-ink);
    box-shadow: 0 1px 2px rgba(16,32,45,.05);
    white-space: nowrap;
}
.mb-chip--on { background: rgba(45,122,122,.10); border-color: rgba(45,122,122,.35); color: #1a4d4d; }
.mb-chip--ghost { color: var(--mb-ink-soft); font-weight: 500; }

/* ---------- 4. Tab bar ---------- */

.mb-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 900;
    height: var(--mb-tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--mb-line);
}
.mb-tab {
    appearance: none; border: 0; background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px 4px; cursor: pointer;
    color: var(--mb-ink-soft); font-size: 10.5px; font-weight: 600;
    letter-spacing: -.01em; transition: color .15s;
}
.mb-tab__icon { font-size: 21px; line-height: 1; transition: transform .18s; }
.mb-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-tab--active { color: var(--mb-brand); }
.mb-tab--active .mb-tab__icon { transform: translateY(-1px) scale(1.06); }
.mb-tab:active .mb-tab__icon { transform: scale(.9); }

/* ---------- 5. Scrim + bottom sheet ---------- */

.mb-scrim {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(10,18,26,.44);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.mb-scrim--on { opacity: 1; pointer-events: auto; }

.mb-sheet {
    position: fixed; inset: auto 0 0 0; z-index: 1210;
    background: var(--mb-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(10,18,26,.24);
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    max-height: min(86vh, 720px);
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mb-sheet--on { transform: translateY(0); }
.mb-sheet__grip {
    width: 38px; height: 4px; border-radius: 2px;
    background: #cfd8e0; margin: 9px auto 2px; flex: 0 0 auto;
}
.mb-sheet__head {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 18px 10px; flex: 0 0 auto;
}
.mb-sheet__title { font-size: 16px; font-weight: 700; color: var(--mb-ink); flex: 1; }
.mb-sheet__close {
    appearance: none; border: 0; background: #eef2f5; color: var(--mb-ink-soft);
    width: 30px; height: 30px; border-radius: 15px; font-size: 15px; cursor: pointer;
}
.mb-sheet__body {
    padding: 0 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mb-sheet__foot {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mb-line); display: flex; gap: 10px; flex: 0 0 auto;
}
.mb-sheet__foot .btn { flex: 1; justify-content: center; min-height: 46px; }

/* itens do menu "Mais" */
.mb-navlist { display: flex; flex-direction: column; }
.mb-navlist__item {
    display: flex; align-items: center; gap: 14px;
    min-height: 54px; padding: 6px 4px; cursor: pointer;
    border-bottom: 1px solid var(--mb-line);
    font-size: 15.5px; font-weight: 600; color: var(--mb-ink);
}
.mb-navlist__item:last-child { border-bottom: 0; }
.mb-navlist__item:active { background: #f5f8fa; }
.mb-navlist__item--danger { color: var(--red); }
.mb-navlist__icon { font-size: 20px; width: 26px; text-align: center; }

/* ---------- 6. Filtros dentro do sheet ---------- */

body.mobile-ui .card.filter-bar {
    display: none;                 /* o mobile.js reposiciona dentro do sheet */
}
.mb-sheet .card.filter-bar {
    display: flex !important;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: transparent; box-shadow: none; padding: 0; margin: 0;
}
.mb-sheet .card.filter-bar .form-group { width: 100%; flex: 1 1 auto; }
.mb-sheet .card.filter-bar .form-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--mb-ink-soft); margin-bottom: 6px; display: block;
}

/* ---------- 7. select2 utilizavel no toque ---------- */

body.mobile-ui .select2-container { width: 100% !important; }
body.mobile-ui .select2-container--default .select2-selection--multiple,
body.mobile-ui .select2-container--default .select2-selection--single {
    min-height: 48px; border-radius: 12px; border: 1.5px solid var(--mb-line);
    padding: 4px 6px; font-size: 15px;
}
body.mobile-ui .select2-container--default .select2-selection__choice {
    margin: 5px 5px 0 0; padding: 5px 9px; border-radius: 9px; font-size: 14px;
    background: rgba(45,122,122,.10); border-color: rgba(45,122,122,.3); color: #1a4d4d;
}
body.mobile-ui .select2-container--default .select2-selection__choice__remove {
    margin-right: 6px; font-size: 16px; color: #1a4d4d;
}
/* O .select2-container tem position:absolute + z-index:1051, o que cria um
   stacking context proprio. Sem elevar o CONTAINER, o dropdown (filho) fica
   preso abaixo dos 1051 e some atras do bottom sheet (1210). */
body.mobile-ui .select2-container--open { z-index: 1320 !important; }

/* dropdown vira folha inferior: nada de listinha de 4px no meio da tela */
body.mobile-ui .select2-container--open .select2-dropdown {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100vw !important;
    border-radius: 20px 20px 0 0;
    border: 0; box-shadow: 0 -8px 40px rgba(10,18,26,.3);
    z-index: 1321;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.mobile-ui .select2-container--open .select2-results > .select2-results__options {
    max-height: 52vh;
}
body.mobile-ui .select2-results__option {
    padding: 15px 18px; font-size: 16px; min-height: 22px;
}
body.mobile-ui .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--mb-brand);
}
body.mobile-ui .select2-search--dropdown { padding: 12px; }
body.mobile-ui .select2-search--dropdown .select2-search__field {
    min-height: 44px; border-radius: 10px; font-size: 16px; padding: 8px 12px;
}

/* ---------- 8. Cards, KPIs e tipografia ---------- */

body.mobile-ui .card {
    border-radius: var(--mb-radius); padding: 16px; margin-bottom: 14px;
    box-shadow: var(--mb-shadow); border: 1px solid rgba(228,233,238,.9);
}
body.mobile-ui .page-header { margin-bottom: 14px; display: block; }
body.mobile-ui .page-header h1,
body.mobile-ui .page-header h2 { font-size: 20px; letter-spacing: -.02em; }

/* KPIs: 2 colunas com scroll-snap horizontal seria pior aqui — grid 2x e mais legivel */
body.mobile-ui .indicadores-grid,
body.mobile-ui .analitica-cards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin-bottom: 14px;
}
body.mobile-ui .indicador-card,
body.mobile-ui .analitica-card {
    padding: 13px 14px; border-radius: 14px; margin: 0;
    background: var(--mb-surface); border: 1px solid var(--mb-line);
    box-shadow: var(--mb-shadow); min-width: 0;
}
body.mobile-ui .indicador-label,
body.mobile-ui .analitica-card-title {
    font-size: 10.5px; letter-spacing: .045em; color: var(--mb-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.mobile-ui .indicador-valor,
body.mobile-ui .analitica-card-value {
    font-size: 19px; letter-spacing: -.03em; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* o card de Lucro merece destaque e a largura inteira */
body.mobile-ui .indicadores-grid > .indicador-card:last-child { grid-column: 1 / -1; }
body.mobile-ui .indicadores-grid > .indicador-card:last-child .indicador-valor { font-size: 25px; }
body.mobile-ui .analitica-card-chart { height: 52px; margin-top: 6px; }

/* ---------- 9. Tabelas viram cartoes (rotulos via data-label) ---------- */

body.mobile-ui table.mb-cards { display: block; width: 100%; border-collapse: separate; }
body.mobile-ui table.mb-cards thead { display: none; }
/* cabecalho que vive no tbody (tabelas sem <thead>) tambem some no modo cartao */
body.mobile-ui table.mb-cards tr.mb-headrow { display: none; }
body.mobile-ui table.mb-cards tbody { display: block; }
body.mobile-ui table.mb-cards > tr { display: block; }
body.mobile-ui table.mb-cards tbody tr {
    display: block; background: var(--mb-surface);
    border: 1px solid var(--mb-line); border-radius: 14px;
    padding: 6px 14px; margin-bottom: 10px; box-shadow: var(--mb-shadow);
}
body.mobile-ui table.mb-cards tbody tr.mb-card-total {
    background: rgba(45,122,122,.07); border-color: rgba(45,122,122,.28);
}
body.mobile-ui table.mb-cards tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 8px 0; border: none; text-align: right; font-size: 14.5px;
    border-bottom: 1px dashed var(--mb-line);
}
body.mobile-ui table.mb-cards tbody tr td:last-child { border-bottom: 0; }
body.mobile-ui table.mb-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mb-ink-soft);
}
body.mobile-ui table.mb-cards tbody td[data-label=""]::before,
body.mobile-ui table.mb-cards tbody td.mb-nolabel::before { content: none; }
/* a regra antiga de coluna sticky nao faz sentido em cartao */
body.mobile-ui table.mb-cards tbody td:first-child,
body.mobile-ui table.mb-cards thead th:first-child { position: static; }
/* destaque da primeira celula quando ela e o "titulo" do cartao */
body.mobile-ui table.mb-cards tbody td.mb-card-title {
    display: block; text-align: left; font-size: 15.5px; font-weight: 700;
    color: var(--mb-ink); padding: 10px 0 8px; border-bottom: 1px solid var(--mb-line);
}
body.mobile-ui table.mb-cards tbody td.mb-card-title::before { content: none; }

/* tabelas que continuam tabela (matriz) rolam com folego */
body.mobile-ui .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 10. Financeiro > Lista: matriz vira um cartao por mes ---------- */

/* `.red` / `.green` soltas nunca foram definidas neste app (so existem
   `.indicador-valor.red` e afins), entao todo class="red" das tabelas era
   no-op. No mobile elas passam a valer — que era a intencao original. */
body.mobile-ui .red   { color: var(--red); }
body.mobile-ui .green { color: var(--green); }

body.mobile-ui .mb-mes-card {
    background: var(--mb-surface); border: 1px solid var(--mb-line);
    border-radius: 14px; box-shadow: var(--mb-shadow);
    margin-bottom: 10px; overflow: hidden;
}
body.mobile-ui .mb-mes-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; background: rgba(45,122,122,.07);
    border-bottom: 1px solid var(--mb-line);
}
body.mobile-ui .mb-mes-card__mes { font-size: 15px; font-weight: 800; color: #1a4d4d; letter-spacing: -.01em; }
body.mobile-ui .mb-mes-card__lucro { font-size: 15px; font-weight: 800; }
body.mobile-ui .mb-mes-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 10px 14px; border-bottom: 1px dashed var(--mb-line); font-size: 14.5px;
}
body.mobile-ui .mb-mes-row:last-child { border-bottom: 0; }
body.mobile-ui .mb-mes-row__k {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mb-ink-soft);
}
body.mobile-ui .mb-mes-row--acao { cursor: pointer; color: var(--mb-brand); font-weight: 700; }
body.mobile-ui .mb-mes-det { padding: 4px 14px 12px; background: #fafcfd; }

body.mobile-ui .unidade-grupo { border-top-width: 2px; margin-top: 12px; }
body.mobile-ui .unidade-header { padding: 12px 14px; border-radius: 12px 12px 0 0; }
body.mobile-ui .unidade-nome { font-size: 15px; font-weight: 800; }
body.mobile-ui .unidade-header > div:last-child {
    flex-direction: column; align-items: flex-end; gap: 1px !important; font-size: 11px !important;
}

/* ---------- 11. Botoes, formularios, toque ---------- */

body.mobile-ui .btn {
    min-height: 46px; border-radius: 12px; font-size: 15px; padding: 11px 16px;
    justify-content: center;
}
body.mobile-ui .btn:active { transform: scale(.985); }
/* barra de acoes rolavel em vez de botoes empilhados ocupando meia tela */
body.mobile-ui .flex.gap-16 {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px;
}
body.mobile-ui .flex.gap-16::-webkit-scrollbar { display: none; }
body.mobile-ui .flex.gap-16 > .btn {
    flex: 0 0 auto; width: auto; min-height: 40px; height: 40px;
    font-size: 13.5px; padding: 0 14px; white-space: nowrap; line-height: 1;
}

/* 16px evita o zoom automatico do iOS ao focar o campo */
body.mobile-ui .form-input,
body.mobile-ui .form-select,
body.mobile-ui input[type="text"],
body.mobile-ui input[type="number"],
body.mobile-ui input[type="tel"],
body.mobile-ui input[type="date"],
body.mobile-ui input[type="password"],
body.mobile-ui textarea {
    font-size: 16px; min-height: 46px; border-radius: 12px; padding: 11px 13px;
    width: 100%; box-sizing: border-box;
}

/* ---------- 12. Modais viram bottom sheet ---------- */

body.mobile-ui .modal-overlay { align-items: flex-end; }
body.mobile-ui .modal-overlay .modal-content,
body.mobile-ui .modal-overlay > div {
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ---------- 13. FAB ---------- */

.mb-fab {
    position: fixed; z-index: 890;
    right: 16px; bottom: calc(var(--mb-tabbar-h) + 14px);
    width: 54px; height: 54px; border-radius: 27px; border: 0;
    background: var(--mb-brand); color: #fff; font-size: 26px; line-height: 1;
    box-shadow: 0 6px 20px rgba(45,122,122,.42); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .16s;
}
.mb-fab:active { transform: scale(.92); }

/* ---------- 14. Calendario ---------- */

body.mobile-ui .cal-tabs {
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 6px;
}
body.mobile-ui .cal-tabs::-webkit-scrollbar { display: none; }
body.mobile-ui .cal-tab { flex: 0 0 auto; min-height: 40px; border-radius: 20px; font-size: 13px; padding: 8px 15px; }
body.mobile-ui .msgs-layout { flex-direction: column; }
body.mobile-ui .msgs-lista { width: 100%; max-height: 210px; }

/* ---------- 15. Pull-to-refresh ---------- */

.mb-ptr {
    position: fixed; z-index: 870; left: 50%; transform: translateX(-50%);
    top: calc(var(--mb-appbar-h) + 4px);
    width: 32px; height: 32px; border-radius: 16px;
    background: #fff; box-shadow: var(--mb-shadow);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: 0; pointer-events: none;
}
.mb-ptr--spin { animation: mb-spin .8s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* ---------- 16. Toast ---------- */

.mb-toast {
    position: fixed; z-index: 1400; left: 50%; transform: translate(-50%, 20px);
    bottom: calc(var(--mb-tabbar-h) + 16px);
    max-width: calc(100vw - 32px);
    background: #16202b; color: #fff; font-size: 14px; font-weight: 600;
    padding: 12px 18px; border-radius: 22px; box-shadow: 0 8px 28px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.mb-toast--on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 17. Login ---------- */

body.mobile-ui #telaLogin { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
body.mobile-ui #telaLogin > div { padding: 28px 22px !important; border-radius: 18px !important; }

/* ---------- 18. Respeitar quem pediu menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
    .mb-sheet, .mb-scrim, .mb-toast, .mb-tab__icon, .mb-fab { transition: none !important; }
    .mb-ptr--spin { animation: none !important; }
}

/* estados vazios da lista por mes */
body.mobile-ui .mb-vazio {
    padding: 22px 14px; text-align: center; color: var(--mb-ink-soft);
    font-size: 14px; background: var(--mb-surface);
    border: 1px dashed var(--mb-line); border-radius: 14px;
}
body.mobile-ui .mb-nota {
    padding: 8px 4px 2px; text-align: center;
    font-size: 11.5px; color: var(--mb-ink-soft); font-style: italic;
}

/* Detalhe de despesa dentro do cartao de mes: mais compacto que o cartao
   generico — aqui a data e so um rotulo, nao um titulo de secao. */
body.mobile-ui .mb-mes-det table.mb-cards tbody tr { padding: 9px 12px; margin-bottom: 8px; }
body.mobile-ui .mb-mes-det table.mb-cards tbody td {
    padding: 3px 0; font-size: 13.5px; border-bottom: 0;
}
body.mobile-ui .mb-mes-det table.mb-cards tbody td.mb-card-title {
    font-size: 11px; letter-spacing: .04em; color: var(--mb-ink-soft);
    padding: 0 0 3px; border-bottom: 0; font-weight: 700;
}
body.mobile-ui .mb-mes-det table.mb-cards tbody td::before { font-size: 10px; }