/* 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;
  }
  /* .btn-text-action e botao de verdade, mas nao carrega a classe .btn — por
     isso a regra de cima nunca chegou nele. Medido em 412px: "Ver operação"
     com 38px e "Ver financeiro" com 31px, os dois abaixo dos 44 que o resto
     do sistema ja usa. Sao os quatro atalhos do painel; todos sao <button>,
     nenhum e link dentro de frase, entao subir a altura nao quebra texto. */
  html body.premium-ui.mc-ux-536 .btn-text-action {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !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) {
  /* Modais no celular em z-index seguro acima da topbar e do menu */
  html body.premium-ui .modal,
  html body.premium-ui.mc-ux-536 .modal,
  html body .modal {
    z-index: 35000 !important;
  }

  /* Modal de Compra de Aparelho (Revenda Pro) no celular em tela cheia */
  html body #devicePurchaseModal.modal,
  html body.premium-ui #devicePurchaseModal.modal,
  html body.premium-ui.mc-ux-536 #devicePurchaseModal.modal,
  #devicePurchaseModal.modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #060b14 !important;
    z-index: 35000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  html body #devicePurchaseModal.modal.show,
  html body.premium-ui #devicePurchaseModal.modal.show,
  html body.premium-ui.mc-ux-536 #devicePurchaseModal.modal.show,
  #devicePurchaseModal.modal.show {
    display: flex !important;
    flex-direction: column !important;
  }
  html body #devicePurchaseModal .modal-card,
  html body #devicePurchaseModal .modal-card.xl,
  #devicePurchaseModal .modal-card,
  #devicePurchaseModal .modal-card.xl {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #070d18 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body #devicePurchaseModal .modal-head,
  html body.premium-ui #devicePurchaseModal .modal-head,
  #devicePurchaseModal .modal-head {
    flex: 0 0 auto !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
    background: #0a1322 !important;
    border-bottom: 1px solid #1a2b44 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }
  #devicePurchaseModal .modal-head h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #devicePurchaseModal .modal-head p {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
  }
  #devicePurchaseModal .modal-head .icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  #devicePurchaseModal #devicePurchaseForm {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* Modal de OS no celular em tela cheia suave */
  html body #orderModal.modal,
  html body.premium-ui #orderModal.modal,
  html body.premium-ui.mc-ux-536 #orderModal.modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #060b14 !important;
    z-index: 30050 !important;
    box-sizing: border-box !important;
  }
  html body #orderModal.modal.show,
  html body.premium-ui #orderModal.modal.show,
  html body.premium-ui.mc-ux-536 #orderModal.modal.show {
    display: flex !important;
    flex-direction: column !important;
  }

  html body #orderModal .modal-card,
  html body #orderModal .modal-card.xl,
  html body.premium-ui #orderModal .modal-card,
  html body.premium-ui #orderModal .modal-card.xl,
  html body.premium-ui.mc-ux-536 #orderModal .modal-card,
  html body.premium-ui.mc-ux-536 #orderModal .modal-card.xl {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #070d18 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Cabeçalho fixo no topo */
  html body #orderModal .modal-head,
  html body.premium-ui #orderModal .modal-head,
  html body.premium-ui.mc-ux-536 #orderModal .modal-head {
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    background: #0a1322 !important;
    border-bottom: 1px solid #1a2b44 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body #orderModal .modal-head h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body #orderModal .modal-head p {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
  }

  /* Formulário ocupa todo o espaço com rolagem interna */
  html body #orderModal #orderForm,
  html body.premium-ui #orderModal #orderForm,
  html body.premium-ui.mc-ux-536 #orderModal #orderForm {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: calc(100dvh - 58px) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Abas horizontais com scroll touch */
  html body #orderModal .order-tabs,
  html body.premium-ui #orderModal .order-tabs,
  html body.premium-ui.mc-ux-536 #orderModal .order-tabs {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    background: #080e1b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    align-items: center !important;
  }
  html body #orderModal .order-tabs::-webkit-scrollbar {
    display: none !important;
  }
  html body #orderModal .order-tab,
  html body #orderModal .order-tabs button,
  html body.premium-ui.mc-ux-536 #orderModal .order-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }
  html body #orderModal .order-tab .tab-icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    stroke: #94a3b8 !important;
    opacity: 0.8 !important;
    transition: stroke 0.18s ease, opacity 0.18s ease !important;
  }
  html body #orderModal .order-tab:hover,
  html body #orderModal .order-tabs button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9 !important;
  }
  html body #orderModal .order-tab:hover .tab-icon {
    stroke: #f1f5f9 !important;
    opacity: 1 !important;
  }
  html body #orderModal .order-tab.active,
  html body.premium-ui.mc-ux-536 #orderModal .order-tab.active,
  body.theme-dark #orderModal .order-tab.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45) !important;
    outline: none !important;
    outline-offset: 0 !important;
  }
  html body #orderModal .order-tab.active .tab-icon {
    stroke: #ffffff !important;
    opacity: 1 !important;
  }
  html body #orderModal .order-tab:focus,
  html body #orderModal .order-tab:focus-visible,
  html body.premium-ui #orderModal .order-tab:focus-visible,
  html body.premium-ui.mc-ux-536 #orderModal .order-tab:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
  }

  /* Painéis de conteúdo roláveis */
  html body #orderModal .order-tab-panel,
  html body.premium-ui #orderModal .order-tab-panel,
  html body.premium-ui.mc-ux-536 #orderModal .order-tab-panel {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 14px 14px calc(115px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  /* Formulário e campos */
  html body #orderModal .form-grid,
  html body.premium-ui #orderModal .form-grid,
  html body.premium-ui.mc-ux-536 #orderModal .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html body #orderModal .form-grid label,
  html body.premium-ui #orderModal .form-grid label,
  html body.premium-ui.mc-ux-536 #orderModal .form-grid label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }
  html body #orderModal .form-grid label span,
  html body.premium-ui #orderModal .form-grid label span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
  }
  html body #orderModal .form-grid input,
  html body #orderModal .form-grid select,
  html body #orderModal .form-grid textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  html body #orderModal .form-grid textarea {
    min-height: 72px !important;
  }

  /* Checklist no celular */
  html body #orderModal .check-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  html body #orderModal .check-section-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  html body #orderModal .check-quick-btns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html body #orderModal .check-quick-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }
  html body #orderModal .check-quick-btn#checkAllYes {
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    background: rgba(16, 185, 129, 0.12) !important;
  }
  html body #orderModal .check-item {
    display: grid !important;
    grid-template-columns: 1fr 58px 58px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 11px !important;
    margin-bottom: 7px !important;
  }
  html body #orderModal .check-item span {
    font-size: 13.5px !important;
    font-weight: 550 !important;
    color: #e2e8f0 !important;
  }
  html body #orderModal .check-item button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: #131e33 !important;
    color: #94a3b8 !important;
    transition: all 0.15s ease !important;
  }
  html body #orderModal .check-item button[data-val="Sim"].on {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
  }
  html body #orderModal .check-item button[data-val="Não"].on {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.4) !important;
  }

  /* Padrão de desbloqueio no celular */
  html body #orderModal .pattern-grid {
    margin: 8px auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 56px) !important;
    gap: 14px !important;
    padding: 16px !important;
    width: max-content !important;
    background: #09101f !important;
    border: 1px solid #1a273e !important;
    border-radius: 14px !important;
  }
  html body #orderModal .pattern-grid button {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
  }

  /* Barra de botões inferior (Action Dock) */
  html body #orderModal .mc-action-dock,
  html body.premium-ui #orderModal .mc-action-dock,
  html body.premium-ui.mc-ux-536 #orderModal .mc-action-dock {
    flex: 0 0 auto !important;
    background: #09101f !important;
    border-top: 1px solid #1a283e !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  /* 1. Ao CRIAR NOVA OS (new-order-mode): botões de OS existente somem e ficam 50% / 50% Cancelar e Salvar */
  html body #orderModal.new-order-mode .order-existing-only,
  html body.premium-ui #orderModal.new-order-mode .order-existing-only,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .order-existing-only,
  html body #orderModal.new-order-mode .dropdown-more,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .dropdown-more,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .finish-pickup-action,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode #whatsappOrder {
    display: none !important;
  }

  html body #orderModal.new-order-mode .mc-action-dock,
  html body.premium-ui #orderModal.new-order-mode .mc-action-dock,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .mc-action-dock,
  html body #orderModal:not(.editing-order-mode) .mc-action-dock,
  html body.premium-ui.mc-ux-536 #orderModal:not(.editing-order-mode) .mc-action-dock {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }
  html body #orderModal.new-order-mode .mc-action-dock .dock-spacer,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .mc-action-dock .dock-spacer,
  html body #orderModal:not(.editing-order-mode) .mc-action-dock .dock-spacer,
  html body.premium-ui.mc-ux-536 #orderModal:not(.editing-order-mode) .mc-action-dock .dock-spacer {
    display: none !important;
  }
  html body #orderModal.new-order-mode .mc-action-dock .dock-cancel,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .mc-action-dock .dock-cancel,
  html body #orderModal:not(.editing-order-mode) .mc-action-dock .dock-cancel,
  html body.premium-ui.mc-ux-536 #orderModal:not(.editing-order-mode) .mc-action-dock .dock-cancel {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    order: 1 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
  }
  html body #orderModal.new-order-mode .mc-action-dock .save-os-mobile-main,
  html body.premium-ui.mc-ux-536 #orderModal.new-order-mode .mc-action-dock .save-os-mobile-main,
  html body #orderModal:not(.editing-order-mode) .mc-action-dock .save-os-mobile-main,
  html body.premium-ui.mc-ux-536 #orderModal:not(.editing-order-mode) .mc-action-dock .save-os-mobile-main {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    order: 2 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45) !important;
  }

  /* 2. Ao EDITAR OS EXISTENTE: alinhamento limpo e responsivo sem buracos */
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .dock-spacer {
    display: none !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .dock-cancel {
    flex: 1 1 calc(50% - 30px) !important;
    min-width: 100px !important;
    min-height: 48px !important;
    height: 48px !important;
    order: 1 !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock #whatsappOrder {
    flex: 1 1 calc(50% - 30px) !important;
    min-width: 100px !important;
    min-height: 48px !important;
    height: 48px !important;
    order: 2 !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .dropdown-more {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    order: 3 !important;
    display: block !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .finish-pickup-action {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    order: 4 !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .finish-pickup-action.hidden {
    display: none !important;
  }
  html body.premium-ui.mc-ux-536 #orderModal:not(.new-order-mode) .mc-action-dock .save-os-mobile-main {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    order: 5 !important;
  }
}

/* ============================================================
   OSPrimeApp 5.7.1 — Menu do celular, cabeçalho e tabelas

   Sobre o prefixo html body.premium-ui.mc-ux-536 usado daqui para baixo:
   este arquivo carrega DEPOIS do legacy.css, mas ordem só desempata entre
   seletores de mesma força. O legacy escreve coisas como
   "body.premium-ui.mc-ux-536 .table-wrap" (três classes) com !important, e
   um "html body .table-wrap" (uma classe) perde mesmo vindo depois e mesmo
   também com !important. Foi o que aconteceu na primeira tentativa do véu
   das tabelas: a regra estava certa e não pintava nada.

   As duas classes estão fixas no <body> do index.php e o app.js nunca as
   remove (só troca theme-dark por theme-light), então o prefixo é estável.
   ============================================================ */

/* O "X" de fechar o menu.

   O botão existe no HTML desde sempre (.premium-menu-close, em app.js), mas
   nenhuma regra dava tamanho ao <svg> de dentro. Sem width/height próprios o
   SVG fica à mercê do navegador: o Chrome ainda chuta 34px pelo viewBox, mas
   o WebKit do iPhone usa o tamanho intrínseco padrão (300x150) e o desenho
   sai do quadrado de 34px do botão — o que se vê é a moldura vazia, e a
   leitura óbvia é "falta um X para fechar".

   É o mesmo erro já corrigido no botão flutuante de Nova OS, logo acima:
   glifo de texto trocado por SVG sem lhe dar medida.

   De quebra o alvo era 34x34. Os 44px mínimos já valem para toda a família
   .btn neste arquivo; este botão não é .btn e tinha ficado de fora. */
html body.premium-ui.mc-ux-536 .premium-menu-title .premium-menu-close {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
html body.premium-ui.mc-ux-536 .premium-menu-title .premium-menu-close svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Abaixo de 380px o cabeçalho do menu virava coluna: "Menu rápido" centrado
   numa linha e o X sozinho na linha de baixo, 60px de altura para o que cabe
   em 44. Volta a ser uma linha só, título à esquerda e X à direita. */
@media (max-width: 380px) {
  html body.premium-ui.mc-ux-536 .premium-menu-title {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html body.premium-ui.mc-ux-536 .premium-menu-title .premium-menu-close {
    margin-left: auto !important;
  }
}

/* O campo "Filtrar menu..." não aparecia no celular.

   .premium-menu-search é um <label>, e o label global do legacy é
   flex-direction:column. As regras do menu redefinem display:flex e
   align-items, mas nenhuma redefine a direção — então a lupa ficava sozinha
   na primeira linha e o <input> caía para a segunda, fora dos 43px de
   max-height com overflow:hidden do bloco. Medido em 412px: a caixa terminava
   em y=478 e o input começava em y=490, ou seja, invisível e sem como tocar.

   Direção de volta para row: lupa e campo na mesma linha, dentro da caixa. */
html body.premium-ui.mc-ux-536 .premium-menu-search {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
html body.premium-ui.mc-ux-536 .premium-menu-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 0 !important;
}

/* Linha de lançamento de peças da OS (aba Peças).

   Medido em 412px: a linha é grid de 1fr 1fr com align-items:end. "Venda
   unitária (opcional)" ocupa duas linhas de rótulo e ainda leva um <small>
   embaixo, então a célula fica bem mais alta que a de "Qtd."; com o
   alinhamento pelo fim, o campo de Qtd. descia junto e parava ~75px abaixo do
   campo de Venda. Rótulo de um lado, campo do outro, nada na mesma altura —
   é o "desalinhado" da tela.

   Até 560px cada campo passa a ocupar a linha inteira: rótulo em cima, campo
   embaixo, todos começando na mesma margem. De 561 a 768px as duas colunas
   continuam, mas alinhadas pelo topo em vez de pelo fim. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 .parts-add-row {
    align-items: start !important;
  }
}
@media (max-width: 560px) {
  html body.premium-ui.mc-ux-536 .parts-add-row {
    grid-template-columns: 1fr !important;
  }
  html body.premium-ui.mc-ux-536 .parts-add-row > label,
  html body.premium-ui.mc-ux-536 .parts-add-row .btn {
    grid-column: 1 / -1 !important;
  }
}

/* A mesma linha no PC. Aqui as três colunas cabem lado a lado, mas o
   desalinhamento continua pelo mesmo motivo: "Venda unitária (opcional)" leva
   um <small> embaixo, o align-items:end mede a célula inteira e sobe o campo.
   Medido em 785px: o campo de Venda parava 55px acima dos de Peça e Qtd.

   Com subgrid os três rótulos, os três campos e os três <small> passam a
   dividir as mesmas faixas do grid da linha — alinham sozinhos, em qualquer
   largura e em qualquer idioma. Onde não houver subgrid (navegador antigo)
   nada muda e vale o alinhamento pelo fim de antes. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    html body.premium-ui.mc-ux-536 .parts-add-row {
      grid-template-rows: auto auto auto !important;
      align-items: stretch !important;
    }
    html body.premium-ui.mc-ux-536 .parts-add-row > label {
      display: grid !important;
      grid-row: 1 / -1 !important;
      grid-template-rows: subgrid !important;
      align-content: start !important;
    }
    /* O botão fica na faixa dos campos, não na dos rótulos. Acima de 1050px o
       legacy lhe reserva uma quarta coluna; entre 769 e 1050 ele ocupa a
       linha inteira logo abaixo. Sem dizer a coluna, a colocação automática o
       jogava para a primeira. */
    html body.premium-ui.mc-ux-536 .parts-add-row > .btn {
      grid-column: 1 / -1 !important;
      grid-row: 4 / 5 !important;
      align-self: start !important;
    }
  }
  @media (min-width: 1051px) {
    html body.premium-ui.mc-ux-536 .parts-add-row > .btn {
      grid-column: 4 / 5 !important;
      grid-row: 2 / 3 !important;
    }
  }
}

/* "Ver operação" tinha perdido o texto no celular.

   legacy.css:9998 esconde o <span> do botão do cartão de boas-vindas e a
   regra vizinha lhe dá min-width:38px — a intenção era virar um botão
   redondo só de ícone. Só que o botão continua esticado na largura toda do
   cartão, então o que sobra é uma barra de 358px com uma seta verde solta no
   canto direito e nenhuma palavra dizendo para onde ela leva.

   O rótulo volta. Num cartão que já tem título e subtítulo, cabe. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536.theme-dark .dashboard-welcome-card > button > span {
    display: inline !important;
  }
  html body.premium-ui.mc-ux-536.theme-dark .dashboard-welcome-card > button {
    width: auto !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    gap: 8px !important;
  }
}

/* Os atalhos de "Comece por aqui" ocupavam a tela inteira.

   Medido em 412px: grade de uma coluna só, cinco cartões de 346x121px —
   655px de rolagem para cinco atalhos, mais que a altura útil do aparelho.
   O painel que deveria abrir o dia da loja não cabia no primeiro olhar.

   Duas colunas e o cartão em coluna (ícone, nome, descrição) trazem os cinco
   para cerca de 290px, com alvo de toque bem acima dos 44px. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 .automation-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid > button,
  html body.premium-ui.mc-ux-536 .automation-strip-grid > a {
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid i {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid small {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  /* Cinco atalhos em duas colunas: o último fica sozinho e ocupa a linha. */
  html body.premium-ui.mc-ux-536 .automation-strip-grid > :last-child {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid > :last-child small {
    display: none !important;
  }
}

/* "Saldo do mês" saía quebrado: "R$" numa linha, "0,00" na outra.

   legacy.css:9232 troca o .dashboard-finance-head de flex para grid no
   celular, mas não declara grid-template-columns. Sem colunas, o grid cria
   UMA coluna implícita e os dois blocos empilham dentro dela; medido em
   412px a coluna ficou com 116px. Some a isso o max-width:42% que a regra
   de 10190 põe no .dashboard-balance e sobram 49px para escrever "R$ 0,00" —
   daí a quebra no meio do valor.

   Duas colunas iguais: "Faturamento hoje" e "Saldo do mês" lado a lado, cada
   um com 170px, que é folga suficiente para o valor em 25px. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 .dashboard-finance-head {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-finance-head > div {
    min-width: 0 !important;
    max-width: none !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-balance {
    text-align: right !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-finance-head strong,
  html body.premium-ui.mc-ux-536 .dashboard-balance b {
    white-space: nowrap !important;
  }
}

/* O botão do cartão de boas-vindas virava duas coisas: um retângulo com
   borda em volta do texto e, ao lado, um quadrado verde com a seta. São um
   botão só — passa a ler como um. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536.theme-dark .dashboard-welcome-card > button > span {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
}

/* Tabelas que rolam de lado agora dizem que rolam.

   A tabela de peças da OS tem 760px de conteúdo dentro de 382px de tela: ela
   sempre rolou na horizontal, só que nada na tela contava isso. O que se via
   era "CUS..." cortado na borda, que lê como defeito, não como convite a
   arrastar. Era a reclamação da tela.

   O desbotado na borda direita é feito com máscara, não com fundo: fundo é
   pintado ATRÁS das linhas da tabela, que são opacas, e não apareceria. A
   máscara age sobre o conteúdo inteiro, então some por cima.

   Com animação ligada à rolagem a máscara se apaga ao chegar no fim, para
   não mentir dizendo que ainda há conteúdo quando não há. Onde a animação
   não existir fica o desbotado fixo — ainda assim melhor que o corte seco. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 .table-wrap,
  html body.premium-ui.mc-ux-536 .stock-table-wrap,
  html body.premium-ui.mc-ux-536 .warranty-table-wrap {
    --mc-veu: 40px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--mc-veu)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--mc-veu)), transparent);
  }
  /* A barra de rolagem fica visível: é a segunda pista de que dá para puxar. */
  html body.premium-ui.mc-ux-536 .table-wrap::-webkit-scrollbar,
  html body.premium-ui.mc-ux-536 .stock-table-wrap::-webkit-scrollbar {
    height: 4px;
  }
  html body.premium-ui.mc-ux-536 .table-wrap::-webkit-scrollbar-thumb,
  html body.premium-ui.mc-ux-536 .stock-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(148, 163, 184, .45);
  }
}

/* Onde houver animação ligada à rolagem, o desbotado se apaga no fim. */
@supports (animation-timeline: scroll(self inline)) {
  @media (max-width: 768px) {
    html body.premium-ui.mc-ux-536 .table-wrap,
    html body.premium-ui.mc-ux-536 .stock-table-wrap,
    html body.premium-ui.mc-ux-536 .warranty-table-wrap {
      animation: mc-fim-da-rolagem linear both;
      animation-timeline: scroll(self inline);
    }
  }
}
@keyframes mc-fim-da-rolagem {
  0%, 88% { --mc-veu: 40px; }
  100%    { --mc-veu: 0px; }
}
/* Variável animável precisa de tipo declarado; sem isto o navegador trata
   --mc-veu como texto e salta de 40px para 0 sem transição. */
@property --mc-veu {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* Mesma correção nas abas de página do celular.

   .page-tabs .page-tab.active cai na mesma variável --bg-surface-elevated com
   a mesma reserva ciano escrita ao lado. Medido em 412px: aba ativa #1e293b
   sobre barra #090d16, contraste 1,33. E aqui é pior que no PC: a regra de
   celular logo acima zera a borda dos itens (border: 0), então o traço ciano
   embaixo — que no PC ainda marca a aba ativa — também não existe. Sobrava só
   a cor do texto para dizer em que seção a pessoa está. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 .page-tabs .page-tab.active {
    background: rgba(56, 189, 248, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .55) !important;
    color: #e0f2fe !important;
  }
}

/* Recibo da Revenda no celular.

   O modal tem quatro ações curtas. Em flex-wrap elas ficam como quatro botões
   estreitos na mesma linha em alguns tamanhos de tela. A grade mantém leitura
   previsível: duas ações por linha e texto podendo quebrar sem cortar. */
@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 #resaleReceiptModal .modal-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }
  html body.premium-ui.mc-ux-536 #resaleReceiptModal .modal-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 360px) {
  html body.premium-ui.mc-ux-536 #resaleReceiptModal .modal-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Design Simplificado & Moderno no Celular (Modo Mobile)
   ============================================================ */
@media (max-width: 768px) {
  /* ==========================================================
     NOVO MENU LATERAL FLUTUANTE COM BOTÃO DE 3 BARRINHAS E FECHAR 'X'
     Estilo minimalista, moderno e flutuante (conforme Imagens 2 e 3)
     ========================================================== */

  /* Remove barra inferior (dock antigo) conforme solicitado */
  html body.premium-ui .mobile-nav.glass-nav,
  html body.premium-ui.mc-ux-536 .mobile-nav.glass-nav,
  html body .mobile-nav {
    display: none !important;
  }

  /* Botão Flutuante Circular com as 3 Barrinhas (Hambúrguer) - Imagem 2 */
  html body.premium-ui .mobile-menu-btn,
  html body .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: var(--menu-btn-top, calc(12px + env(safe-area-inset-top, 0px)));
    left: var(--menu-btn-left, 14px);
    touch-action: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 10005 !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, opacity 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
  }
  html body.premium-ui .mobile-menu-btn:active {
    transform: scale(0.92) !important;
  }
  html body.premium-ui .mobile-menu-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
  }
  /* Oculta botão de abrir apenas quando o menu lateral (drawer) já está aberto */
  body.menu-open html body.premium-ui .mobile-menu-btn,
  body.menu-open .mobile-menu-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
  }

  /* Backdrop com desfoque de fundo quando o menu lateral abrir */
  html body.premium-ui .mobile-backdrop,
  html body.premium-ui.mc-ux-536 .mobile-backdrop,
  .mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99990 !important;
    background: rgba(2, 6, 23, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    touch-action: none !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  html body.premium-ui .mobile-backdrop.show,
  html body.premium-ui.mc-ux-536 .mobile-backdrop.show,
  body.menu-open .mobile-backdrop,
  html body.menu-open .mobile-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Oculta e desativa qualquer clique/toque no conteúdo da página quando o menu lateral está aberto */
  body.menu-open .main,
  html body.premium-ui.menu-open .main,
  html body.premium-ui.mc-ux-536.menu-open .main,
  body.menu-open .topbar,
  html body.premium-ui.menu-open .topbar,
  body.menu-open #appView > *:not(.sidebar):not(.mobile-backdrop),
  body.menu-open .modal,
  body.menu-open .mc-action-dock,
  body.menu-open .page,
  body.menu-open section {
    opacity: 0.08 !important;
    filter: blur(8px) !important;
    -webkit-filter: blur(8px) !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
    cursor: default !important;
    transition: opacity 0.25s ease, filter 0.25s ease !important;
  }

  /* Menu Lateral Flutuante (Sidebar deslizante da esquerda) - Imagem 3 */
  html body.premium-ui .sidebar,
  html body.premium-ui.mc-ux-536 .sidebar,
  html body .sidebar {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    width: min(315px, calc(100vw - 52px)) !important;
    max-width: 325px !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    transform: translateX(calc(-100% - 30px)) !important;
    border-radius: 22px !important;
    background: rgba(13, 20, 36, 0.98) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    z-index: 99995 !important;
    padding: 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Para o botão circular 'X' flutuar do lado */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  /* Estado Aberto do Menu Lateral */
  html body.premium-ui .sidebar.open,
  html body.premium-ui.mc-ux-536 .sidebar.open,
  html body .sidebar.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Conteúdo interno da sidebar com rolagem suave */
  html body.premium-ui .sidebar nav#nav,
  html body.premium-ui .sidebar .side-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-right: -4px !important;
    padding-right: 4px !important;
  }
  html body.premium-ui .sidebar nav#nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Botão circular 'X' na lateral do menu (conforme Imagem 3) */
  .mobile-drawer-close-btn {
    position: absolute !important;
    right: -16px !important;
    top: 55% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: 10025 !important;
    transition: transform 0.18s ease, background 0.18s ease !important;
    box-sizing: border-box !important;
  }
  .mobile-drawer-close-btn:active {
    transform: translateY(-50%) scale(0.92) !important;
    background: #f1f5f9 !important;
  }
  .mobile-drawer-close-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #334155 !important;
    stroke-width: 2.6 !important;
    display: block !important;
  }

  /* Itens do menu lateral com ícones coloridos e texto claro (Imagem 3) */
  html body.premium-ui .sidebar nav button,
  html body.premium-ui .side-nav button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    transition: all 0.16s ease !important;
    cursor: pointer !important;
  }
  html body.premium-ui .sidebar nav button:active,
  html body.premium-ui .side-nav button:active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }
  html body.premium-ui .sidebar nav button.active,
  html body.premium-ui .side-nav button.active {
    background: rgba(37, 99, 235, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #60a5fa !important;
    font-weight: 700 !important;
  }
  html body.premium-ui .sidebar nav button .nav-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: grid !important;
    place-items: center !important;
    color: #38bdf8 !important;
  }

  /* Títulos de seção no menu lateral */
  html body.premium-ui .sidebar .nav-section-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 10px 10px 4px !important;
    margin: 6px 0 2px !important;
  }

  /* Cabeçalho da página dá espaço ao botão flutuante de menu */
  html body.premium-ui .main {
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.premium-ui .topbar {
    padding-left: 64px !important; /* Espaço para o botão hambúrguer circular não cobrir título */
  }

  /* Botões do dock mobile: perfeitamente centralizados, proporcionais e sem deformações */
  html body.premium-ui .mobile-nav button,
  html body.premium-ui.mc-ux-536 .mobile-nav button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 3px 0 !important;
    color: #8fa5c4 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.premium-ui .mobile-nav button .nav-icon,
  html body.premium-ui.mc-ux-536 .mobile-nav button .nav-icon {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 30px !important;
    border-radius: 10px !important;
    transition: all 0.18s ease !important;
    color: inherit !important;
    background: transparent !important;
  }

  html body.premium-ui .mobile-nav button .nav-icon svg,
  html body.premium-ui.mc-ux-536 .mobile-nav button .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.9 !important;
  }

  html body.premium-ui .mobile-nav button span:not(.nav-icon),
  html body.premium-ui.mc-ux-536 .mobile-nav button span:not(.nav-icon) {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: inherit !important;
    line-height: 1 !important;
    transition: color 0.18s ease !important;
  }

  /* Estado ativo refinado: sem caixa retangular pesada que deforma o dock */
  html body.theme-dark .mobile-nav button:not(.mobile-new).active,
  html body.theme-dark .mobile-nav button.active,
  html body.premium-ui .mobile-nav button:not(.mobile-new).active,
  html body.premium-ui .mobile-nav button.active,
  html body.premium-ui.mc-ux-536 .mobile-nav button:not(.mobile-new).active,
  html body.premium-ui.mc-ux-536 .mobile-nav button.active {
    color: #38bdf8 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html body.premium-ui .mobile-nav button.active .nav-icon,
  html body.premium-ui.mc-ux-536 .mobile-nav button.active .nav-icon {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
    transform: translateY(-1px) !important;
  }

  html body.premium-ui .mobile-nav button.active span:not(.nav-icon),
  html body.premium-ui.mc-ux-536 .mobile-nav button.active span:not(.nav-icon) {
    color: #38bdf8 !important;
    font-weight: 800 !important;
  }

  /* Botão central flutuante (+ Nova OS) com glow dourado */
  html body.premium-ui .mobile-nav .mobile-new,
  html body.premium-ui.mc-ux-536 .mobile-nav .mobile-new {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    margin: -16px auto 0 !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    color: #0f172a !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.55), 0 0 10px rgba(251, 191, 36, 0.3) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  html body.premium-ui .mobile-nav .mobile-new:active,
  html body.premium-ui.mc-ux-536 .mobile-nav .mobile-new:active {
    transform: scale(0.92) !important;
  }

  html body.premium-ui .mobile-nav .mobile-new svg,
  html body.premium-ui.mc-ux-536 .mobile-nav .mobile-new svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #0f172a !important;
    stroke-width: 2.4 !important;
  }

  /* Topbar simplificada, segura e elegante (corrige sobreposições da 3ª imagem) */
  html body.premium-ui.mc-ux-536 .topbar,
  html body.premium-ui .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    min-height: auto !important;
    background: rgba(7, 13, 24, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: nowrap !important;
  }

  /* Esconder elementos que vazam ou colidem no topo no celular */
  .hidden-mobile,
  html body.premium-ui .hidden-mobile,
  html body.premium-ui .ros-breadcrumbs,
  html body.premium-ui .topbar .top-actions-clean,
  html body.premium-ui .topbar .top-actions,
  html body.premium-ui .topbar .ros-search-wrap,
  html body.premium-ui.mc-ux-536 .hidden-mobile,
  html body.premium-ui.mc-ux-536 .ros-breadcrumbs,
  html body.premium-ui.mc-ux-536 .topbar .top-actions-clean,
  html body.premium-ui.mc-ux-536 .topbar .top-actions,
  html body.premium-ui.mc-ux-536 .topbar .ros-search-wrap {
    display: none !important;
  }

  html body.premium-ui.mc-ux-536 .topbar .ros-topbar-tabs,
  html body.premium-ui .topbar .ros-topbar-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body.premium-ui .ros-tab-pill,
  html body.premium-ui.mc-ux-536 .ros-tab-pill {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 34px !important;
    border-radius: 8px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body.premium-ui .ros-topbar-right,
  html body.premium-ui.mc-ux-536 .ros-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  html body.premium-ui .btn-return-mobile,
  html body.premium-ui.mc-ux-536 .btn-return-mobile {
    display: none !important;
    visibility: hidden !important;
  }

  /* Cards e painéis mais limpos e com melhor espaçamento */
  html body.premium-ui.mc-ux-536 .panel,
  html body.premium-ui.mc-ux-536 .glass-panel {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Modais com bordas arredondadas modernas e sem transbordamento */
  html body.premium-ui.mc-ux-536 .modal-card {
    border-radius: 22px !important;
    max-width: 96vw !important;
  }

  /* Reduzir ruído visual em tabelas e listas e garantir padding para o dock */
  html body.premium-ui .main,
  html body.premium-ui.mc-ux-536 .main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Ocultação do Modo Celular Simplificado */
html body.premium-ui .btn-return-mobile,
html body.premium-ui.mc-ux-536 .btn-return-mobile,
.btn-return-mobile,
.btn-mobile-sidebar-switch {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Calibração de Centralização para Diferentes Tamanhos de Tela de Celular
   ========================================================================== */

/* 1. Telas ultra-compactas (<= 360px: iPhone SE 1ª geração, Galaxy A pequeno, etc.) */
@media (max-width: 360px) {
  html body.premium-ui .mobile-nav.glass-nav,
  html body.premium-ui.mc-ux-536 .mobile-nav.glass-nav {
    width: calc(100% - 12px) !important;
    max-width: 348px !important;
    padding: 4px 2px !important;
    border-radius: 22px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.premium-ui .mobile-nav button,
  html body.premium-ui.mc-ux-536 .mobile-nav button {
    min-height: 44px !important;
    gap: 1px !important;
  }
  html body.premium-ui .mobile-nav button .nav-icon,
  html body.premium-ui.mc-ux-536 .mobile-nav button .nav-icon {
    width: 28px !important;
    height: 26px !important;
  }
  html body.premium-ui .mobile-nav button .nav-icon svg,
  html body.premium-ui.mc-ux-536 .mobile-nav button .nav-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  html body.premium-ui .mobile-nav button span:not(.nav-icon),
  html body.premium-ui.mc-ux-536 .mobile-nav button span:not(.nav-icon) {
    font-size: 9px !important;
  }
  html body.premium-ui .mobile-nav .mobile-new,
  html body.premium-ui.mc-ux-536 .mobile-nav .mobile-new {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: -14px auto 0 !important;
  }
  html body.premium-ui .mobile-nav .mobile-new svg,
  html body.premium-ui.mc-ux-536 .mobile-nav .mobile-new svg {
    width: 20px !important;
    height: 20px !important;
  }
  html body.premium-ui .ros-tab-pill,
  html body.premium-ui.mc-ux-536 .ros-tab-pill {
    font-size: 12px !important;
    padding: 0 10px !important;
    height: 32px !important;
    max-width: none !important;
  }
}

/* 2. Telas médias padrão (361px a 414px: iPhone 12/13/14/15/16, Galaxy S21/S22/S23/S24, Xiaomi) */
@media (min-width: 361px) and (max-width: 414px) {
  html body.premium-ui .mobile-nav.glass-nav,
  html body.premium-ui.mc-ux-536 .mobile-nav.glass-nav {
    width: calc(100% - 18px) !important;
    max-width: 396px !important;
  }
}

/* 3. Telas grandes / Plus / Pro Max (415px a 768px: iPhone Pro Max, Galaxy Ultra, tablets em portrait) */
@media (min-width: 415px) and (max-width: 768px) {
  html body.premium-ui .mobile-nav.glass-nav,
  html body.premium-ui.mc-ux-536 .mobile-nav.glass-nav {
    width: 420px !important;
    max-width: 420px !important;
  }
}

/* ==========================================================================
   Refinamentos de Menu Mobile, Grid de Ações Rápidas e Filtros de OS
   ========================================================================== */

/* Bloqueio estrito de rolagem quando o menu está aberto */
html.menu-open,
body.menu-open,
html.menu-open body.premium-ui.menu-open,
html body.premium-ui.menu-open {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}
body.menu-open {
  position: fixed !important;
  width: 100% !important;
  inset: var(--menu-lock-top, 0) 0 auto 0 !important;
}

/* Grid de ações rápidas no menu mobile (6 cards simétricos 3x2) */
@media (max-width: 768px) {
  html body.premium-ui .clean-mobile-grid,
  html body.premium-ui .premium-menu-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
  }

  html body.premium-ui .clean-mobile-grid button,
  html body.premium-ui .premium-menu-actions button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 66px !important;
    padding: 8px 4px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.16s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.premium-ui .clean-mobile-grid button:active,
  html body.premium-ui .premium-menu-actions button:active {
    transform: scale(0.95) !important;
    background: rgba(56, 189, 248, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
  }

  /* Card Nova OS em destaque suave */
  html body.premium-ui .clean-mobile-grid button[data-premium-action="new-order"],
  html body.premium-ui .premium-menu-actions button:first-child {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(217, 119, 6, 0.12) 100%) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fbbf24 !important;
  }

  html body.premium-ui .clean-mobile-grid button .pm-icon,
  html body.premium-ui .premium-menu-actions button .pm-icon {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    color: inherit !important;
  }

  html body.premium-ui .clean-mobile-grid button .pm-icon svg,
  html body.premium-ui .premium-menu-actions button .pm-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.9 !important;
  }

  /* Filtros de OS (#orderSummaryStrip) em carrossel horizontal de pílulas */
  html body.premium-ui #page-orders #orderSummaryStrip.order-summary-strip,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip,
  html body.premium-ui #orderSummaryStrip.order-summary-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    margin: 8px 0 14px !important;
    padding: 4px 2px 10px !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
  }

  html body.premium-ui #page-orders #orderSummaryStrip.order-summary-strip::-webkit-scrollbar,
  html body.premium-ui #orderSummaryStrip.order-summary-strip::-webkit-scrollbar {
    display: none !important;
  }

  html body.premium-ui #page-orders #orderSummaryStrip.order-summary-strip button,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip button,
  html body.premium-ui #orderSummaryStrip.order-summary-strip button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: fit-content !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    gap: 8px !important;
    scroll-snap-align: start !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(15, 23, 42, 0.7) !important;
    color: #94a3b8 !important;
  }

  html body.premium-ui #orderSummaryStrip.order-summary-strip button.active,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip button.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border-color: #fbbf24 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4) !important;
  }

  html body.premium-ui #orderSummaryStrip.order-summary-strip button b,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip button b {
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-size: 11px !important;
  }

  html body.premium-ui #orderSummaryStrip.order-summary-strip button.active b,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip button.active b {
    background: rgba(0, 0, 0, 0.22) !important;
    color: #0f172a !important;
  }
}