/* Geometria e alinhamento responsivo universal para qualquer resolução de PC e monitores.
   As páginas compartilham o mesmo eixo; tabelas e quadros rolam dentro dele. */
html { scrollbar-gutter: stable; }

body.premium-ui {
  --layout-content-width: 1840px;
  --layout-panel-space: 24px;
  --layout-gap: 20px;
  --layout-muted: #afbed2;
}
body.premium-ui.theme-light { --layout-muted: #485c75; }

/* Desktop Grande / Full HD / 2K / Ultrawide (1400px+) */
@media (min-width: 1400px) {
  body.premium-ui {
    --layout-panel-space: 24px;
    --layout-gap: 20px;
  }
}

/* Notebooks comuns / Resoluções intermediárias (1100px - 1399px, incluindo 1280x1024, 1366x768, 1280x800) */
@media (min-width: 1100px) and (max-width: 1399px) {
  body.premium-ui {
    --layout-panel-space: 16px;
    --layout-gap: 14px;
  }
}

/* Telas compactas / PDVs / Tablets em modo paisagem / Split-screen (769px - 1099px) */
@media (min-width: 769px) and (max-width: 1099px) {
  body.premium-ui {
    --layout-panel-space: 14px;
    --layout-gap: 14px;
  }
}

/* Área principal (main) */
html body.premium-ui .main {
  box-sizing: border-box !important;
  padding: 0 var(--layout-panel-space) 90px !important;
  min-width: 0 !important;
}

/* Todas as páginas, abas e topbar compartilham o mesmo eixo e alinhamento */
html body.premium-ui.mc-ux-536 #appView .main > :is(.page,.topbar,.page-tabs,.subscription-notice) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--layout-content-width) !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Topbar perfeitamente alinhada e fluida */
html body.premium-ui.mc-ux-536 #appView .main > .topbar {
  padding: 14px 0 !important;
  margin-bottom: var(--layout-gap) !important;
  gap: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html body.premium-ui.mc-ux-536 #appView .topbar .topbar-title-wrap {
  flex: 1 1 240px !important;
  min-width: 0 !important;
}

html body.premium-ui.mc-ux-536 #appView .topbar h1 {
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  font-weight: 750 !important;
  margin: 0 0 4px !important;
  overflow-wrap: anywhere;
}

html body.premium-ui.mc-ux-536 #appView .topbar p {
  color: var(--layout-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Agrupamento elegante dos botões à direita (Modo Celular + Nova OS) */
html body.premium-ui.mc-ux-536 #appView .topbar .btn-return-mobile {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

html body.premium-ui.mc-ux-536 #appView .topbar .top-actions-clean {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

html body.premium-ui.mc-ux-536 #appView .page > .panel,
html body.premium-ui.mc-ux-536 #appView .settings-stack > .panel {
  padding: var(--layout-panel-space) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  min-width: 0;
}
html body.premium-ui.mc-ux-536 #appView .page > .panel + .panel { margin-top: var(--layout-gap) !important; }
html body.premium-ui.mc-ux-536 #appView .panel-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 20px !important;
  margin-bottom: 20px !important;
}
html body.premium-ui.mc-ux-536 #appView .panel-head > div { min-width: 0; }
html body.premium-ui.mc-ux-536 #appView .panel-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -.015em !important;
}
html body.premium-ui.mc-ux-536 #appView .panel-head p { margin: 6px 0 0 !important; line-height: 1.5; }
html body.premium-ui.mc-ux-536 #appView :is(.toolbar,.toolbar-actions,.filter-row) {
  gap: 12px !important;
  flex-wrap: wrap;
  align-items: center;
}
html body.premium-ui.mc-ux-536 #appView :is(.search,.inline-search) { min-width: 0; max-width: 100%; }
html body.premium-ui.mc-ux-536 #appView .page .search input { min-height: 44px !important; font-size: 14px !important; }
html body.premium-ui.mc-ux-536 #appView :is(.finance-filters-pro,.reports-filters,.stock-filters,.purchases-filters,.warranty-filters) {
  align-items: end !important;
  gap: 12px !important;
}
html body.premium-ui.mc-ux-536 #appView :is(.finance-filters-pro,.reports-filters,.stock-filters,.purchases-filters,.warranty-filters) > .btn { align-self: end !important; }
html body.premium-ui.mc-ux-536 #appView :is(.finance-filters-pro,.reports-filters,.stock-filters,.purchases-filters,.warranty-filters) :is(input,select) { min-height: 44px !important; font-size: 14px !important; }
html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid {
  align-items: start !important;
  gap: 20px 16px !important;
  min-width: 0;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  text-align: left;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid > label > span:first-child:not(.file-picker) {
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 650 !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="hidden"]),select) {
  width: 100%;
  min-width: 0;
  min-height: 44px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) textarea {
  min-width: 0;
  max-width: 100%;
  line-height: 1.5 !important;
  resize: vertical;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.help-text,.form-grid small) {
  color: var(--layout-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) .btn {
  min-height: 44px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(56, 189, 248, 0.28) rgba(255, 255, 255, 0.04) !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap)::-webkit-scrollbar {
  height: 6px !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap)::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 999px !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap)::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25) !important;
  border-radius: 999px !important;
}
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap):hover::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.45) !important;
}

html body.premium-ui.mc-ux-536 :is(#appView,.modal) table :is(th,td) { vertical-align: middle !important; line-height: 1.5; font-variant-numeric: tabular-nums; }
html body.premium-ui.mc-ux-536 :is(#appView,.modal) table th { color: var(--layout-muted) !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
html body.premium-ui.mc-ux-536 :is(#appView,.modal) table td { font-size: 13px !important; }
html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 3px solid #699fff !important; outline-offset: 3px !important; }

/* Modais responsivos: evitam estouro e corte de tela em notebooks e ficam SEMPRE sobre a sidebar */
html body.premium-ui.mc-ux-536 .modal,
html body.premium-ui .modal,
html body .modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9995 !important;
  background: rgba(4, 9, 18, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
}

html body.premium-ui.mc-ux-536 .modal.show,
html body.premium-ui .modal.show,
html body .modal.show {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

html body.premium-ui.mc-ux-536 .modal .modal-card,
html body.premium-ui .modal .modal-card,
html body .modal .modal-card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: min(720px, calc(100vw - 32px)) !important;
  margin: min(32px, 3vh) auto !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-radius: 16px !important;
}
html body.premium-ui.mc-ux-536 .modal .modal-card.xl,
html body.premium-ui .modal .modal-card.xl,
html body .modal .modal-card.xl {
  max-width: min(1160px, calc(100vw - 36px)) !important;
}
html body.premium-ui.mc-ux-536 .modal .modal-head { align-items: center; gap: 16px; }
html body.premium-ui.mc-ux-536 .modal .modal-head h2 { line-height: 1.35; overflow-wrap: anywhere; }

/* --- Grade de Formulários: adaptação inteligente de 1 a 4 colunas --- */
@media (min-width: 1100px) {
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 769px) and (max-width: 1099px) {
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.four,
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Dashboard Responsivo para Todas as Resoluções de Computador --- */
@media (min-width: 1050px) {
  html body.premium-ui.mc-ux-536 .automation-strip-grid {
    grid-template-columns: repeat(5, 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 {
    padding: 12px 10px !important;
    min-height: 104px !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid strong {
    font-size: 13.5px !important;
  }
  html body.premium-ui.mc-ux-536 .automation-strip-grid small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}
@media (min-width: 850px) and (max-width: 1049px) {
  html body.premium-ui.mc-ux-536 .automation-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (min-width: 769px) and (max-width: 849px) {
  html body.premium-ui.mc-ux-536 .automation-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Calibração Específica para Resoluções Compactas de Desktop (1280x1024, 1366x768, etc.) */
@media (min-width: 1050px) and (max-width: 1399px) {
  html body.premium-ui #page-orders .professional-toolbar {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  html body.premium-ui #orderSearch,
  html body.premium-ui #page-orders .professional-toolbar .search input {
    height: 42px !important;
    min-height: 42px !important;
  }
  html body.premium-ui.mc-resale-537 #page-resale .resale-funnel {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body.premium-ui.mc-resale-537 #page-resale .resale-funnel-step {
    padding: 10px 8px !important;
  }
  html body.premium-ui.mc-resale-537 #page-resale .resale-funnel-step b {
    font-size: 17px !important;
  }
  html body.premium-ui.mc-resale-537 #page-resale .resale-funnel-step > span:not(.resale-funnel-icon) {
    font-size: 12px !important;
  }
}

@media (min-width: 1050px) {
  html body.premium-ui.mc-ux-536 .dashboard-priority-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-lists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (min-width: 769px) and (max-width: 1049px) {
  html body.premium-ui.mc-ux-536 .dashboard-priority-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-priority-card:last-child {
    grid-column: 1 / -1 !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body.premium-ui.mc-ux-536 .dashboard-lists-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* --- Caixa Balcão Responsivo --- */
@media (min-width: 1050px) {
  #page-caixa .caixa-entrada {
    display: grid !important;
    grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr) !important;
    gap: 12px 20px !important;
  }
}
@media (min-width: 769px) and (max-width: 1049px) {
  #page-caixa .caixa-entrada {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #page-caixa .caixa-entrada .help-text {
    grid-column: 1 !important;
  }
}

/* --- Panic Full Responsivo --- */
@media (min-width: 1250px) {
  .panicfull-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(310px, 0.8fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 1249px) {
  .panicfull-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .panicfull-history-panel {
    position: static !important;
    max-height: none !important;
  }
}

/* --- Filtros da Mesa de Reparo (#orderSummaryStrip) --- */
@media (min-width: 1500px) {
  #orderSummaryStrip.order-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (min-width: 1050px) and (max-width: 1499px) {
  #orderSummaryStrip.order-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  #orderSummaryStrip.order-summary-strip button:last-child {
    grid-column: span 2 !important;
  }
}
@media (min-width: 769px) and (max-width: 1049px) {
  #orderSummaryStrip.order-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #orderSummaryStrip.order-summary-strip button:last-child {
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="hidden"]),select),
  html body.premium-ui.mc-ux-536 #appView :is(.finance-filters-pro,.reports-filters,.stock-filters,.purchases-filters,.warranty-filters) :is(input,select) { font-size: 16px !important; }
  body.premium-ui { --layout-panel-space: 16px; --layout-gap: 16px; }
  html body.premium-ui.mc-ux-536 #appView .main > .topbar { padding: 12px 0 !important; }
  html body.premium-ui.mc-ux-536 #appView .panel-head { gap: 12px !important; }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.two,
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.three,
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid.four,
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) .form-grid > .wide { grid-column: 1 / -1 !important; }
  html body.premium-ui.mc-ux-536 .modal .modal-card,
  html body.premium-ui.mc-ux-536 .modal .modal-card.xl { max-width: calc(100vw - 16px) !important; border-radius: 12px !important; }
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.table-wrap,.stock-table-wrap,.warranty-table-wrap) { mask-image: none !important; -webkit-mask-image: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.premium-ui.mc-ux-536 :is(#appView,.modal) :is(.btn,.panel,.page) { animation: none !important; transition: none !important; }
}

/* Feedback de salvamento sem deslocar o rodapé nem esconder a ação. */
.stock-search-hint,.stock-result-count { color:var(--layout-muted); font-size:14px; line-height:1.5; margin:8px 0 16px; }
.stock-result-count:empty { display:none; }
html body.premium-ui.mc-ux-536 #partsTable.stock-table-empty {
  min-width:0 !important; width:100% !important; table-layout:fixed;
}
html body.premium-ui.mc-ux-536 #partsTable.stock-table-empty td {
  position:static !important; padding:0 !important; white-space:normal !important;
  background:transparent !important; box-shadow:none !important;
}
.stock-empty-state { padding:32px 24px; text-align:center; }
.stock-empty-state h3 { margin:0 0 12px; font-size:20px; line-height:1.4; }
.stock-empty-state p { max-width:52ch; margin:0 auto 20px; color:var(--layout-muted); font-size:14px; line-height:1.6; }
@media(max-width:768px) { .stock-empty-state { padding:24px 16px; } .stock-empty-state .btn { width:100%; } }

html body.premium-ui.mc-ux-536 form[aria-busy="true"] button[type="submit"] {
  cursor: wait !important;
  opacity: .85 !important;
}
html body.premium-ui.mc-ux-536 form[aria-busy="true"] button[type="submit"]::after {
  content: " · Aguarde";
  font-weight: 400;
}
html body.premium-ui.mc-ux-536 .modal :is(input,select,textarea):user-invalid {
  border-color: #ef8794 !important;
}
html body.premium-ui.mc-ux-536 .modal :is(input,select,textarea) {
  scroll-margin-block: 80px;
}

/* Pagamento Pix: leitura clara e ação acessível no celular. */
.billing-card .pix-box{grid-template-columns:minmax(0,1fr);gap:20px;margin:24px 0;align-items:center;justify-items:center}
.billing-card .pix-qr{width:208px;height:208px;padding:12px;border-radius:12px;box-sizing:border-box;color:#172337;display:grid;place-items:center}
.billing-card .pix-qr canvas,.billing-card .pix-qr svg,.billing-card .pix-qr img{max-width:100%;max-height:100%;height:auto}
.billing-card .pix-info{min-width:0;width:100%;max-width:440px}
.billing-card .pix-instruction{font-size:16px;line-height:1.5;color:#edf3fb;margin:0 0 10px;font-weight:600}
.billing-card .pix-alternative{font-size:14px;line-height:1.6;color:#b7c7dc;margin:0 0 18px}
.billing-card .pix-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.billing-card .pix-copy input{width:100%;box-sizing:border-box;font-size:13px;min-height:44px;text-overflow:ellipsis}
.billing-card .pix-copy .btn{min-height:48px;width:100%;white-space:normal}
.billing-card .proof-form{gap:14px;padding-top:20px;margin-top:24px}
.billing-card .proof-form input[type=file]{max-width:100%;box-sizing:border-box;min-height:48px}
@media(max-width:640px){.billing-card .pix-box{grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center}.billing-card .pix-info{width:100%;text-align:left}.billing-card .pix-qr{width:208px;height:208px}}