/* V236 — mobile sem depender da sidebar lateral */
#indexxMobileBottomNav,#indexxMobileMoreSheet,#indexxMobileMoreBackdrop{display:none}
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-bottom:76px!important}

  /* Esconde a sidebar inteira no celular: ela não participa mais da navegação */
  .sidebar{display:none!important}
  .shell,.main,.main-content,main,.content{
    margin-left:0!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
  }

  #indexxMobileBottomNav{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    position:fixed!important;
    left:8px!important;right:8px!important;bottom:8px!important;
    z-index:1000000!important;
    height:60px!important;
    padding:6px!important;
    gap:4px!important;
    border:1px solid #2f6381!important;
    border-radius:16px!important;
    background:rgba(10,20,30,.97)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.5)!important;
    backdrop-filter:blur(14px)!important;
  }
  #indexxMobileBottomNav button{
    border:0!important;
    background:transparent!important;
    color:#b7c6d4!important;
    min-width:0!important;
    min-height:48px!important;
    border-radius:11px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    padding:2px!important;
    font-size:9px!important;
    line-height:1.05!important;
  }
  #indexxMobileBottomNav button .ico{font-size:19px!important;line-height:1!important}
  #indexxMobileBottomNav button:active{background:#173044!important;color:#fff!important}

  #indexxMobileMoreBackdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1000001!important;
    background:rgba(0,0,0,.58)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .18s ease!important;
  }
  body.indexx-more-open #indexxMobileMoreBackdrop{
    opacity:1!important;
    pointer-events:auto!important;
  }
  #indexxMobileMoreSheet{
    display:block!important;
    position:fixed!important;
    left:8px!important;right:8px!important;bottom:76px!important;
    z-index:1000002!important;
    max-height:72dvh!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;
    padding:10px!important;
    border:1px solid #2f6381!important;
    border-radius:18px!important;
    background:#0d1823!important;
    box-shadow:0 18px 45px rgba(0,0,0,.55)!important;
    transform:translateY(120%)!important;
    transition:transform .20s ease!important;
  }
  body.indexx-more-open #indexxMobileMoreSheet{transform:translateY(0)!important}
  #indexxMobileMoreSheet h3{
    margin:2px 4px 10px!important;
    font-size:14px!important;
    color:#eaf7ff!important;
  }
  #indexxMobileMoreGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #indexxMobileMoreGrid button{
    min-height:54px!important;
    border-radius:12px!important;
    border:1px solid #294e66!important;
    background:#122331!important;
    color:#e8f2f8!important;
    font-size:11px!important;
    line-height:1.1!important;
    padding:8px!important;
    text-align:left!important;
  }

  /* Mobile compacto */
  .topbar{padding:8px 10px!important;min-height:48px!important}
  .topbar h2{font-size:15px!important}
  .topbar .sub{font-size:9px!important}
  .content{padding:8px 8px 90px!important}
  .grid-cards{grid-template-columns:1fr!important;gap:7px!important}
  .card{padding:9px!important;border-radius:10px!important}
  .card h3{font-size:9px!important}
  .modal-overlay{padding:4px!important}
  .modal{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;max-height:calc(100dvh - 86px)!important;overflow:auto!important}
  input,select,textarea{font-size:16px!important}
  table{font-size:10px!important}
  .table-wrap,.table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .indexx-toast-stack{left:6px!important;right:6px!important;top:8px!important}
  .indexx-toast{width:auto!important;font-size:10px!important;padding:8px 10px!important}
}


/* ===== V237 — refinamento mobile global ===== */
@media(max-width:900px){

  /* Base visual e espaçamentos */
  body{
    font-size:12px!important;
    line-height:1.25!important;
    background:#08111a!important;
  }
  h1{font-size:20px!important;line-height:1.15!important}
  h2{font-size:16px!important;line-height:1.18!important}
  h3{font-size:13px!important;line-height:1.18!important}
  h4{font-size:12px!important}

  /* Topo mais compacto */
  .topbar{
    min-height:46px!important;
    padding:7px 9px!important;
    gap:6px!important;
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    background:rgba(8,17,26,.96)!important;
    backdrop-filter:blur(12px)!important;
  }
  .topbar h2{font-size:14px!important;margin:0!important}
  .topbar .sub,.muted,.hint,small{font-size:9px!important;line-height:1.2!important}

  /* Dashboard / métricas */
  .grid-cards,
  .dashboard-grid,
  .cards-grid,
  .stats-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .grid-cards>.card,
  .dashboard-grid>.card,
  .cards-grid>.card,
  .stats-grid>.card{
    min-height:0!important;
    padding:9px!important;
  }
  .card{
    padding:9px!important;
    border-radius:11px!important;
  }
  .card h3,
  .metric-title,
  .card-title{
    font-size:8.5px!important;
    letter-spacing:.05em!important;
    margin-bottom:4px!important;
  }
  .metric-value,
  .big-number,
  .stat-value{
    font-size:18px!important;
    line-height:1!important;
  }

  /* Botões e campos */
  button,.btn,.button,a.btn{
    min-height:36px!important;
    border-radius:9px!important;
    font-size:11px!important;
    padding:7px 10px!important;
  }
  input,select,textarea{
    min-height:38px!important;
    border-radius:8px!important;
    padding:8px 9px!important;
  }

  /* Abas horizontais */
  .tabs,.tab-list,.finance-tabs,.subtabs,.nav-tabs{
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding-bottom:3px!important;
  }
  .tabs::-webkit-scrollbar,.tab-list::-webkit-scrollbar,.finance-tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar{display:none!important}
  .tabs>*,
  .tab-list>*,
  .finance-tabs>*,
  .subtabs>*,
  .nav-tabs>*{
    flex:0 0 auto!important;
    font-size:10px!important;
    min-height:34px!important;
  }

  /* Listas operacionais OV/OC: aparência de cards, sem esmagar colunas */
  .orders-table,
  .workflow-list,
  .task-list,
  .finance-table,
  .responsive-list{
    width:100%!important;
  }
  .orders-table thead,
  .workflow-list thead,
  .task-list thead{
    display:none!important;
  }
  .orders-table tbody,
  .workflow-list tbody,
  .task-list tbody{
    display:block!important;
  }
  .orders-table tbody tr,
  .workflow-list tbody tr,
  .task-list tbody tr{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:5px 8px!important;
    margin:0 0 8px!important;
    padding:10px!important;
    border:1px solid #28465b!important;
    border-radius:12px!important;
    background:#0f1b26!important;
  }
  .orders-table tbody td,
  .workflow-list tbody td,
  .task-list tbody td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    padding:1px 0!important;
    border:0!important;
    font-size:10px!important;
    white-space:normal!important;
  }
  .orders-table tbody td:last-child,
  .workflow-list tbody td:last-child,
  .task-list tbody td:last-child{
    grid-column:2!important;
    grid-row:1 / span 5!important;
    align-self:center!important;
  }

  /* Tabelas financeiras e técnicas mantêm rolagem horizontal */
  .table-wrap,.table-responsive,.finance-table-wrap,.comparison-table{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:10px!important;
  }
  table{font-size:9.5px!important}
  th{font-size:8px!important;letter-spacing:.04em!important}
  td,th{padding:7px 6px!important}

  /* Workflow/timeline */
  .workflow-timeline,.timeline,.order-timeline{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    gap:6px!important;
    padding-bottom:4px!important;
  }
  .workflow-step,.timeline-step{
    flex:0 0 125px!important;
    min-width:125px!important;
    padding:7px!important;
    font-size:9px!important;
  }

  /* Modais e detalhes de OV/OC */
  .modal-overlay{
    align-items:flex-start!important;
    padding:4px!important;
  }
  .modal{
    margin-top:4px!important;
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
    max-height:calc(100dvh - 86px)!important;
    padding:10px!important;
    border-radius:12px!important;
  }
  .modal .grid,
  .detail-grid,
  .form-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  /* Alertas / toasts menores */
  .indexx-toast-stack{
    left:6px!important;
    right:6px!important;
    top:6px!important;
    width:auto!important;
  }
  .indexx-toast{
    max-width:none!important;
    padding:8px 10px!important;
    font-size:9.5px!important;
    border-radius:11px!important;
  }
  .indexx-toast .title{font-size:10px!important}
  .indexx-toast .body{font-size:9px!important}

  /* Comissões: faixa compacta */
  .commission-summary,
  .commission-kpis,
  .commission-cards{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .commission-summary .card,
  .commission-kpis .card,
  .commission-cards .card{
    padding:8px!important;
    min-height:0!important;
  }

  /* Financeiro */
  .finance-summary,.finance-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  /* Menu Mais organizado e mais bonito */
  #indexxMobileMoreSheet{
    max-height:78dvh!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  #indexxMobileMoreSheet h3{
    font-size:15px!important;
    margin:0 0 10px!important;
  }
  #indexxMobileMoreGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #indexxMobileMoreGrid button{
    min-height:48px!important;
    font-size:10.5px!important;
    padding:8px 9px!important;
  }

  /* Botão inferior um pouco mais elegante */
  #indexxMobileBottomNav{
    height:58px!important;
    bottom:6px!important;
    left:6px!important;
    right:6px!important;
    border-radius:15px!important;
  }
  #indexxMobileBottomNav button{
    min-height:46px!important;
    font-size:8.5px!important;
  }
  #indexxMobileBottomNav button .ico{font-size:18px!important}

  /* Telas muito estreitas */
}
@media(max-width:430px){
  .grid-cards,
  .dashboard-grid,
  .cards-grid,
  .stats-grid,
  .commission-summary,
  .commission-kpis,
  .commission-cards,
  .finance-summary,
  .finance-kpis{
    grid-template-columns:1fr!important;
  }
  #indexxMobileMoreGrid{grid-template-columns:1fr 1fr!important}
}

/* ===== V238 — refinamento final de navegação e telas ===== */
@media(max-width:900px){
  /* Sidebar nunca participa do layout mobile */
  .sidebar{display:none!important}

  /* Conteúdo sempre ocupa a largura útil */
  .shell,.main,.main-content,main,.content,#app,.page{
    margin-left:0!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
  }

  /* Listas genéricas: cards compactos quando possível */
  .list,.list-card,.order-list,.workflow-list,.task-list,.finished-list{
    max-width:100%!important;
  }
  .list-card,.order-card,.workflow-card,.task-card{
    padding:9px!important;
    margin-bottom:7px!important;
    border-radius:11px!important;
  }

  /* Detalhes e formulários em uma coluna */
  .detail-grid,.summary-grid,.form-grid,.two-col,.three-col,.four-col{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  /* Barras/contadores */
  .badge,.pill,.status-badge,.counter{
    font-size:8.5px!important;
    padding:4px 6px!important;
  }

  /* Evita elementos maiores que a viewport */
  pre,code,.code-block{max-width:100%!important;overflow:auto!important}
  img,canvas,svg,video{max-width:100%!important;height:auto}

  /* Menu Mais: título fixo, corpo rolável */
  #indexxMobileMoreSheet{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #indexxMobileMoreSheet h3{
    flex:0 0 auto!important;
  }
  #indexxMobileMoreGrid{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;
    padding-bottom:6px!important;
  }
}


/* =========================================================
   V239 — MOBILE: MENU CORRETO + ALERTAS COMPACTOS + PISCAR
   ========================================================= */
@media(max-width:900px){
  /* Pendências do topo não podem ocupar meia tela */
  .pending-hub-btn{
    min-width:72px!important;
    width:72px!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 6px!important;
    border-radius:11px!important;
    font-size:0!important;
    gap:4px!important;
    justify-content:center!important;
  }
  .pending-hub-btn .bell{font-size:16px!important}
  .pending-hub-count{
    min-width:20px!important;
    height:20px!important;
    padding:0 5px!important;
    font-size:9px!important;
  }

  /* Toasts / notificações realmente compactos no celular */
  .indexx-toast-stack{
    position:fixed!important;
    left:7px!important;
    right:7px!important;
    top:7px!important;
    width:auto!important;
    max-width:none!important;
    gap:5px!important;
    z-index:1000100!important;
  }
  .indexx-toast,
  .workflow-toast,
  .assignment-toast{
    width:auto!important;
    max-width:calc(100vw - 14px)!important;
    min-width:0!important;
    padding:7px 9px!important;
    border-radius:10px!important;
    font-size:9px!important;
    line-height:1.15!important;
    box-shadow:0 8px 22px rgba(0,0,0,.42)!important;
  }
  .workflow-toast{
    left:7px!important;
    right:7px!important;
    bottom:72px!important;
  }
  .workflow-toast .wt-title{font-size:10px!important;margin-bottom:2px!important}
  .workflow-toast .wt-body{font-size:9px!important;line-height:1.2!important}
  .workflow-toast .wt-actions{margin-top:5px!important;gap:5px!important}
  .workflow-toast .wt-actions button{min-height:30px!important;font-size:9px!important}

  .assignment-toast-head{gap:7px!important}
  .assignment-toast-photos{min-width:30px!important}
  .assignment-toast-avatar{
    width:29px!important;height:29px!important;
    border-width:1px!important;
    box-shadow:0 0 0 1px #111b28!important;
    font-size:9px!important;
  }
  .assignment-toast-avatar+.assignment-toast-avatar{margin-left:-8px!important}
  .assignment-toast-kind{font-size:7px!important;letter-spacing:.08em!important;margin-bottom:1px!important}
  .assignment-toast-sector{font-size:12px!important;line-height:1.05!important}
  .assignment-toast-people{font-size:8px!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .assignment-toast-task{font-size:8px!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Menu "Mais": grupos corretos e compacto */
  #indexxMobileMoreSheet{
    max-height:76dvh!important;
    padding:10px!important;
  }
  #indexxMobileMoreSheet h3{
    font-size:15px!important;
    margin:0 0 8px!important;
  }
  #indexxMobileMoreGrid{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #indexxMobileMoreGrid .mobile-menu-group{
    grid-column:1/-1!important;
    color:#79caff!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.10em!important;
    margin:7px 2px 1px!important;
    text-transform:uppercase!important;
  }
  #indexxMobileMoreGrid button{
    position:relative!important;
    min-height:45px!important;
    font-size:10px!important;
    padding:7px 28px 7px 8px!important;
  }

  /* Contadores no menu mobile, sem grudarem no nome */
  .mobile-action-badge{
    position:absolute!important;
    top:5px!important;
    right:5px!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:linear-gradient(135deg,#ffb43f,#ff5f70)!important;
    color:#fff!important;
    font-size:8px!important;
    font-weight:950!important;
    box-shadow:0 0 9px rgba(255,105,86,.62)!important;
  }
  .mobile-waiting-badge{
    background:#319bd3!important;
    box-shadow:0 0 7px rgba(49,155,211,.42)!important;
  }

  /* Pisca somente o que o menu original considera uma ação nova */
  #indexxMobileBottomNav button.mobile-has-action,
  #indexxMobileMoreGrid button.mobile-has-action{
    color:#fff!important;
    border-color:#ffb448!important;
    background:linear-gradient(120deg,rgba(174,100,22,.34),rgba(133,48,92,.27))!important;
    animation:indexxMobileActionBlink .82s ease-in-out infinite alternate!important;
  }
  #indexxMobileBottomNav button.mobile-chat-action,
  #indexxMobileMoreGrid button.mobile-chat-action{
    border-color:#ff5d85!important;
    background:linear-gradient(120deg,rgba(114,57,160,.42),rgba(201,47,94,.34))!important;
    animation:indexxMobileChatBlink .78s ease-in-out infinite!important;
  }
  #indexxMobileBottomNav button.mobile-has-action{position:relative!important}
  #indexxMobileBottomNav .mobile-action-badge{
    top:1px!important;right:4px!important;
    min-width:17px!important;height:17px!important;font-size:7px!important;
  }
  @keyframes indexxMobileActionBlink{
    from{filter:brightness(.88);box-shadow:0 0 0 rgba(255,180,72,0)}
    to{filter:brightness(1.28);box-shadow:0 0 17px rgba(255,180,72,.68)}
  }
  @keyframes indexxMobileChatBlink{
    0%,100%{filter:brightness(.9);box-shadow:0 0 0 rgba(255,82,120,0)}
    50%{filter:brightness(1.3);box-shadow:0 0 18px rgba(255,82,120,.72)}
  }
}
@media(max-width:430px){
  #indexxMobileMoreGrid{grid-template-columns:1fr 1fr!important}
}


@media(max-width:900px){
  /* Histórico da OV vira cartões no mobile — sem rolagem horizontal gigante */
  .finalized-audit-table,
  .finalized-audit-table tbody,
  .finalized-audit-table tr,
  .finalized-audit-table td{display:block!important;width:100%!important}
  .finalized-audit-table thead{display:none!important}
  .finalized-audit-table tr{
    margin:0 0 8px!important;padding:9px!important;
    border:1px solid #2b465a!important;border-radius:10px!important;background:#111d28!important;
  }
  .finalized-audit-table td{border:0!important;padding:2px 0!important;font-size:10px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .finalized-audit-table td:nth-child(1)::before{content:'Data/hora: ';color:#83b5d3;font-weight:700}
  .finalized-audit-table td:nth-child(2)::before{content:'Etapa: ';color:#83b5d3;font-weight:700}
  .finalized-audit-table td:nth-child(3)::before{content:'Ação: ';color:#83b5d3;font-weight:700}
  .finalized-audit-table td:nth-child(4)::before{content:'Responsável: ';color:#83b5d3;font-weight:700}

  /* Plano financeiro cabe inteiro no telefone */
  .table-wrap table{min-width:0!important;width:100%!important;table-layout:fixed!important}
  .table-wrap th,.table-wrap td{font-size:8.5px!important;padding:6px 4px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .table-wrap th:nth-child(1),.table-wrap td:nth-child(1){width:18%!important}
  .table-wrap th:nth-child(2),.table-wrap td:nth-child(2){width:20%!important}
  .table-wrap th:nth-child(3),.table-wrap td:nth-child(3){width:34%!important}
  .table-wrap th:nth-child(4),.table-wrap td:nth-child(4){width:28%!important;text-align:right!important}
}


/* =========================================================
   V243 — PADRÃO MOBILE GLOBAL EM CARDS
   Objetivo: listas e tabelas passam a se comportar como a
   tela de detalhe da OC: conteúdo empilhado, legível e clicável.
   ========================================================= */
@media(max-width:900px){

  /* Evita qualquer tabela larga / botão espremido em letras verticais */
  .table-wrap,
  .table-responsive,
  .finance-table-wrap,
  .comparison-table{
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    border:0!important;
    background:transparent!important;
  }

  .table-wrap > table,
  .table-responsive > table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
  }

  .table-wrap > table > thead,
  .table-responsive > table > thead{
    display:none!important;
  }

  .table-wrap > table > tbody,
  .table-responsive > table > tbody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
  }

  .table-wrap > table > tbody > tr,
  .table-responsive > table > tbody > tr{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:10px 11px!important;
    border:1px solid #29465a!important;
    border-radius:12px!important;
    background:#101d29!important;
    box-shadow:0 5px 14px rgba(0,0,0,.18)!important;
    overflow:hidden!important;
  }

  .table-wrap > table > tbody > tr:nth-child(even),
  .table-responsive > table > tbody > tr:nth-child(even){
    background:#132432!important;
  }

  .table-wrap > table > tbody > tr > td,
  .table-responsive > table > tbody > tr > td{
    display:grid!important;
    grid-template-columns:minmax(88px,32%) minmax(0,1fr)!important;
    align-items:start!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:6px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(105,158,191,.13)!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    text-align:left!important;
    font-size:11px!important;
    line-height:1.28!important;
  }

  .table-wrap > table > tbody > tr > td:last-child,
  .table-responsive > table > tbody > tr > td:last-child{
    border-bottom:0!important;
  }

  .table-wrap > table > tbody > tr > td::before,
  .table-responsive > table > tbody > tr > td::before{
    content:attr(data-mobile-label);
    display:block!important;
    color:#83b9d9!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .table-wrap > table > tbody > tr > td[data-mobile-label=""],
  .table-responsive > table > tbody > tr > td[data-mobile-label=""]{
    grid-template-columns:1fr!important;
  }
  .table-wrap > table > tbody > tr > td[data-mobile-label=""]::before,
  .table-responsive > table > tbody > tr > td[data-mobile-label=""]::before{
    display:none!important;
  }

  /* Células de ação: botões normais, nunca letras empilhadas */
  .table-wrap td button,
  .table-wrap td .btn,
  .table-wrap td a.btn,
  .table-responsive td button,
  .table-responsive td .btn,
  .table-responsive td a.btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:100%!important;
    min-width:88px!important;
    min-height:34px!important;
    height:auto!important;
    padding:7px 10px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    word-break:keep-all!important;
    writing-mode:horizontal-tb!important;
    line-height:1.1!important;
    font-size:10px!important;
  }

  /* Grupos de botões dentro de uma célula */
  .table-wrap td .toolbar,
  .table-responsive td .toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    width:100%!important;
  }

  /* Status, urgência, match etc. não ficam sobrepostos */
  .table-wrap .badge,
  .table-wrap .pill,
  .table-wrap .intel-badge,
  .table-responsive .badge,
  .table-responsive .pill,
  .table-responsive .intel-badge{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    min-height:24px!important;
    padding:4px 8px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.1!important;
  }

  /* Linha vazia / colspan */
  .table-wrap td[colspan],
  .table-responsive td[colspan]{
    display:block!important;
    padding:14px 4px!important;
    text-align:center!important;
  }
  .table-wrap td[colspan]::before,
  .table-responsive td[colspan]::before{
    display:none!important;
  }

  /* Barras superiores: pesquisa e botão não brigam por espaço */
  .toolbar{
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  .toolbar > input[type="text"],
  .toolbar > input[type="search"],
  .toolbar > .search,
  .toolbar > .field{
    flex:1 1 210px!important;
    min-width:0!important;
  }
  .toolbar .spacer{display:none!important}

  /* Inputs de pesquisa sempre cabem */
  input[type="search"],
  input[placeholder*="Pesquisar"],
  input[placeholder*="pesquisar"]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Cards de workflow já bons permanecem no padrão correto */
  .workflow-stage-row{
    border-radius:13px!important;
    overflow:hidden!important;
  }
  .workflow-stage-row-head{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .workflow-stage-row-head > button{
    width:100%!important;
  }

  /* Cards de detalhe como a última imagem */
  .workflow-stage-detail,
  .finance-detail-box,
  .customer-approval-summary > div{
    border-radius:11px!important;
  }
}


/* =========================================================
   V244 — CORREÇÃO DO CARD MOBILE
   A V243 ainda deixava a célula em duas colunas e alguns
   textos eram esmagados caractere por caractere.
   Aqui cada campo fica empilhado: rótulo em cima, valor abaixo.
   ========================================================= */
@media(max-width:900px){

  .table-wrap > table > tbody > tr,
  .table-responsive > table > tbody > tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:10px!important;
    overflow:visible!important;
  }

  .table-wrap > table > tbody > tr > td,
  .table-responsive > table > tbody > tr > td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:7px 0!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    writing-mode:horizontal-tb!important;
    text-align:left!important;
  }

  .table-wrap > table > tbody > tr > td::before,
  .table-responsive > table > tbody > tr > td::before{
    content:attr(data-mobile-label);
    display:block!important;
    width:100%!important;
    margin:0 0 4px!important;
    color:#83b9d9!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .table-wrap > table > tbody > tr > td[data-mobile-label=""]::before,
  .table-responsive > table > tbody > tr > td[data-mobile-label=""]::before{
    display:none!important;
  }

  /* Valores principais nunca ficam espremidos */
  .table-wrap td *,
  .table-responsive td *{
    max-width:100%!important;
    min-width:0!important;
    writing-mode:horizontal-tb!important;
    word-break:normal!important;
  }

  /* Status e badges ocupam largura natural */
  .table-wrap td .badge,
  .table-wrap td .pill,
  .table-wrap td .intel-badge,
  .table-responsive td .badge,
  .table-responsive td .pill,
  .table-responsive td .intel-badge{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
    vertical-align:middle!important;
  }

  /* Ações ficam em linha, sem botão vertical */
  .table-wrap td button,
  .table-wrap td .btn,
  .table-wrap td a.btn,
  .table-responsive td button,
  .table-responsive td .btn,
  .table-responsive td a.btn{
    display:inline-flex!important;
    width:auto!important;
    min-width:92px!important;
    max-width:100%!important;
    white-space:nowrap!important;
    writing-mode:horizontal-tb!important;
    word-break:keep-all!important;
  }

  /* Detalhes nested ocupam a largura inteira */
  .table-wrap td .workflow-stage-card,
  .table-wrap td .action-current-card,
  .table-responsive td .workflow-stage-card,
  .table-responsive td .action-current-card{
    width:100%!important;
    max-width:100%!important;
  }
}


/* =========================================================
   V245 — CARDS REAIS PARA TODAS AS TABELAS MOBILE MARCADAS
   ========================================================= */
@media(max-width:900px){
  table.indexx-mobile-card-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
  }
  table.indexx-mobile-card-table > thead{display:none!important}
  table.indexx-mobile-card-table > tbody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
  }
  table.indexx-mobile-card-table > tbody > tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:11px!important;
    border:1px solid #2b4b62!important;
    border-radius:13px!important;
    background:#101e2a!important;
    box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
    overflow:visible!important;
  }
  table.indexx-mobile-card-table > tbody > tr:nth-child(even){
    background:#142633!important;
  }
  table.indexx-mobile-card-table > tbody > tr > td{
    display:block!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(109,165,200,.14)!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    writing-mode:horizontal-tb!important;
    text-align:left!important;
    line-height:1.28!important;
  }
  table.indexx-mobile-card-table > tbody > tr > td:last-child{
    border-bottom:0!important;
  }
  table.indexx-mobile-card-table > tbody > tr > td::before{
    content:attr(data-mobile-label);
    display:block!important;
    width:100%!important;
    margin:0 0 4px!important;
    color:#82bde0!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.09em!important;
    text-transform:uppercase!important;
  }
  table.indexx-mobile-card-table > tbody > tr > td[data-mobile-label=""]::before{
    display:none!important;
  }
  table.indexx-mobile-card-table td > *,
  table.indexx-mobile-card-table td span,
  table.indexx-mobile-card-table td b,
  table.indexx-mobile-card-table td strong,
  table.indexx-mobile-card-table td small,
  table.indexx-mobile-card-table td div{
    max-width:100%!important;
    min-width:0!important;
    width:auto!important;
    writing-mode:horizontal-tb!important;
    word-break:normal!important;
    white-space:normal!important;
  }

  table.indexx-mobile-card-table td .badge,
  table.indexx-mobile-card-table td .pill,
  table.indexx-mobile-card-table td .intel-badge,
  table.indexx-mobile-card-table td [class*="badge"]{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  table.indexx-mobile-card-table td button,
  table.indexx-mobile-card-table td .btn,
  table.indexx-mobile-card-table td a.btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:96px!important;
    max-width:100%!important;
    min-height:36px!important;
    padding:7px 11px!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    writing-mode:horizontal-tb!important;
  }

  table.indexx-mobile-card-table td[colspan]{
    display:block!important;
    text-align:center!important;
  }
  table.indexx-mobile-card-table td[colspan]::before{display:none!important}

  /* garante que o container não retenha largura de desktop */
  .table-wrap:has(> table.indexx-mobile-card-table),
  .table-responsive:has(> table.indexx-mobile-card-table),
  .card:has(table.indexx-mobile-card-table){
    overflow:visible!important;
    min-width:0!important;
    max-width:100%!important;
  }
}


/* =========================================================
   V246 — MOBILE: CARDS RENDERIZADOS FORA DA TABELA
   Em vez de "dobrar" a tabela de desktop, o mobile cria um
   card independente para cada linha e esconde a tabela original.
   ========================================================= */
@media(max-width:900px){
  table.indexx-mobile-render-source{
    display:none!important;
  }

  .indexx-mobile-render-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }

  .indexx-mobile-render-card{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px!important;
    border:1px solid #2b4d63!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#112230,#0e1a25)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
    overflow:hidden!important;
  }

  .indexx-mobile-render-card:nth-child(even){
    background:linear-gradient(180deg,#142936,#10202c)!important;
  }

  .indexx-mobile-render-field{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:8px 0!important;
    border-bottom:1px solid rgba(110,166,202,.14)!important;
  }
  .indexx-mobile-render-field:last-child{
    border-bottom:0!important;
  }

  .indexx-mobile-render-label{
    display:block!important;
    width:100%!important;
    margin:0 0 5px!important;
    color:#83bde0!important;
    font-size:9px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.09em!important;
    text-transform:uppercase!important;
  }

  .indexx-mobile-render-value{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    color:#edf6fb!important;
    font-size:12px!important;
    line-height:1.32!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    writing-mode:horizontal-tb!important;
  }

  .indexx-mobile-render-value *,
  .indexx-mobile-render-value span,
  .indexx-mobile-render-value div,
  .indexx-mobile-render-value b,
  .indexx-mobile-render-value strong,
  .indexx-mobile-render-value small{
    max-width:100%!important;
    min-width:0!important;
    writing-mode:horizontal-tb!important;
    word-break:normal!important;
    white-space:normal!important;
  }

  .indexx-mobile-render-value .badge,
  .indexx-mobile-render-value .pill,
  .indexx-mobile-render-value [class*="badge"]{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  .indexx-mobile-render-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    width:100%!important;
  }

  .indexx-mobile-proxy-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:110px!important;
    min-height:38px!important;
    width:auto!important;
    max-width:100%!important;
    padding:8px 12px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    writing-mode:horizontal-tb!important;
  }

  .indexx-mobile-empty{
    padding:18px!important;
    border:1px solid #29485d!important;
    border-radius:12px!important;
    text-align:center!important;
    color:#9fb2bf!important;
    background:#101d28!important;
  }
}


/* =========================================================
   V247 — PERFORMANCE + FINALIZADAS SEM PISCAR
   ========================================================= */
@media(max-width:900px){
  /* Finalizadas mostram somente o contador. Nunca piscam. */
  #indexxMobileMoreGrid button[data-mobile-nav-key="ov-finished"],
  #indexxMobileMoreGrid button[data-mobile-nav-key="oc-finished"]{
    animation:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
  #indexxMobileMoreGrid button[data-mobile-nav-key="ov-finished"].mobile-has-action,
  #indexxMobileMoreGrid button[data-mobile-nav-key="oc-finished"].mobile-has-action,
  #indexxMobileMoreGrid button[data-mobile-nav-key="ov-finished"].mobile-chat-action,
  #indexxMobileMoreGrid button[data-mobile-nav-key="oc-finished"].mobile-chat-action{
    animation:none!important;
    filter:none!important;
    box-shadow:none!important;
    border-color:#294e66!important;
    background:#122331!important;
  }

  /* Reduz custo visual em listas longas */
  .indexx-mobile-render-card{
    box-shadow:none!important;
  }

  /* V279 — versão e sessão sempre acessíveis no celular */
  .indexx-mobile-top-version{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    padding:4px 7px!important;
    border:1px solid #4a9bd0!important;
    border-radius:999px!important;
    color:#74c9ff!important;
    background:#102536!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
  }
  .indexx-mobile-menu-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:2px 4px 10px!important;
  }
  .indexx-mobile-menu-head h3{margin:0 0 3px!important}
  .indexx-mobile-menu-version{color:#70c8ff!important;font-size:10px!important;font-weight:800!important}
  #indexxMobileCloseMenu{
    width:36px!important;height:36px!important;min-height:36px!important;
    text-align:center!important;background:#172936!important;border:1px solid #31566e!important;
  }
  .indexx-mobile-account{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:12px!important;
    padding-top:12px!important;
    border-top:1px solid #294e66!important;
  }
  .indexx-mobile-account-version{
    grid-column:1/-1!important;
    padding:9px 10px!important;
    border-radius:10px!important;
    background:#10212e!important;
    color:#aec1cf!important;
    font-size:11px!important;
  }
  #indexxMobileUpdateNow,#indexxMobileLogout{
    min-height:44px!important;
    border-radius:10px!important;
    font-size:11px!important;
    font-weight:800!important;
  }
  #indexxMobileUpdateNow{background:#173e57!important;border:1px solid #4a9bd0!important;color:#dff4ff!important}
  #indexxMobileLogout{background:#4b2025!important;border:1px solid #d65d68!important;color:#fff!important}
}