/* ================================================================
   MONFER INDUSTRIAL SYSTEM
   Camada visual transversal da SPA. Identidade escura, robusta e
   responsiva; cada familia recebe um sotaque sem perder a marca.
   ================================================================ */

:root,
[data-theme="dark"] {
  --mi-yellow: #f2c300;
  --mi-yellow-strong: #ffd21a;
  --mi-yellow-soft: rgba(242, 195, 0, .14);
  --mi-ink: #0d0e0e;
  --mi-shell: #141515;
  --mi-panel: #1d1f1f;
  --mi-panel-2: #242626;
  --mi-panel-3: #2b2d2d;
  --mi-line: #3b3e3e;
  --mi-line-soft: rgba(255, 255, 255, .085);
  --mi-text: #f1f0eb;
  --mi-text-2: #c5c4bd;
  --mi-muted: #8f918d;
  --mi-accent: var(--mi-yellow);
  --mi-accent-rgb: 242, 195, 0;

  --primary: var(--mi-accent);
  --primary-dark: #c99f00;
  --primary-light: rgba(var(--mi-accent-rgb), .13);
  --primary-glow: rgba(var(--mi-accent-rgb), .22);
  --brand-gold: var(--mi-yellow);
  --brand-gold-dark: #cda500;
  --brand-gold-soft: var(--mi-yellow-soft);
  --brand-black: var(--mi-ink);
  --bg: var(--mi-shell);
  --bg-card: var(--mi-panel);
  --bg-primary: var(--mi-panel);
  --bg-secondary: var(--mi-panel-2);
  --bg-tertiary: var(--mi-ink);
  --bg-alt: #191b1b;
  --bg-glass: rgba(29, 31, 31, .96);
  --text: var(--mi-text);
  --text-primary: var(--mi-text);
  --text-secondary: var(--mi-text-2);
  --text-muted: var(--mi-muted);
  --border: var(--mi-line);
  --border-hover: #585b59;
  --box-header-bg: #252727;
  --box-border: var(--mi-line);
  --uplift-brand-50: #272713;
  --uplift-brand-100: #37320d;
  --uplift-brand-500: var(--mi-accent);
  --uplift-brand-600: #d2a900;
  --uplift-brand-700: #a98500;
  --uplift-brand-900: #352c00;
  --uplift-ring: 0 0 0 3px rgba(var(--mi-accent-rgb), .18);
  --uplift-border: var(--mi-line-soft);
  --shadow-window: 0 22px 70px rgba(0, 0, 0, .66), 0 0 0 1px rgba(var(--mi-accent-rgb), .14);
}

/* Familias: o amarelo continua sendo a assinatura da estrutura e das
   acoes principais; o sotaque identifica a area de trabalho. */
html:not(.mg-system) body:has(:is(#pageProdutos, #pageEstoque, #pageGrupos, #pageLocaisLoja, #pageEtiquetas, #pageAuditoriaProdutos, #pageRevisaoImagens, #pageDescricoes, #pageIaEnriquecimento):not(.hidden)) {
  --mi-accent: #cf793d; --mi-accent-rgb: 207, 121, 61;
}
html:not(.mg-system) body:has(:is(#pageVendas, #pageVenda, #pageClientes, #pageCrm, #pagePainelVendedor, #pagePedidosVendedor, #pageOrcamentosUnificado, #pageOrcamentoRecorrente, #pageReguaOrcamentos, #pageRetencao, #pageComissaoExt):not(.hidden)) {
  --mi-accent: #75ad6b; --mi-accent-rgb: 117, 173, 107;
}
html:not(.mg-system) body:has(:is(#pageFinanceiro, #pageCockpitFinanceiro, #pageContasPagar, #pageCobrancasPix, #pageSicoob, #pageMercadoPago, #pageLiquidacao, #pageVencimentos, #pageRentabilidade, #pageNfce):not(.hidden)) {
  --mi-accent: #48a17d; --mi-accent-rgb: 72, 161, 125;
}
html:not(.mg-system) body:has(:is(#pageComprasVisao, #pagePedidosCompra, #pageFornecedores, #pageProdutosFornecedor, #pageRankingFornecedores, #pageScoreFornecedor, #pageCotacoesFornecedor, #pageSugestoesCompra, #pageSugestaoAuto, #pageReposicaoInteligente, #pagePesquisaPrecos, #pageCustoKits):not(.hidden)) {
  --mi-accent: #d99a45; --mi-accent-rgb: 217, 154, 69;
}
html:not(.mg-system) body:has(:is(#pageSeparacao, #pageExpedicao, #pageEntregas, #pageFreteLocal, #pageFreteTransportadora, #pageRastreio, #pageConsignados, #pageDevolucoes):not(.hidden)) {
  --mi-accent: #6795ad; --mi-accent-rgb: 103, 149, 173;
}
html:not(.mg-system) body:has(:is(#pageMarketing, #pageAdsCopilot, #pageAnalistaEncarte, #pagePromoSemanas, #pageLojaBanners, #pageLojaDestaques, #pageLinkbio, #pageCatalogos, #pageCatalogoCompartilhavel):not(.hidden)) {
  --mi-accent: #b685ad; --mi-accent-rgb: 182, 133, 173;
}
html:not(.mg-system) body:has(:is(#pageEmail, #pageWhatsapp, #pageWhatsappObserver, #pageAgenda, #pageTaskManager, #pageDekContatos):not(.hidden)) {
  --mi-accent: #b98257; --mi-accent-rgb: 185, 130, 87;
}
html:not(.mg-system) body:has(:is(#pageImportadorXml, #pageConferenciaXml, #pageNotas, #pageNotasEntrada, #pageNotasSaida, #pageDocsProdutos, #pageConfigDocs, #pageHistoricoEnvios, #pageImpressao):not(.hidden)) {
  --mi-accent: #8e9d72; --mi-accent-rgb: 142, 157, 114;
}
html:not(.mg-system) body:has(:is(#pageAnalytics, #pageExecutiveDash, #pagePainelDono, #pageRelatorios, #pageRelatoriosVendas, #pageSazonalidadeProdutos):not(.hidden)) {
  --mi-accent: #d2ad4e; --mi-accent-rgb: 210, 173, 78;
}
html:not(.mg-system) body:has(:is(#pageUsuarios, #pageMonitor, #pageErrosSistema, #pageVerificador, #pageClaudeTerminal):not(.hidden)) {
  --mi-accent: #8c969b; --mi-accent-rgb: 140, 150, 155;
}

html { background: var(--mi-ink); }
body { background: var(--mi-shell); color: var(--mi-text); }
body::selection { background: var(--mi-accent); color: #111; }

/* Estrutura principal */
#appWrapper { background: var(--mi-shell); }
.main-content,
.content,
.page { background-color: var(--mi-shell); }
.page { color: var(--mi-text); }
.page:not(.hidden) { animation: mi-page-in .18s ease-out; }
@keyframes mi-page-in { from { opacity: .45; transform: translateY(2px); } }

.topnav {
  background: linear-gradient(180deg, #1d1e1d 0%, #111212 100%) !important;
  border-bottom: 1px solid rgba(242, 195, 0, .28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34) !important;
}
.topnav-brand { border-right: 1px solid var(--mi-line-soft); padding-right: 12px !important; }
.topnav-brand img { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)) !important; }
.topnav-search .global-search-input {
  background: #0d0e0e !important; border-color: #353737 !important; color: var(--mi-text) !important;
  border-radius: 7px !important;
}
.topnav-search .global-search-input:focus { border-color: var(--mi-accent) !important; box-shadow: var(--uplift-ring) !important; }
.topnav-icon-btn { color: var(--mi-text-2) !important; }
.topnav-icon-btn:hover { color: var(--mi-accent) !important; background: rgba(var(--mi-accent-rgb), .11) !important; }
.zoom-controls { background: #0e0f0f !important; border-color: var(--mi-line) !important; }
.topnav-user:hover { background: rgba(var(--mi-accent-rgb), .1) !important; }
.topnav-user .user-avatar { background: var(--mi-yellow) !important; color: #171717 !important; box-shadow: none !important; }
.topnav-user-dd, .global-search-results, .notif-dropdown { background: #202222 !important; border-color: var(--mi-line) !important; box-shadow: var(--shadow-window) !important; }

.shortcut-bar {
  background: #191a1a !important; border-bottom: 1px solid var(--mi-line) !important;
  box-shadow: inset 0 -1px rgba(0, 0, 0, .4);
}
.shortcut-btn { color: var(--mi-text-2) !important; }
.shortcut-btn:hover, .shortcut-btn.active { color: var(--mi-accent) !important; background: rgba(var(--mi-accent-rgb), .1) !important; }
.shortcut-btn kbd { color: #141414; background: var(--mi-yellow); border: 0; }

.sidebar {
  background: linear-gradient(180deg, #181919 0%, #111212 100%) !important;
  border-right: 1px solid var(--mi-line) !important;
}
.sidebar-nav > a, .sidebar-group-items a { color: #bbbcb7; border-radius: 5px !important; }
.sidebar-nav > a:hover, .sidebar-group-items a:hover {
  color: var(--mi-text) !important; background: rgba(var(--mi-accent-rgb), .09) !important; transform: none !important;
}
.sidebar-nav > a.active, .sidebar-group-items a.active {
  color: #101111 !important; background: var(--mi-accent) !important;
  box-shadow: inset 3px 0 #fff1a0, 0 4px 13px rgba(0, 0, 0, .25) !important;
}
.sidebar-group-toggle { color: var(--mi-muted); text-transform: uppercase; letter-spacing: .065em; font-size: 10px; font-weight: 750; }
.sidebar-group-toggle:hover { color: var(--mi-accent); background: rgba(var(--mi-accent-rgb), .07) !important; }

/* Cabecalhos, filtros e hierarquia */
.page-header, .section-header, .content-header {
  border-bottom-color: var(--mi-line) !important;
}
.page-title, .page-header h1, .page-header h2, .content-header h1, .content-header h2 {
  color: var(--mi-text) !important; font-family: var(--font-display); letter-spacing: -.025em;
}
.page-title::before, .page-header > h1::before, .page-header > h2::before {
  content: ''; display: inline-block; width: 4px; height: .9em; margin-right: 9px;
  border-radius: 2px; background: var(--mi-accent); vertical-align: -.02em;
}
.page-subtitle, .section-subtitle { color: var(--mi-muted) !important; }
.toolbar, .filter-bar, .filters, .search-bar, .action-bar {
  background: #1b1d1d !important; border-color: var(--mi-line) !important; box-shadow: none !important;
}

/* Cartoes e paineis */
.card, .panel, .box, .widget, .kpi-card, .stat-card, .metric-card, .dashboard-card,
.info-section, .table-container, .data-card, .filter-card {
  background: var(--mi-panel) !important; border-color: var(--mi-line) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18) !important;
}
.card:hover, .kpi-card:hover, .stat-card:hover, .metric-card:hover {
  border-color: rgba(var(--mi-accent-rgb), .45) !important;
}
.card-header, .panel-header, .box-header, .widget-header, .info-section-header {
  background: linear-gradient(180deg, #292b2b, #242626) !important;
  color: var(--mi-text) !important; border-color: var(--mi-line) !important;
}
.kpi-value, .stat-value, .metric-value { color: var(--mi-text) !important; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-content, .stat-card .stat-content, .metric-card .metric-content { min-width: 0; }
.kpi-card .kpi-value, .kpi-value-sm, .stat-value, .metric-value, .total-value,
.money-value, .currency-value, .price-value, .valor-value, .num, .text-right {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-value {
  font-size: clamp(14px, 1.3vw, 24px) !important;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.kpi-label, .stat-label, .metric-label { color: var(--mi-muted) !important; text-transform: uppercase; letter-spacing: .055em; }

/* Formularios */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.form-control, .search-input {
  background: #121313 !important; color: var(--mi-text) !important; border-color: #444747 !important;
  border-radius: 5px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32) !important;
}
input::placeholder, textarea::placeholder { color: #70736f !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--mi-accent) !important; box-shadow: var(--uplift-ring) !important; outline: none !important;
}
label, .form-label { color: var(--mi-text-2); font-weight: 650; }
select { color-scheme: dark; }

/* Botoes: amarelo = comando principal, sotaque = contexto */
.btn { border-radius: 5px !important; font-weight: 700; box-shadow: none !important; }
.btn-primary, button.primary, .action-primary {
  background: var(--mi-yellow) !important; border-color: var(--mi-yellow) !important; color: #121313 !important;
}
.btn-primary:hover, button.primary:hover, .action-primary:hover {
  background: var(--mi-yellow-strong) !important; border-color: var(--mi-yellow-strong) !important;
}
.btn-secondary, .btn-outline, .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
  background: #292b2b; border-color: #444747; color: var(--mi-text-2);
}
.btn-secondary:hover, .btn-outline:hover { border-color: var(--mi-accent); color: var(--mi-accent); background: rgba(var(--mi-accent-rgb), .08); }
.btn-success { background: #39785a !important; border-color: #4b956f !important; }
.btn-danger { background: #713535 !important; border-color: #924747 !important; }
.btn-warning { background: #9d6a27 !important; border-color: #b9853c !important; color: #fff !important; }

/* Tabelas densas para operacao em 1366x768 */
.data-table, table { color: var(--mi-text-2); border-color: var(--mi-line); }
.data-table thead th, table thead th {
  background: #292b2b !important; color: #b9bab5 !important; border-color: #4a4d4c !important;
  text-transform: uppercase; letter-spacing: .055em; font-size: 10px; font-weight: 750;
}
.data-table tbody td, table tbody td { border-color: #343737 !important; }
.data-table tbody tr, table tbody tr { background: var(--mi-panel); }
.data-table tbody tr:nth-child(even), table tbody tr:nth-child(even) { background: #202222; }
.data-table tbody tr:hover, table tbody tr:hover { background: rgba(var(--mi-accent-rgb), .085) !important; }
.data-table .selected, table tr.selected { background: rgba(var(--mi-accent-rgb), .16) !important; box-shadow: inset 3px 0 var(--mi-accent); }
.data-table th.mi-sortable { cursor:pointer;user-select:none;white-space:nowrap; }
.data-table th.mi-sortable::after { content:'⇅';margin-left:6px;color:#747976;font-size:10px; }
.data-table th.mi-sortable:hover,.data-table th.mi-sort-active { color:var(--mi-accent)!important;background:#303432!important; }
.data-table th.mi-sort-active[data-sort-dir="asc"]::after { content:'▲';color:var(--mi-accent); }
.data-table th.mi-sort-active[data-sort-dir="desc"]::after { content:'▼';color:var(--mi-accent); }
html[data-theme="light"] .data-table th.mi-sortable:hover,html[data-theme="light"] .data-table th.mi-sort-active { background:#d2ddd0!important;color:#35623d!important; }

/* Abas e estados */
.tabs, .tab-bar, .prod-tabs { border-color: var(--mi-line) !important; }
.tab, .tab-btn, .prod-tab { color: var(--mi-text-2) !important; }
.tab:hover, .tab-btn:hover, .prod-tab:hover { color: var(--mi-accent) !important; }
.tab.active, .tab-btn.active, .prod-tab.active {
  color: var(--mi-accent) !important; border-color: var(--mi-accent) !important; background: rgba(var(--mi-accent-rgb), .07);
}
.badge, .status-badge, .tag { border-radius: 999px; font-weight: 750; }
.badge-success, .status-active, .status-ativo { background: rgba(72, 161, 125, .17) !important; color: #85d7ae !important; }
.badge-warning { background: rgba(217, 154, 69, .17) !important; color: #efbc74 !important; }
.badge-danger, .status-inactive { background: rgba(190, 73, 73, .17) !important; color: #ee9090 !important; }

/* Janelas, dialogos e menus */
.modal-overlay, .wm-overlay { background: rgba(0, 0, 0, .68) !important; backdrop-filter: blur(3px); }
.modal-content, .wm-window, .dialog, .dropdown-menu, .context-menu {
  background: var(--mi-panel) !important; border-color: #4a4d4c !important; box-shadow: var(--shadow-window) !important;
}
.modal-header, .wm-titlebar, .dialog-header {
  background: linear-gradient(180deg, #323434 0%, #222424 100%) !important;
  color: var(--mi-text) !important; border-color: #4a4d4c !important;
}
.modal-body, .wm-body, .dialog-body { background: var(--mi-panel) !important; color: var(--mi-text-2); }
.modal-footer, .dialog-footer { background: #191b1b !important; border-color: var(--mi-line) !important; }
.wm-control:hover, .modal-close:hover { background: rgba(var(--mi-accent-rgb), .14) !important; color: var(--mi-accent) !important; }

/* Feedback e visualizacao de dados */
.alert-info { background: rgba(103, 149, 173, .12) !important; border-color: #456b7e !important; color: #9bc3d5 !important; }
.alert-success { background: rgba(72, 161, 125, .12) !important; border-color: #39785e !important; color: #91d2b4 !important; }
.alert-warning { background: rgba(217, 154, 69, .12) !important; border-color: #8b632d !important; color: #e9bd7e !important; }
.alert-danger, .alert-error { background: rgba(190, 73, 73, .12) !important; border-color: #7c3838 !important; color: #ec9a9a !important; }
.empty-state { color: var(--mi-muted); }
.empty-state-icon { filter: grayscale(1); opacity: .65; }
.pagination button { background: #242626; border-color: var(--mi-line); color: var(--mi-text-2); }
.pagination button.active { background: var(--mi-accent); color: #121313; border-color: var(--mi-accent); }
.skeleton { background: linear-gradient(90deg, #242626 25%, #343737 45%, #242626 65%); }

/* Rolagem industrial discreta */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #141515; }
::-webkit-scrollbar-thumb { background: #454846; border: 2px solid #141515; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--mi-accent); }

/* Resolucao principal: 17 polegadas HD */
@media (max-width: 1440px), (max-height: 820px) {
  :root { --fs-base: 13px; --space-4: 13px; --space-5: 16px; --space-6: 19px; }
  .page { padding: 12px !important; }
  .page-header { margin-bottom: 12px !important; }
  .page-title, .page-header h1 { font-size: 20px !important; }
  .card, .panel, .kpi-card, .stat-card { border-radius: 6px !important; }
  .data-table th, .data-table td, table th, table td { padding-top: 7px !important; padding-bottom: 7px !important; }
  .btn { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
  input, select { min-height: 30px; }
}

@media (min-width: 2200px) {
  /* Mantem o conteudo fora da sidebar tambem em monitores largos/zoom reduzido. */
  .main-content { max-width: none; width: calc(100% - var(--sidebar-w)); margin-left: var(--sidebar-w); margin-right: 0; }
  .page { padding-inline: clamp(24px, 3vw, 64px) !important; }
  .wm-window { max-width: min(92vw, 2100px); }
}

@media (max-width: 900px) {
  .topnav-search { max-width: min(50vw, 420px); }
  .page { padding: 10px !important; }
  .toolbar, .filter-bar, .filters, .action-bar { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}