/* OSPrimeApp 5.7 — Mobile / responsividade */
@media (max-width: 768px) {
  .page-tabs {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    gap: 4px !important;
    border: 1px solid var(--border-dim, rgba(255,255,255,.07));
    border-radius: 14px;
    overflow: visible !important;
  }
  .page-tabs .page-tab {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent;
  }
  .page-tabs .page-tab.active {
    background: var(--bg-surface-elevated, rgba(56,189,248,.16)) !important;
  }
  .settings-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 4px !important;
  }
  html body.premium-ui.mc-ux-536 .topbar .top-actions-clean {
    display: none !important;
  }
}

/* O botao flutuante de Nova OS era dimensionado pelo glifo de texto que
   carregava dentro. Trocado por SVG, ele precisa de tamanho proprio: sem
   isto o icone fica 0x0. Medido: o botao segue 32x54, igual a antes. */
body.premium-ui .mobile-new svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Barra de ações da OS no celular.

   Medido em 375px: os botões saíam com quatro alturas diferentes na mesma
   barra (48, 48, 52, 48 e 42px) e o "..." ficava com 42px de largura, abaixo
   dos 44px que o dedo precisa para acertar. Pior: "Salvar OS", que é a ação
   principal, era o MENOR de todos.

   Aqui todos passam a 48px de altura e o "..." vira um quadrado de 48x48,
   alinhado com o botão ao lado. Só no celular: no desktop o alvo é o mouse. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .btn {
    min-height: 48px !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .dock-more {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    align-self: center !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .save-os-mobile-main {
    min-height: 48px !important;
  }
  /* O "..." e o botão ao lado formam uma linha: mesma altura, mesmo topo. */
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .finish-pickup-action {
    min-height: 48px !important;
    height: 48px !important;
  }
}

/* Alvo de toque mínimo no celular.

   Medição em 375px: 170 dos 229 botões ficavam entre 38 e 43px de altura. O
   dedo precisa de 44px para acertar sem erro — é o mínimo que Apple e Google
   recomendam, e explica a sensação de que os botões "estão ruins no celular".

   Só a família .btn é elevada. Abas e itens de menu ficam como estão: ali o
   alvo real é a faixa inteira, e mexer na altura mudaria o cabeçalho de todas
   as telas de uma vez. */
@media (max-width: 768px) {
  /* Precisa de .mc-ux-536: o legacy usa essa classe e, na conta de
     especificidade, classe vence tipo — o prefixo html sozinho perdia. */
  html body.premium-ui.mc-ux-536 .btn,
  html body.premium-ui.mc-ux-536 button.btn,
  html body.premium-ui.mc-ux-536 a.btn {
    min-height: 44px !important;
  }
  /* Revenda e painel SaaS têm regra própria com id, que ganha da de cima.
     Precisam ser nomeados para o alvo de toque valer neles também. */
  html body.premium-ui.mc-ux-536 #page-resale .btn,
  html body.premium-ui.mc-ux-536 #page-saas .btn {
    min-height: 44px !important;
  }
  /* A barra da Revenda tem quatro classes no seletor do legacy; precisa da
     mesma contagem para vencer. */
  html body.premium-ui.mc-resale-537 #page-resale .resale-toolbar .btn {
    min-height: 44px !important;
  }
}

/* Barra de ações da OS: grade em vez de flex-wrap.

   Com flex-wrap as linhas quebravam onde desse: em 412px a primeira ficava
   150+202 e a segunda 304+48. Nenhuma borda interna batia com a de cima, e é
   isso que se lê como "desalinhado", mesmo com todos os botões da mesma altura.

   Aqui linha e coluna são fixadas uma a uma. Sem isso a colocação automática
   joga o "..." para a linha seguinte, porque "Finalizar retirada" ocupa a
   largura inteira e não sobra vaga ao lado dele. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock {
    display: grid !important;
    grid-template-columns: 1fr 1fr 48px !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  /* O espaçador existe para o flex do desktop; na grade viraria uma célula. */
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .dock-spacer {
    display: none !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock > .btn,
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .dropdown-more .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .dock-cancel {
    grid-area: 1 / 1 / 2 / 2;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock #whatsappOrder {
    grid-area: 1 / 2 / 2 / 3;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .dropdown-more {
    grid-area: 1 / 3 / 2 / 4;
    display: block !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .finish-pickup-action {
    grid-area: 2 / 1 / 3 / 4;
  }
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock .save-os-mobile-main {
    grid-area: 3 / 1 / 4 / 4;
  }
}