/* OZPro Studio Pro 2.0 · correções gerais (todas as páginas)
   1) Fonte única: botões, campos e listas usavam Arial / tamanho do navegador.
   2) Modais no celular: sem desfoque pesado, rolagem só dentro do modal, altura que respeita o teclado.
   3) Contraste de alguns botões no tema escuro. */

/* 1) Tipografia */
:where(button, input, select, textarea, optgroup) { font-family: inherit; }
:where(select) { font-size: 13.5px; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { font-family: inherit !important; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.mono, .font-mono, kbd { font-variant-numeric: tabular-nums; }

/* 2) Modais */
.modal-overlay { overscroll-behavior: contain; }
.modal, .modal-body { overscroll-behavior: contain; }
html.dp-modal-open, html.dp-modal-open body { overflow: hidden !important; }
@media (max-width: 768px), (pointer: coarse) {
  /* O desfoque atrás do modal travava celulares Android mais simples */
  .modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(3, 5, 10, .72) !important; }
  .modal { max-height: 94vh !important; max-height: 94dvh !important; will-change: transform; }
  .modal-body { -webkit-overflow-scrolling: touch; }
  .modal-body input, .modal-body select, .modal-body textarea, .modal-body button,
  .modal input, .modal select, .modal textarea, .modal button { touch-action: manipulation !important; }
  .modal-header { touch-action: pan-x pan-y; }
}

/* 3) Contraste no tema escuro */
.btn-whatsapp { background: #128c4a !important; border-color: #128c4a !important; color: #fff !important; }
.btn-whatsapp:hover { background: #0f7a40 !important; }

/* 4) Menu lateral recolhido: divisor de seções sutil e harmônico (sem vazamento de texto) */
.sidebar.collapsed .menu-section,
html.sidebar-is-collapsed .sidebar .menu-section,
html body .sidebar.collapsed .menu-section,
html body.sidebar-is-collapsed .sidebar .menu-section {
  padding: 6px 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.sidebar.collapsed .menu-section:first-child,
html.sidebar-is-collapsed .sidebar .menu-section:first-child,
html body .sidebar.collapsed .menu-section:first-child,
html body.sidebar-is-collapsed .sidebar .menu-section:first-child {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar.collapsed .menu-section-title,
html.sidebar-is-collapsed .sidebar .menu-section-title,
html body .sidebar.collapsed .menu-section-title,
html body.sidebar-is-collapsed .sidebar .menu-section-title,
html[data-theme="light"] .sidebar.collapsed .menu-section-title,
html[data-theme="light"] html.sidebar-is-collapsed .sidebar .menu-section-title,
html[data-theme="light"] body .sidebar.collapsed .menu-section-title,
html[data-theme="light"] body.sidebar-is-collapsed .sidebar .menu-section-title {
  display: block !important;
  width: 28px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 6px auto !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(148, 163, 184, 0.25) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

html[data-theme="light"] body .sidebar.collapsed .menu-section-title,
html[data-theme="light"] body.sidebar-is-collapsed .sidebar .menu-section-title {
  background: #cbd5e1 !important;
}

/* 5) Tabelas viradas em cartões no celular: versão compacta e moderna (todas as páginas).
      Transforma tabelas de Clientes, Produtos, Caixa e demais telas em cartões táteis premium.
      - Cartões com muitas colunas (Clientes, Produtos): grade de 2 colunas com rótulo sutil e valor em destaque.
      - Cartões com poucas colunas (Caixa, Movimentações): linhas chave-valor limpas com divisória discreta.
      - Barra de ações táteis com botões arredondados e alvo de toque confortável (mínimo 38px).
      - Container sem trava de scroll interno: rolagem suave e natural pela página. */
@media (max-width: 768px) {
  html body .table-container.st-wrap,
  html body .table-container:has(table.st-cards) {
    overflow: visible !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  html body table.st-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body table.st-cards thead {
    display: none !important;
  }

  html body table.st-cards tbody {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body table.st-cards tr {
    display: grid !important;
    position: relative !important;
    width: 100% !important;
    background: var(--gradient-card, var(--bg-card)) !important;
    border: 1px solid var(--st-line, var(--border-color)) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), var(--st-hi) !important;
    min-height: 0 !important;
    height: auto !important;
    transition: transform .12s ease, border-color .12s ease !important;
    box-sizing: border-box !important;
  }

  html body table.st-cards tr:active {
    border-color: var(--accent) !important;
  }

  /* Título do Cartão (1ª célula com conteúdo relevante / nome / produto) */
  html body table.st-cards td.st-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    padding: 0 34px 8px 0 !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--st-line, var(--border-color)) !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
  }

  html body table.st-cards td.st-title * {
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  html body table.st-cards td.st-title > div {
    max-width: 100%;
  }

  html body table.st-cards td.st-title > div,
  html body table.st-cards td.st-title small {
    font-weight: 500;
  }

  html body table.st-cards td.st-title .product-thumb {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  html body table.st-cards td.st-title .product-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
  }

  /* Checkbox posicionado no canto superior direito do cartão */
  html body table.st-cards td.st-check {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    padding: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body table.st-cards td.st-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--accent) !important;
  }

  /* Barra de Ações no rodapé do cartão */
  html body table.st-cards td.st-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 0 !important;
    margin-top: 6px !important;
    border-top: 1px solid var(--st-line, var(--border-color)) !important;
  }

  html body table.st-cards td.st-actions button,
  html body table.st-cards td.st-actions .btn-icon,
  html body table.st-cards td.st-actions .btn {
    min-width: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    touch-action: manipulation !important;
    transition: transform .12s ease, background-color .15s ease !important;
  }

  html body table.st-cards td.st-actions button:active,
  html body table.st-cards td.st-actions .btn-icon:active {
    transform: scale(0.94) !important;
  }

  html body table.st-cards td.st-full {
    grid-column: 1 / -1 !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 0 !important;
  }

  html body table.st-cards .badge,
  html body table.st-cards .cx-chip,
  html body table.st-cards .client-status,
  html body table.st-cards .stock-status {
    font-size: 11px !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* Cartões com muitos campos (7 ou mais, ex: Clientes e Produtos): grade 2 colunas */
  html body table.st-cards tr:has(> td:nth-child(7)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
  }

  html body table.st-cards tr:has(> td:nth-child(7)) > td:not(.st-title):not(.st-actions):not(.st-full):not(.st-check) {
    text-align: left !important;
    padding: 0 !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    overflow-wrap: break-word !important;
  }

  html body table.st-cards tr:has(> td:nth-child(7)) > td[data-label]:not([data-label=""]):not(.st-title)::before {
    float: none !important;
    display: block !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
  }

  /* Cartões com até 6 campos (ex: Caixa Movimentações e Histórico): linhas chave-valor limpas */
  html body table.st-cards tr:not(:has(> td:nth-child(7))) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body table.st-cards tr:not(:has(> td:nth-child(7))) > td:not(.st-title):not(.st-actions):not(.st-full):not(.st-check) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
    font-size: 13px !important;
    text-align: right !important;
  }

  html body table.st-cards tr:not(:has(> td:nth-child(7))) > td[data-label]:not([data-label=""]):not(.st-title)::before {
    float: none !important;
    display: inline-block !important;
    margin: 0 10px 0 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    text-align: left !important;
  }

  /* Campos vazios (só "—") ficam discretos e não quebram o layout */
  html body table.st-cards td.st-dash {
    display: none !important;
  }
}

/* ==========================================================================
   OZPro SaaS 3.0 — Design System Moderno & Sofisticado (Estilo Linear / Stripe / Vercel)
   Aplicado globalmente em todas as telas com elegância, micro-interações fluidas
   e ergonomia tátil profissional.
   ========================================================================== */

/* ─── 1. Tipografia e Renderização de Elite ─── */
body, html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum" !important;
}

h1, h2, h3, h4, .card-title, .stat-value {
  letter-spacing: -0.025em !important;
  color: var(--text-heading) !important;
}

.stat-value, .font-mono, .mono, [data-format="currency"], .price-val {
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* ─── 2. Barra Lateral (Sidebar) com Tooltips Flutuantes no Modo Compacto ─── */
@media (min-width: 769px) {
  /* Tooltip flutuante elegante ao passar o mouse com a sidebar recolhida */
  .sidebar.collapsed .menu-item,
  html.sidebar-is-collapsed .sidebar .menu-item {
    position: relative !important;
  }

  .sidebar.collapsed .menu-item:hover .menu-text,
  html.sidebar-is-collapsed .sidebar .menu-item:hover .menu-text {
    display: inline-flex !important;
    align-items: center !important;
    position: fixed !important;
    left: calc(var(--sidebar-collapsed, 78px) + 16px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    background: var(--bg-surface, #171f33) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--st-line2) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    animation: stTooltipSlide 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  html[data-theme="light"] .sidebar.collapsed .menu-item:hover .menu-text,
  html[data-theme="light"].sidebar-is-collapsed .sidebar .menu-item:hover .menu-text {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 0 0 1px #e2e8f0 !important;
  }
}

@keyframes stTooltipSlide {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Indicador ativo da barra lateral padrão Linear */
.sidebar .menu-item.active,
#sidebar .menu-item.active {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  position: relative !important;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="light"] .sidebar .menu-item.active,
html[data-theme="light"] #sidebar .menu-item.active {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.sidebar .menu-item.active::before,
#sidebar .menu-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3.5px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px #ffffff !important;
}

/* ─── 3. Botões Táteis de Alto Padrão (Estilo Stripe & Linear) ─── */
.btn {
  font-family: inherit !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
  padding: 9px 18px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.btn.hidden,
.btn[hidden],
.btn[style*="display: none"],
.btn[style*="display:none"],
.btn[style*="display: none !important"],
.btn[style*="display:none !important"] {
  display: none !important;
}

.btn:active {
  transform: scale(0.975) !important;
}

/* Botão Primário (Signature Linear / Dynamic Theme) */
.btn-primary {
  background: var(--gradient-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 14px -2px var(--accent-glow) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 22px -3px var(--accent-glow) !important;
  filter: brightness(1.08) !important;
}

.btn-primary:active {
  transform: scale(0.975) translateY(0) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px -1px var(--accent-glow) !important;
}

/* Botão Secundário / Contorno (Glassmorphism sutil) */
.btn-secondary, .btn-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--st-line2, rgba(255, 255, 255, 0.12)) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.btn-secondary:hover, .btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px -2px var(--accent-glow) !important;
}

/* Botão de Sucesso (Verde Esmeralda) */
.btn-success {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px -2px rgba(16, 185, 129, 0.45) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -3px rgba(16, 185, 129, 0.6) !important;
  filter: brightness(1.05) !important;
}

/* Botão de Perigo (Vermelho Coral) */
.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px -2px rgba(239, 68, 68, 0.45) !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -3px rgba(239, 68, 68, 0.6) !important;
  filter: brightness(1.05) !important;
}

/* ─── 4. Cartões e Painéis com Brilho Especular (Linear Cards) ─── */
.card, .table-container, .chart-card, .dashboard-card, .stat-card, .dpu-stat-card, .dpu-table-card, .orc-list-card {
  border-radius: 18px !important;
  border: 1px solid var(--st-line, var(--border-color, rgba(255,255,255,0.14))) !important;
  background: var(--gradient-card) !important;
  box-shadow: var(--shadow-sm), var(--st-hi) !important;
  position: relative !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .table-container,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .dpu-stat-card,
html[data-theme="light"] .dpu-table-card,
html[data-theme="light"] .orc-list-card {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07) !important;
}

.card:hover, .table-container:hover, .chart-card:hover, .dashboard-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 60%, var(--border-color)) !important;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 25%, transparent) !important;
}

/* Itens e cartões selecionados / ativos — Borda de alta visibilidade */
.is-in-cart,
.has-qty,
.is-selected,
.selected,
.card.is-selected,
.product-card.is-in-cart {
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 0 1.5px var(--accent), 0 6px 20px var(--accent-glow) !important;
}

.stat-card:hover, .stat-card.stat-card-clickable:hover {
  transform: translateY(-2.5px) !important;
  box-shadow: var(--shadow-md), var(--st-hi), 0 0 20px var(--accent-glow) !important;
  border-color: var(--accent) !important;
}

.stat-card .stat-icon {
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ─── 5. Campos de Formulário e Busca de Precisão (Vercel Style) ─── */
.form-input, .form-control, select.form-control {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--st-line) !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  padding: 0 14px;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

/* Proteção Universal: Texto NUNCA deve sobrepor o ícone de busca / lupinha */
.header-search, .toolbar-search, .search-box, .search-bar, .input-search {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header-search i, .toolbar-search i, .search-box i, .search-bar i, .input-search i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  font-size: 13.5px !important;
}

.header-search input, .toolbar-search input, .search-box input, .search-bar input, .input-search input,
.input-with-icon input, .input-icon-wrap input {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--st-line) !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding-left: 44px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

/* Proteção Universal: Campos com prefixo de moeda R$ */
.has-prefix input,
.currency-input,
.input-currency-wrap input,
#creditAmountInput,
#cashReceivedFinalize,
.has-currency-prefix input,
div:has(> span[style*="position:absolute"]:first-child) > input,
div:has(> span[style*="position: absolute"]:first-child) > input,
div[style*="position:relative"]:has(> span[style*="position:absolute"]) > input,
div[style*="position: relative"]:has(> span[style*="position: absolute"]) > input {
  padding-left: 48px !important;
  padding-right: 14px !important;
}

.form-input:focus, .form-control:focus, select.form-control:focus, .toolbar-search input:focus, .search-box input:focus, .search-bar input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3.5px var(--accent-muted) !important;
  background: var(--bg-card) !important;
  outline: none !important;
}

.form-label {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ─── 6. Tabelas de Dados Profissionais (Linear Data Grid) ─── */
.data-table thead th {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--st-line) !important;
  padding: 12px 14px !important;
  background: var(--bg-surface) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.data-table tbody td {
  border-bottom: 1px solid var(--st-line) !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  transition: background-color 0.14s ease !important;
}

.data-table tbody tr:hover td {
  background: var(--accent-muted) !important;
}

html[data-theme="light"] .data-table tbody tr:hover td {
  background: #f1f5f9 !important;
}

/* ─── 7. Badges e Indicadores de Status (Pulse Pills) ─── */
.badge, .status-badge, .client-status, [class*="status-badge"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3.5px 10px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.badge-success, .badge.pago, .badge.concluido, .badge.ativo, .badge.finalizado, [class*="badge-success"] {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.badge-warning, .badge.pendente, .badge.em_aberto, .badge.aguardando, [class*="badge-warning"] {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.badge-danger, .badge.cancelado, .badge.atrasado, .badge.inativo, [class*="badge-danger"] {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.badge-info, .badge.em_andamento, .badge.processando, [class*="badge-info"] {
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* ─── 8. Modais e Janelas com Desfoque de Vidro Suave ─── */
.modal-overlay, .uf-overlay, .uf-modal-overlay {
  background: rgba(5, 8, 18, 0.75) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

.modal, .uf-modal {
  border-radius: 22px !important;
  border: 1px solid var(--st-line2) !important;
  background: var(--bg-modal) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: stModalSpring 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes stModalSpring {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header, .uf-header {
  border-bottom: 1px solid var(--st-line) !important;
  padding: 16px 20px !important;
}

.modal-footer, .uf-footer {
  border-top: 1px solid var(--st-line) !important;
  padding: 14px 20px !important;
}

/* ─── 9. Barra de Rolagem Minimalista Premium ─── */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.3) !important;
}

/* ─── 10. Teclas de Atalho (KBD) e Barra de Comandos ─── */
kbd, .st-kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  border: 1px solid var(--st-line2) !important;
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11. NITIDEZ TOTAL E CONTRASTE ABSOLUTO DA SIDEBAR NO MODO CLARO
   Elimina qualquer texto pálido/invisível no fundo branco
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sidebar,
html[data-theme="light"] #sidebar,
html[data-theme="light"] aside.sidebar,
html[data-theme="light"] .pdv-wrapper .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .sidebar .menu-section-title,
html[data-theme="light"] #sidebar .menu-section-title,
html[data-theme="light"] .menu-section .menu-section-title,
html[data-theme="light"] .menu-section-title {
  color: #334155 !important; /* Slate escuro super legível */
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sidebar .sidebar-menu .menu-item,
html[data-theme="light"] #sidebar .sidebar-menu .menu-item,
html[data-theme="light"] .sidebar-menu .menu-item,
html[data-theme="light"] .menu-item,
html[data-theme="light"] .menu-item .menu-text {
  color: #0f172a !important; /* Carvão profundo e nítido */
  font-weight: 600 !important;
  font-size: 13.5px !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sidebar .menu-item:hover,
html[data-theme="light"] #sidebar .menu-item:hover,
html[data-theme="light"] .menu-item:hover {
  background: #f1f5f9 !important;
  color: var(--accent) !important;
}

html[data-theme="light"] .sidebar .menu-item:hover .menu-text,
html[data-theme="light"] #sidebar .menu-item:hover .menu-text {
  color: var(--accent) !important;
}

html[data-theme="light"] .sidebar .menu-item.active,
html[data-theme="light"] #sidebar .menu-item.active,
html[data-theme="light"] .menu-item.active {
  background: color-mix(in srgb, var(--accent) 14%, #ffffff) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

html[data-theme="light"] .sidebar .menu-item.active .menu-text,
html[data-theme="light"] #sidebar .menu-item.active .menu-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .sidebar .menu-item.active i,
html[data-theme="light"] #sidebar .menu-item.active i,
html[data-theme="light"] .sidebar.collapsed .menu-item.active i {
  color: var(--accent) !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

html[data-theme="light"] .sidebar .sidebar-brand h1,
html[data-theme="light"] #sidebar .sidebar-brand h1 {
  color: #0f172a !important;
}

html[data-theme="light"] .sidebar .sidebar-brand span,
html[data-theme="light"] #sidebar .sidebar-brand span {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12. BOTÃO DE TEMAS & CORES NA SIDEBAR E CABEÇALHOS
   ═══════════════════════════════════════════════════════════════════ */
.st-menu-theme-btn {
  position: relative;
  transition: all 0.2s ease !important;
}
.st-menu-theme-btn:hover i {
  transform: rotate(25deg) scale(1.15) !important;
}
.btn-theme-palette-picker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}
.btn-theme-palette-picker:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13. MOTOR DE TRANSFORMAÇÃO VISUAL EXPRESSIVA DE PALETAS (SaaS 3.0)
   Garante impacto visual expressivo e imediato em todo o ERP:
   - Fundo atmosférico com iluminação ambiente (auroras dinâmicas)
   - Cartões, superfícies e modais com acabamento de vidro tonalizado
   - Cabeçalhos, barras de pesquisa e navegação com acentos vibrantes
   - Totalizador do carrinho (#cartTotal) e botão de finalizar (#btnFinalize)
   - Linhas de tabela, badges, botões principais e anéis de foco
   ═══════════════════════════════════════════════════════════════════ */

/* ── 13.1. Iluminação de Fundo Atmosférica Global (Dark & Light) ── */
html, body {
  background-color: var(--bg-primary) !important;
}

body {
  background-image: 
    radial-gradient(1100px 650px at 12% -5%, var(--st-aurora-1), transparent 65%),
    radial-gradient(950px 600px at 98% 5%, var(--st-aurora-2), transparent 60%),
    radial-gradient(1000px 750px at 85% 105%, var(--st-aurora-3), transparent 65%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(1000px 600px at 10% 0%, var(--st-aurora-1), transparent 60%),
    radial-gradient(850px 550px at 95% 10%, var(--st-aurora-2), transparent 55%),
    radial-gradient(900px 700px at 80% 95%, var(--st-aurora-3), transparent 60%) !important;
  opacity: 0.95 !important;
}

/* ── 13.2. Topbars e Cabeçalhos com Glow e Divisória Temática ── */
.header, .topbar, .pdv-header {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary)) !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 26%, var(--border-color)) !important;
  box-shadow: 0 4px 20px -6px var(--accent-glow) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.header-left h2 i, .pdv-header .pdv-title i {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

/* ── 13.3. Barra Lateral Flutuante (Sidebar) ── */
.sidebar {
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)) 0%, 
    color-mix(in srgb, var(--accent) 3%, var(--bg-primary)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--st-line, var(--border-color))) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 24px -6px var(--accent-glow) !important;
}

.sidebar-brand {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--st-line, var(--border-color))) !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 6px 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.sidebar-brand .dp-default-logo {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: 190px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.sidebar-brand.mode-logo-text .dp-default-logo,
.sidebar-brand.mode-text-only .dp-default-logo {
  display: none !important;
}

.sidebar-brand.mode-logo-only .brand-icon,
.sidebar-brand.mode-logo-only .brand-text {
  display: none !important;
}

.sidebar-brand .dp-default-logo img {
  height: var(--logo-size, 34px) !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.22)) !important;
}

.sidebar.collapsed .sidebar-brand .dp-default-logo {
  display: none !important;
}

.sidebar.collapsed .sidebar-brand .brand-icon {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
}

.sidebar-brand .brand-icon,
.brand-icon {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}

html body .sidebar .menu-item.active,
html body #sidebar .menu-item.active,
html body .menu-item.active {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.05)) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent) !important;
  box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
  position: relative !important;
}

html[data-theme="light"] body .sidebar .menu-item.active,
html[data-theme="light"] body #sidebar .menu-item.active,
html[data-theme="light"] body .menu-item.active {
  background: color-mix(in srgb, var(--accent) 14%, #ffffff) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

html body .sidebar .menu-item.active i,
html body #sidebar .menu-item.active i,
html body .menu-item.active i {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 8px var(--accent-glow)) !important;
  transform: scale(1.12) !important;
}

html body .sidebar .menu-item.active .menu-text,
html body #sidebar .menu-item.active .menu-text,
html body .menu-item.active .menu-text {
  color: #ffffff !important;
  font-weight: 650 !important;
}

html[data-theme="light"] body .sidebar .menu-item.active .menu-text,
html[data-theme="light"] body #sidebar .menu-item.active .menu-text,
html[data-theme="light"] body .menu-item.active .menu-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.menu-item:not(.active):hover {
  background: var(--accent-muted) !important;
  color: var(--text-primary) !important;
}

/* ── 13.4. Saudação do Dashboard (Hero) e Superfícies Temáticas ── */
html body .st-hero {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--accent) 14%, var(--bg-card)) 0%, 
    var(--bg-card) 60%, 
    color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)) 100%) !important;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color)) !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] body .st-hero {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--accent) 6%, #ffffff) 0%, 
    #ffffff 60%, 
    #f8fafc 100%) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] body .st-hero h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] body .st-hero p {
  color: #334155 !important; /* Totalmente nítido no tema claro, fim do texto invisível */
  font-size: 14px !important;
  font-weight: 550 !important;
  opacity: 1 !important;
}

html:not([data-theme="light"]) body .st-hero h1 {
  color: #ffffff !important;
}

html:not([data-theme="light"]) body .st-hero p {
  color: #94a3b8 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

html body .st-hero-actions a {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all .2s ease !important;
}

html[data-theme="light"] body .st-hero-actions a {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body .st-hero-actions a i {
  color: var(--accent) !important;
}

html body .st-hero-actions a:hover {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.12)) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px var(--accent-glow) !important;
}

html[data-theme="light"] body .st-hero-actions a:hover {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Data no cabeçalho do Dashboard em tema claro */
html[data-theme="light"] .toolbar span,
html[data-theme="light"] .toolbar strong,
html[data-theme="light"] #todayDate {
  color: #1e293b !important;
}

/* ── 13.4.1. Legibilidade Máxima das Notificações e Toasts ── */
html[data-theme="light"] .toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .toast .toast-msg {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .toast .toast-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

html[data-theme="light"] .toast .toast-close {
  color: #64748b !important;
}

html[data-theme="light"] .toast .toast-close:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

html:not([data-theme="light"]) .toast {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

html:not([data-theme="light"]) .toast .toast-msg {
  color: #f8fafc !important;
  font-weight: 600 !important;
}

/* Painel de Notificações do Sininho */
#notifPanel {
  background: var(--bg-card, #121827) !important;
  border: 1px solid var(--border-color, rgba(255,255,255,0.12)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] #notifPanel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] #notifPanel div,
html[data-theme="light"] #notifPanel span:not(#notifBadge) {
  color: #0f172a;
}

html[data-theme="light"] #notifPanel .notif-title,
html[data-theme="light"] #notifPanel [style*="font-weight:600"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] #notifPanel .notif-detail,
html[data-theme="light"] #notifPanel [style*="text-muted"] {
  color: #475569 !important;
  font-weight: 500 !important;
}

html:not([data-theme="light"]) #notifPanel {
  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html:not([data-theme="light"]) #notifPanel .notif-title {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

html:not([data-theme="light"]) #notifPanel .notif-detail {
  color: #94a3b8 !important;
}

/* ── 13.5. Cartões, Stat Cards e Painéis Dashboard (Preservando Cores Semânticas) ── */
.card, .stat-card, .metric-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  position: relative !important;
}

.card:hover, .stat-card:hover, .metric-card:hover,
.stat-card.stat-card-clickable:hover, .svc-stat-card:hover,
.b2b-stat-card:hover, .myplan-card:hover, .benefit-card:hover,
.plan-status-card:hover, .storage-card:hover, .dashboard-card:hover,
.chart-card:hover, .table-container:hover, .kanban-card:hover,
.product-card:hover, .order-card:hover, .dpu-stat-card:hover,
.mov-stat-card:hover, .mb360-stat-card:hover, .u360-kpi-card:hover,
.gar-stat-card:hover, .uf-addr-card:hover, .uf-accordion-box:hover {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 60%, var(--border-color)) !important;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 25%, transparent) !important;
}

/* Elementos Pro do Dashboard (Meta, Anel, Sparkline, Botão Atualizar) */
.dpd-ring .fg {
  stroke: var(--accent) !important;
  filter: drop-shadow(0 0 8px var(--accent-glow)) !important;
}

.dpd-spark {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.dpd-badge {
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.dpd-stamp:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── 13.6. Filtro de Período (Segmented Control: Hoje, Semana, Mês) ── */
.period-buttons-wrap {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 3px !important;
}

html[data-theme="light"] .period-buttons-wrap {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.period-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  border-radius: 7px !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
}

.period-btn:hover:not(.active) {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="light"] .period-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
}

.period-btn.active,
.btn-secondary.period-btn.active {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .period-btn.active,
html[data-theme="light"] .btn-secondary.period-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  font-weight: 600 !important;
}

.st-tabs > button.st-tab-on,
.tab-item.active {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.05)) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* ── 13.7. Avatar do Usuário (Identidade Pessoal Desvinculada de Botões) ── */
.header-avatar,
#userAvatar,
.st-user .st-av {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.35) !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.header-avatar:hover,
#userAvatar:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45) !important;
}

/* Ocultação forçada quando display:none ou modo público/anônimo ativo */
#userAvatar[style*="display: none"],
#userAvatar[style*="display:none"],
.header-avatar[style*="display: none"],
.header-avatar[style*="display:none"],
.public-standalone-body #userAvatar,
.public-standalone-body .header-avatar,
.is-public-mode #userAvatar,
.is-public-mode .header-avatar,
html.public-standalone-body #userAvatar,
html.public-standalone-body .header-avatar,
html.is-public-mode #userAvatar,
html.is-public-mode .header-avatar {
  display: none !important;
}

.st-user {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

html[data-theme="light"] .st-user {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

/* ── 13.5. Botões de Ação Primária & CTA ── */
.btn-primary {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 24px var(--accent-glow) !important;
}

.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

/* ── 13.6. Tabelas, Listas e Cabeçalhos ── */
.data-table thead th, table thead th {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface)) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border-color)) !important;
}

.data-table tbody tr:hover, table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
}

/* ── 13.7. PDV — Área do Catálogo, Filtros e Produtos ── */
.pdv-wrapper {
  background: transparent !important;
}

.pdv-catalog-header-bar {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-surface, var(--bg-secondary))) !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 20%, var(--border-color)) !important;
}

.cat-btn.active {
  background: var(--gradient-primary) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

.pdv-quick-filters-btn {
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border-color)) !important;
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
}

.pdv-quick-filters-btn:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}

.pdv-active-filters-bar {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.pdv-view-btn.active {
  background: var(--gradient-primary) !important;
  box-shadow: 0 3px 12px var(--accent-glow) !important;
}

.pdv-search-input-box {
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border-color)) !important;
}

.pdv-search-input-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3.5px var(--accent-muted), 0 8px 24px var(--accent-glow) !important;
}

.pdv-search-icon {
  color: var(--accent) !important;
}

.pdv-search-dropdown {
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 20px var(--accent-glow) !important;
}

.pdv-dropdown-item:hover, .pdv-dropdown-item.selected {
  background: var(--accent-muted) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

.pdv-dropdown-add-btn {
  background: var(--gradient-primary) !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

.pdv-products-area {
  background: transparent !important;
}

.product-card {
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--accent) 4%, var(--bg-card)) 0%, 
    var(--bg-card) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color)) !important;
}

.product-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 28px -4px var(--accent-glow), 0 0 0 1px var(--accent) !important;
}

.product-info-btn:hover {
  background: var(--accent) !important;
  box-shadow: 0 6px 18px var(--accent-glow) !important;
}

.pdx-qty {
  background: var(--gradient-primary) !important;
  box-shadow: 0 4px 14px var(--accent-glow) !important;
}

/* ── 13.8. PDV — Carrinho e Finalização ── */
.pdv-right {
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--accent) 4%, var(--bg-secondary)) 0%, 
    var(--bg-secondary) 100%) !important;
  border-left: 1.5px solid color-mix(in srgb, var(--accent) 22%, var(--border-color)) !important;
}

.cart-header {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary)) !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 18%, var(--border-color)) !important;
}

.cart-count {
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.cart-customer, .cart-seller, .cart-cpf-bar {
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color)) !important;
}

#selectedCustomerBadge {
  background: var(--accent-muted) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

#selectedCustomerName {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.pdx-foot {
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)) 0%, 
    var(--bg-secondary) 100%) !important;
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border-color)) !important;
}

#cartTotal {
  color: var(--accent) !important;
  text-shadow: 0 2px 16px var(--accent-glow) !important;
  font-weight: 850 !important;
}

#btnFinalize:not(:disabled) {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 26px -2px var(--accent-glow) !important;
  border: none !important;
  font-weight: 750 !important;
}

#btnFinalize:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 32px var(--accent-glow) !important;
}

/* ── 13.9. Modais e Anéis de Foco Universais ── */
.modal {
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border-color)) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px var(--accent-glow) !important;
}

.modal-header {
  border-top: 3px solid var(--accent) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

.pdv-page-btn.active {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px var(--accent-glow) !important;
}

/* ── 14. COMPRAS: FAST ENTRY & MULTI-FORNECEDOR ── */
.purch-quick-bar {
  background: var(--bg-card, #0f172a);
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  position: relative;
}
.purch-quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.purch-quick-title {
  font-size: 13px;
  font-weight: 750;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 8px;
}
.purch-quick-fields {
  display: grid;
  grid-template-columns: minmax(260px, 3.4fr) minmax(95px, 1fr) minmax(70px, 0.75fr) minmax(75px, 0.8fr) minmax(110px, 1.2fr) minmax(110px, 1.2fr) minmax(125px, auto);
  gap: 8px;
  align-items: flex-end;
}
@media (max-width: 992px) {
  .purch-quick-fields {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .purch-quick-fields {
    grid-template-columns: 1fr 1fr;
  }
  .purch-quick-col-search {
    grid-column: 1 / -1;
  }
  .purch-quick-col-btn {
    grid-column: 1 / -1;
  }
}
.purch-search-wrap {
  position: relative;
}
.purch-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card, #0f172a);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1050;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.purch-autocomplete-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 12.5px;
}
.purch-autocomplete-item:hover, .purch-autocomplete-item.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
}
.purch-autocomplete-item:last-child {
  border-bottom: none;
}
.purch-supplier-intel {
  margin-top: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
  border-radius: 10px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeInDown 0.2s ease;
}
.purch-quick-margin-badge {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--success);
  pointer-events: none;
}
.purch-row-highlight {
  animation: purchRowGlow 1.5s ease-out;
}
@keyframes purchRowGlow {
  0% { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { background-color: transparent; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}