/* ============================================================
   INVOICER — CAMADA RESPONSIVA (mobile-first)
   ------------------------------------------------------------
   Estratégia:
   - Este arquivo é carregado DEPOIS do <style> legado do index.html.
   - Os componentes NOVOS (bottom nav, drawer, FAB, cartões, sheet)
     são escritos mobile-first: o estado base é o do celular e as
     media queries min-width os desligam/adaptam.
   - As sobrescritas do layout LEGADO (sidebar, tabelas, modais)
     ficam em max-width, porque a folha original é desktop-first e
     o desktop precisa continuar idêntico.

   Breakpoints:
     0    – 767px   celular   (interface própria)
     768  – 1023px  tablet    (adaptação intermediária)
     1024px +       desktop   (layout atual, intocado)
   ============================================================ */

:root{
  --m-bottomnav-h: 60px;
  --m-topbar-h: 54px;
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px);
  --m-safe-r: env(safe-area-inset-right, 0px);
  --m-tap: 48px;          /* alvo mínimo de toque */
  --m-swipe-w: 144px;     /* largura das ações de swipe (ver SWIPE_MAX no mobile.js) */
  --m-radius: 12px;
  --m-z-topbar: 6000;
  --m-z-fab: 6100;
  --m-z-bottomnav: 6200;
  --m-z-drawer: 6300;
}

/* ============================================================
   1. COMPONENTES MOBILE — base (mobile-first)
   ============================================================ */

/* ---- Topbar mobile ---------------------------------------- */
.m-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  height:calc(var(--m-topbar-h) + var(--m-safe-t));
  padding:var(--m-safe-t) 8px 0;
  background:var(--black);
  color:var(--white);
  position:sticky;
  top:0;
  z-index:var(--m-z-topbar);
}
.m-topbar__btn{
  flex:0 0 auto;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--white);
  font-size:20px;line-height:1;cursor:pointer;
  border-radius:8px;
  -webkit-tap-highlight-color:transparent;
}
.m-topbar__btn:active{background:rgba(255,255,255,.14)}
.m-topbar__title{
  flex:1;min-width:0;
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-topbar__logo{height:26px;width:auto;display:block}

/* ---- Bottom navigation ------------------------------------ */
.m-bottomnav{
  display:flex;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--m-z-bottomnav);
  background:var(--black);
  border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:var(--m-safe-b);
  box-shadow:0 -2px 12px rgba(0,0,0,.25);
}
.m-bottomnav__item{
  flex:1 1 0;
  min-width:0;
  height:var(--m-bottomnav-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  background:none;border:none;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  padding:0 2px;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
  position:relative;
}
.m-bottomnav__item:active{background:rgba(255,255,255,.06)}
.m-bottomnav__item.is-active{color:var(--white)}
.m-bottomnav__item.is-active::before{
  content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--white);
}
.m-bottomnav__icon{font-size:19px;line-height:1}
.m-bottomnav__label{
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

/* ---- Drawer (menu hambúrguer / opções secundárias) -------- */
.m-drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:var(--m-z-drawer);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.m-drawer-backdrop.is-open{opacity:1;pointer-events:auto}
.m-drawer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:calc(var(--m-z-drawer) + 1);
  background:var(--white);
  border-radius:16px 16px 0 0;
  max-height:82vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(16px + var(--m-safe-b));
  transform:translateY(100%);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -8px 32px rgba(0,0,0,.3);
}
.m-drawer.is-open{transform:translateY(0)}
.m-drawer__grip{
  width:40px;height:4px;border-radius:2px;background:#d0d0d0;
  margin:10px auto 4px;
}
.m-drawer__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px 12px;border-bottom:1px solid var(--border);
}
.m-drawer__title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.m-drawer__section{
  padding:14px 18px 4px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);
}
.m-drawer__item{
  display:flex;align-items:center;gap:14px;
  width:100%;
  min-height:var(--m-tap);
  padding:12px 18px;
  background:none;border:none;border-bottom:1px solid #f2f2f2;
  font-family:'Barlow',sans-serif;font-size:16px;color:var(--black);
  text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.m-drawer__item:active{background:var(--paper)}
.m-drawer__item--danger{color:var(--red)}
.m-drawer__icon{width:24px;text-align:center;font-size:17px;flex:0 0 24px}
.m-drawer__meta{padding:12px 18px 0;font-size:11px;color:var(--gray);line-height:1.6}

/* ---- FAB --------------------------------------------------- */
.m-fab{
  position:fixed;
  right:calc(16px + var(--m-safe-r));
  bottom:calc(var(--m-bottomnav-h) + 16px + var(--m-safe-b));
  z-index:var(--m-z-fab);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);color:var(--white);
  border:none;
  font-size:28px;line-height:1;font-weight:300;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, opacity .15s ease;
}
.m-fab:active{transform:scale(.92)}
.m-fab[hidden]{display:none}

/* FAB secundário, usado dentro do editor (adicionar produto) */
.m-fab--inline{
  bottom:calc(var(--m-bottomnav-h) + 84px + var(--m-safe-b));
  width:48px;height:48px;font-size:24px;
  background:var(--green);
}

/* ---- Cartão de lista (tabela transformada) -----------------
   Os nós abaixo são injetados no DOM em qualquer largura para
   que o redimensionamento seja instantâneo, mas só aparecem
   dentro do breakpoint de celular — o desktop fica intacto. */
.m-card-head{
  display:none;
  align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid #eee;
}
.m-card-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:700;letter-spacing:.03em;
  color:var(--black);line-height:1.15;
  word-break:break-word;
}
.m-card-sub{
  font-size:13px;color:var(--gray);margin-top:3px;line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.m-card-badges{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.m-card-chevron{
  display:none;
  position:absolute;right:10px;bottom:10px;
  color:#ccc;font-size:16px;pointer-events:none;
}

/* ---- Botão "carregar mais" da lista lazy ------------------- */
.m-lazy-sentinel{
  display:none;width:100%;
  padding:14px;margin:4px 0 10px;
  text-align:center;font-size:13px;color:var(--gray);
  background:var(--white);border:1px dashed var(--border);border-radius:var(--m-radius);
}

/* ---- Barra de etapas do editor -----------------------------
   Vive como último filho do .modal-footer; no celular o rodapé é
   flex column-reverse, então ela aparece acima dos botões e herda
   o sticky do rodapé. */
.m-steps{
  display:none;align-items:center;gap:10px;
  width:100%;
  padding:6px 0 10px;
  margin-bottom:2px;
  background:transparent;
  border-bottom:1px solid var(--border);
}
.m-steps__btn{
  flex:0 0 auto;
  min-height:var(--m-tap);min-width:56px;
  padding:0 14px;
  background:var(--paper);border:1px solid var(--border);border-radius:8px;
  font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;color:var(--black);
  cursor:pointer;
}
.m-steps__btn:disabled{opacity:.35;cursor:default}
.m-steps__label{
  flex:1;text-align:center;min-width:0;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- Ações rápidas do dashboard ---------------------------- */
.m-quick{display:none}

/* ---- Ações de swipe ---------------------------------------
   Ficam ancoradas FORA da borda direita do cartão. Como o
   translateX é aplicado na própria linha, elas entram na tela
   junto com o gesto — em repouso estão além da viewport, que
   não rola na horizontal (body tem overflow-x:hidden). */
.m-swipe-actions{
  display:none;
  position:absolute;top:0;bottom:0;
  /* +2px: o `right` é medido a partir da caixa de padding da linha,
     que fica 1px dentro da borda. Sem essa folga sobra uma fatia
     colorida visível no repouso. Deve casar com SWIPE_MAX no JS. */
  right:calc(-1 * (var(--m-swipe-w) + 2px));
  width:var(--m-swipe-w);
  align-items:stretch;
  border-radius:0 var(--m-radius) var(--m-radius) 0;
  overflow:hidden;
}
.m-swipe-actions button{
  flex:1 1 0;border:none;color:var(--white);
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.m-swipe-actions .m-swipe-edit{background:var(--blue)}
.m-swipe-actions .m-swipe-del{background:var(--red)}

/* Esconde a estrutura mobile fora do celular (default seguro) */
.m-topbar,.m-bottomnav,.m-drawer,.m-drawer-backdrop,.m-fab,.m-steps{display:none}


/* ============================================================
   2. CELULAR — 0 a 767px
   ============================================================ */
@media (max-width:767px){

  html{-webkit-text-size-adjust:100%}
  body{
    font-size:16px;                    /* tipografia base 16px */
    line-height:1.45;
    padding-bottom:calc(var(--m-bottomnav-h) + var(--m-safe-b));
    overflow-x:hidden;
  }

  /* ---- Shell -------------------------------------------- */
  .sidebar{display:none!important}
  .main-area{margin-left:0!important;width:100%;min-width:0}
  .app-layout{display:block}
  .topbar{display:none!important}      /* substituída pela .m-topbar */
  .content-area{padding:12px 12px 24px}

  .m-topbar{display:flex}
  .m-bottomnav{display:flex}
  .m-drawer,.m-drawer-backdrop{display:block}
  .m-fab{display:flex}
  .m-steps{display:flex}
  .m-card-head{display:flex}
  .m-card-chevron{display:block}
  .m-lazy-sentinel{display:block}
  .m-swipe-actions{display:flex}

  /* Barra de câmbio: compacta e rolável */
  #cipl-currency-bar{
    padding:6px 12px;gap:12px;font-size:12px;
    overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #cipl-currency-bar::-webkit-scrollbar{display:none}
  .cipl-fx-time{margin-left:8px}

  /* ---- Tipografia / toque ------------------------------- */
  .btn{
    min-height:var(--m-tap);
    padding:12px 18px;
    font-size:14px;
    border-radius:8px;
    justify-content:center;
  }
  .btn-sm,.btn-xs{min-height:44px;padding:10px 14px;font-size:13px;border-radius:8px}
  .btn-group{gap:8px}

  /* ---- Dashboard ---------------------------------------- */
  .stats-row{
    grid-template-columns:1fr;         /* uma coluna */
    gap:10px;margin-bottom:16px;
  }
  /* rótulo à esquerda; valor e complemento empilhados à direita.
     O grid evita depender da ordem/quantidade de filhos — nem todo
     stat-box tem .stat-sub. */
  .stat-box{
    padding:16px 18px;border-radius:var(--m-radius);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"label value" "label sub";
    align-items:center;column-gap:14px;
  }
  .stat-label{grid-area:label;font-size:11px;margin-bottom:0;line-height:1.4}
  .stat-val{
    grid-area:value;justify-self:end;
    /* escala com a largura: R$ 3.741.464,80 não pode estourar */
    font-size:clamp(24px,7.5vw,34px)!important;
    line-height:1.05;text-align:right;white-space:nowrap;
  }
  .stat-sub{grid-area:sub;justify-self:end;font-size:12px;text-align:right;margin-top:2px}

  /* Ações rápidas (injetadas pelo mobile.js no topo do dashboard) */
  .m-quick{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:16px;
  }
  .m-quick__btn{
    display:flex;align-items:center;gap:12px;
    min-height:56px;padding:12px 16px;
    background:var(--white);border:1px solid var(--border);border-left:4px solid var(--black);
    border-radius:var(--m-radius);
    font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;color:var(--black);
    text-align:left;cursor:pointer;width:100%;
    -webkit-tap-highlight-color:transparent;
  }
  .m-quick__btn:active{background:var(--paper)}
  .m-quick__btn .m-quick__icon{font-size:20px;flex:0 0 24px;text-align:center}
  .m-quick__btn--invoice{border-left-color:var(--black)}
  .m-quick__btn--quotation{border-left-color:var(--blue)}
  .m-quick__btn--company{border-left-color:var(--green)}

  /* ---- Cards / seções ------------------------------------ */
  .card{border-radius:var(--m-radius);margin-bottom:14px}
  .card-header{
    padding:12px 14px;flex-wrap:wrap;gap:8px;
  }
  .card-title{font-size:13px}
  .card-header .btn{width:auto;flex:1 1 auto;min-width:120px}
  .section-label{font-size:13px;padding:9px 12px;margin:18px 0 12px;border-radius:6px}
  .empty-state{padding:36px 18px}
  .empty-text{font-size:15px}

  /* ---- TABELAS → CARTÕES --------------------------------- */
  table.m-cardable,
  table.m-cardable > tbody,
  table.m-cardable > tbody > tr,
  table.m-cardable > tbody > tr > td{
    display:block;width:100%;
  }
  table.m-cardable > thead{display:none}
  /* overflow:hidden recorta as ações de swipe enquanto elas estão
     ancoradas fora da borda direita do cartão */
  table.m-cardable{border-collapse:separate;border-spacing:0;overflow:hidden}

  table.m-cardable > tbody > tr{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--m-radius);
    margin-bottom:10px;
    padding:12px 14px;
    /* visible para as ações de swipe (ancoradas em right:-144px)
       poderem entrar na tela durante o gesto */
    overflow:visible;
  }
  table.m-cardable > tbody > tr[data-m-open]{cursor:pointer}
  table.m-cardable > tbody > tr[data-m-open]:active{background:#fafafa}

  table.m-cardable > tbody > tr > td{
    border:none!important;
    padding:5px 0!important;
    font-size:15px;
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:left!important;
    white-space:normal!important;
    max-width:none!important;
    min-height:0;
  }
  table.m-cardable > tbody > tr > td::before{
    content:attr(data-label);
    flex:0 0 42%;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gray);
    line-height:1.5;
  }
  table.m-cardable > tbody > tr > td:empty{display:none}
  /* célula sem rótulo (ex.: coluna de ações) ocupa a largura toda */
  table.m-cardable > tbody > tr > td[data-label=""],
  table.m-cardable > tbody > tr > td.m-actions{display:block}
  table.m-cardable > tbody > tr > td[data-label=""]::before,
  table.m-cardable > tbody > tr > td.m-actions::before{display:none}
  table.m-cardable > tbody > tr > td.m-actions{
    padding-top:10px!important;margin-top:4px;border-top:1px solid #f0f0f0!important;
  }

  /* células promovidas para o cabeçalho do cartão */
  table.m-cardable > tbody > tr > td.m-hide{display:none!important}

  /* linha de totais dentro de tabelas de resumo */
  table.m-cardable > tbody > tr.m-total-row{
    background:var(--black);border-color:var(--black);
  }
  table.m-cardable > tbody > tr.m-total-row > td{color:var(--white)}
  table.m-cardable > tbody > tr.m-total-row > td::before{color:rgba(255,255,255,.55)}

  /* barra de ações do cartão */
  table.m-cardable > tbody > tr .btn-group{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(50px,1fr));
    gap:6px;width:100%;margin-top:0;
  }
  table.m-cardable > tbody > tr .btn-group .btn{
    width:100%;min-height:44px;font-size:11px;padding:8px 4px;
    white-space:nowrap;overflow:hidden;
  }
  /* com a barra de ações explícita o chevron vira ruído */
  table.m-cardable > tbody > tr:has(td.m-actions) .m-card-chevron{display:none}

  /* imagens em cartões (logo de empresa) */
  table.m-cardable > tbody > tr img{max-height:44px!important;max-width:120px!important}

  /* wrapper overflow-x das tabelas: desliga o scroll lateral */
  .card > div[style*="overflow-x"],
  div[style*="overflow-x:auto"]:has(> table.m-cardable){
    overflow-x:visible!important;
  }

  /* ---- FORMULÁRIOS --------------------------------------- */
  .form-row,
  .form-row.col2,.form-row.col3,.form-row.col4,.form-row.col5{
    grid-template-columns:1fr!important;   /* uma coluna */
    display:grid!important;
    gap:0!important;
    margin-bottom:0!important;
  }
  .form-group{margin-bottom:16px}
  .form-group label{
    font-size:12px;letter-spacing:.06em;margin-bottom:6px;color:var(--steel);
  }
  .form-group input,
  .form-group select,
  .form-group textarea,
  .cipl-portal-fg input,
  #login-box input{
    width:100%!important;
    min-height:var(--m-tap);            /* 48px */
    padding:12px 14px!important;
    font-size:16px!important;            /* evita zoom automático no iOS */
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--white);
  }
  .form-group select{
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:22px;
    padding-right:40px!important;
  }
  .form-group textarea{min-height:110px}
  .pct-wrap::after{bottom:16px;right:14px;font-size:15px}

  .file-drop-zone{padding:24px 16px;border-radius:var(--m-radius);min-height:96px}
  .file-item{flex-wrap:wrap;padding:12px;border-radius:8px;gap:8px}
  .file-item .btn{min-height:40px}
  .file-name{flex:1 1 100%;font-size:14px;word-break:break-all}

  /* ---- MODAIS → folha em tela cheia ---------------------- */
  .modal-overlay{
    padding:0;
    align-items:stretch;
    background:rgba(0,0,0,.9);
  }
  .modal{
    max-width:none;width:100%;
    min-height:100%;
    border-radius:0;
    display:flex;flex-direction:column;
    animation:none;
  }
  .modal-header{
    position:sticky;top:0;z-index:5;
    padding:calc(12px + var(--m-safe-t)) 14px 12px;
    min-height:calc(var(--m-topbar-h) + var(--m-safe-t));
  }
  .modal-title{font-size:15px;flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal-close{
    width:44px;height:44px;font-size:24px;flex:0 0 44px;
    display:flex;align-items:center;justify-content:center;
  }
  .modal-body{
    padding:14px 14px 24px;
    flex:1 1 auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Com um editor em tela cheia aberto, a barra inferior e o FAB
     concorreriam com o rodapé do próprio modal. */
  body.m-modal-open .m-bottomnav,
  body.m-modal-open #mFab,
  body.m-modal-open #cloud-sync-status{display:none!important}
  body.m-modal-open{padding-bottom:0}
  /* Rodapé compacto: etapas no topo, ação principal em largura
     total logo abaixo e as secundárias dividindo uma linha. Três
     botões empilhados comiam mais de um terço da tela. */
  .modal-footer{
    position:sticky;bottom:0;z-index:5;
    display:flex;flex-flow:row wrap;
    justify-content:flex-start;
    gap:8px;
    padding:10px 14px calc(10px + var(--m-safe-b));
    box-shadow:0 -2px 12px rgba(0,0,0,.1);
  }
  .modal-footer .m-steps{order:0;flex:1 1 100%}
  .modal-footer .btn{order:2;flex:1 1 calc(50% - 4px);width:auto;min-width:0}
  .modal-footer .btn.m-primary{order:1;flex:1 1 100%}

  .mini-modal{padding:0;align-items:stretch}
  .mini-modal-box{max-width:none;max-height:none;min-height:100%;border-radius:0}
  .mini-modal-header{
    position:sticky;top:0;z-index:5;
    padding:calc(12px + var(--m-safe-t)) 14px 12px;
  }
  #miniModalFooter{
    position:sticky;bottom:0;
    display:flex!important;flex-flow:row wrap!important;
    justify-content:flex-start!important;gap:8px;
    padding:10px 14px calc(10px + var(--m-safe-b))!important;
  }
  #miniModalFooter .btn{order:2;flex:1 1 calc(50% - 4px);width:auto;min-width:0}
  #miniModalFooter .btn.m-primary{order:1;flex:1 1 100%}

  /* ---- ABAS → seções navegáveis --------------------------- */
  .tabs{
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    gap:4px;
    margin:0 -14px 16px;
    padding:0 14px;
    position:sticky;top:calc(var(--m-topbar-h) + var(--m-safe-t));
    background:var(--paper);
    z-index:4;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 auto;scroll-snap-align:start;
    min-height:44px;display:flex;align-items:center;
    padding:10px 14px;font-size:13px;
  }

  /* ---- EDITOR DE ITENS → cartões -------------------------- */
  .container-block{padding:12px 10px!important;border-radius:var(--m-radius)!important}
  .container-block > .form-row{display:block!important}
  .container-block .form-group{flex:none!important;min-width:0!important;margin-bottom:14px}
  .container-block .form-group input,
  .container-block .form-group select{width:100%!important}
  .container-block > div[style*="overflow-x"]{overflow-x:visible!important}

  table.items-editor-table{
    min-width:0!important;
    display:block;width:100%;
    border-collapse:separate;
  }
  table.items-editor-table > thead{display:none}
  table.items-editor-table > tbody{display:block;width:100%}
  /* grid de 2 colunas: campos curtos pareiam, longos ocupam a linha */
  table.items-editor-table > tbody > tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 10px;
    width:100%;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--m-radius);
    padding:12px;
    margin-bottom:12px;
    position:relative;
  }
  table.items-editor-table > tbody > tr > td{
    grid-column:span 2;
    display:block;width:auto;min-width:0;
    border:none!important;
    padding:0 0 12px!important;
  }
  table.items-editor-table > tbody > tr > td.m-half{grid-column:span 1}
  table.items-editor-table > tbody > tr > td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gray);margin-bottom:5px;
  }
  table.items-editor-table > tbody > tr > td input,
  table.items-editor-table > tbody > tr > td select{
    width:100%!important;min-width:0!important;
    min-height:var(--m-tap);
    padding:11px 12px!important;
    font-size:16px!important;
    border:1px solid var(--border)!important;
    border-radius:8px;
    background:var(--white)!important;
  }
  /* nº do item vira o título do cartão ("Produto 3") — o número
     continua sendo o conteúdo original da célula, o prefixo é CSS,
     então o DOM do desktop não é alterado */
  table.items-editor-table > tbody > tr > td.m-item-no{
    padding:0 0 10px!important;
    font-family:'Barlow Condensed',sans-serif;
    font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--black);
    border-bottom:1px solid #eee!important;
    margin-bottom:12px;
    text-align:left!important;
  }
  table.items-editor-table > tbody > tr > td.m-item-no::before{
    content:'Produto ';
    display:inline;
    font-size:inherit;font-weight:inherit;letter-spacing:inherit;
    color:inherit;margin:0;
  }
  /* botão remover ocupa a largura toda no fim do cartão */
  table.items-editor-table > tbody > tr > td.m-item-del{padding:0!important}
  table.items-editor-table > tbody > tr > td.m-item-del::before{content:none}
  table.items-editor-table > tbody > tr > td.m-item-del .btn{
    width:100%;min-height:44px;padding:10px!important;font-size:12px;
  }

  /* ---- Preview de documento ------------------------------- */
  .doc-preview{font-size:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .totals-preview{padding:12px 14px}
  .totals-row{font-size:14px;padding:6px 0}
  .totals-row.grand{font-size:17px}

  /* ---- Avisos flutuantes acima do bottom nav --------------- */
  .toast{
    left:12px;right:12px;bottom:calc(var(--m-bottomnav-h) + 14px + var(--m-safe-b));
    text-align:center;font-size:15px;padding:14px 18px;border-radius:10px;
  }
  /* status de sincronização: posicionado por style inline no JS,
     por isso precisa de !important para subir acima da barra */
  #cloud-sync-status{
    left:12px!important;right:12px!important;
    bottom:calc(var(--m-bottomnav-h) + 14px + var(--m-safe-b))!important;
    width:auto!important;max-width:none!important;
    text-align:center;font-size:13px;border-radius:10px;
  }

  /* ---- Login / portal do cliente -------------------------- */
  #login-overlay,#setpw-overlay{padding:20px;align-items:flex-start;padding-top:8vh}
  #login-box{padding:28px 22px;max-width:none;border-radius:var(--m-radius)}
  #login-btn,#setpw-btn{min-height:52px;font-size:15px}

  .cipl-portal-box{width:100%;max-width:none;padding:26px 20px;border-radius:var(--m-radius)}
  .cipl-portal-btn{min-height:52px}
  .cipl-client-topbar{padding:calc(12px + var(--m-safe-t)) 14px 12px;flex-wrap:wrap;gap:8px}
  .cipl-client-topbar h2{font-size:16px}
  .cipl-client-body{padding:14px}
  .cipl-client-card{border-radius:var(--m-radius)}
  #cipl-client-orders{padding-bottom:var(--m-safe-b)}

  /* tabelas do portal também viram cartões */
  table.cipl-orders-table.m-cardable > tbody > tr{
    background:var(--white);border:1px solid #e6e6e6;border-radius:var(--m-radius);
    padding:12px 14px;margin-bottom:10px;display:block;
  }
  table.cipl-orders-table.m-cardable > tbody > tr > td{
    display:flex;justify-content:space-between;gap:14px;
    border:none!important;padding:5px 0!important;font-size:15px;
  }
  table.cipl-orders-table.m-cardable > tbody > tr > td::before{
    content:attr(data-label);
    flex:0 0 42%;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gray);
  }
  table.cipl-orders-table.m-cardable > thead{display:none}

  /* ---- Não deixa nada estourar a largura ------------------ */
  .content-area img,.modal-body img{max-width:100%;height:auto}
  pre,code{white-space:pre-wrap;word-break:break-word}
}

/* Telas muito estreitas (≤360px): rótulos acima do valor */
@media (max-width:360px){
  table.m-cardable > tbody > tr > td{
    display:block;
  }
  table.m-cardable > tbody > tr > td::before{
    display:block;flex:none;margin-bottom:2px;
  }
  .m-bottomnav__label{font-size:9px}
}


/* ============================================================
   3. TABLET — 768 a 1023px
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){

  body{font-size:15px}

  /* Sidebar vira barra de ícones compacta */
  .sidebar{width:72px;overflow-x:hidden}
  .sidebar-brand{padding:16px 8px 12px}
  .sidebar-brand img{width:44px!important;margin:0 auto!important}
  .nav-section{
    padding:10px 4px 4px;text-align:center;font-size:8px;letter-spacing:.06em;
  }
  .nav-item{
    flex-direction:column;gap:4px;
    padding:10px 4px;font-size:9px;text-align:center;line-height:1.2;
    border-left:none;border-right:2px solid transparent;
  }
  .nav-item.active{border-left-color:transparent;border-right-color:var(--white)}
  .nav-icon{width:auto;font-size:18px}
  .sidebar-footer,#db-status,#cloud-status{display:none}
  /* "Sair do Sistema" vira só o ícone na barra de 72px. O !important
     é necessário: o botão traz font-size/letter-spacing inline. */
  .sidebar > div:last-child button{
    font-size:0!important;letter-spacing:0!important;padding:10px 4px!important;
  }
  .sidebar > div:last-child button::after{content:'⏻';font-size:18px;line-height:1.4}

  /* min-width:0 é obrigatório: .main-area é um flex item e o padrão
     min-width:auto o impede de encolher abaixo do conteúdo, então as
     tabelas largas empurravam a página inteira em vez de rolarem
     dentro do próprio wrapper overflow-x:auto. */
  .main-area{margin-left:72px;min-width:0}
  .topbar{padding:12px 18px;gap:10px;flex-wrap:wrap}
  .page-heading{font-size:17px}
  .content-area{padding:18px}

  /* KPIs em 2 colunas */
  .stats-row{grid-template-columns:1fr 1fr;gap:12px}
  .stat-val{font-size:26px}

  /* Formulários: no máximo 2 colunas */
  .form-row.col3,.form-row.col4,.form-row.col5{grid-template-columns:1fr 1fr}

  /* Alvos de toque continuam confortáveis */
  .btn{min-height:42px;padding:10px 16px;font-size:13px}
  .btn-sm,.btn-xs{min-height:38px}
  .form-group input,.form-group select,.form-group textarea{
    min-height:44px;padding:10px 12px;font-size:15px;
  }

  .modal{max-width:none;margin:0 12px}
  .modal-overlay{padding:12px}

  /* Tabelas largas rolam lateralmente dentro do próprio container */
  .card > div[style*="overflow-x"]{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{min-width:720px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab{flex:0 0 auto}
}


/* ============================================================
   4. DESKTOP — 1024px+  (layout atual preservado)
   ============================================================ */
@media (min-width:1024px){
  .m-topbar,.m-bottomnav,.m-drawer,.m-drawer-backdrop,.m-fab,.m-steps,.m-quick{
    display:none!important;
  }
  body{padding-bottom:0}
}


/* ============================================================
   5. IMPRESSÃO — a estrutura mobile nunca sai no papel
   ============================================================ */
@media print{
  .m-topbar,.m-bottomnav,.m-drawer,.m-drawer-backdrop,.m-fab,.m-steps,.m-quick,
  .m-lazy-sentinel,.m-swipe-actions{display:none!important}
  body{padding-bottom:0!important}
  table.m-cardable,
  table.m-cardable > thead,
  table.m-cardable > tbody,
  table.m-cardable > tbody > tr,
  table.m-cardable > tbody > tr > td{display:revert!important}
  table.m-cardable > tbody > tr > td::before{content:none!important}
  .m-card-head{display:none!important}
  td.m-hide{display:revert!important}
}


/* ============================================================
   6. Preferências do usuário
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .m-drawer,.m-drawer-backdrop,.m-fab,.modal{transition:none!important;animation:none!important}
}