/* Onda X Hub — shared visual system.
 * Loaded by the Hub HTML only, after legacy styles. No layout or workflow changes.
 * Keep explicit action selectors: ticket cards, tabs and chart controls are buttons too.
 * Legacy !important declarations require scoped overrides while routes are migrated.
 */
body.hub-ui {
  --hub-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hub-bg: #f4f7fb;
  --hub-surface: #ffffff;
  --hub-soft: #f8fafc;
  --hub-text: #17324d;
  --hub-muted: #526579;
  --hub-border: #dbe4ee;
  --hub-primary: #087f73;
  --hub-primary-hover: #06695f;
  --hub-primary-soft: #e8f5f1;
  --hub-danger: #b42332;
  --hub-danger-soft: #fff1f2;
  --hub-radius: 10px;
  --hub-card-radius: 14px;
  --hub-shadow: 0 3px 12px rgb(23 50 77 / 5%);
  --color-bg: var(--hub-bg);
  --color-surface: var(--hub-surface);
  --color-surface-soft: var(--hub-soft);
  --color-bg-elevated: var(--hub-soft);
  --color-text: var(--hub-text);
  --color-text-muted: var(--hub-muted);
  --color-border: var(--hub-border);
  --color-border-strong: #c4d1de;
  --color-primary: var(--hub-primary);
  --color-primary-strong: var(--hub-primary-hover);
  --color-primary-soft: var(--hub-primary-soft);
  --color-accent: var(--hub-primary);
  --radius-sm: var(--hub-radius);
  --radius-md: var(--hub-radius);
  --radius-lg: var(--hub-card-radius);
  --shadow-sm: var(--hub-shadow);
  font-family: var(--hub-font) !important;
  color: var(--hub-text);
  background: var(--hub-bg) !important;
  font-size: 14px;
  line-height: 1.5;
}

body.hub-ui #root ::selection { background: #bce7dc; color: #123b35; }
body.hub-ui #root :is(.app, .page, .dashboard, .pedidos-container, [class$="-page"]) {
  font-family: var(--hub-font) !important;
}
body.hub-ui #root :is(h1, h2, h3, h4, button, input, select, textarea, table) {
  font-family: var(--hub-font) !important;
}
body.hub-ui #root :is(h1, h2, h3, h4) {
  color: var(--hub-text);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}
body.hub-ui #root :is(.page-header, .dashboard-header, .inter-header, .support-hero,
  .sac-header, .chat-header, .perguntas-header, .financeiro-header, .pedidos-header,
  .flow-header, .dispatch-header, .review-header, .oi-head) h1 {
  font-size: clamp(22px, 2vw, 28px) !important;
  color: var(--hub-text) !important;
}
body.hub-ui #root :is(.card, .dashboard-reputation, .oi-widget, .support-hero,
  .section-header, .ch-header, .dispatch-header) h2 {
  font-size: 18px;
  color: var(--hub-text);
}
body.hub-ui #root :is(.muted, .page-header p, .dashboard-header p, .support-hero p,
  .inter-header p, .financeiro-header p, .flow-header p) { color: var(--hub-muted); }

/* Surfaces: preserve grid, padding, height, overflow and semantic colored borders. */
body.hub-ui #root :is(.card, .card-like, .dashboard-header, .dashboard-reputation,
  .dashboard-card, .dashboard-balance-card, .dashboard-reputation-card, .kpi-card,
  .support-hero, .support-main, .support-side, .sac-detail, .chat-detail,
  .perguntas-detail, .billing-order-card, .dispatch-info-card, .dispatch-doc-card, .oi-widget,
  .anuncios-surface, .ch-panel, .ch-card, .financeiro-card, .login-card,
  .limits-filter-card, .limits-kpi-card, .limits-company-card) {
  border-radius: var(--hub-card-radius) !important;
  box-shadow: var(--hub-shadow) !important;
}
body.hub-ui #root :is(.card, .dashboard-header, .support-hero, .ch-panel, .financeiro-card) {
  background: var(--hub-surface) !important;
  border-color: var(--hub-border) !important;
}

/* Form controls: checkbox, radio, file, color, range and hidden inputs keep native sizing. */
body.hub-ui #root :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="button"], [type="submit"])), select, textarea) {
  border-radius: var(--hub-radius) !important;
  border-color: #c4d1de !important;
  color: var(--hub-text);
  font-weight: 400;
  font-size: 14px;
}
body.hub-ui #root :is(input, textarea)::placeholder { color: var(--hub-muted); opacity: 1; }
body.hub-ui #root :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--hub-primary) !important;
  outline-offset: 2px;
  box-shadow: none !important;
  border-color: var(--hub-primary) !important;
}
body.hub-ui #root :is(button, a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hub-primary) !important;
  outline-offset: 3px !important;
}
body.hub-ui #root :is(input, select, textarea):disabled {
  background-color: #edf2f7;
  color: #65778b;
}
body.hub-ui #root :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--hub-primary); }

/* Regular actions share geometry. Explicit selectors protect card and navigation buttons. */
body.hub-ui #root :is(.button, .refresh-button, .primary-button, .pagination-button,
  .anuncios-button, .anuncios-pagination button, .ch-button, .billing-btn, .oi-button, .te-btn, .te-mini-btn,
  .nee-btn, .nee-doc-btn, .limits-refresh-button, .dashboard-reputation-refresh,
  .dispatch-start-button, .dispatch-refresh-button, .dispatch-regress-button,
  .site-form-refresh, .site-form-delete, .action-button, .esteira-refresh, .esteira-open,
  .archive-actions-trigger, .archive-pagination button,
  .compras-remove-button, .compras-cancel-button,
  .support-hero-actions button, .support-queue-head button, .support-reply-actions button,
  .support-side button, .support-pagination button,
  .sac-filters button, .sac-pagination button, .sac-reply-actions button,
  .sac-reply-submit button, .sac-modal-actions button, .sac-close-button, .support-close-button, .chat-close-button,
  .chat-filters button, .chat-reply-actions button, .chat-composer button,
  .chat-pagination button, .chat-modal-actions button,
  .perguntas-filters button, .detail-actions button, .quick-replies button,
  .perguntas-pagination-actions button, .perguntas-modal-actions button,
  .financeiro-pagination button, .financeiro-import-form button, .financeiro-audit-filters button,
  .financeiro-search button, .financeiro-list-head button,
  .nee-row-actions button, .nee-list-actions button, .nee-pagination button,
  .review-header-actions button, .review-filter-row button,
  .group-actions button, .row-actions button, .section-toolbar button,
  .login-card button) {
  border-radius: var(--hub-radius) !important;
  border: 1px solid var(--hub-border) !important;
  background: var(--hub-surface) !important;
  color: var(--hub-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  min-height: 38px;
  padding: 9px 13px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primary action. Per-route distinctions use existing semantic classes. */
body.hub-ui #root :is(.button:not(:where(.secondary, .ghost, .danger, .shopee-authorize)),
  .refresh-button, .primary-button, .anuncios-button.primary, .ch-button.primary,
  .billing-btn-primary, .billing-btn-next, .dashboard-reputation-refresh,
  .dispatch-start-button, .limits-refresh-button, .site-form-refresh,
  .action-button--default, .nee-btn.primary, .nee-btn.refresh, .nee-btn.emit,
  .te-btn:not(:where(.warn, .danger, .ghost)), .te-mini-btn.primary,
  .financeiro-search button[type="submit"],
  .financeiro-list-head button, .financeiro-import-form button,
  .support-hero-actions button, .support-reply-actions button.primary,
  .sac-filters button, .sac-reply-submit button, .chat-filters button,
  .chat-composer button, .chat-modal-actions button,
  .perguntas-filters button, .perguntas-modal-actions button, .login-card button) {
  background: var(--hub-primary) !important;
  border-color: var(--hub-primary) !important;
  color: #fff !important;
}
body.hub-ui #root .button.shopee-authorize {
  background: #ee4d2d !important;
  border-color: #ee4d2d !important;
  color: #fff !important;
}
body.hub-ui #root :is(.button.secondary, .button.ghost, .primary-button.ghost, .te-btn.ghost,
  .anuncios-button.secondary, .chat-modal-actions button.chat-secondary,
  .billing-btn-outline, .dashboard-reputation-refresh-extension,
  .support-hero-actions button:first-of-type) {
  background: var(--hub-surface) !important;
  border-color: #bfd0dd !important;
  color: var(--hub-text) !important;
}

/* Compact/icon actions retain compact sizes and existing widths. */
body.hub-ui #root :is(.actions-compact .button, .ch-button.small, .te-mini-btn, .nee-doc-btn,
  .anuncios-button.compact-button, .nee-row-actions button,
  .nee-pagination button) {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px !important;
}
body.hub-ui #root :is(.anuncios-icon-button, .perguntas-close-button) {
  border-radius: var(--hub-radius) !important;
  color: var(--hub-muted);
  box-shadow: none !important;
}
body.hub-ui #root .comprar-button {
  border-radius: var(--hub-radius) !important;
  border-color: var(--hub-primary) !important;
  background: var(--hub-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.hub-ui #root .comprar-button:disabled {
  background: #edf2f7 !important;
  border-color: var(--hub-border) !important;
  color: #64758a !important;
  opacity: .7 !important;
}
body.hub-ui #root .ch-button.icon { font-size: 21px !important; padding: 5px 10px; }
body.hub-ui #root .nee-list-actions button { min-height: 28px !important; padding: 0 !important; }
body.hub-ui #root .dispatch-page-header { flex-wrap: wrap; }
body.hub-ui #root .dispatch-session-bar { flex-basis: 100% !important; }
body.hub-ui #root .dispatch-session-bar :is(.dispatch-start-button, .dispatch-refresh-button) {
  font-size: 12px !important;
  padding: 0 9px !important;
}

/* Destructive/warning/completion states remain visibly different. */
body.hub-ui #root :is(.button.danger, .anuncios-button.danger, .ch-button.danger,
  .sac-modal-actions button.danger, .chat-modal-actions button.danger,
  .nee-list-actions button.danger, .nee-row-actions button:last-child, .review-page button.danger,
  .sac-close-button, .support-close-button,
  .compras-remove-button, .compras-cancel-button, .site-form-delete,
  .billing-menu-options button.is-danger, .action-button--error) {
  background: var(--hub-danger-soft) !important;
  border-color: #efbac2 !important;
  color: var(--hub-danger) !important;
  box-shadow: none !important;
}
body.hub-ui #root :is(.te-mini-btn.warn, .action-button--retrying) {
  background: #fff8e8 !important;
  border-color: #eac987 !important;
  color: #8b570a !important;
}
body.hub-ui #root .action-button.action-button--success {
  background: #e8f5ec !important;
  border-color: #b9dfc6 !important;
  color: #166534 !important;
}

/* Hover does not move controls or change icon/branding elements. */
@media (hover: hover) {
  body.hub-ui #root :is(.button, .refresh-button, .primary-button, .anuncios-button,
    .ch-button, .billing-btn, .oi-button, .te-btn, .nee-btn, .dashboard-reputation-refresh,
    .support-hero-actions button, .support-reply-actions button,
    .sac-filters button, .chat-filters button, .perguntas-filters button):hover:not(:disabled) {
    filter: brightness(.96);
    transform: none !important;
    box-shadow: none !important;
  }
}
body.hub-ui #root :is(.button, .refresh-button, .primary-button, .pagination-button,
  .anuncios-button, .anuncios-pagination button, .ch-button, .billing-btn, .oi-button, .te-btn, .te-mini-btn,
  .nee-btn, .nee-doc-btn, .limits-refresh-button, .dashboard-reputation-refresh,
  .dispatch-start-button, .dispatch-refresh-button, .dispatch-regress-button,
  .site-form-refresh, .site-form-delete, .action-button, .esteira-refresh, .esteira-open,
  .archive-actions-trigger, .archive-pagination button,
  .compras-remove-button, .compras-cancel-button,
  .support-hero-actions button, .support-queue-head button, .support-reply-actions button,
  .support-side button, .support-pagination button,
  .sac-filters button, .sac-pagination button, .sac-reply-actions button,
  .sac-reply-submit button, .sac-modal-actions button, .sac-close-button, .support-close-button, .chat-close-button,
  .chat-filters button, .chat-reply-actions button, .chat-composer button,
  .chat-pagination button, .chat-modal-actions button,
  .perguntas-filters button, .detail-actions button, .quick-replies button,
  .perguntas-pagination-actions button, .perguntas-modal-actions button,
  .financeiro-pagination button, .financeiro-import-form button, .financeiro-audit-filters button,
  .financeiro-search button, .financeiro-list-head button,
  .nee-row-actions button, .nee-list-actions button, .nee-pagination button,
  .review-header-actions button, .review-filter-row button,
  .group-actions button, .row-actions button, .section-toolbar button,
  .login-card button):disabled {
  background: #edf2f7 !important;
  border-color: var(--hub-border) !important;
  color: #64758a !important;
  box-shadow: none !important;
  opacity: .7 !important;
  cursor: not-allowed;
}
body.hub-ui #root .action-button.action-button--success:disabled {
  background: #e8f5ec !important;
  border-color: #b9dfc6 !important;
  color: #166534 !important;
}
body.hub-ui #root .action-button.action-button--error:disabled {
  background: var(--hub-danger-soft) !important;
  border-color: #efbac2 !important;
  color: var(--hub-danger) !important;
}
body.hub-ui #root .action-button.action-button--retrying:disabled {
  background: #fff8e8 !important;
  border-color: #eac987 !important;
  color: #8b570a !important;
}

/* Tabs are navigation, not submit actions. Keep active selection and panel behavior. */
body.hub-ui #root :is(.sac-tabs button, .chat-tabs button, .perguntas-tabs button,
  .sac-mobile-tabs .sac-tab-button, .limits-quarter-shortcuts button,
  .dashboard-filters button, .support-detail-tabs button, .support-reply-tabs button,
  .financeiro-tabs button, .anuncios-tabs button, .anuncios-manual-tabs button, .anuncios-tab, .ch-tab) {
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: var(--hub-radius) !important;
}
body.hub-ui #root :is(.sac-tabs button.active, .chat-tabs button.active,
  .sac-mobile-tabs .sac-tab-button.active, .limits-quarter-shortcuts button.active,
  .perguntas-tabs button.active, .dashboard-filters button.active,
  .financeiro-tabs button.active, .financeiro-tab--active, .anuncios-tabs button.is-active,
  .anuncios-manual-tabs button.is-active,
  .anuncios-tab.active, .ch-tab.active) {
  background: var(--hub-primary-soft) !important;
  border-color: #a9d8cb !important;
  color: #065f56 !important;
  box-shadow: none !important;
}
body.hub-ui #root .anuncios-tabs button.is-active span {
  background: #d4eee5 !important;
  color: #065f56 !important;
}

/* Let long monetary values and company cards fit within the existing Limits workspace. */
@media (min-width: 901px) {
  body.hub-ui #root :is(.limits-kpi-grid, .limits-company-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
}
body.hub-ui #root .limits-kpi-card > div { min-width: 0; }
body.hub-ui #root .limits-kpi-card strong { overflow-wrap: anywhere; }
@media (min-width: 1401px) {
  body.hub-ui #root .limits-content-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  }
}
body.hub-ui #root .financeiro-search > .financeiro-date-field:has(select) {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
@media (min-width: 768px) {
  body.hub-ui #root .financeiro-search { align-items: flex-end; }
  body.hub-ui #root .financeiro-search > .financeiro-date-field:has(select) {
    flex-basis: 170px;
  }
}

/* Administrative dialogs are mounted outside the React root. */
body.hub-ui :is(#ondax-admin-audit-panel, #ondax-admin-quick-menu, #ondax-auth-toolbar) {
  font-family: var(--hub-font) !important;
}
body.hub-ui .ondax-card {
  background: var(--hub-surface);
  border-color: var(--hub-border);
  border-radius: var(--hub-card-radius);
  box-shadow: var(--hub-shadow);
}
body.hub-ui .ondax-admin-btn {
  border-radius: var(--hub-radius);
  border-color: var(--hub-border);
  color: var(--hub-text);
  font-family: var(--hub-font);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
body.hub-ui .ondax-admin-btn.primary {
  background: var(--hub-primary);
  color: #fff;
  border-color: var(--hub-primary);
  box-shadow: none;
}
body.hub-ui .ondax-admin-btn.danger {
  background: var(--hub-danger-soft);
  color: var(--hub-danger);
  border-color: #efbac2;
}
body.hub-ui .ondax-admin-btn:disabled {
  background: #edf2f7;
  color: #64758a;
  border-color: var(--hub-border);
  opacity: .7;
}

/* Sidebar keeps its collapse/mobile behavior and marketplace branding. */
body.hub-ui #root .app.app-top-mode .app-header {
  --ondax-menu-active: var(--hub-primary);
  --sidebar-active: var(--hub-primary);
}
body.hub-ui #root .app.app-top-mode :is(.app-link.active, .app-subnav-link.active,
  .ondax-menu-parent.active) {
  background: var(--hub-primary) !important;
  border-color: #40a599 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.hub-ui #root .app.app-top-mode :is(.app-link, .app-subnav-link, .ondax-menu-parent) {
  font-family: var(--hub-font) !important;
  font-weight: 600 !important;
  border-radius: var(--hub-radius) !important;
}

/* Table typography only: widths, responsive cards and sticky columns remain intact. */
body.hub-ui #root table { font-variant-numeric: tabular-nums; }
body.hub-ui #root th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
body.hub-ui #root :is(.table, .pedidos-table, .ch-table, .financeiro-table) thead {
  background: var(--hub-soft);
  color: var(--hub-muted);
}
body.hub-ui #root :is(.modal, .modal-content, .sac-modal, .chat-modal,
  .perguntas-modal, .anuncios-modal, .ch-modal, .oi-dialog) {
  font-family: var(--hub-font) !important;
  border-radius: var(--hub-card-radius);
}

@media (max-width: 767px) {
  body.hub-ui #root .page.compras-page.flow-stage-faturar .pedidos-header {
    flex-shrink: 0 !important;
  }
  body.hub-ui #root .sac-header { flex-wrap: wrap !important; }
  body.hub-ui #root .sac-filters { flex: 1 1 100%; }
  /* Avoid browser zoom on form entry; do not impose widths on compact controls. */
  body.hub-ui #root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px !important;
  }
}

@media print {
  body.hub-ui { background: #fff !important; }
  body.hub-ui #root :is(.card, .card-like, .ch-panel, .billing-card) { box-shadow: none !important; }
}