:root {
  --bg-primary: #07101d;
  --bg-secondary: #0b1527;
  --bg-tertiary: #0f1b32;
  --surface: rgba(10, 19, 35, 0.88);
  --surface-elevated: rgba(13, 24, 42, 0.96);
  --surface-soft: rgba(255,255,255,0.03);
  --surface-hover: rgba(255,255,255,0.05);
  --border: rgba(148, 163, 184, 0.19);
  --border-strong: rgba(148, 163, 184, 0.26);
  --primary: var(--brand-primary, #3b82f6);
  --primary-hover: color-mix(in srgb, var(--primary) 88%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent);
  --primary-soft-strong: color-mix(in srgb, var(--primary) 24%, transparent);
  --text-primary: #f8fbff;
  --text-secondary: #d7e2ef;
  --text-muted: #93a4ba;
  --text-soft: #71839a;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.20);
  --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.18);
  --shadow-lg: 0 20px 50px rgba(2, 6, 23, 0.22);
  --page-max: 1440px;
}

html, body, #root { min-height: 100%; }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.12), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(14,165,233,.08), transparent 18%),
    linear-gradient(180deg, #09111f 0%, #08111e 100%);
  color: var(--text-secondary);
}
body, button, input, select, textarea {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark-mode body {
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.12), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(14,165,233,.08), transparent 18%),
    linear-gradient(180deg, #07101d 0%, #08111e 100%);
  color: var(--text-secondary);
}

html:not(.dark-mode) body {
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,.10), transparent 24%),
    linear-gradient(180deg, #f5f8fd 0%, #edf3fa 100%);
}
html:not(.dark-mode) {
  --bg-primary: #f4f8fc;
  --bg-secondary: #eef4fa;
  --bg-tertiary: #ffffff;
  --surface: rgba(255,255,255,0.94);
  --surface-elevated: rgba(255,255,255,0.98);
  --surface-soft: rgba(15,23,42,0.03);
  --surface-hover: rgba(15,23,42,0.04);
  --border: rgba(15,23,42,0.11);
  --border-strong: rgba(15,23,42,0.16);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 22px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.gestao-app-shell {
  background: transparent !important;
  color: var(--text-secondary);
}
.gestao-main {
  padding: 24px 28px !important;
  background: transparent;
}
.gestao-main > * {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.ui-page-header-copy { min-width: 0; }
.ui-page-title {
  margin: 0;
  color: var(--text-primary) !important;
  font-size: clamp(0.96rem, 0.94rem + 0.34vw, 1.18rem) !important;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600 !important;
}
.ui-page-subtitle {
  margin-top: 8px !important;
  max-width: 780px;
  color: var(--text-muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.6;
}
.ui-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ui-card,
.gestao-main .rounded-xl.border.bg-white,
.gestao-main .rounded-xl.border.border-slate-200.bg-white,
.gestao-main .rounded-xl.border.border-slate-200.bg-white\/90 {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-secondary);
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(14px);
}
.ui-card-hover:hover { border-color: var(--border-strong) !important; }
.ui-card-title,
.ui-card .text-slate-800,
.ui-card .text-slate-900 {
  color: var(--text-primary) !important;
}
.ui-card-muted,
.ui-card .text-slate-500,
.ui-card .text-slate-400,
.ui-page-header .text-slate-500,
.ui-page-header .text-slate-400 {
  color: var(--text-muted) !important;
}

.ui-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 120px;
}
.ui-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 50%, white), transparent);
  opacity: .55;
}
.ui-stat-icon {
  border-radius: 14px;
  background: var(--primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.ui-stat-icon svg,
.ui-stat-icon .text-blue-700,
.ui-stat-icon .text-emerald-700,
.ui-stat-icon .text-amber-700,
.ui-stat-icon .text-red-700,
.ui-stat-icon .text-slate-700 { color: var(--primary) !important; }
.ui-stat-label {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700 !important;
}
.ui-stat-value {
  color: var(--text-primary) !important;
  font-size: clamp(1.28rem, 1.18rem + .55vw, 1.78rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 750 !important;
}
.ui-stat-hint { color: var(--text-muted) !important; font-size: 0.78rem !important; }

.ui-btn {
  border-radius: 12px !important;
  min-height: 40px;
  font-weight: 700 !important;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ui-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.ui-btn-primary {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, #38bdf8)) !important;
  color: #f8fbff !important;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, white) !important;
}
.ui-btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--primary-hover), color-mix(in srgb, var(--primary-hover) 84%, #0ea5e9)) !important; }
.ui-btn-secondary {
  background: var(--surface-soft) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.ui-btn-secondary:hover:not(:disabled), .ui-btn-ghost:hover:not(:disabled) { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.ui-btn-ghost { color: var(--text-muted) !important; border: 1px solid transparent !important; box-shadow: none !important; }
.ui-btn-danger {
  background: rgba(239,68,68,.10) !important;
  color: #fda4af !important;
  border: 1px solid rgba(239,68,68,.22) !important;
}
.ui-btn-danger-solid {
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(220,38,38,.95)) !important;
  color: #fff !important;
  border: 1px solid rgba(248,113,113,.35) !important;
}

.ui-icon-btn {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
}
.ui-icon-btn:hover { background: var(--surface-hover) !important; color: var(--text-primary) !important; }

.ui-field { display: block; }
.ui-field-label {
  margin-bottom: 8px !important;
  display: block;
  color: var(--text-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}
.ui-field-hint { margin-top: 6px !important; color: var(--text-soft) !important; }
.gestao-main input:not([type=checkbox]):not([type=radio]),
.gestao-main select,
.gestao-main textarea {
  min-height: 44px;
  border-radius: 12px !important;
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface-elevated) 96%, transparent) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.gestao-main textarea { min-height: 96px; }
.gestao-main input::placeholder,
.gestao-main textarea::placeholder { color: var(--text-soft) !important; }
.gestao-main input:focus,
.gestao-main select:focus,
.gestao-main textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 60%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
.gestao-main input[type=checkbox], .gestao-main input[type=radio] { accent-color: var(--primary); }

.ui-badge {
  border-radius: 999px !important;
  padding: 0.32rem 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.ui-badge.bg-slate-100 { background: rgba(148,163,184,.12) !important; color: var(--text-secondary) !important; }
.ui-badge.bg-blue-50 { background: color-mix(in srgb, var(--primary) 14%, transparent) !important; color: color-mix(in srgb, var(--primary) 72%, white) !important; }
.ui-badge.bg-emerald-50 { background: rgba(34,197,94,.12) !important; color: #86efac !important; }
.ui-badge.bg-amber-50 { background: rgba(245,158,11,.12) !important; color: #fcd34d !important; }
.ui-badge.bg-red-50 { background: rgba(239,68,68,.12) !important; color: #fca5a5 !important; }

.ui-modal-overlay {
  background: rgba(2, 6, 23, 0.74) !important;
  backdrop-filter: blur(10px);
}
.ui-modal {
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ui-modal-header,
.ui-modal-footer { border-color: var(--border) !important; }
.ui-modal-title { color: var(--text-primary) !important; font-size: 1.06rem !important; letter-spacing: -0.02em; }
.ui-modal-content { color: var(--text-secondary) !important; }

.ui-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border);
}
.ui-tab {
  min-height: 38px;
  border-radius: 10px;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}
.ui-tab.is-active {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.ui-empty {
  border-radius: 18px !important;
  border-color: var(--border) !important;
  background: var(--surface-soft);
}
.ui-empty-icon {
  background: rgba(148,163,184,.10) !important;
  border: 1px solid var(--border);
}
.ui-empty-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.ui-empty-subtitle { color: var(--text-muted) !important; }

.ui-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 74px !important;
  padding-inline: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent) !important;
  backdrop-filter: blur(16px);
}
.ui-topbar-search {
  border-radius: 14px !important;
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
}
.ui-topbar-search:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; }
.ui-topbar kbd {
  background: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-soft) !important;
}
.ui-account-trigger { border-radius: 14px !important; }
.ui-account-trigger:hover { background: var(--surface-soft) !important; }
.ui-account-menu {
  border-radius: 18px !important;
  border-color: var(--border) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ui-account-item { color: var(--text-secondary) !important; }
.ui-account-item:hover { background: var(--surface-soft) !important; }

.ui-sidebar {
  width: 280px !important;
  background:
    linear-gradient(180deg, var(--brand-sidebar-dark-top, var(--brand-sidebar, #08111f)), var(--brand-sidebar-dark-bottom, #050a12)) !important;
  color: var(--brand-sidebar-text, #e2e8f0) !important;
  border-right: 1px solid rgba(148,163,184,.12);
  box-shadow: 8px 0 22px rgba(2, 6, 23, 0.12);
}
.ui-sidebar-brand {
  min-height: 78px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148,163,184,.12) !important;
}
.ui-sidebar-section { padding: 10px 12px 0; }
.ui-sidebar-section-title {
  padding: 10px 12px 8px;
  color: color-mix(in srgb, var(--brand-sidebar-text, #e2e8f0) 56%, transparent) !important;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}
.ui-sidebar-nav { padding: 0 0 2px; }
.ui-sidebar-item {
  position: relative;
  min-height: 44px;
  border-radius: 14px !important;
  color: color-mix(in srgb, var(--brand-sidebar-text, #e2e8f0) 92%, transparent) !important;
}
.ui-sidebar-item:hover { background: rgba(255,255,255,.05) !important; }
.ui-sidebar-item.is-active {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

.ui-sidebar-item.is-active span { padding-left: 0; }
.ui-sidebar-item.is-locked { opacity: .62; }
.ui-sidebar-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid rgba(148,163,184,.12) !important;
}
.ui-plan-card {
  border-radius: 18px !important;
  border-color: rgba(148,163,184,.14) !important;
  background: rgba(255,255,255,.03) !important;
}

.ui-table-wrap { overflow: auto; border-radius: 16px; }
.gestao-main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.gestao-main thead tr {
  background: rgba(148,163,184,.05);
}
.gestao-main th {
  color: var(--text-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gestao-main tbody tr { transition: background-color .14s ease; }
.gestao-main tbody tr:hover { background: rgba(148,163,184,.04); }
.gestao-main td { color: var(--text-secondary) !important; }
.gestao-main .border-t, .gestao-main .border-b, .gestao-main .border, .gestao-main .divide-y > * + * {
  border-color: var(--border) !important;
}
.gestao-main .text-slate-900, .gestao-main .text-slate-800 { color: var(--text-primary) !important; }
.gestao-main .text-slate-700, .gestao-main .text-slate-600 { color: var(--text-secondary) !important; }
.gestao-main .text-slate-500, .gestao-main .text-slate-400 { color: var(--text-muted) !important; }
.gestao-main .bg-slate-50 { background: rgba(148,163,184,.05) !important; }
.gestao-main .bg-slate-100 { background: rgba(148,163,184,.08) !important; }
.gestao-main .border-slate-100, .gestao-main .border-slate-200, .gestao-main .border-slate-300 { border-color: var(--border) !important; }
.gestao-main .shadow-sm, .gestao-main .shadow-lg, .gestao-main .shadow-xl { box-shadow: var(--shadow-md) !important; }

.ui-toast-stack { right: 20px !important; bottom: 22px !important; max-width: 340px !important; }
.ui-toast {
  border-radius: 14px !important;
  border-color: var(--border) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ui-toast.is-success { border-left: 3px solid rgba(34,197,94,.85); }
.ui-toast.is-error { border-left: 3px solid rgba(239,68,68,.85); }

/* Resultado da calculadora: usa exatamente a cor principal escolhida pela empresa. */
.calculator-result-card {
  background: var(--brand-primary, #1D4ED8) !important;
  border-color: color-mix(in srgb, var(--brand-primary, #1D4ED8) 82%, black) !important;
  color: var(--brand-primary-text, #FFFFFF) !important;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand-primary, #1D4ED8) 22%, transparent) !important;
}
.calculator-page .ui-card { overflow: hidden; }

/* Telas de configuração / visualização de grupos. */
.gestao-main .sticky.top-0 { top: 0.25rem; }
.gestao-main .rounded-2xl { border-radius: 20px !important; }
.gestao-main .rounded-lg { border-radius: 12px !important; }

@media (max-width: 1279px) {
  .ui-sidebar { width: 272px !important; }
}
@media (max-width: 1024px) {
  .gestao-main { padding: 18px !important; }
  .ui-topbar { padding-inline: 14px !important; }
}
@media (max-width: 920px) {
  .ui-topbar { height: 68px !important; }
}
@media (max-width: 639px) {
  .gestao-main { padding: 14px !important; }
  .ui-page-header { margin-bottom: 18px; }
  .ui-page-actions { width: 100%; }
  .ui-page-actions > * { flex: 1 1 auto; }
  .ui-topbar-search { min-width: 0; }
  .ui-topbar { padding-inline: 10px !important; }
  .ui-sidebar { width: min(86vw, 300px) !important; }
  .ui-toast-stack { left: 12px !important; right: 12px !important; max-width: none !important; }
}

/* ========================================================================
   FASE 2 — refinamento por página
   ======================================================================== */

.ui-stat-card.is-compact {
  min-height: 104px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.ui-stat-card.is-compact .ui-stat-value { font-size: 1.35rem !important; }
.ui-stat-card.is-compact .ui-stat-icon { padding: 7px !important; }

/* Dashboard */
.dashboard-page .ui-page-header { margin-bottom: 4px; }
.dashboard-primary-grid .ui-stat-card {
  min-height: 145px;
  padding: 20px !important;
}
.dashboard-primary-grid .ui-stat-value { font-size: clamp(1.65rem, 1.35rem + 1vw, 2.2rem) !important; }
.dashboard-secondary-grid {
  padding: 4px 0 2px;
}
.dashboard-secondary-grid .ui-stat-card {
  background: color-mix(in srgb, var(--surface) 76%, transparent) !important;
  box-shadow: var(--shadow-sm) !important;
}
.dashboard-insights-grid > .ui-card {
  min-height: 300px;
}
.dashboard-page .ui-card table td,
.dashboard-page .ui-card table th { vertical-align: middle; }
.dashboard-page .ui-card > .ui-page-header,
.dashboard-page .ui-card > div > .ui-page-header {
  margin-bottom: 14px;
}

/* Estoque */
.stock-page .stock-kpis { margin-top: -2px; }
.stock-page .ui-tabs { margin-top: 2px; }
.stock-page .stock-utilities-card,
.stock-page .stock-filaments-card,
.stock-page .stock-movements-card {
  overflow: hidden;
}
.stock-page .stock-filterbar {
  background: color-mix(in srgb, var(--surface-soft) 85%, transparent);
}
.stock-page .stock-filterbar select { min-width: 180px; }
.stock-page .stock-filaments-card tbody td:first-child,
.stock-page .stock-utilities-card tbody td:first-child {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.stock-page .stock-filaments-card tbody tr:hover,
.stock-page .stock-utilities-card tbody tr:hover,
.stock-page .stock-movements-card tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.stock-page .stock-filaments-card .ui-badge,
.stock-page .stock-utilities-card .ui-badge { min-width: 76px; justify-content: center; }

/* Calculadora */
.phase2-calculator .calculator-header {
  align-items: flex-start;
  margin-bottom: 2px;
}
.phase2-calculator .calculator-header > .ui-page-header {
  flex: 1 1 520px;
  margin-bottom: 0;
}
.phase2-calculator .calculator-input-column,
.phase2-calculator .calculator-result-column { min-width: 0; }
.phase2-calculator .calc-card,
.phase2-calculator .calc-composition-card,
.phase2-calculator .calc-detail-card {
  position: relative;
  overflow: hidden;
}
.phase2-calculator .calc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 58%, transparent);
  opacity: .8;
}
.phase2-calculator .calc-project-card::before { opacity: .35; }
.phase2-calculator .calc-sale-card::before,
.phase2-calculator .calc-shipping-card::before {
  background: color-mix(in srgb, var(--primary) 84%, #38bdf8);
}
.phase2-calculator .calc-card .ui-page-header {
  margin-bottom: 16px;
}
.phase2-calculator .calc-card .ui-page-title {
  font-size: 1rem !important;
  letter-spacing: -.015em;
}
.phase2-calculator .calc-card .ui-page-title::first-letter { text-transform: uppercase; }
.phase2-calculator .calc-card > .space-y-3 > .rounded-lg.border,
.phase2-calculator .calc-card .rounded-lg.border.border-slate-200.p-3 {
  border-radius: 14px !important;
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent) !important;
  transition: border-color .16s ease, background-color .16s ease;
}
.phase2-calculator .calc-card > .space-y-3 > .rounded-lg.border:hover,
.phase2-calculator .calc-card .rounded-lg.border.border-slate-200.p-3:hover {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-soft)) !important;
}
.phase2-calculator .calc-result-card {
  border-radius: 22px !important;
  padding: 22px !important;
}
.phase2-calculator .calc-result-card > p:first-child {
  font-size: .7rem !important;
  letter-spacing: .11em !important;
  font-weight: 800;
  opacity: .82;
}
.phase2-calculator .calc-result-card > p:nth-child(2) {
  margin-top: 7px !important;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.8rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em;
}
.phase2-calculator .calc-result-card .grid > div {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px !important;
  padding: 12px !important;
}
.phase2-calculator .calc-composition-card,
.phase2-calculator .calc-detail-card {
  box-shadow: var(--shadow-sm) !important;
}
.phase2-calculator .calc-detail-card > p:first-child {
  color: var(--text-primary) !important;
  font-size: .8rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.phase2-calculator .calc-detail-card .space-y-2 > div {
  min-height: 27px;
  align-items: center;
}
.phase2-calculator .calculator-result-column {
  scrollbar-gutter: stable;
}

/* Vendas */
.sales-page .sales-kpis .ui-stat-card { min-height: 126px; }
.sales-page .sales-table-card { overflow: hidden; }
.sales-page .sales-filterbar {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, auto) minmax(160px, auto);
  align-items: center;
  gap: 10px !important;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}
.sales-page .sales-filterbar > .relative { min-width: 0 !important; }
.sales-page .sales-filterbar select { width: 100% !important; }
.sales-page .sales-table-card tbody td:nth-child(2) {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.sales-page .sales-table-card tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent) !important;
}
.sales-page .sales-table-card tbody td:last-child .ui-icon-btn {
  opacity: .72;
}
.sales-page .sales-table-card tbody tr:hover td:last-child .ui-icon-btn {
  opacity: 1;
}

/* Relatórios */
.reports-page > .ui-card:first-of-type {
  box-shadow: var(--shadow-sm) !important;
  background: color-mix(in srgb, var(--surface) 84%, transparent) !important;
}
.reports-page .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4,
.reports-page .grid.grid-cols-2.lg\:grid-cols-4 {
  gap: 12px !important;
}

/* Produtos e filamentos */
.products-page > .ui-card,
.filaments-page > .ui-card {
  overflow: hidden;
}
.products-page tbody tr:hover,
.filaments-page tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent) !important;
}
.products-page tbody td:first-child,
.filaments-page tbody td:first-child {
  color: var(--text-primary) !important;
}

/* Configurações — navegação lateral sem mudar a lógica das abas */
.settings-page {
  width: min(100%, var(--page-max));
  max-width: none !important;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  column-gap: 24px;
  row-gap: 18px;
}
.settings-page > * { margin-top: 0 !important; }
.settings-page > .ui-page-header {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}
.settings-page > .ui-tabs {
  grid-column: 1;
  grid-row: 2 / span 20;
  position: sticky;
  top: 94px;
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 8px !important;
  border-radius: 18px;
  background: var(--surface) !important;
  box-shadow: var(--shadow-md);
}
.settings-page > .ui-tabs .ui-tab {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px !important;
  text-align: left;
  justify-content: flex-start;
}
.settings-page > .ui-tabs .ui-tab.is-active {
  background: var(--primary-soft) !important;
  color: color-mix(in srgb, var(--primary) 72%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
  box-shadow: none;
}
.settings-page > .ui-card,
.settings-page > .rounded-xl.border {
  grid-column: 2;
  width: 100%;
}
.settings-page > .ui-card .ui-page-header {
  margin-bottom: 18px;
}
.settings-page .brand-logo-img { object-fit: contain; }
.settings-page .border-dashed {
  border-color: var(--border-strong) !important;
}
.settings-page .bg-blue-50,
.settings-page .bg-emerald-50,
.settings-page .bg-slate-50,
.settings-page .bg-red-50 {
  border-radius: 14px !important;
}
.settings-page .border-red-200.ui-card {
  background: color-mix(in srgb, rgba(239,68,68,.06) 40%, var(--surface)) !important;
}

/* Refinos de tabela no mobile */
@media (max-width: 900px) {
  .settings-page {
    display: block;
  }
  .settings-page > .ui-tabs {
    position: static;
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    width: 100% !important;
    margin-bottom: 18px !important;
    border-radius: 14px;
    scrollbar-width: thin;
  }
  .settings-page > .ui-tabs .ui-tab {
    width: auto;
    min-width: max-content;
  }
  .sales-page .sales-filterbar {
    grid-template-columns: 1fr 1fr;
  }
  .sales-page .sales-filterbar > .relative { grid-column: 1 / -1; }
  .phase2-calculator .calculator-result-column { position: static !important; }
}

@media (max-width: 640px) {
  .dashboard-primary-grid,
  .dashboard-secondary-grid,
  .stock-kpis,
  .sales-kpis {
    grid-template-columns: 1fr !important;
  }
  .dashboard-primary-grid .ui-stat-card,
  .dashboard-secondary-grid .ui-stat-card,
  .stock-kpis .ui-stat-card,
  .sales-kpis .ui-stat-card {
    min-height: 98px;
  }
  .sales-page .sales-filterbar { grid-template-columns: 1fr; }
  .sales-page .sales-filterbar > .relative { grid-column: auto; }
  .phase2-calculator .calc-result-card { padding: 18px !important; }
  .phase2-calculator .calc-result-card .grid { grid-template-columns: 1fr 1fr !important; }
}

/* Compras, sócios e equipe */
.purchases-page .purchases-table-card,
.partners-page > .ui-card,
.team-page > .ui-card { overflow: hidden; }
.purchases-page .purchases-filterbar {
  display: grid !important;
  grid-template-columns: minmax(240px,1fr) minmax(170px,auto) minmax(170px,auto);
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}
.purchases-page .purchases-filterbar select { width: 100% !important; }
.purchases-page tbody tr:hover,
.partners-page tbody tr:hover,
.team-page tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent) !important;
}
.partners-page .socios-summary-card {
  border-radius: 22px !important;
  background: linear-gradient(135deg, #0a1628, #0d1e34) !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  box-shadow: var(--shadow-lg) !important;
}
.team-page > .ui-card:first-of-type {
  background: color-mix(in srgb, var(--surface) 92%, var(--primary-soft)) !important;
}
.team-page .ui-card .bg-slate-50 {
  border: 1px solid var(--border) !important;
}

@media (max-width: 900px) {
  .purchases-page .purchases-filterbar { grid-template-columns: 1fr 1fr; }
  .purchases-page .purchases-filterbar > .relative { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .purchases-page .purchases-filterbar { grid-template-columns: 1fr; }
  .purchases-page .purchases-filterbar > .relative { grid-column: auto; }
}


.ui-help-fab {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #10b981);
  color: #fff;
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.18);
}
.ui-help-fab:hover { transform: translateY(-1px); filter: brightness(1.03); }
.ui-help-fab svg { width: 34px; height: 34px; }

.calculator-result-card,
.calculator-result-card .ui-page-title,
.calculator-result-card .ui-page-subtitle,
.calculator-result-card p,
.calculator-result-card span {
  color: var(--brand-primary-text, #FFFFFF) !important;
}
.calculator-result-card .text-slate-400 { color: color-mix(in srgb, var(--brand-primary-text, #FFFFFF) 76%, transparent) !important; }
.calculator-result-card .rounded-lg {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.calculator-result-card .bg-blue-500\/15 { background: rgba(255,255,255,0.16) !important; }
.calculator-result-card .bg-emerald-500\/10 { background: rgba(255,255,255,0.14) !important; }



.dashboard-page .ui-page-title,
.reports-page .ui-page-title {
  font-size: clamp(1rem, 0.96rem + 0.36vw, 1.22rem) !important;
}
.dashboard-page .ui-page-subtitle,
.reports-page .ui-page-subtitle {
  font-size: .9rem !important;
}

.ui-card .ui-page-title {
  font-size: clamp(0.91rem, 0.90rem + 0.18vw, 1rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}
.ui-card .ui-page-subtitle {
  font-size: 0.84rem !important;
  line-height: 1.5;
}

/* === UI 51: refinamento final solicitado === */
.gestao-main > .dashboard-page > .ui-page-header .ui-page-title,
.gestao-main > .reports-page > .ui-page-header .ui-page-title,
.gestao-main > div > .ui-page-header .ui-page-title {
  font-size: clamp(0.96rem, 0.94rem + 0.32vw, 1.18rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.ui-card .ui-page-title {
  font-size: clamp(0.90rem, 0.89rem + 0.16vw, 0.99rem) !important;
  font-weight: 600 !important;
}
.ui-help-fab svg {
  width: 34px !important;
  height: 34px !important;
}
.calculator-result-card {
  background: var(--brand-primary, #1D4ED8) !important;
  color: var(--brand-primary-text, #FFFFFF) !important;
}
.calculator-result-card p,
.calculator-result-card span,
.calculator-result-card .ui-page-title,
.calculator-result-card .ui-page-subtitle {
  color: var(--brand-primary-text, #FFFFFF) !important;
}

/* === UI 52: correções repetidas e verificadas === */
body .gestao-main .ui-page-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
body .gestao-main .ui-page-subtitle {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body .gestao-main .ui-stat-value {
  font-size: clamp(1.12rem, 1.06rem + .35vw, 1.45rem) !important;
  font-weight: 650 !important;
}
.ui-help-fab { width: 56px !important; height: 56px !important; }
.ui-help-fab svg { width: 38px !important; height: 38px !important; }
.calculator-result-card {
  background-image: none !important;
  background-color: var(--brand-primary, #1D4ED8) !important;
  border-color: var(--brand-primary, #1D4ED8) !important;
  color: var(--brand-primary-text, #FFFFFF) !important;
}
.calculator-result-card p,
.calculator-result-card span { color: var(--brand-primary-text, #FFFFFF) !important; }


/* === UI 53: calculadora — correção estrutural ===
   O resultado não usa mais .ui-card, evitando o background branco global com !important. */
#calculator-brand-result.calculator-result-card {
  background-image: none !important;
  min-height: 0 !important;
  color: inherit;
}
#calculator-brand-result.calculator-result-card p,
#calculator-brand-result.calculator-result-card span {
  color: inherit;
}

/* === UI 54: Contas a Receber + Dashboard financeiro === */
.payment-finance-box {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-elevated)) !important;
}
.receivables-page .ui-stat-card,
.sales-page .ui-stat-card {
  min-height: 104px;
}
.receivables-table-card table th,
.sales-table-card table th {
  white-space: nowrap;
}
.receivables-table-card tbody tr,
.sales-table-card tbody tr {
  transition: background-color .14s ease;
}
html.dark-mode .payment-finance-box {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-elevated)) !important;
}
@media (max-width: 640px) {
  .receivables-page .ui-stat-card,
  .sales-page .ui-stat-card { min-height: 92px; }
}


/* === UI 55: tema escuro cromático + pintura/personalização + dropdown === */
html.dark-mode {
  --bg-primary: var(--brand-dark-bg, #07101d);
  --bg-secondary: var(--brand-dark-bg-secondary, #0b1527);
  --bg-tertiary: var(--brand-dark-bg-tertiary, #0f1b32);
  --surface: color-mix(in srgb, var(--brand-dark-surface, #0a1323) 94%, transparent);
  --surface-elevated: color-mix(in srgb, var(--brand-dark-surface-elevated, #0d182a) 97%, transparent);
  --surface-soft: color-mix(in srgb, var(--brand-sidebar, #334155) 9%, transparent);
  --surface-hover: color-mix(in srgb, var(--brand-sidebar, #334155) 14%, transparent);
  --border: color-mix(in srgb, var(--brand-sidebar-text, #e2e8f0) 15%, transparent);
  --border-strong: color-mix(in srgb, var(--brand-sidebar-text, #e2e8f0) 22%, transparent);
}
html.dark-mode body {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand-primary, #3b82f6) 9%, transparent), transparent 27%),
    linear-gradient(180deg, var(--brand-dark-bg-secondary, #0b1527) 0%, var(--brand-dark-bg, #07101d) 100%) !important;
}
html.dark-mode .ui-topbar {
  background: color-mix(in srgb, var(--brand-dark-topbar, #08111f) 92%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--brand-sidebar-text, #e2e8f0) 12%, transparent) !important;
}
html.dark-mode .ui-sidebar {
  background: linear-gradient(180deg, var(--brand-sidebar-dark-top, #111827), var(--brand-sidebar-dark-bottom, #080d16)) !important;
  box-shadow: 7px 0 20px color-mix(in srgb, var(--brand-sidebar-dark-bottom, #000) 55%, transparent) !important;
}

/* Dropdown pesquisável: não pode ser recortado pelo card da calculadora. */
.phase2-calculator .calc-card { overflow: visible !important; }
.phase2-calculator .searchable-select.is-open { z-index: 180 !important; }
.phase2-calculator .searchable-select-menu,
.searchable-select-menu {
  z-index: 190 !important;
  max-height: min(320px, 46vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
html.dark-mode .searchable-select-menu {
  background: var(--surface-elevated) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
}
.searchable-select-menu::-webkit-scrollbar { width: 9px; }
.searchable-select-menu::-webkit-scrollbar-track { background: transparent; }
.searchable-select-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 42%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.calc-painting-card {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
}
.painting-toggle {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text-secondary);
}
.painting-toggle input { accent-color: var(--primary); }
.painting-subsection {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.painting-row {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}
.painting-readonly {
  min-height: 40px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-primary);
}
.painting-total {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-soft));
  color: var(--text-primary);
}
html.dark-mode .calc-painting-card {
  background: color-mix(in srgb, var(--brand-dark-surface-elevated, #0d182a) 94%, var(--brand-primary, #3b82f6) 2%) !important;
}
@media (max-width: 640px) {
  .searchable-select-menu { max-height: min(280px, 42vh) !important; }
}


/* === UI 56: dark mode neutro premium + correção definitiva de sobreposição dos dropdowns === */
/*
  IMPORTANTE:
  - A sidebar NÃO é alterada por este bloco.
  - O painel/resultado verde da calculadora NÃO é alterado por este bloco.
  - Apenas o conteúdo principal, topbar, cards, inputs, menus e superfícies do dark mode
    passam a usar cinzas/grafite neutros, sem o antigo fundo azul-marinho.
*/
html.dark-mode {
  --bg-primary: #111315;
  --bg-secondary: #14171A;
  --bg-tertiary: #181B1F;
  --surface: #16191C;
  --surface-elevated: #1A1D20;
  --surface-soft: #1D2024;
  --surface-hover: #202429;
  --border: #343A40;
  --border-strong: #414850;
  --text-primary: #F5F5F5;
  --text-secondary: #B9C0C7;
  --text-muted: #A9B0B7;
  --text-soft: #7F8891;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow-md: 0 10px 24px rgba(0,0,0,.20);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.26);
}

html.dark-mode body {
  background: linear-gradient(180deg, #121416 0%, #101214 100%) !important;
  color: var(--text-secondary) !important;
}

html.dark-mode .gestao-app-shell,
html.dark-mode .gestao-main {
  background: transparent !important;
}

/* Topbar neutra; sidebar permanece intocada. */
html.dark-mode .ui-topbar {
  background: rgba(21, 24, 27, .96) !important;
  border-bottom-color: #2A2F34 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.015) !important;
}
html.dark-mode .ui-topbar-search,
html.dark-mode .ui-account-trigger,
html.dark-mode .ui-account-menu {
  background: #1A1D20 !important;
  border-color: #343A40 !important;
}
html.dark-mode .ui-topbar-search:hover,
html.dark-mode .ui-account-trigger:hover {
  background: #20242A !important;
  border-color: #414850 !important;
}

/* Hierarquia neutra de superfícies do conteúdo principal. */
html.dark-mode .gestao-main .ui-card,
html.dark-mode .gestao-main .rounded-xl.border.bg-white,
html.dark-mode .gestao-main .rounded-xl.border.border-slate-200.bg-white,
html.dark-mode .gestao-main .rounded-xl.border.border-slate-200.bg-white\/90 {
  background: #16191C !important;
  border-color: #343A40 !important;
}
html.dark-mode .gestao-main .bg-slate-50 {
  background: #1A1D20 !important;
}
html.dark-mode .gestao-main .bg-slate-100 {
  background: #1D2024 !important;
}
html.dark-mode .gestao-main .border-slate-100,
html.dark-mode .gestao-main .border-slate-200,
html.dark-mode .gestao-main .border-slate-300 {
  border-color: #343A40 !important;
}

/* Inputs separados dos cards, sem azul. */
html.dark-mode .gestao-main input:not([type=checkbox]):not([type=radio]),
html.dark-mode .gestao-main select,
html.dark-mode .gestao-main textarea {
  background: #20242A !important;
  border-color: #343A40 !important;
  color: #F5F5F5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}
html.dark-mode .gestao-main input::placeholder,
html.dark-mode .gestao-main textarea::placeholder {
  color: #7F8891 !important;
}
html.dark-mode .gestao-main input:focus,
html.dark-mode .gestao-main select:focus,
html.dark-mode .gestao-main textarea:focus {
  background: #22262C !important;
  border-color: color-mix(in srgb, var(--primary) 48%, #4A5056) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent) !important;
}

/* Componentes secundários com um nível ligeiramente mais claro. */
html.dark-mode .ui-modal,
html.dark-mode .ui-popover,
html.dark-mode .ui-toast,
html.dark-mode .ui-dropdown,
html.dark-mode .searchable-select-menu {
  background: #1A1D20 !important;
  border-color: #343A40 !important;
  color: #B9C0C7 !important;
}
html.dark-mode .searchable-select-menu button {
  background: transparent !important;
}
html.dark-mode .searchable-select-menu button:hover,
html.dark-mode .searchable-select-menu button.bg-blue-50 {
  background: color-mix(in srgb, var(--primary) 8%, #20242A) !important;
}
html.dark-mode .searchable-select-menu .text-slate-800 {
  color: #F5F5F5 !important;
}
html.dark-mode .searchable-select-menu .text-slate-400 {
  color: #A9B0B7 !important;
}

/* Pintura/personalização segue a hierarquia neutra, com só um toque sutil da marca. */
html.dark-mode .calc-painting-card {
  background: color-mix(in srgb, #181B1F 97%, var(--primary) 3%) !important;
  border-color: color-mix(in srgb, #30353B 88%, var(--primary) 12%) !important;
}
html.dark-mode .painting-row,
html.dark-mode .painting-readonly,
html.dark-mode .painting-toggle {
  background: #1D2024 !important;
  border-color: #343A40 !important;
}

/*
  Dropdown da calculadora: a rolagem já existia; agora o card que contém o menu
  sobe de camada enquanto o select está aberto, impedindo as sessões seguintes
  de serem desenhadas por cima do dropdown.
*/
.phase2-calculator .calc-card {
  position: relative;
  overflow: visible !important;
}
.phase2-calculator .calc-card:has(.searchable-select.is-open) {
  z-index: 600 !important;
}
.phase2-calculator .searchable-select.is-open {
  position: relative;
  z-index: 610 !important;
}
.phase2-calculator .searchable-select-menu {
  z-index: 620 !important;
  isolation: isolate;
}
/* Fallback para navegadores sem :has(): o card de material fica acima das sessões posteriores. */
.phase2-calculator .calc-material-card {
  z-index: 40;
}
.phase2-calculator .calc-project-card {
  z-index: 45;
}
.phase2-calculator .calc-utilities-card,
.phase2-calculator .calc-painting-card,
.phase2-calculator .calc-production-card,
.phase2-calculator .calc-other-costs-card,
.phase2-calculator .calc-shipping-card,
.phase2-calculator .calc-sale-card {
  z-index: 1;
}



/* === UI 59: bordas mais legíveis + modal estável no viewport === */
/* Aumenta somente o contraste das bordas; espessura permanece 1px. */
html:not(.dark-mode) {
  --border: rgba(15, 23, 42, 0.11);
  --border-strong: rgba(15, 23, 42, 0.16);
}
html.dark-mode {
  --border: #343A40;
  --border-strong: #414850;
}

/* Modal portado para o body: cobre sidebar/topbar e não deixa o topo escapar/cortar. */
.ui-modal-overlay {
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  padding: 16px !important;
  align-items: flex-start !important;
  overflow-y: auto !important;
}
.ui-modal {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: calc(100dvh - 32px);
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
}
.ui-modal-header,
.ui-modal-footer {
  flex: 0 0 auto;
}
.ui-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Campo Observações do Novo lançamento mais curto, sem alterar outros textareas do sistema. */
.gestao-main .purchase-observations,
.ui-modal .purchase-observations {
  min-height: 62px !important;
  height: 62px !important;
}

/* Um toque a mais de definição nas superfícies comuns, sem engrossar para 2px. */
.ui-card,
.ui-modal,
.ui-popover,
.ui-toast,
.gestao-main input:not([type=checkbox]):not([type=radio]),
.gestao-main select,
.gestao-main textarea {
  border-color: var(--border) !important;
}
.ui-card:hover,
.ui-btn-secondary:hover,
.ui-icon-btn:hover {
  border-color: var(--border-strong) !important;
}

@media (max-width: 639px) {
  .ui-modal-overlay { padding: 0 !important; }
  .ui-modal {
    max-height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0 !important;
  }
}

/* === UI 60: idioma e moeda no painel === */
.ui-topbar-pref {
  min-width: 72px;
  border-color: var(--border) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  transition: border-color .16s ease, background-color .16s ease;
}
.ui-topbar-pref:hover,
.ui-topbar-pref:focus-within {
  border-color: var(--border-strong) !important;
  background: var(--surface-hover) !important;
}
.ui-topbar-pref-select {
  width: 42px;
  min-width: 0;
  appearance: auto;
  color: var(--text-secondary) !important;
}
.ui-topbar-pref-select option {
  color: #111827;
  background: #ffffff;
}
html.dark-mode .ui-topbar-pref {
  background: #1A1D20 !important;
  border-color: #343A40 !important;
  color: #B9C0C7 !important;
}
html.dark-mode .ui-topbar-pref:hover,
html.dark-mode .ui-topbar-pref:focus-within {
  background: #20242A !important;
  border-color: #414850 !important;
}
html.dark-mode .ui-topbar-pref-select {
  color: #F5F5F5 !important;
}
html.dark-mode .ui-topbar-pref-select option {
  color: #F5F5F5;
  background: #1A1D20;
}

@media (max-width: 760px) {
  .ui-topbar-pref {
    min-width: 58px;
    padding-inline: 7px !important;
    gap: 4px !important;
  }
  .ui-topbar-pref-select { width: 34px; }
  .ui-topbar-pref svg { display: none; }
}
@media (max-width: 540px) {
  .ui-topbar-pref { min-width: 50px; padding-inline: 5px !important; }
  .ui-topbar-pref-select { width: 38px; font-size: 10px !important; }
  .ui-topbar .gestao-global-search-label { display: none; }
  .ui-topbar-search { max-width: 44px !important; flex: 0 0 44px !important; justify-content: center; padding-inline: 0 !important; }
}

.settings-page .ui-tabs {
  max-width: 100%;
  flex-wrap: wrap;
}

/* v61 — filtros avançados */
.filaments-filterbar select,
.stock-overview-filterbar select,
.sales-filterbar select,
.products-page select {
  min-width: 150px;
}
@media (max-width: 640px) {
  .filaments-filterbar select,
  .stock-overview-filterbar select,
  .sales-filterbar select,
  .products-page select {
    width: 100% !important;
    min-width: 0;
  }
}