/* OSPrimeApp 5.7 — Ordens de serviço / bancada */
#page-orders,
#page-counter,
#page-history {
  min-width: 0;
}
#page-orders .orders-feedback:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; margin: 12px 0; border: 1px solid #405675; border-radius: 10px; color: #dce7f5; line-height: 1.5; }
#page-orders .orders-empty-state:not([hidden]) { padding: 24px; margin: 16px 0; border: 1px dashed #405675; border-radius: 12px; color: #e8f0ff; }
#page-orders .orders-empty-state p { margin: 8px 0 16px; color: #afbed2; line-height: 1.5; }
#page-history button.history-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
#page-history button.history-card .history-main { min-width: 0; overflow-wrap: anywhere; }
#page-orders .table-wrap,
#page-history .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Filtros da Mesa de Reparo.

   O rotulo mais longo ("Pagas / nao retiradas") era cortado com reticencias
   ja em 1366px: a grade tinha 7 colunas iguais e a etiqueta disputava a
   largura com o contador ao lado. Duas correcoes:

   1. Seis colunas em vez de sete. Cada filtro ganha ~26px, o texto cabe em
      uma linha e a segunda fileira fica 6+3 em vez de 7+2.
   2. O rotulo pode quebrar em vez de truncar. Numa loja com muitas OS o
      contador chega a 4 ou 5 digitos e volta a espremer a etiqueta; quebrando,
      o nome do filtro continua legivel em qualquer volume. A altura do cartao
      sai de 44px para 45px so na linha que quebra.

   Abaixo de 1050px o legacy.css ja reduz para 4 colunas e no celular a faixa
   vira rolagem horizontal, entao nada disso muda nessas larguras. */
@media (min-width: 1051px) {
  #orderSummaryStrip.order-summary-strip {
    grid-template-columns: repeat(6, minmax(90px, 1fr));
  }
}
#orderSummaryStrip.order-summary-strip button span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* A busca da Mesa de Reparo era a unica das 11 buscas do sistema fora do
   padrao: 48px de altura e fonte 14.5px, contra 46px/14px de todas as outras
   (Clientes, Pecas, Compras, Garantias, Balcao, IMEI, Historico, Peliculas,
   Panic Full e busca global). Justo a principal destoava. O legacy.css tem
   uma pilha de regras concorrentes para este campo, entao a correcao vive
   aqui, que carrega depois, com a especificidade necessaria para vencer. */
html body.premium-ui #orderSearch,
html body.premium-ui #page-orders .professional-toolbar .search input {
  height: 46px !important;
  min-height: 46px !important;
  line-height: 46px !important;
  font-size: 14px !important;
}

/* Largura das colunas do Kanban no PC.

   Um bloco em @media(min-width:769px) do legacy anula, com !important e de
   uma vez só, as três defesas que o Kanban tinha:

     body.theme-dark #page-orders .professional-kanban {
       grid-template-columns: repeat(5, minmax(0px, 1fr));  <- some o mínimo
       overflow-x: visible;                                 <- some a rolagem
     }
     body.theme-dark #page-orders .professional-column {
       min-width: 0;                                        <- some o piso
     }

   O desenho original era repeat(5, minmax(250px, 1fr)) com overflow-x:auto,
   ou seja: coluna nunca menor que 250px e, se não couber, rola de lado.
   Trocar o mínimo por 0 faz o estouro sumir — e espreme os cartões.

   Medido em 1100px: coluna de 150px. Dentro dela os quatro botões do cartão
   viram uma grade de 59px e o texto VAZA para fora do botão: "WhatsApp"
   passa 2,7px da borda e "Link cliente" passa 7,2px, com fonte de 10px. Nome
   do cliente e aparelho quebram em duas linhas cada.

   Mínimo de 200px e rolagem de volta. A conta: de ~1300px de janela para
   cima os 5 cabem e esticam; abaixo disso rola de lado, que é o que um
   quadro de colunas faz. Em 200px o botão fica com 82px para um texto de
   56px — sobra folga mesmo com o nome de filial mais comprido. */
@media (min-width: 769px) {
  html body.premium-ui #page-orders .professional-kanban,
  html body.premium-ui.mc-ux-536 #page-orders .professional-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  html body.premium-ui #page-orders .professional-column,
  html body.premium-ui.mc-ux-536 #page-orders .professional-column {
    flex: none !important;
    width: 100% !important;
    min-width: 200px !important;
    max-width: none !important;
  }
  /* O texto dos botões do cartão não escapa da borda nem em coluna apertada. */
  html body.premium-ui #page-orders .quick-card-actions button,
  html body.premium-ui.mc-ux-536 #page-orders .quick-card-actions button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Mesa de reparo: contraste, hierarquia e ações legíveis no balcão. */
html body.premium-ui #page-orders {
  --os-surface: #111c2c;
  --os-text: #edf3fc;
  --os-muted: #afbed2;
  --os-line: #334258;
  --os-action: #f5cf36;
  color: var(--os-text);
}
html body.premium-ui.theme-light #page-orders {
  --os-surface: #ffffff;
  --os-text: #17283e;
  --os-muted: #485c75;
  --os-line: #c6d0dc;
}
html body.premium-ui #page-orders .professional-toolbar {
  padding: 12px !important;
  border-radius: 12px !important;
  background: var(--os-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body.premium-ui #orderSearch::placeholder { color: var(--os-muted); opacity: 1; }
html body.premium-ui #orderSummaryStrip.order-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  margin: 14px 0 12px !important;
  overflow: visible !important;
}
@media (min-width: 1050px) and (max-width: 1499px) {
  html body.premium-ui #orderSummaryStrip.order-summary-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button {
    padding: 6px 8px !important;
    min-height: 38px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button:last-child {
    grid-column: span 2 !important;
  }
}
@media (min-width: 769px) and (max-width: 1049px) {
  html body.premium-ui #orderSummaryStrip.order-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button {
    padding: 6px 8px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button:last-child {
    grid-column: span 2 !important;
  }
}
html body.premium-ui #orderSummaryStrip.order-summary-strip button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 8px !important;
  background: var(--os-surface) !important;
  color: var(--os-muted) !important;
  font-size: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body.premium-ui #orderSummaryStrip.order-summary-strip button span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.premium-ui #orderSummaryStrip.order-summary-strip button b {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
html body.premium-ui #orderSummaryStrip.order-summary-strip button :is(span,b) {
  color: inherit !important;
  font-size: inherit !important;
  font-variant-numeric: tabular-nums;
}
html body.premium-ui #orderSummaryStrip.order-summary-strip button.active {
  background: var(--os-action) !important;
  border-color: var(--os-action) !important;
  color: #17202e !important;
}
html body.premium-ui #page-orders #ordersCounter { color: var(--os-muted); font-size: 13px; margin: 12px 0 16px; }
html body.premium-ui.mc-ux-536 #page-orders .professional-card {
  padding: 16px !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 12px !important;
  background: var(--os-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
@media (max-width: 1366px) {
  html body.premium-ui.mc-ux-536 #page-orders .professional-card {
    padding: 12px 10px !important;
  }
}
html body.premium-ui #page-orders .professional-card::before { display: none !important; }
html body.premium-ui #page-orders .professional-card h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--os-text) !important;
  margin: 12px 0 4px !important;
  overflow-wrap: anywhere;
}
@media (max-width: 1366px) {
  html body.premium-ui #page-orders .professional-card h3 {
    font-size: 14.5px !important;
    margin: 8px 0 4px !important;
  }
}
html body.premium-ui #page-orders .professional-card .device { font-size: 14px !important; color: var(--os-text) !important; }
html body.premium-ui #page-orders :is(.card-meta,.card-footer,.card-topline .id) { color: var(--os-muted) !important; font-size: 12px !important; line-height: 1.6; }
html body.premium-ui #page-orders .professional-card .problem { font-size: 13px !important; line-height: 1.5 !important; color: var(--os-text) !important; margin: 12px 0 !important; }
html body.premium-ui #page-orders .moneybox { background: transparent !important; padding: 12px 0 !important; border-top: 1px solid var(--os-line); border-radius: 0 !important; }
html body.premium-ui #page-orders .moneybox small { color: var(--os-muted) !important; font-size: 12px !important; }
html body.premium-ui #page-orders .quick-card-actions button {
  min-height: 44px !important;
  font-size: 12px !important;
  color: var(--os-text) !important;
  background: var(--os-surface) !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
@media (max-width: 1399px) {
  html body.premium-ui #page-orders .quick-card-actions button {
    min-height: 36px !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
  }
}
html body.premium-ui #page-orders .quick-card-actions button:first-child { background: var(--os-action) !important; color: #17202e !important; border-color: var(--os-action) !important; }
html body.premium-ui.mc-ux-536 #page-orders .quick-card-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
@media (max-width: 1399px) {
  html body.premium-ui.mc-ux-536 #page-orders .quick-card-actions {
    gap: 6px !important;
  }
}
html body.premium-ui.theme-light #page-orders .mini-pill.pending,
html body.premium-ui.theme-light #page-orders .flag.waiting,
html body.premium-ui.theme-light #page-orders .flag.unpaid { color: #704b00 !important; background: #fff3cc !important; }
html body.premium-ui.theme-light #page-orders .mini-pill.paid,
html body.premium-ui.theme-light #page-orders .flag.approved { color: #13633c !important; background: #e0f5e9 !important; }
html body.premium-ui.theme-light #page-orders .flag.late,
html body.premium-ui.theme-light #page-orders .flag.declined { color: #a02036 !important; background: #ffedf0 !important; }
html body.premium-ui.theme-light #orderSearch { background: #fff !important; color: var(--os-text) !important; }
html body.premium-ui #page-orders :is(button,input):focus-visible { outline: 3px solid #699fff !important; outline-offset: 3px; }
html body.premium-ui #page-orders button:hover { filter: brightness(1.08); }
html body.premium-ui #page-orders ::selection { background: #f5cf36; color: #17202e; }
@media (min-width: 1400px) {
  html body.premium-ui #page-orders .professional-kanban,
  html body.premium-ui.mc-ux-536 #page-orders .professional-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(210px, 1fr)) !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  html body.premium-ui #page-orders .professional-column,
  html body.premium-ui.mc-ux-536 #page-orders .professional-column {
    flex: none !important;
    width: 100% !important;
    min-width: 210px !important;
    max-width: none !important;
  }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  html body.premium-ui #page-orders .professional-kanban,
  html body.premium-ui.mc-ux-536 #page-orders .professional-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(175px, 1fr)) !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  html body.premium-ui #page-orders .professional-column,
  html body.premium-ui.mc-ux-536 #page-orders .professional-column {
    flex: none !important;
    width: 100% !important;
    min-width: 175px !important;
    max-width: none !important;
  }
}
@media (min-width: 769px) and (max-width: 999px) {
  html body.premium-ui #page-orders .professional-kanban,
  html body.premium-ui.mc-ux-536 #page-orders .professional-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
  }
  html body.premium-ui #page-orders .professional-column,
  html body.premium-ui.mc-ux-536 #page-orders .professional-column {
    flex: none !important;
    width: 100% !important;
    min-width: 190px !important;
    max-width: none !important;
  }
}
@media (min-width: 769px) {
  #kanbanMobileNavigation,
  .kanban-mobile-navigation,
  html body.premium-ui #page-orders .kanban-mobile-navigation {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html body.premium-ui #orderSummaryStrip.order-summary-strip,
  html body.theme-dark #page-orders #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 12px !important;
    padding: 4px 4px 10px !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip::-webkit-scrollbar {
    display: none !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button,
  html body.theme-dark #page-orders #orderSummaryStrip.order-summary-strip button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: fit-content !important;
    min-height: 38px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    gap: 8px !important;
    scroll-snap-align: start !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button b {
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-size: 11px !important;
  }
  html body.premium-ui #orderSummaryStrip.order-summary-strip button.active b {
    background: rgba(0, 0, 0, 0.2) !important;
  }
  html body.premium-ui.mc-ux-536 #page-orders .professional-kanban { display:flex!important; width: 100% !important; margin: 0 !important; padding: 0 0 12px !important; overflow-x:auto!important; scroll-snap-type: x mandatory; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
  html body.premium-ui.mc-ux-536 #page-orders .professional-column { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: none !important; scroll-snap-align: start; scroll-snap-stop:always; }
}
.kanban-mobile-navigation { display:none; }
.order-delete-area { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:16px 0;border-top:1px solid var(--line,#334155); }
.order-delete-area p { margin:0;color:var(--muted);font-size:13px;line-height:1.5; }
#deleteOpenedOrder { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;color:#ffb3bd!important;border:1px solid #864453!important;background:#301d29!important;white-space:nowrap; }
#deleteOpenedOrder svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
@media(max-width:768px){.order-delete-area{flex-direction:column;align-items:stretch;}#deleteOpenedOrder{width:100%;}}
#page-orders .os-delete-row { display:flex; justify-content:flex-end; margin-top:8px; border-top:1px solid var(--line,#334155); padding-top:8px; }
#page-orders .os-delete-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid #864453; border-radius:8px; background:transparent; color:#ffb3bd; font:inherit; font-size:13px; cursor:pointer; }
#page-orders .os-delete-action svg,.kanban-mobile-navigation svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
#page-orders .os-delete-action:hover { background:#442332; }
@media(max-width:768px){
  #page-orders .kanban-mobile-navigation,
  html body.premium-ui #page-orders .kanban-mobile-navigation,
  html body.premium-ui.mc-ux-536 #page-orders .kanban-mobile-navigation {
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) 46px !important;
    gap: 10px !important;
    align-items: end !important;
    margin: 10px 0 14px !important;
  }
  #page-orders .kanban-mobile-navigation label { min-width: 0 !important; }
  #page-orders .kanban-mobile-navigation label span {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }
  #page-orders .kanban-mobile-navigation select {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    background: #0d1525 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 12px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
  }
  #page-orders .kanban-mobile-navigation button {
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    background: #152238 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
  }
  #page-orders .kanban-mobile-navigation button:disabled { opacity: .35 !important; cursor: not-allowed !important; }
  #page-orders .professional-card { touch-action: pan-x pan-y; }
}