/* assets/css/app.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-bg:        #0b111e; /* brand Deep Navy */
  --c-surface:   #181b23;
  --c-card:      #1e2130;
  --c-border:    #2a2d3a;
  --c-border2:   #353848;
  --c-text:      #e4e6ef;
  --c-muted:     #64748b; /* brand Slate Gray */
  --c-accent:    #4f7ef8;
  --c-accent-bg: rgba(79,126,248,.12);
  --c-info:      #0ea5e9; /* brand Bright Blue */
  --c-info-bg:   rgba(14,165,233,.12);
  --c-teal:      #06b6d4; /* brand Cyan Teal */
  --c-teal-bg:   rgba(6,182,212,.12);
  --c-success:   #34d058;
  --c-success-bg:rgba(52,208,88,.1);
  --c-warn:      #f0a43a;
  --c-warn-bg:   rgba(240,164,58,.1);
  --c-danger:    #e24b4a;
  --c-danger-bg: rgba(226,75,74,.1);
  --c-purple:    #a78bfa;
  --c-purple-bg: rgba(167,139,250,.1);
  --radius:      8px;
  --radius-sm:   5px;
  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --sidebar-w:   210px;
  --topbar-h:    52px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); font-size: 13px; line-height: 1.5; min-height: 100vh; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--c-surface); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar { transition: transform .18s ease; }
.sidebar-toggle-collapse {
  z-index:2; flex:0 0 auto;
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--c-border2); background:var(--c-card); color:var(--c-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.sidebar-toggle-collapse:hover { color:var(--c-accent); border-color:var(--c-accent); }
.sidebar-reopen-toggle {
  display:none; position:fixed; top:12px; left:8px; z-index:130;
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--c-border2); background:var(--c-surface); color:var(--c-accent);
  align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm);
}
html.sidebar-collapsed .sidebar { transform:translateX(calc(-1 * var(--sidebar-w))); }
html.sidebar-collapsed .main { margin-left:0; }
html.sidebar-collapsed .sidebar-reopen-toggle { display:inline-flex; }
html.sidebar-collapsed .sidebar-hover-zone { display:none; }

.sidebar-logo { padding: 16px; border-bottom: 1px solid var(--c-border); font-size: 15px; font-weight: 600; color: var(--c-text); letter-spacing: -.01em; }
.sidebar-logo span { color: var(--c-accent); }
.sidebar-sub { font-size: 11px; font-weight: 400; color: var(--c-muted); display: block; margin-top: 2px; }
.nav-section { padding: 14px 16px 4px; font-size: 10px; font-weight: 500; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 13px; color: var(--c-muted); cursor: pointer; border-left: 2px solid transparent; transition: color .15s, background .15s; text-decoration: none; }
.nav-item i { font-size: 16px; flex-shrink: 0; }
.nav-item:hover { color: var(--c-text); background: rgba(255,255,255,.03); text-decoration: none; }
.nav-item.active { color: var(--c-accent); background: var(--c-accent-bg); border-left-color: var(--c-accent); font-weight: 500; }
.sidebar-foot { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-muted); }
.sidebar-foot strong { color: var(--c-success); font-weight: 500; }
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin-left .18s ease; }
.topbar { height: var(--topbar-h); background: var(--c-surface); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 50; }
.topbar-title { font-size: 15px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.page-content { padding: 20px; flex: 1; min-width: 0; max-width: 100%; overflow-x: clip; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 11px; color: var(--c-muted); margin-bottom: 5px; }
.kpi-value { font-size: 22px; font-weight: 600; line-height: 1.1; }
.kpi-value.accent { color: var(--c-accent); } .kpi-value.success { color: var(--c-success); } .kpi-value.danger { color: var(--c-danger); } .kpi-value.warn { color: var(--c-warn); }
.kpi-sub { font-size: 11px; color: var(--c-muted); margin-top: 4px; }
.kpi-link { display:block; color:inherit; text-decoration:none; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.kpi-link:hover { text-decoration:none; border-color:var(--c-accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.kpi-link:active { transform:translateY(0); }

/* Borda de card somente quando o link/filtro está ativo */
.kpi.kpi-active,
.global-kpi-card.kpi-active {
  box-shadow: var(--shadow-sm);
}
.kpi.kpi-active-danger,
.global-kpi-card.kpi-active-danger { border-color: var(--c-danger); }
.kpi.kpi-active-success,
.global-kpi-card.kpi-active-success { border-color: var(--c-success); }
.kpi.kpi-active-accent,
.global-kpi-card.kpi-active-accent { border-color: var(--c-accent); }

/* Cards globais fixos em todas as telas internas */
:root { --global-kpi-h: 104px; }
.topbar { transition: transform .18s ease; }
body.scroll-down .topbar { transform: translateY(calc(-1 * var(--topbar-h))); }
.global-kpi-shell {
  position: sticky;
  top: var(--topbar-h);
  z-index: 48;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: 8px 20px 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  transition: top .18s ease;
}
body.scroll-down .global-kpi-shell { top: 0; }
.global-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.global-kpi-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 0;
}
.global-kpi-card .kpi-label { font-size: 10px; margin-bottom: 3px; }
.global-kpi-card .kpi-value { font-size: 18px; }
.global-kpi-card .kpi-sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.scroll-down .global-kpi-card { padding-top: 8px; padding-bottom: 8px; }

/* No Dashboard, os cards agora são globais. O painel local mantém filtros/abas. */
.dashboard-page .dashboard-sticky-panel > .kpi-grid { display: none !important; }
.dashboard-sticky-panel {
  top: calc(var(--topbar-h) + var(--global-kpi-h)) !important;
  transition: top .18s ease, padding .18s ease;
}
body.scroll-down .dashboard-sticky-panel {
  top: var(--global-kpi-h) !important;
  padding-top: 6px !important;
}
body.scroll-down .dashboard-sticky-panel .filter-bar {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0 !important;
  pointer-events: none;
}
.dashboard-sticky-panel .filter-bar { transition: max-height .18s ease, opacity .18s ease, margin .18s ease; max-height: 80px; }

@media (max-width: 1200px) {
  .global-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root { --global-kpi-h: 172px; }
}
@media (max-width: 760px) {
  .global-kpi-shell { padding-left: 12px; padding-right: 12px; overflow-x: auto; }
  .global-kpi-grid { display: flex; min-width: max-content; }
  .global-kpi-card { width: 220px; flex: 0 0 220px; }
  :root { --global-kpi-h: 104px; }
}


.card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-weight: 500; }
.card-body { padding: 16px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--c-border2); background: transparent; color: var(--c-text); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s; text-decoration: none; white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.btn i { font-size: 15px; }
.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn-primary:hover { background: #3a68e0; border-color: #3a68e0; }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-sm i { font-size: 13px; }

.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; color: var(--c-muted); margin-bottom: 5px; font-weight: 500; }
.form-label.required::after { content: ' *'; color: var(--c-danger); }
.form-control { width: 100%; padding: 7px 10px; border: 1px solid var(--c-border2); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); font-size: 13px; font-family: var(--font); transition: border-color .15s; }
.form-control:focus { outline: none; border-color: var(--c-accent); }
.form-control::placeholder { color: var(--c-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 500; color: var(--c-muted); border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.data-table thead th.right, .data-table tbody td.right { text-align: right; }
.data-table tbody tr { border-bottom: 1px solid var(--c-border); }
.data-table tbody tr:hover { background: rgba(255,255,255,.02); }
.data-table tbody td { padding: 8px 10px; vertical-align: middle; }
.data-table tbody .group-row td { background: rgba(255,255,255,.03); color: var(--c-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; }

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge-ok { background: var(--c-success-bg); color: var(--c-success); }
.badge-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-info { background: var(--c-accent-bg); color: var(--c-accent); }
.badge-purple { background: var(--c-purple-bg); color: var(--c-purple); }
.badge-neutral { background: rgba(255,255,255,.06); color: var(--c-muted); }
.badge-fba { background: var(--c-accent-bg); color: var(--c-accent); }
.badge-fbm { background: var(--c-warn-bg); color: var(--c-warn); }

.progress-wrap { height: 5px; background: var(--c-bg); border-radius: 3px; min-width: 70px; }
.progress-fill { height: 5px; border-radius: 3px; background: var(--c-accent); transition: width .3s; }
.progress-fill.done { background: var(--c-success); }
.progress-fill.warn { background: var(--c-danger); }
.progress-meta { font-size: 10px; color: var(--c-muted); margin-top: 3px; white-space: nowrap; }

.hist-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.hist-chip { font-size: 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 5px; color: var(--c-muted); white-space: nowrap; }

.supplier-links { display: flex; align-items: center; gap: 4px; }
.supplier-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-muted); font-size: 13px; transition: color .15s, border-color .15s; text-decoration: none; }
.supplier-link:hover { color: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }

.supplier-row { display: grid; grid-template-columns: 160px 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }

.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.flash-success { background: var(--c-success-bg); color: var(--c-success); border: 1px solid rgba(52,208,88,.2); }
.flash-error { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid rgba(226,75,74,.2); }
.flash-info { background: var(--c-accent-bg); color: var(--c-accent); border: 1px solid rgba(79,126,248,.2); }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--c-card); border: 1px solid var(--c-border2); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 20px; position: relative; }
.modal-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--c-muted); font-size: 20px; cursor: pointer; }
.modal-close:hover { color: var(--c-text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); }

.tabs { display: flex; border-bottom: 1px solid var(--c-border); margin-bottom: 14px; }
.tab-item { padding: 8px 16px; font-size: 12px; color: var(--c-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.tab-item:hover { color: var(--c-text); text-decoration: none; }
.tab-item.active { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 500; }
.tab-count { background: var(--c-danger-bg); color: var(--c-danger); font-size: 10px; padding: 1px 5px; border-radius: 10px; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filter-bar .form-control { height: 30px; padding: 4px 9px; font-size: 12px; width: auto; }
.filter-bar input[type=text] { min-width: 200px; }

/* Date locale wrapper — mostra data no formato do idioma do app */
.date-lw { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.date-lw input[type="date"] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; box-sizing: border-box; }
.date-lw-text { pointer-events: none; white-space: nowrap; position: relative; z-index: 0; }

/* Filtros fixos abaixo da barra superior + cards globais em todas as páginas */
.page-content > .filter-bar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--global-kpi-h) + 6px);
  z-index: 47;
  background: var(--c-bg);
  padding: 8px 0 10px;
  margin-top: -4px;
}
body.scroll-down .page-content > .filter-bar {
  top: calc(var(--global-kpi-h) + 6px);
}
.page-content > .filter-bar::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--c-border);
  pointer-events: none;
}
.dashboard-page > .filter-bar,
.dashboard-sticky-panel .filter-bar {
  margin-top: 0;
}
@media (max-width: 760px) {
  .page-content > .filter-bar {
    top: calc(var(--topbar-h) + var(--global-kpi-h) + 4px);
    padding-top: 6px;
    padding-bottom: 8px;
  }
  body.scroll-down .page-content > .filter-bar {
    top: calc(var(--global-kpi-h) + 4px);
  }
}


.empty-state { text-align: center; padding: 40px 20px; color: var(--c-muted); }
.empty-state i { font-size: 36px; margin-bottom: 10px; display: block; }
.empty-state p { font-size: 13px; margin-bottom: 14px; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 28px; }
.login-logo { font-size: 18px; font-weight: 600; margin-bottom: 24px; text-align: center; }
.login-logo span { color: var(--c-accent); }

.text-muted { color: var(--c-muted); } .text-accent { color: var(--c-accent); } .text-success { color: var(--c-success); } .text-danger { color: var(--c-danger); }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; }
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }

/* ── TEMA CLARO ──────────────────────────────────────────────── */
html[data-theme="light"] {
  --c-bg:        #f8fafc; /* brand App White */
  --c-surface:   #ffffff;
  --c-card:      #ffffff;
  --c-border:    #e2e5eb;
  --c-border2:   #d0d5dd;
  --c-text:      #0b111e; /* brand Deep Navy */
  --c-muted:     #64748b; /* brand Slate Gray */
  --c-accent:    #2563eb; /* brand Electric Blue */
  --c-accent-bg: rgba(37,99,235,.08);
  --c-info:      #0ea5e9; /* brand Bright Blue */
  --c-info-bg:   rgba(14,165,233,.08);
  --c-teal:      #06b6d4; /* brand Cyan Teal */
  --c-teal-bg:   rgba(6,182,212,.08);
  --c-success:   #16a34a;
  --c-success-bg:rgba(22,163,74,.08);
  --c-warn:      #d97706;
  --c-warn-bg:   rgba(217,119,6,.08);
  --c-danger:    #dc2626;
  --c-danger-bg: rgba(220,38,38,.08);
  --c-purple:    #7c3aed;
  --c-purple-bg: rgba(124,58,237,.08);
}
html[data-theme="light"] .form-control { background: #f9fafb; }
html[data-theme="light"] .hist-chip    { background: #f3f4f6; }
html[data-theme="light"] .supplier-link { background: #f3f4f6; }
html[data-theme="light"] .progress-wrap { background: #e5e7eb; }
html[data-theme="light"] .data-table tbody .group-row td { background: #f3f4f6; }
html[data-theme="light"] .modal { box-shadow: 0 8px 32px rgba(0,0,0,.12); }

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border2);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-size: 16px;
}
.theme-toggle:hover { color: var(--c-text); border-color: var(--c-accent); }

button.supplier-link,
button.copy-btn {
  cursor: pointer;
  font-family: inherit;
}

button.supplier-link {
  padding: 0;
}

.copy-btn.copied,
.supplier-link.copied {
  color: var(--c-success);
  border-color: var(--c-success);
}

/* Activity log / timeline */
.activity-timeline{display:flex;flex-direction:column;gap:12px;position:relative}
.activity-item{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:flex-start}
.activity-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-card);border:1px solid var(--c-border);color:var(--c-accent);margin-top:8px}
.activity-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.activity-head strong{margin-left:8px;font-size:13px}
.activity-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--c-muted);font-size:11px}
.activity-meta span{display:inline-flex;align-items:center;gap:4px}
.activity-details{margin-top:10px;border-top:1px solid var(--c-border);padding-top:8px}
.activity-details summary{cursor:pointer;color:var(--c-accent);font-size:12px;font-weight:600}
.activity-details pre{white-space:pre-wrap;word-break:break-word;background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;padding:10px;font-size:11px;line-height:1.4;margin-top:8px;max-height:360px;overflow:auto}

/* Mostra o nome completo do produto, quebrando linha em vez de cortar com ... */
.product-title-wrap {
  max-width: 260px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: anywhere;
}


/* Colunas arrastáveis */
th.column-draggable {
  cursor: grab;
  position: relative;
  user-select: none;
}
th.column-draggable::after {
  content: "↔";
  font-size: 10px;
  color: var(--c-muted);
  opacity: .45;
  margin-left: 6px;
}
th.column-draggable:hover::after {
  opacity: 1;
  color: var(--c-accent);
}
th.column-dragging {
  opacity: .55;
  cursor: grabbing;
}
th.column-drag-over {
  outline: 2px dashed var(--c-accent);
  outline-offset: -4px;
  background: var(--c-accent-bg);
}
th.column-locked {
  cursor: default;
}


/* Notas em quadradinhos coloridos */
.note-cell { min-width: 190px; width: 190px; max-width: 240px; }
.note-boxes { display:flex; flex-wrap:nowrap; gap:5px; align-items:center; min-width:170px; max-width:240px; }
.note-box {
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--c-border); border-radius:6px;
  padding:3px 7px; font-size:11px; line-height:1.35; font-weight:500;
  white-space:nowrap; word-break:normal; overflow-wrap:normal; max-width:190px;
}
.note-box i { font-size:10px; flex:0 0 auto; opacity:.75; }
.note-box-gray   { background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.45); color:var(--c-text); }
.note-box-yellow { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.48); color:#92400e; }
.note-box-green  { background:rgba(34,197,94,.13); border-color:rgba(34,197,94,.45); color:#166534; }
.note-box-red    { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.45); color:#991b1b; }
.note-box-blue   { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.45); color:#1e40af; }
.note-box-purple { background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.45); color:#6b21a8; }
.note-box-orange { background:rgba(249,115,22,.13); border-color:rgba(249,115,22,.48); color:#9a3412; }

.note-box.product-note {
  padding:0; overflow:hidden; gap:0;
  display:inline-flex; align-items:stretch;
  width: 170px; min-width: 170px; max-width:170px; vertical-align:middle;
}
.note-box-main {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 6px 3px 7px; cursor:pointer;
  min-width:0; max-width:128px; flex:1 1 auto; overflow:hidden;
}
.note-box-text {
  display:block; min-width:0; max-width:100px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  word-break:normal; overflow-wrap:normal;
}
.note-box-actions { display:inline-flex; align-items:stretch; flex:0 0 auto; border-left:1px solid rgba(0,0,0,.08); }
.note-color-btn, .note-delete-btn { appearance:none; border:0; background:transparent; color:inherit; padding:0 6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:100%; }
.note-color-btn:hover, .note-delete-btn:hover, .note-box-main:hover { background:rgba(255,255,255,.28); }
.note-color-chip { width:10px; height:10px; border-radius:3px; border:1px solid rgba(0,0,0,.15); display:inline-block; }
.note-color-chip.gray { background:#94a3b8; }
.note-color-chip.yellow { background:#f59e0b; }
.note-color-chip.green { background:#22c55e; }
.note-color-chip.red { background:#ef4444; }
.note-color-chip.blue { background:#3b82f6; }
.note-color-chip.purple { background:#a855f7; }
.note-color-chip.orange { background:#f97316; }
#note-color-picker { display:none; position:absolute; z-index:400; background:var(--c-card); border:1px solid var(--c-border2); border-radius:8px; padding:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); gap:6px; }
#note-color-picker.open { display:flex; }
#note-color-picker .pick { width:24px; height:24px; border-radius:5px; cursor:pointer; border:2px solid transparent; transition:transform .1s; }
#note-color-picker .pick:hover { transform:scale(1.1); }
#note-color-picker .pick-gray { background:#94a3b8; }
#note-color-picker .pick-yellow { background:#f59e0b; }
#note-color-picker .pick-green { background:#22c55e; }
#note-color-picker .pick-red { background:#ef4444; }
#note-color-picker .pick-blue { background:#3b82f6; }
#note-color-picker .pick-purple { background:#a855f7; }
#note-color-picker .pick-orange { background:#f97316; }
.note-color-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.note-color-choice { width:28px; height:28px; border-radius:6px; border:2px solid var(--c-border2); cursor:pointer; }
.note-color-choice.active { outline:2px solid var(--c-accent); outline-offset:1px; }
.note-color-choice[data-color="gray"] { background:#94a3b8; }
.note-color-choice[data-color="yellow"] { background:#f59e0b; }
.note-color-choice[data-color="green"] { background:#22c55e; }
.note-color-choice[data-color="red"] { background:#ef4444; }
.note-color-choice[data-color="blue"] { background:#3b82f6; }
.note-color-choice[data-color="purple"] { background:#a855f7; }
.note-color-choice[data-color="orange"] { background:#f97316; }
.note-add-btn {
  display:inline-flex; align-items:center; gap:4px;
  border:1px dashed var(--c-border2); border-radius:6px;
  padding:3px 8px; font-size:11px; line-height:1.35; font-weight:600;
  background:transparent; color:var(--c-text-soft); cursor:pointer;
}
.note-add-btn:hover { border-color:var(--c-accent); color:var(--c-accent); background:rgba(59,130,246,.06); }
[data-theme="dark"] .note-box-yellow { color:#fde68a; }
[data-theme="dark"] .note-box-green { color:#bbf7d0; }
[data-theme="dark"] .note-box-red { color:#fecaca; }
[data-theme="dark"] .note-box-blue { color:#bfdbfe; }
[data-theme="dark"] .note-box-purple { color:#e9d5ff; }
[data-theme="dark"] .note-box-orange { color:#fed7aa; }


/* ── MOBILE / BROWSER DO CELULAR ─────────────────────────────── */
.mobile-menu-toggle { display:none; }
.mobile-sidebar-backdrop { display:none; }
.topbar-left { display:flex; align-items:center; gap:10px; min-width:0; }

@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  body { font-size:14px; -webkit-text-size-adjust:100%; }
  .layout { display:block; min-height:100vh; }
  .sidebar {
    width: min(86vw, 320px);
    min-width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 400;
    box-shadow: 14px 0 40px rgba(0,0,0,.22);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-sidebar-backdrop {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.42);
    z-index:350;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  body.mobile-menu-open .mobile-sidebar-backdrop { opacity:1; pointer-events:auto; }
  body.mobile-menu-open { overflow:hidden; }
  .main { margin-left:0; width:100%; min-height:100vh; }
  .topbar {
    min-height:var(--topbar-h);
    height:auto;
    padding:10px 12px;
    gap:8px;
  }
  .topbar-title { font-size:15px; line-height:1.2; }
  .topbar-left { flex:1; }
  .topbar-left > div { min-width:0; }
  .topbar-right { gap:6px; flex-shrink:0; }
  .mobile-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:8px;
    border:1px solid var(--c-border2);
    background:var(--c-card);
    color:var(--c-text);
    font-size:20px;
    cursor:pointer;
    flex-shrink:0;
  }
  .page-content { padding:12px; }
  .kpi-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .kpi { padding:12px; }
  .kpi-value { font-size:18px; }
  .card-header { padding:12px; gap:8px; flex-wrap:wrap; }
  .card-body { padding:12px; }
  .filter-bar { align-items:stretch; gap:8px; }
  .filter-bar .form-control,
  .filter-bar input[type=text],
  .filter-bar select { width:100%; min-width:0; }
  .form-row, .form-row-3 { grid-template-columns:1fr; gap:10px; }
  .supplier-row { grid-template-columns:1fr; gap:8px; }
  .supplier-row .btn { width:100%; justify-content:center; }
  .btn { min-height:36px; padding:8px 12px; font-size:13px; }
  .btn-sm { min-height:32px; padding:7px 10px; font-size:12px; }
  .theme-toggle { width:36px; height:36px; }
  .table-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--radius);
  }
  table.data-table { min-width:980px; font-size:12px; }
  .data-table thead th { padding:9px 10px; }
  .data-table tbody td { padding:10px; vertical-align:top; }
  .data-table tbody .group-row td { position:sticky; left:0; z-index:2; }
  .product-title-wrap { max-width:320px; }
  .supplier-links { flex-wrap:wrap; }
  .supplier-link { width:32px; height:32px; }
  .progress-wrap { min-width:110px; }
  .modal-overlay { align-items:flex-end; justify-content:center; padding:0; }
  .modal {
    max-width:none !important;
    width:100%;
    max-height:92vh;
    border-radius:14px 14px 0 0;
    padding:18px 14px;
  }
  .modal-footer { position:sticky; bottom:-18px; background:var(--c-card); padding-bottom:12px; }
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab-item { white-space:nowrap; }
  .activity-item { grid-template-columns:26px 1fr; gap:8px; }
  .activity-dot { width:24px; height:24px; }
  .activity-head { flex-direction:column; gap:6px; }
  .login-wrap { padding:14px; align-items:flex-start; padding-top:8vh; }
  .login-box { padding:22px 18px; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; }
  .topbar-right { margin-top:0; }
  table.data-table { min-width:900px; }
  .product-title-wrap { max-width:280px; }
  .hide-mobile { display:none !important; }
}

/* Sidebar organizada / submenu de produtos */
.sidebar-logo {
  padding:42px 18px 14px !important;
}
.sidebar nav {
  padding: 8px 0 10px;
}
.nav-section {
  padding: 16px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-muted);
}
.nav-item {
  margin: 1px 10px;
  padding: 8px 10px !important;
  border-left: 0 !important;
  border-radius: 8px;
  gap: 10px !important;
  color: var(--c-text-soft, var(--c-muted));
}
.nav-item i {
  width: 18px;
  text-align: center;
}
.nav-item.active {
  position: relative;
  background: var(--c-accent-bg) !important;
  color: var(--c-accent) !important;
}
.nav-item.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--c-accent);
}
.nav-group { margin: 1px 0 4px; }
.nav-parent { margin-bottom: 0; }

.nav-parent-row {
  display:flex;
  align-items:center;
  gap:6px;
  margin: 1px 10px;
}
.nav-parent-row .nav-item {
  flex:1;
  margin:0;
}
.nav-expand-btn {
  width:32px;
  min-width:32px;
  height:32px;
  border:1px solid var(--c-border);
  background:var(--c-card);
  color:var(--c-muted);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
}
.nav-expand-btn:hover {
  color:var(--c-text);
  border-color:var(--c-accent);
  background:rgba(59,130,246,.06);
}
.nav-expand-btn.open {
  color:var(--c-accent);
  background:var(--c-accent-bg);
  border-color:rgba(59,130,246,.25);
}
.nav-group .nav-subitems { display:none; }
.nav-group.open .nav-subitems { display:flex; }
.nav-subitems {
  margin: 2px 10px 6px 52px;
  padding-left: 10px;
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-subitem {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.nav-subitem:hover {
  color: var(--c-text);
  background: rgba(59,130,246,.06);
  text-decoration: none;
}
.nav-subitem.active {
  color: var(--c-accent);
  background: rgba(59,130,246,.10);
}
.sidebar-foot {
  margin: auto 10px 10px !important;
  padding: 12px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 10px;
  background: var(--c-card);
}

/* ASIN copiável */
.product-asin-wrap {
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  user-select:text;
  -webkit-user-select:text;
}
.product-asin-text {
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.asin-copy-btn {
  width:20px;
  height:20px;
  border:1px solid var(--c-border);
  border-radius:5px;
  background:var(--c-card);
  color:var(--c-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
  opacity:.75;
}
.asin-copy-btn:hover {
  color:var(--c-accent);
  border-color:var(--c-accent);
  background:var(--c-accent-bg);
  opacity:1;
}
.asin-copy-btn.copied {
  color:var(--c-success);
  border-color:var(--c-success);
  background:var(--c-success-bg);
}
.product-title-wrap { user-select:text; -webkit-user-select:text; }

/* Miniatura do produto */
.product-cell-with-image { display:flex; align-items:center; gap:10px; min-width:0; }
.product-thumb-wrap { position:relative; width:42px; height:42px; flex:0 0 42px; display:inline-flex; align-items:center; justify-content:center; }
.product-thumb {
  width:42px; height:42px; border-radius:8px; object-fit:contain;
  background:#fff; border:1px solid var(--c-border); box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:center; color:var(--c-muted); font-size:18px;
  padding:0; cursor:pointer;
}
.product-thumb-img { width:100%; height:100%; object-fit:contain; display:block; }
.product-thumb-zoom {
  display:none; position:absolute; z-index:500; left:48px; top:-18px;
  width:315px; min-height:315px; padding:10px; border-radius:12px;
  background:var(--c-card); border:1px solid var(--c-border2); box-shadow:0 14px 40px rgba(15,23,42,.20);
}
.product-thumb-zoom img { width:100%; height:285px; object-fit:contain; display:block; background:#fff; border-radius:8px; }
.product-thumb-wrap:hover .product-thumb-zoom { display:block; }
.product-info { min-width:0; }
.image-capture-btn { border:0; background:transparent; color:var(--c-muted); cursor:pointer; padding:2px; border-radius:5px; }
.image-capture-btn:hover { color:var(--c-accent); background:var(--c-accent-bg); }
.image-thumb-btn:hover, .image-manual-btn:hover { border-color:var(--c-accent); color:var(--c-accent); background:var(--c-accent-bg); }
.product-thumb-delete {
  position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:999px;
  border:1px solid var(--c-border2); background:var(--c-card); color:var(--c-muted);
  display:none; align-items:center; justify-content:center; cursor:pointer; font-size:12px; z-index:2;
}
.product-thumb-wrap:hover .product-thumb-delete { display:flex; }
.product-thumb-delete:hover { background:var(--c-danger-bg); color:var(--c-danger); border-color:var(--c-danger); }
.image-url-help { font-size:11px; color:var(--c-muted); margin-top:5px; line-height:1.4; }


/* Produto selecionado/clicado na tabela */
.product-column-cell { cursor: pointer; }
.product-column-cell .product-title-wrap { cursor: pointer; }
tr.product-row-selected > td {
  background: rgba(37,99,235,.085) !important;
  box-shadow: inset 0 1px 0 rgba(37,99,235,.18), inset 0 -1px 0 rgba(37,99,235,.18);
}
tr.product-row-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--c-accent), inset 0 1px 0 rgba(37,99,235,.18), inset 0 -1px 0 rgba(37,99,235,.18);
}
tr.product-row-selected .product-title-wrap { color: var(--c-accent); }


/* Correção forte: notas nunca devem quebrar letra por letra */
.note-cell { min-width:220px !important; width:220px !important; max-width:260px !important; white-space:nowrap !important; overflow:hidden !important; }
.note-cell .note-boxes { display:flex !important; flex-wrap:nowrap !important; gap:6px !important; align-items:center !important; min-width:176px !important; max-width:240px !important; overflow:hidden !important; white-space:nowrap !important; }
.note-cell .note-box.product-note { display:inline-flex !important; flex-direction:row !important; align-items:center !important; width:176px !important; min-width:176px !important; max-width:176px !important; height:28px !important; max-height:28px !important; overflow:hidden !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; writing-mode:horizontal-tb !important; }
.note-cell .note-box-main { display:inline-flex !important; flex-direction:row !important; align-items:center !important; min-width:0 !important; max-width:126px !important; overflow:hidden !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; writing-mode:horizontal-tb !important; }
.note-cell .note-box-text { display:block !important; min-width:0 !important; max-width:104px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; word-break:normal !important; overflow-wrap:normal !important; writing-mode:horizontal-tb !important; }
.note-cell .note-box-actions { display:inline-flex !important; flex-direction:row !important; align-items:center !important; flex:0 0 auto !important; white-space:nowrap !important; }


/* Dashboard: notas ficam contidas na própria coluna e nunca invadem Canal/Fornecedor. */
.dashboard-page #products-table .note-cell {
  overflow: hidden !important;
  white-space: nowrap !important;
}
.dashboard-page #products-table .note-cell .note-boxes,
.dashboard-page #products-table .note-cell .note-box,
.dashboard-page #products-table .note-cell .note-box-main,
.dashboard-page #products-table .note-cell .note-box-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Correção: controles da primeira coluna no Dashboard não podem sumir quando a lateral reduz a área útil. */
.dashboard-page #products-table .col-select,
.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell {
  width:86px !important;
  min-width:86px !important;
  max-width:86px !important;
  padding-left:8px !important;
  padding-right:6px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.dashboard-page #products-table .row-color-controls {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
  min-width:68px !important;
  width:max-content !important;
  position:relative;
  z-index:3;
}
.dashboard-page #products-table .row-color-controls .bulk-product-check {
  flex:0 0 auto !important;
  margin:0 !important;
}
.dashboard-page #products-table .row-color-controls .drag-handle {
  flex:0 0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.dashboard-page #products-table .row-color-controls .color-dot {
  display:inline-block !important;
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  margin-left:0 !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* ===== Dashboard table layout fix - colunas estáveis por classe ===== */
.dashboard-page .dashboard-table-card .table-wrap {
  overflow-x: auto !important;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.dashboard-page #products-table {
  width: max-content !important;
  min-width: 1480px !important;
  table-layout: fixed;
}
.dashboard-page #products-table .col-select { width:86px !important; min-width:86px !important; max-width:86px !important; }
.dashboard-page #products-table .col-product { width:260px !important; min-width:260px !important; max-width:260px !important; }
.dashboard-page #products-table .col-channel { width:80px !important; min-width:80px !important; max-width:80px !important; }
.dashboard-page #products-table .col-suppliers { width:220px !important; min-width:220px !important; max-width:220px !important; }
.dashboard-page #products-table .col-price { width:95px !important; min-width:95px !important; max-width:95px !important; }
.dashboard-page #products-table .col-target { width:140px !important; min-width:140px !important; max-width:140px !important; }
.dashboard-page #products-table .col-progress { width:190px !important; min-width:190px !important; max-width:190px !important; }
.dashboard-page #products-table .col-cost { width:135px !important; min-width:135px !important; max-width:135px !important; }
.dashboard-page #products-table .col-received { width:155px !important; min-width:155px !important; max-width:155px !important; }
.dashboard-page #products-table .col-notes { width:190px !important; min-width:190px !important; max-width:190px !important; }
.dashboard-page #products-table .col-actions { width:125px !important; min-width:125px !important; max-width:125px !important; }
.dashboard-page #products-table .note-cell,
.dashboard-page #products-table .note-cell .note-boxes,
.dashboard-page #products-table .note-cell .note-box,
.dashboard-page #products-table .note-cell .note-box-main,
.dashboard-page #products-table .note-cell .note-box-text,
.dashboard-page #products-table .note-cell .note-text {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html.sidebar-auto:not(.sidebar-collapsed) .main,
html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .main { margin-left:14px !important; }
@supports selector(html:has(.sidebar:hover)) {
  html.sidebar-auto:not(.sidebar-collapsed):has(.sidebar:hover) .main { margin-left:14px !important; }
}
@media (max-width: 520px) {
  .dashboard-page .dashboard-table-card .table-wrap { overflow-x: visible !important; }
  .dashboard-page #products-table { min-width: 0 !important; width: 100% !important; display:block; }
  .dashboard-page #products-table thead { display:none; }
  .dashboard-page #products-table tbody, .dashboard-page #products-table tr, .dashboard-page #products-table td { display:block; width:100% !important; max-width:none !important; min-width:0 !important; }
  .dashboard-page #products-table tr:not(.group-row) { margin:0 0 12px; border:1px solid var(--c-border); border-radius:var(--radius); background:var(--c-card); overflow:hidden; }
  .dashboard-page #products-table tr:not(.group-row) td { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--c-border); }
  .dashboard-page #products-table tr:not(.group-row) td:last-child { border-bottom:0; }
  .dashboard-page #products-table tr:not(.group-row) td::before { content:attr(data-label); flex:0 0 108px; color:var(--c-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
  .dashboard-page #products-table .row-color-cell::before { content:'' !important; flex-basis:0; }
  .dashboard-page #products-table .product-cell-with-image, .dashboard-page #products-table .note-cell .note-boxes { width:100%; }
  .dashboard-page #products-table .col-actions .btn { width:100%; justify-content:center; }
}


/* ===== FIX 2026-06-29: Dashboard em modo sanfona/proporcional =====
   A tabela NÃO cria largura maior que a tela. Todas as colunas encolhem
   proporcionalmente quando a sidebar ou a janela reduzem a área útil. */
.dashboard-page,
.dashboard-page .dashboard-table-card,
.dashboard-page .dashboard-table-card .card-body,
.dashboard-page .dashboard-table-card .table-wrap {
  max-width: 100% !important;
  min-width: 0 !important;
}
.dashboard-page .dashboard-table-card {
  overflow: hidden !important;
}
.dashboard-page .dashboard-table-card .table-wrap {
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-overflow-scrolling: auto !important;
}
.dashboard-page #products-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.dashboard-page #products-table th,
.dashboard-page #products-table td {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.dashboard-page #products-table .col-select { width: 4.6% !important; min-width: 42px !important; max-width: none !important; }
.dashboard-page #products-table .col-product { width: 18% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-notes { width: 17.5% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-channel { width: 6% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-suppliers { width: 17% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-price { width: 7% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-target { width: 9% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-progress { width: 12% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-cost { width: 8% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-received { width: 10% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-actions { width: 6% !important; min-width: 0 !important; max-width: none !important; }

.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell {
  width: 4.6% !important;
  min-width: 42px !important;
  max-width: none !important;
  overflow: hidden !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.dashboard-page #products-table .row-color-controls {
  min-width: 0 !important;
  width: 100% !important;
  gap: 4px !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
}
.dashboard-page #products-table .row-color-controls .drag-handle { flex: 0 0 12px !important; font-size: 13px !important; }
.dashboard-page #products-table .row-color-controls .color-dot { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; }

.dashboard-page #products-table .product-cell-with-image,
.dashboard-page #products-table .product-info,
.dashboard-page #products-table .product-title-wrap,
.dashboard-page #products-table .progress-wrap,
.dashboard-page #products-table .progress-meta,
.dashboard-page #products-table .hist-chips,
.dashboard-page #products-table .note-cell,
.dashboard-page #products-table .note-cell .note-boxes,
.dashboard-page #products-table .note-cell .note-box,
.dashboard-page #products-table .note-cell .note-box-main,
.dashboard-page #products-table .note-cell .note-box-text,
.dashboard-page #products-table .note-cell .note-text,
.dashboard-page #products-table .supplier-btn,
.dashboard-page #products-table .supplier-btn span,
.dashboard-page #products-table td > div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.dashboard-page #products-table .product-title-wrap,
.dashboard-page #products-table .supplier-btn span,
.dashboard-page #products-table .note-cell,
.dashboard-page #products-table .note-cell * {
  white-space: nowrap !important;
}
.dashboard-page #products-table .product-cell-with-image { display: flex !important; align-items: center !important; gap: 6px !important; }
.dashboard-page #products-table .product-thumb-wrap { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; }
.dashboard-page #products-table .product-thumb { width: 34px !important; height: 34px !important; }
.dashboard-page #products-table .copy-btn { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; }
.dashboard-page #products-table .supplier-btn { padding: 2px 5px !important; gap: 3px !important; }
.dashboard-page #products-table .note-box.product-note {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.dashboard-page #products-table .note-box-main { max-width: calc(100% - 34px) !important; }
.dashboard-page #products-table .note-box-text { max-width: 100% !important; }
.dashboard-page #products-table .btn-sm { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.dashboard-page #products-table .btn-sm i { flex: 0 0 auto !important; }


/* FIX 2026-06-29b: aproxima Produto/Notas e impede corte do quadradinho da nota */
.dashboard-page #products-table .col-select { width: 4.6% !important; min-width: 42px !important; max-width: none !important; }
.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell { width: 4.6% !important; min-width: 42px !important; }
.dashboard-page #products-table .col-product { width: 18% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-notes { width: 17.5% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-suppliers { width: 17% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .col-actions { width: 6% !important; min-width: 0 !important; max-width: none !important; }
.dashboard-page #products-table .note-cell { padding-left: 4px !important; padding-right: 8px !important; }
.dashboard-page #products-table .note-cell .note-boxes { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
.dashboard-page #products-table .note-box.product-note {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 2px !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .note-box-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.dashboard-page #products-table .note-box-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  overflow: visible !important;
}
.dashboard-page #products-table .note-color-btn,
.dashboard-page #products-table .note-delete-btn {
  flex: 0 0 auto !important;
  min-width: 18px !important;
  overflow: visible !important;
}

/* Se a tela ficar pequena demais, aí sim vira card. Antes disso, fica sanfona. */
@media (max-width: 520px) {
  .dashboard-page .dashboard-table-card { overflow: visible !important; }
  .dashboard-page .dashboard-table-card .table-wrap { overflow-x: visible !important; }
  .dashboard-page #products-table { display: block !important; width: 100% !important; }
  .dashboard-page #products-table thead { display: none !important; }
  .dashboard-page #products-table tbody,
  .dashboard-page #products-table tr,
  .dashboard-page #products-table td { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
  .dashboard-page #products-table tr:not(.group-row) { margin: 0 0 12px !important; border: 1px solid var(--c-border) !important; border-radius: var(--radius) !important; background: var(--c-card) !important; overflow: hidden !important; }
  .dashboard-page #products-table tr:not(.group-row) td { display: flex !important; gap: 10px !important; align-items: flex-start !important; justify-content: space-between !important; padding: 10px 12px !important; border-bottom: 1px solid var(--c-border) !important; }
  .dashboard-page #products-table tr:not(.group-row) td:last-child { border-bottom: 0 !important; }
  .dashboard-page #products-table tr:not(.group-row) td::before { content: attr(data-label) !important; flex: 0 0 108px !important; color: var(--c-muted) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
  .dashboard-page #products-table .row-color-cell::before { content: '' !important; flex-basis: 0 !important; }
}

/* FIX 2026-06-29c: no Dashboard, o zoom da imagem do produto não pode ser cortado pela célula/linha. */
.dashboard-page #products-table td.product-column-cell,
.dashboard-page #products-table td.col-product,
.dashboard-page #products-table .product-column-cell,
.dashboard-page #products-table .product-cell-with-image,
.dashboard-page #products-table .product-thumb-wrap {
  overflow: visible !important;
  position: relative !important;
}
.dashboard-page #products-table .product-info,
.dashboard-page #products-table .product-title-wrap {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.dashboard-page #products-table .product-thumb-zoom {
  z-index: 99999 !important;
  left: 42px !important;
  top: -80px !important;
  width: 315px !important;
  min-height: 315px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.dashboard-page #products-table .product-thumb-zoom img {
  width: 100% !important;
  height: 285px !important;
  object-fit: contain !important;
}
.dashboard-page #products-table .product-thumb-wrap:hover .product-thumb-zoom {
  display: block !important;
}


/* FIX: texto do sistema abaixo da logo, separado da imagem para futura tradução */
.sidebar-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 36px 14px 10px !important;
}

.sidebar-logo-box {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1px !important;
}

.sidebar-logo-box img {
  height: 34px !important;
  display: block !important;
}

.sidebar-logo .sidebar-sub {
  display: block !important;
  margin-top: 1px !important;
  max-width: 178px !important;
  text-align: center !important;
  line-height: 1.08 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--c-muted) !important;
}
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  display: block !important;
}
.sidebar-logo .sidebar-sub .line-bottom {
  margin-top: 1px !important;
}


/* FIX: subtítulo abaixo da logo com a mesma cor do Dashboard */
.sidebar-logo .sidebar-sub,
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  color: var(--c-accent) !important;
}
.sidebar-logo .sidebar-sub {
  margin-top: 0 !important;
  line-height: 1.05 !important;
}
.sidebar-logo-box {
  margin-bottom: 0 !important;
}

/* FIX: somente a primeira coluna do Dashboard, para o botão de cor não ficar atrás da imagem */
.dashboard-page #products-table .col-select,
.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding-left: 5px !important;
  padding-right: 4px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
}
.dashboard-page #products-table .row-color-controls {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 30 !important;
}
.dashboard-page #products-table .row-color-controls .bulk-product-check {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}
.dashboard-page #products-table .row-color-controls .drag-handle {
  flex: 0 0 10px !important;
  width: 10px !important;
  min-width: 10px !important;
  font-size: 12px !important;
}
.dashboard-page #products-table .row-color-controls .color-dot {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  display: inline-block !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 35 !important;
  cursor: pointer !important;
}


/* FIX: subtítulo da logo com mesma cor do Dashboard */
.sidebar-logo .sidebar-sub,
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  color: var(--c-accent) !important;
}


/* FIX: cards globais agora são 4 */
.global-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .global-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .global-kpi-grid { display:flex !important; min-width:max-content !important; } }


/* AJUSTE: no Dashboard, a barra de busca/filtros fica fixa junto com os cards */
.dashboard-sticky-panel {
  top: calc(var(--topbar-h) + var(--global-kpi-h)) !important;
  transition: none !important;
}
body.scroll-down .dashboard-sticky-panel {
  top: var(--global-kpi-h) !important;
  padding-top: 14px !important;
}
.dashboard-sticky-panel .filter-bar {
  position: sticky;
  top: inherit;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
  pointer-events: auto !important;
  transition: none !important;
}
body.scroll-down .dashboard-sticky-panel .filter-bar {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
  pointer-events: auto !important;
}

/* AJUSTE: reduzir tremidas das barras fixas ao rolar */
.topbar,
.global-kpi-shell,
.dashboard-sticky-panel,
.page-content > .filter-bar {
  transition: none !important;
  will-change: auto !important;
}

/* AJUSTE: texto da logo e menu ativo com mesma cor do título 'Dashboard de compras' */
.sidebar-logo .sidebar-sub,
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  color: var(--c-text) !important;
}
.nav-link.active,
.nav-link.active i,
.nav-link.active .ti {
  color: var(--c-text) !important;
}

/* Busca automática de produtos/ASIN */
.product-search-wrap {
  position: relative;
  min-width: 220px;
  flex: 1 1 220px;
}
.product-search-wrap > input.form-control {
  width: 100%;
}
.product-suggest-box {
  position: absolute;
  z-index: 999999;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
  padding: 8px;
}
.product-suggest-title {
  padding: 6px 8px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}
.product-suggest-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.product-suggest-item:hover {
  background: var(--c-bg);
}
.product-suggest-img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-suggest-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-suggest-placeholder {
  color: var(--c-muted);
  font-size: 16px;
}
.product-suggest-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.product-suggest-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-suggest-meta {
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-suggest-empty {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--c-muted);
}
@media (max-width: 760px) {
  .product-suggest-box {
    min-width: min(90vw, 360px);
  }
}

.dashboard-detail-section-title {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}

/* FIX 2026-06-30: mais espaço para Produto, Notas com até 2 linhas e números mais compactos. */
.dashboard-page #products-table th,
.dashboard-page #products-table td {
  vertical-align: middle !important;
}
.dashboard-page #products-table .col-product {
  width: 21.5% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.dashboard-page #products-table .col-notes {
  width: 13.5% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.dashboard-page #products-table .col-suppliers {
  width: 11% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.dashboard-page #products-table .col-price,
.dashboard-page #products-table td.col-price,
.dashboard-page #products-table th.col-price {
  width: 4.8% !important;
  min-width: 56px !important;
  max-width: 78px !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-left: 3px !important;
  padding-right: 5px !important;
}
.dashboard-page #products-table .col-channel { width: 4.6% !important; }
.dashboard-page #products-table .col-target { width: 7% !important; }
.dashboard-page #products-table .col-progress { width: 11% !important; }
.dashboard-page #products-table .col-cost { width: 7% !important; }
.dashboard-page #products-table .col-received { width: 8.4% !important; }
.dashboard-page #products-table .col-actions { width: 7.2% !important; min-width: 78px !important; }

.dashboard-page #products-table .product-cell-with-image {
  gap: 5px !important;
}
.dashboard-page #products-table .product-info {
  min-width: 0 !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .product-title-wrap {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.22 !important;
  max-height: 2.44em !important;
  overflow-wrap: anywhere !important;
}
.dashboard-page #products-table .product-asin-wrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.dashboard-page #products-table .col-suppliers .supplier-btn span {
  max-width: 72px !important;
}
.dashboard-page #products-table .supplier-btn {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.dashboard-page #products-table .note-cell {
  white-space: normal !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.dashboard-page #products-table .note-cell .note-boxes {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .note-cell .note-box.product-note {
  height: auto !important;
  min-height: 28px !important;
  max-height: 46px !important;
  white-space: normal !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .note-cell .note-box-main {
  align-items: flex-start !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  padding-top: 2px !important;
}
.dashboard-page #products-table .note-cell .note-box-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-height: 34px !important;
  line-height: 16px !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.dashboard-page #products-table .note-cell .note-box-actions {
  align-items: center !important;
  flex: 0 0 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

@media (max-width: 1280px) {
  .dashboard-page #products-table .col-product { width: 19.5% !important; }
  .dashboard-page #products-table .col-notes { width: 12.5% !important; }
  .dashboard-page #products-table .col-suppliers { width: 10.5% !important; }
  .dashboard-page #products-table .col-price { width: 4.8% !important; min-width: 52px !important; }
  .dashboard-page #products-table .col-actions { width: 8.2% !important; }
  .dashboard-page #products-table .col-suppliers .supplier-btn span { max-width: 60px !important; }
  .dashboard-page #products-table .product-cell-with-image { gap: 4px !important; }
}
@media (max-width: 1100px) {
  .dashboard-page #products-table { font-size: 10.8px !important; }
  .dashboard-page #products-table th,
  .dashboard-page #products-table td { padding-left: 4px !important; padding-right: 4px !important; }
  .dashboard-page #products-table .col-product { width: 18% !important; }
  .dashboard-page #products-table .col-notes { width: 12% !important; }
  .dashboard-page #products-table .col-suppliers { width: 10% !important; }
  .dashboard-page #products-table .col-price { width: 4.8% !important; min-width: 50px !important; }
  .dashboard-page #products-table .product-thumb-wrap { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  .dashboard-page #products-table .product-thumb { width: 28px !important; height: 28px !important; }
  .dashboard-toggle-btn { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
}

/* FIX 2026-06-30b: impede o Dashboard de passar para fora da tela quando a janela diminui. */
html, body, .layout {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.main {
  width: calc(100vw - var(--sidebar-w)) !important;
  max-width: calc(100vw - var(--sidebar-w)) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
html.sidebar-collapsed .main {
  width: 100vw !important;
  max-width: 100vw !important;
}
html.sidebar-auto:not(.sidebar-collapsed) .main,
html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .main {
  width: calc(100vw - 14px) !important;
  max-width: calc(100vw - 14px) !important;
}
@supports selector(html:has(.sidebar:hover)) {
  html.sidebar-auto:not(.sidebar-collapsed):has(.sidebar:hover) .main {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
  }
}
.page-content,
.topbar,
.global-kpi-shell,
.dashboard-sticky-panel,
.dashboard-page,
.dashboard-page .dashboard-table-card,
.dashboard-page .dashboard-table-card .table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Mantém a coluna da direita dentro da tela e evita o botão + Compra ser cortado. */
.dashboard-page .dashboard-table-card {
  overflow: hidden !important;
}
.dashboard-page .dashboard-table-card .table-wrap {
  width: 100% !important;
  overflow-x: hidden !important;
  padding-right: 2px !important;
}
.dashboard-page #products-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
.dashboard-page #products-table .col-select,
.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell { width: 4.2% !important; min-width: 38px !important; }
.dashboard-page #products-table .col-product { width: 21.5% !important; }
.dashboard-page #products-table .col-notes { width: 13% !important; }
.dashboard-page #products-table .col-channel { width: 4.4% !important; }
.dashboard-page #products-table .col-suppliers { width: 10.5% !important; }
.dashboard-page #products-table .col-price { width: 4.6% !important; min-width: 48px !important; max-width: none !important; }
.dashboard-page #products-table .col-target { width: 6.8% !important; }
.dashboard-page #products-table .col-progress { width: 10.7% !important; }
.dashboard-page #products-table .col-cost { width: 6.7% !important; }
.dashboard-page #products-table .col-received { width: 8.4% !important; }
.dashboard-page #products-table .col-actions,
.dashboard-page #products-table td.col-actions,
.dashboard-page #products-table th.col-actions {
  width: 9.2% !important;
  min-width: 76px !important;
  max-width: none !important;
  overflow: hidden !important;
  padding-left: 4px !important;
  padding-right: 6px !important;
}
.dashboard-page #products-table .col-actions > div {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .col-actions .btn-sm {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  padding: 4px 5px !important;
  gap: 3px !important;
  font-size: 11.5px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.dashboard-page #products-table .col-actions .btn-sm i {
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

@media (max-width: 1280px) {
  .dashboard-page #products-table th,
  .dashboard-page #products-table td { padding-left: 4px !important; padding-right: 4px !important; }
  .dashboard-page #products-table .col-product { width: 20% !important; }
  .dashboard-page #products-table .col-notes { width: 12% !important; }
  .dashboard-page #products-table .col-suppliers { width: 9.8% !important; }
  .dashboard-page #products-table .col-actions { width: 10.2% !important; min-width: 78px !important; }
  .dashboard-page #products-table .col-actions .btn-sm { padding-left: 4px !important; padding-right: 4px !important; font-size: 11px !important; }
}
@media (max-width: 1100px) {
  .dashboard-page #products-table th,
  .dashboard-page #products-table td { padding-left: 3px !important; padding-right: 3px !important; }
  .dashboard-page #products-table .col-product { width: 19% !important; }
  .dashboard-page #products-table .col-notes { width: 11.5% !important; }
  .dashboard-page #products-table .col-suppliers { width: 9.2% !important; }
  .dashboard-page #products-table .col-actions { width: 10.8% !important; min-width: 78px !important; }
  .dashboard-page #products-table .col-actions .btn-sm { font-size: 10.8px !important; }
}
@media (max-width: 900px) {
  .main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }
}



/* FIX 2026-06-30: Dashboard - nova coluna Últimos recebimentos no lugar de Recebido/Trânsito. */
.dashboard-page #products-table .col-last-receipts {
  width: 14% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
.dashboard-page #products-table .dash-receipt-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  max-height: 44px !important;
  overflow: hidden !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}
.dashboard-page #products-table .dash-receipt-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 20px !important;
  max-width: 100% !important;
  padding: 2px 5px !important;
  border-radius: 5px !important;
  border: 1px solid var(--c-success) !important;
  background: var(--c-success-bg) !important;
  color: var(--c-success) !important;
  font-size: 10.5px !important;
  line-height: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.dashboard-page #products-table .dash-receipt-chip i {
  font-size: 10px !important;
  flex: 0 0 auto !important;
}
.dashboard-page #products-table .dash-receipt-chip strong {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}
.dashboard-page #products-table .dash-receipt-more {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  padding: 2px 3px !important;
  color: var(--c-muted) !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
}
.dashboard-page #products-table .col-select,
.dashboard-page #products-table .row-color-header,
.dashboard-page #products-table .row-color-cell { width: 4.2% !important; min-width: 38px !important; }
.dashboard-page #products-table .col-product { width: 20% !important; }
.dashboard-page #products-table .col-channel { width: 4.2% !important; }
.dashboard-page #products-table .col-suppliers { width: 10.2% !important; }
.dashboard-page #products-table .col-price { width: 4.4% !important; min-width: 46px !important; }
.dashboard-page #products-table .col-target { width: 6.6% !important; }
.dashboard-page #products-table .col-progress { width: 10.3% !important; }
.dashboard-page #products-table .col-cost { width: 6.4% !important; }
.dashboard-page #products-table .col-notes { width: 12% !important; }
.dashboard-page #products-table .col-actions,
.dashboard-page #products-table td.col-actions,
.dashboard-page #products-table th.col-actions {
  width: 7.7% !important;
  min-width: 68px !important;
  padding-left: 3px !important;
  padding-right: 4px !important;
}
.dashboard-page #products-table .col-actions .btn-sm {
  padding: 4px 4px !important;
  font-size: 10.8px !important;
  gap: 2px !important;
}
@media (max-width: 1280px) {
  .dashboard-page #products-table .col-product { width: 19.2% !important; }
  .dashboard-page #products-table .col-notes { width: 11.2% !important; }
  .dashboard-page #products-table .col-suppliers { width: 9.8% !important; }
  .dashboard-page #products-table .col-last-receipts { width: 14.8% !important; }
  .dashboard-page #products-table .col-actions { width: 7.9% !important; min-width: 66px !important; }
  .dashboard-page #products-table .dash-receipt-chip { padding-left: 4px !important; padding-right: 4px !important; }
}
@media (max-width: 1100px) {
  .dashboard-page #products-table .col-product { width: 18.5% !important; }
  .dashboard-page #products-table .col-notes { width: 10.7% !important; }
  .dashboard-page #products-table .col-last-receipts { width: 15.6% !important; }
  .dashboard-page #products-table .col-actions { width: 8.1% !important; min-width: 64px !important; }
  .dashboard-page #products-table .col-actions .btn-sm { font-size: 10.2px !important; }
}

/* FIX 2026-06-30d: Dashboard mobile em cards, sem alterar desktop. */
@media (max-width: 760px) {
  html, body, .layout, .main, .page-content, .dashboard-page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .dashboard-page .dashboard-table-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .dashboard-page .dashboard-table-card .card-body,
  .dashboard-page .dashboard-table-card .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .dashboard-page #products-table,
  .dashboard-page #products-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    font-size: 13px !important;
  }
  .dashboard-page #products-table thead {
    display: none !important;
  }

  .dashboard-page #products-table tr.group-row {
    display: block !important;
    width: 100% !important;
    margin: 16px 0 6px !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dashboard-page #products-table tr.group-row td {
    display: block !important;
    width: 100% !important;
    padding: 8px 4px 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--c-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
  .dashboard-page #products-table tr.group-row td::before {
    display: none !important;
    content: none !important;
  }

  .dashboard-page #products-table tr.dashboard-product-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 16px !important;
    background: var(--c-card) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
  }
  .dashboard-page #products-table tr.dashboard-product-row:hover {
    background: var(--c-card) !important;
  }

  .dashboard-page #products-table tr.dashboard-product-row td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 9px 13px !important;
    border-bottom: 1px solid var(--c-border) !important;
    text-align: left !important;
    overflow: visible !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  .dashboard-page #products-table tr.dashboard-product-row td:last-child {
    border-bottom: 0 !important;
  }
  .dashboard-page #products-table tr.dashboard-product-row td::before {
    content: attr(data-label) !important;
    display: block !important;
    color: var(--c-muted) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding-top: 2px !important;
  }

  /* No celular não mostra a linha grande de seleção/cor. */
  .dashboard-page #products-table tr.dashboard-product-row .row-color-cell {
    display: none !important;
  }

  /* Produto vira o cabeçalho do card. */
  .dashboard-page #products-table tr.dashboard-product-row .product-column-cell {
    display: block !important;
    width: 100% !important;
    padding: 13px !important;
    border-bottom: 1px solid var(--c-border) !important;
  }
  .dashboard-page #products-table tr.dashboard-product-row .product-column-cell::before {
    display: none !important;
    content: none !important;
  }
  .dashboard-page #products-table .product-cell-with-image {
    display: grid !important;
    grid-template-columns: 24px 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .dashboard-toggle-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-basis: 24px !important;
  }
  .dashboard-page #products-table .product-thumb-wrap,
  .dashboard-page #products-table .product-thumb,
  .dashboard-page #products-table .product-thumb img,
  .dashboard-page #products-table .product-thumb-img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    flex-basis: 52px !important;
  }
  .dashboard-page #products-table .product-thumb-zoom {
    display: none !important;
  }
  .dashboard-page #products-table .product-info,
  .dashboard-page #products-table .product-title-wrap,
  .dashboard-page #products-table .product-asin-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .dashboard-page #products-table .product-title-wrap {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    max-height: 2.5em !important;
  }
  .dashboard-page #products-table .product-asin-wrap {
    margin-top: 3px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .dashboard-page #products-table .col-channel,
  .dashboard-page #products-table .col-price,
  .dashboard-page #products-table .col-target,
  .dashboard-page #products-table .col-progress,
  .dashboard-page #products-table .col-cost,
  .dashboard-page #products-table .col-last-receipts,
  .dashboard-page #products-table .col-notes,
  .dashboard-page #products-table .col-suppliers,
  .dashboard-page #products-table .col-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-page #products-table .col-price,
  .dashboard-page #products-table .col-target,
  .dashboard-page #products-table .col-cost {
    text-align: left !important;
  }
  .dashboard-page #products-table .col-suppliers > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .supplier-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 7px !important;
  }
  .dashboard-page #products-table .supplier-btn span {
    max-width: none !important;
    white-space: nowrap !important;
  }
  .dashboard-page #products-table .copy-btn,
  .dashboard-page #products-table .asin-copy-btn {
    flex: 0 0 auto !important;
  }

  .dashboard-page #products-table .progress-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
  }
  .dashboard-page #products-table .progress-meta,
  .dashboard-page #products-table .hist-chips {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .hist-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .dashboard-page #products-table .dash-receipt-chips {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .dash-receipt-chip,
  .dashboard-page #products-table .dash-receipt-more {
    height: 22px !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
  }

  .dashboard-page #products-table .note-cell,
  .dashboard-page #products-table .note-cell * {
    white-space: normal !important;
  }
  .dashboard-page #products-table .note-cell .note-boxes {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .note-cell .note-box.product-note {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 30px !important;
    max-height: 48px !important;
  }

  .dashboard-page #products-table .col-actions {
    display: block !important;
    padding: 12px 13px !important;
  }
  .dashboard-page #products-table .col-actions::before {
    display: none !important;
    content: none !important;
  }
  .dashboard-page #products-table .col-actions > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .col-actions .btn-sm {
    width: 100% !important;
    min-height: 34px !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  /* Detalhe aberto: no celular vira card logo abaixo do produto. */
  .dashboard-page #products-table tr.dashboard-detail-row[style*="table-row"] {
    display: block !important;
    width: 100% !important;
    margin: -4px 0 14px !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dashboard-page #products-table tr.dashboard-detail-row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dashboard-page #products-table tr.dashboard-detail-row > td::before {
    display: none !important;
    content: none !important;
  }
  .dashboard-detail-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
  .dashboard-detail-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .dashboard-detail-head .btn {
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    white-space: nowrap !important;
  }
  .dashboard-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .dashboard-detail-kpi {
    min-width: 0 !important;
    padding: 10px !important;
  }
  .dashboard-detail-kpi strong {
    font-size: 14px !important;
  }
  .dashboard-detail-table-wrap {
    overflow: visible !important;
  }
  .dashboard-detail-table,
  .dashboard-detail-table tbody,
  .dashboard-detail-table tr,
  .dashboard-detail-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .dashboard-detail-table thead {
    display: none !important;
  }
  .dashboard-detail-table tr {
    border: 1px solid var(--c-border) !important;
    border-radius: 12px !important;
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    background: var(--c-bg) !important;
    overflow: hidden !important;
  }
  .dashboard-detail-table td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    border: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .dashboard-detail-table td::before {
    color: var(--c-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }
  .dashboard-detail-table td:nth-child(1)::before { content: 'Data compra' !important; }
  .dashboard-detail-table td:nth-child(2)::before { content: 'Comprado' !important; }
  .dashboard-detail-table td:nth-child(3)::before { content: 'Recebido' !important; }
  .dashboard-detail-table td:nth-child(4)::before { content: 'Cancelado' !important; }
  .dashboard-detail-table td:nth-child(5)::before { content: 'Falta chegar' !important; }
  .dashboard-detail-table td:nth-child(6)::before { content: 'Observação' !important; }
}

@media (max-width: 420px) {
  .dashboard-page #products-table tr.dashboard-product-row td,
  .dashboard-detail-table td {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
  .dashboard-page #products-table .product-cell-with-image {
    grid-template-columns: 22px 48px minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  .dashboard-page #products-table .product-thumb-wrap,
  .dashboard-page #products-table .product-thumb,
  .dashboard-page #products-table .product-thumb img,
  .dashboard-page #products-table .product-thumb-img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-basis: 48px !important;
  }
  .dashboard-detail-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* FIX 2026-06-30e: ajustes apenas no celular.
   - remove o espaço grande antes da busca
   - mantém os detalhes do produto fechados por padrão no mobile
   - evita o filtro ficar preso/empurrado pelo sticky no celular */
@media (max-width: 760px) {
  .dashboard-page .dashboard-sticky-panel {
    position: static !important;
    top: auto !important;
    margin: 6px 0 12px !important;
    padding: 8px 0 10px !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: none !important;
    background: var(--c-bg) !important;
  }
  body.scroll-down .dashboard-page .dashboard-sticky-panel {
    top: auto !important;
    padding-top: 8px !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  .dashboard-page .dashboard-sticky-panel .tabs {
    margin-top: 2px !important;
  }
  .dashboard-page #products-table tr.dashboard-detail-row:not([style*="table-row"]) {
    display: none !important;
  }
}


/* FIX 2026-06-30f: barra fixa no desktop como na versão correta.
   Mantém o layout horizontal e evita overflow em ancestrais que quebram position: sticky. */
@media (min-width: 761px) {
  html, body, .layout, .main, .page-content {
    overflow-x: visible !important;
  }
  body {
    overflow-y: auto !important;
  }
  .main {
    min-width: 0 !important;
    max-width: calc(100vw - var(--sidebar-w)) !important;
  }
  html.sidebar-collapsed .main {
    max-width: 100vw !important;
  }
  html.sidebar-auto:not(.sidebar-collapsed) .main,
  html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .main {
    max-width: calc(100vw - 14px) !important;
  }
  @supports selector(html:has(.sidebar:hover)) {
    html.sidebar-auto:not(.sidebar-collapsed):has(.sidebar:hover) .main {
      max-width: calc(100vw - 14px) !important;
    }
  }

  .global-kpi-shell {
    position: sticky !important;
    top: var(--topbar-h) !important;
    z-index: 48 !important;
    background: var(--c-bg) !important;
  }
  body.scroll-down .global-kpi-shell {
    top: 0 !important;
  }

  .page-content > .filter-bar {
    position: sticky !important;
    top: calc(var(--topbar-h) + var(--global-kpi-h) + 6px) !important;
    z-index: 47 !important;
    background: var(--c-bg) !important;
    padding: 8px 0 10px !important;
    margin-top: -4px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.scroll-down .page-content > .filter-bar {
    top: calc(var(--global-kpi-h) + 6px) !important;
  }

  .dashboard-page .dashboard-sticky-panel {
    position: sticky !important;
    top: calc(var(--topbar-h) + var(--global-kpi-h)) !important;
    z-index: 47 !important;
    background: var(--c-bg) !important;
    padding: 14px 0 10px !important;
    margin: -20px 0 14px !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05) !important;
  }
  body.scroll-down .dashboard-page .dashboard-sticky-panel {
    top: var(--global-kpi-h) !important;
    padding-top: 14px !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* As áreas largas abaixo continuam dentro da tela, sem interferir no sticky. */
  .dashboard-page .dashboard-table-card,
  .dashboard-page .dashboard-table-card .table-wrap {
    overflow-x: hidden !important;
  }
}

/* FIX 2026-06-30g: varredura da barra fixa.
   O erro que quebrava o sticky era overflow-x:hidden em ancestrais da barra.
   No desktop, nenhum ancestral da barra pode criar scroll-container. */
@media (min-width: 761px) {
  html,
  body,
  .layout,
  .main,
  .page-content {
    overflow-x: visible !important;
  }
  .main {
    overflow: visible !important;
    min-width: 0 !important;
    width: calc(100vw - var(--sidebar-w)) !important;
    max-width: calc(100vw - var(--sidebar-w)) !important;
  }
  html.sidebar-collapsed .main {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  html.sidebar-auto:not(.sidebar-collapsed) .main,
  html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .main {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
  }
  @supports selector(html:has(.sidebar:hover)) {
    html.sidebar-auto:not(.sidebar-collapsed):has(.sidebar:hover) .main {
      width: calc(100vw - 14px) !important;
      max-width: calc(100vw - 14px) !important;
    }
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 130 !important;
  }
  .global-kpi-shell {
    position: sticky !important;
    top: var(--topbar-h) !important;
    z-index: 120 !important;
    background: var(--c-bg) !important;
  }
  body.scroll-down .global-kpi-shell {
    top: 0 !important;
  }

  /* Páginas normais: Produtos, Compras, Recebimentos, Relatório etc. */
  .page-content > .filter-bar {
    position: sticky !important;
    top: calc(var(--topbar-h) + var(--global-kpi-h) + 6px) !important;
    z-index: 110 !important;
    background: var(--c-bg) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 10px !important;
    margin-top: -4px !important;
    margin-bottom: 14px !important;
  }
  body.scroll-down .page-content > .filter-bar {
    top: calc(var(--global-kpi-h) + 6px) !important;
  }
  .page-content > .filter-bar input[type="text"] {
    flex: 1 1 380px !important;
    min-width: 220px !important;
    width: auto !important;
  }
  .page-content > .filter-bar select.form-control,
  .page-content > .filter-bar select {
    flex: 0 1 180px !important;
    min-width: 145px !important;
    width: auto !important;
  }
  .page-content > .filter-bar .btn,
  .page-content > .filter-bar button,
  .page-content > .filter-bar a.btn {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Dashboard: painel com busca/filtros + abas fica fixo abaixo dos cards globais. */
  .dashboard-page .dashboard-sticky-panel {
    position: sticky !important;
    top: calc(var(--topbar-h) + var(--global-kpi-h)) !important;
    z-index: 110 !important;
    background: var(--c-bg) !important;
    padding: 14px 0 10px !important;
    margin: -20px 0 14px !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05) !important;
  }
  body.scroll-down .dashboard-page .dashboard-sticky-panel {
    top: var(--global-kpi-h) !important;
    padding-top: 14px !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"] {
    flex: 1 1 420px !important;
    min-width: 260px !important;
    width: auto !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar select {
    flex: 0 1 170px !important;
    min-width: 140px !important;
    width: auto !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar .btn,
  .dashboard-page .dashboard-sticky-panel .filter-bar button,
  .dashboard-page .dashboard-sticky-panel .filter-bar a.btn {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* As áreas de tabela podem cortar/rolar; elas não são ancestrais da barra fixa. */
  .dashboard-page .dashboard-table-card,
  .dashboard-page .dashboard-table-card .table-wrap,
  .products-page .card,
  .products-page .table-wrap,
  .purchase-table-wrap,
  .purchase-table-wrap .table-wrap,
  .receiving-table-wrap,
  .receiving-table-wrap .table-wrap {
    max-width: 100% !important;
  }
}

/* Em telas pequenas/notebook estreito, mantém responsivo sem transformar em linhas enormes. */
@media (min-width: 761px) and (max-width: 1280px) {
  .page-content > .filter-bar input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"] {
    flex-basis: 320px !important;
    min-width: 220px !important;
  }
  .page-content > .filter-bar select.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  .page-content > .filter-bar select,
  .dashboard-page .dashboard-sticky-panel .filter-bar select {
    flex-basis: 150px !important;
    min-width: 128px !important;
  }
}



/* FIX 2026-06-30i: título compacto nos últimos recebimentos e Meta bloqueada sem corte. */
@media (min-width: 761px) {
  .dashboard-page #products-table .col-last-receipts {
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .dashboard-page #products-table .dash-receipts-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .dashboard-page #products-table .dash-receipts-title {
    display: block !important;
    margin: 0 0 3px 0 !important;
    color: var(--c-success) !important;
    font-size: 10.5px !important;
    line-height: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dashboard-page #products-table .dash-receipts-block .dash-receipt-chips {
    margin-top: 0 !important;
    max-height: 44px !important;
  }
  .dashboard-page #products-table .col-target {
    width: 7.3% !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .dashboard-page #products-table .col-progress {
    width: 9.6% !important;
  }
  .dashboard-page #products-table .btn-meta-blocked {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}
@media (max-width: 1280px) and (min-width: 761px) {
  .dashboard-page #products-table .col-target { width: 7.6% !important; }
  .dashboard-page #products-table .col-progress { width: 9.3% !important; }
  .dashboard-page #products-table .btn-meta-blocked { font-size: 14px !important; padding-left: 6px !important; padding-right: 6px !important; }
}
@media (max-width: 760px) {
  .dashboard-page #products-table .dash-receipts-title {
    display: none !important;
  }
}


/* FIX 2026-06-30j: aproximar filtros da busca no desktop.
   Remove o crescimento excessivo do campo de busca para os selects ficarem logo ao lado. */
@media (min-width: 761px) {
  .page-content > .filter-bar,
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    justify-content: flex-start !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  .page-content > .filter-bar input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"],
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"] {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 240px !important;
    max-width: 320px !important;
  }

  .page-content > .filter-bar select.form-control,
  .page-content > .filter-bar select,
  .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar select,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select {
    flex: 0 0 170px !important;
    width: 170px !important;
    min-width: 140px !important;
    max-width: 190px !important;
  }

  .page-content > .filter-bar .btn,
  .page-content > .filter-bar button,
  .page-content > .filter-bar a.btn,
  .dashboard-page .dashboard-sticky-panel .filter-bar .btn,
  .dashboard-page .dashboard-sticky-panel .filter-bar button,
  .dashboard-page .dashboard-sticky-panel .filter-bar a.btn,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar .btn,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar button,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar a.btn {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .page-content > .filter-bar input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"],
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar input[type="text"] {
    flex-basis: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }
  .page-content > .filter-bar select.form-control,
  .page-content > .filter-bar select,
  .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar select,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select {
    flex-basis: 150px !important;
    width: 150px !important;
    max-width: 170px !important;
  }
}

/* FIX 2026-06-30k: filtros realmente ao lado da busca após o JS criar .product-search-wrap.
   O autocomplete envolve o input em uma div com flex:1; isso empurrava os filtros para a direita.
   Mantém tudo alinhado à esquerda no desktop e preserva o mobile. */
@media (min-width: 761px) {
  .filter-bar,
  .page-content > .filter-bar,
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    justify-content: flex-start !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  .filter-bar .product-search-wrap,
  .page-content > .filter-bar .product-search-wrap,
  .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 240px !important;
    max-width: 320px !important;
  }

  .filter-bar .product-search-wrap > input.form-control,
  .page-content > .filter-bar .product-search-wrap > input.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap > input.form-control,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap > input.form-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .filter-bar > input[type="text"],
  .page-content > .filter-bar > input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"],
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"] {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 240px !important;
    max-width: 320px !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .filter-bar .product-search-wrap,
  .page-content > .filter-bar .product-search-wrap,
  .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap,
  .filter-bar > input[type="text"],
  .page-content > .filter-bar > input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"],
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"] {
    flex-basis: 280px !important;
    width: 280px !important;
    min-width: 220px !important;
    max-width: 280px !important;
  }
}


/* FIX 2026-06-30m: botão de reabrir menu lateral sempre acima da topbar.
   Correção isolada: evita que a flechinha suma quando o menu lateral é recolhido. */
.sidebar-reopen-toggle {
  z-index: 300 !important;
}

/* FIX 2026-06-30n: quando a sidebar estiver recolhida, a flechinha fica ao lado da busca.
   Correção isolada: não altera a lógica, apenas reposiciona o botão e reserva espaço na linha dos filtros no desktop. */
@media (min-width: 761px) {
  html.sidebar-collapsed .sidebar-reopen-toggle {
    top: calc(var(--topbar-h) + var(--global-kpi-h) + 14px) !important;
    left: 20px !important;
    z-index: 300 !important;
  }

  html.sidebar-collapsed body.scroll-down .sidebar-reopen-toggle {
    top: calc(var(--global-kpi-h) + 14px) !important;
  }

  html.sidebar-collapsed .page-content > .filter-bar,
  html.sidebar-collapsed .dashboard-page .dashboard-sticky-panel .filter-bar,
  html.sidebar-collapsed body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    padding-left: 44px !important;
  }
}


/* FIX 2026-06-30o: troca o card de custo da rodada por 2 cards mensais.
   Mantém os cards em uma linha no desktop e ajusta somente quando não couber. */
@media (min-width: 761px) {
  .global-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  :root { --global-kpi-h: 104px; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .global-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  :root { --global-kpi-h: 172px; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  .global-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  :root { --global-kpi-h: 252px; }
}
/* FIX 2026-06-30n: Dashboard - busca/filtros colados aos cards globais.
   Mantém o painel grudado nos cards tanto parado quanto no scroll fixo. */
@media (min-width: 761px) {
  .dashboard-page .dashboard-sticky-panel {
    top: calc(var(--topbar-h) + var(--global-kpi-h) - 1px) !important;
    padding-top: 0 !important;
  }
  body.scroll-down .dashboard-page .dashboard-sticky-panel {
    top: calc(var(--global-kpi-h) - 1px) !important;
    padding-top: 0 !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* FIX 2026-06-30p: mantém a altura dos cards globais estável no scroll.
   Isso evita o espaço/vão entre os cards e a barra do Dashboard. */
body.scroll-down .global-kpi-card {
  padding: 10px 12px !important;
}



/* FIX 2026-06-30q: sticky imediato e sem vão entre cards globais e busca/filtros em todas as páginas */
:root {
  --sticky-under-global-top: calc(var(--topbar-h) + var(--global-kpi-h) - 1px);
  --sticky-under-global-top-scrolled: calc(var(--global-kpi-h) - 1px);
}

body.scroll-down .topbar {
  transform: translateY(calc(-1 * var(--topbar-h))) !important;
}

.global-kpi-shell {
  margin-bottom: 0 !important;
  transition: none !important;
}
body.scroll-down .global-kpi-shell {
  top: 0 !important;
}
body.scroll-down .global-kpi-card {
  padding: 10px 12px !important;
}

@media (min-width: 761px) {
  .page-content.has-sticky-filter {
    padding-top: 0 !important;
  }
  .page-content.has-sticky-filter > .filter-bar {
    position: sticky !important;
    top: var(--sticky-under-global-top) !important;
    z-index: 115 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 10px 0 !important;
    background: var(--c-bg) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
  }
  body.scroll-down .page-content.has-sticky-filter > .filter-bar {
    top: var(--sticky-under-global-top-scrolled) !important;
  }

  .page-content.dashboard-page {
    padding-top: 0 !important;
  }
  .dashboard-page .dashboard-sticky-panel {
    position: sticky !important;
    top: var(--sticky-under-global-top) !important;
    z-index: 115 !important;
    margin: 0 0 14px 0 !important;
    padding: 10px 0 0 !important;
    background: var(--c-bg) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
    transition: none !important;
  }
  body.scroll-down .dashboard-page .dashboard-sticky-panel {
    top: var(--sticky-under-global-top-scrolled) !important;
    padding-top: 10px !important;
  }
  .dashboard-page .dashboard-sticky-panel .filter-bar,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .dashboard-page .dashboard-sticky-panel .tabs {
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  .page-content.has-sticky-filter {
    padding-top: 8px !important;
  }
}

/* AJUSTE: aproxima o subtítulo da logo, mantendo espaçamento uniforme entre as duas linhas */
.sidebar-logo-box {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
}
.sidebar-logo .sidebar-sub {
  margin-top: -2px !important;
  line-height: 1.12 !important;
}
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* AJUSTE: subtítulo da logo com a mesma cor dos itens do menu lateral */
.sidebar-logo .sidebar-sub,
.sidebar-logo .sidebar-sub .line-top,
.sidebar-logo .sidebar-sub .line-bottom {
  color: var(--c-text-soft, var(--c-muted)) !important;
}


/* AJUSTE: meta atual na tabela do Dashboard um pouco maior e azul */
.dashboard-page #products-table .dashboard-target-qty {
  color: var(--c-primary, #2563eb) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}


/* FIX 2026-07-01a: cards globais mais estreitos em monitores menores.
   Mantém os 5 cards em uma linha quando ainda cabe no desktop, sem virar 3+2 cedo demais. */
@media (min-width: 981px) and (max-width: 1320px) {
  .global-kpi-grid {
    grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
    gap: 7px !important;
  }
  .global-kpi-card {
    padding: 9px 10px !important;
    border-radius: 9px !important;
  }
  .global-kpi-card .kpi-label {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .global-kpi-card .kpi-value {
    font-size: 15.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .global-kpi-card .kpi-sub {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
  :root { --global-kpi-h: 92px; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .global-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  :root { --global-kpi-h: 172px; }
}

/* FIX 2026-07-01a: detalhes do Log em visualização amigável, sem JSON cru como padrão. */
.activity-details-panel {
  margin-top: 10px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg);
  padding: 12px;
}
.activity-details-panel + pre {
  margin-top: 10px;
}
.log-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.log-detail-card {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-card);
  padding: 10px 12px;
  min-width: 0;
}
.log-detail-card.wide { grid-column: 1 / -1; }
.log-detail-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 5px;
}
.log-detail-value {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}
.log-detail-value.muted { color: var(--c-muted); font-weight: 500; }
.log-detail-section {
  grid-column: 1 / -1;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
  padding: 10px 12px;
}
.log-detail-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-text);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 8px;
}
.log-detail-table-wrap { overflow-x: auto; }
.log-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.log-detail-table th {
  text-align: left;
  color: var(--c-muted);
  font-size: 10.5px;
  font-weight: 750;
  padding: 7px 8px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.log-detail-table td {
  padding: 8px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.log-detail-table tr:last-child td { border-bottom: 0; }
.log-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--c-border2);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 650;
  background: rgba(37,99,235,.06);
  color: var(--c-accent);
  margin: 2px 3px 2px 0;
}
.log-detail-change {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border);
}
.log-detail-change:last-child { border-bottom: 0; }
.log-detail-change-name {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 750;
  padding-top: 6px;
}
.log-detail-before,
.log-detail-after {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--c-bg);
  min-width: 0;
}
.log-detail-before small,
.log-detail-after small {
  display: block;
  color: var(--c-muted);
  font-size: 9.5px;
  font-weight: 750;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.log-detail-after { border-color: rgba(34,197,94,.35); }
.log-detail-before { border-color: rgba(239,68,68,.22); }
.log-detail-raw summary {
  color: var(--c-muted) !important;
  font-size: 11px !important;
  margin-top: 8px;
}
@media (max-width: 980px) {
  .log-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-detail-change { grid-template-columns: 1fr; }
  .log-detail-change-name { padding-top: 0; }
}
@media (max-width: 640px) {
  .log-detail-grid { grid-template-columns: 1fr; }
  .activity-details-panel { padding: 10px; }
}


/* v12: deixa o botão Salvar meta com hover mais claro e destaca quantidade inválida na compra */
#btn-replace-target:hover,
#btn-update-target:hover {
  background: var(--c-accent-bg) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}
.form-control.input-error {
  border-color: var(--c-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}
.btn:disabled,
.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.invoice-session-section-title{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:#f8fafc;color:#475569;font-size:12px;font-weight:700;border:1px dashed var(--c-border)}
.invoice-pending-invoice-row{background:#fffdf4;border-color:#fde68a}
.invoice-pending-invoice-row .invoice-order-qty-box{gap:6px;align-items:center}
.invoice-pending-invoice-row input[type=checkbox]{opacity:.45;cursor:not-allowed}
.invoice-pending-invoice-row .invoice-order-qty{background:#fff7ed;color:#92400e;font-weight:700}

/* Modal profissional de confirmação */
.neobit-confirm-overlay { z-index: 9000; padding: 16px; }
.neobit-confirm-modal {
  max-width: 460px;
  padding: 24px 24px 18px;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  overflow: visible;
}
.neobit-confirm-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: rgba(37, 99, 235, .10);
  color: var(--c-accent);
  font-size: 24px;
}
.neobit-confirm-modal .modal-title {
  margin: 0 34px 8px 0;
  font-size: 18px;
  line-height: 1.25;
}
.neobit-confirm-message {
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 6px;
  white-space: pre-line;
}
.neobit-confirm-actions {
  margin-top: 18px;
  padding-top: 16px;
  gap: 10px;
}
.neobit-confirm-actions .btn {
  min-width: 118px;
  justify-content: center;
}
.neobit-confirm-ok.btn-danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.neobit-confirm-ok.btn-danger:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}
.neobit-confirm-ok.btn-primary:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}
@media(max-width:640px){
  .neobit-confirm-overlay { align-items:center; padding:14px; }
  .neobit-confirm-modal { max-width: calc(100vw - 28px); }
  .neobit-confirm-actions { flex-direction: column-reverse; }
  .neobit-confirm-actions .btn { width: 100%; }
}

/* Meta de compra: botões com quebra em telas menores */
#modal-target .modal-footer { flex-wrap: wrap; }
#btn-remove-target { margin-right: auto; }
@media (max-width: 560px) {
  #modal-target .modal-footer { justify-content: stretch; }
  #modal-target .modal-footer .btn { flex: 1 1 100%; justify-content: center; }
  #btn-remove-target { margin-right: 0; }
}

/* v21: fornecedor sem link válido não abre página nenhuma */
.supplier-btn.is-disabled,
.purchase-supplier-btn.is-disabled,
.receiving-supplier-btn.is-disabled,
.pcc-supplier-link.is-disabled {
  cursor: default !important;
  opacity: .72;
  color: var(--c-muted) !important;
  background: var(--c-bg) !important;
  border-color: var(--c-border) !important;
  pointer-events: none;
}
.supplier-row input[name="supplier_url[]"]::placeholder { color: var(--c-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE APP-STYLE LAYOUT (≤ 760px)
   Tudo aqui só se aplica em telas pequenas.
   Bottom nav fixo, topbar compacto, cards full-width, touch targets ampliados.
═══════════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav { display: none; }
.sidebar-mobile-close { display: none; }
.mobile-filter-toggle { display: none; }

@media (max-width: 900px) {
  /* Layout base — libera a página do sidebar e reserva espaço pro bottom nav */
  body { padding-bottom: 68px; }
  .main { padding: 0 !important; }
  .page-content { padding: 12px 12px 20px !important; }

  /* Filtro colapsável (Invoices e outras páginas com muitos filtros) — escondido por
     padrão no mobile pra não ocupar a tela toda; abre ao tocar no botão "Filtros e busca". */
  .mobile-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
  }
  .mobile-filter-toggle .mobile-filter-caret { transition: transform .18s ease; color: var(--c-muted); }
  .mobile-filter-toggle[aria-expanded="true"] .mobile-filter-caret { transform: rotate(180deg); }
  .mobile-filter-panel { display: none !important; }
  .mobile-filter-panel.mobile-open { display: block !important; }

  /* Topbar compacto (título só, sem subtítulo, sem ações extras) */
  .topbar { padding: 10px 12px !important; position: sticky; top: 0; z-index: 40; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
  .topbar .topbar-title { font-size: 16px !important; font-weight: 700; line-height: 1.15; }
  .topbar .topbar-left > div > div.fs-11 { display: none; }
  /* Reduz botões de ação da topbar a só ícone */
  .topbar .topbar-right .btn { font-size: 0 !important; padding: 8px !important; min-height: 36px; }
  .topbar .topbar-right .btn i { font-size: 16px !important; }
  .mobile-menu-toggle { display: none !important; } /* trocado por bottom-nav menu */

  /* KPIs específicos da página (não os globais) — empilha em 2 colunas com scroll horizontal */
  .page-content > div[style*="grid-template-columns:repeat(4"],
  .page-content div[style*="display:grid"][style*="repeat(4"] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -12px 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .page-content > div[style*="grid-template-columns:repeat(4"]::-webkit-scrollbar,
  .page-content div[style*="display:grid"][style*="repeat(4"]::-webkit-scrollbar { display: none; }
  .page-content > div[style*="grid-template-columns:repeat(4"] > .kpi,
  .page-content div[style*="display:grid"][style*="repeat(4"] > .kpi {
    flex: 0 0 180px !important; scroll-snap-align: start;
    border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }

  /* Sidebar vira drawer full-height quando aberta. Força override de qualquer modo
     desktop (sidebar-auto, sidebar-collapsed, sidebar-peek) que ficou salvo no localStorage,
     senão o mobile mostra uma faixa de 14px da sidebar peakando na esquerda. */
  .sidebar,
  html.sidebar-auto .sidebar,
  html.sidebar-collapsed .sidebar,
  html.sidebar-auto:not(.sidebar-collapsed) .sidebar,
  html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .sidebar {
    width: 82vw !important;
    max-width: 320px !important;
    transform: translateX(-105%) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    position: fixed !important;
  }
  .sidebar.mobile-open,
  html.sidebar-auto .sidebar.mobile-open,
  html.sidebar-collapsed .sidebar.mobile-open,
  html.sidebar-auto:not(.sidebar-collapsed) .sidebar.mobile-open,
  html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  /* Limpa margin-left do main pra qualquer combinação de modos herdada do desktop */
  .main,
  html.sidebar-auto .main,
  html.sidebar-collapsed .main,
  html.sidebar-auto:not(.sidebar-collapsed) .main,
  html.sidebar-auto.sidebar-peek:not(.sidebar-collapsed) .main {
    margin-left: 0 !important;
  }
  /* Esconde helpers de desktop (reopen-toggle, botão recolher) no mobile */
  .sidebar-reopen-toggle,
  html.sidebar-collapsed .sidebar-reopen-toggle,
  .sidebar-toggle-collapse {
    display: none !important;
  }
  /* Botão X pra fechar o drawer no mobile */
  .sidebar-mobile-close {
    display: inline-flex !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
  }
  .sidebar-mobile-close:active { background: var(--c-accent-bg); }
  .sidebar.mobile-open ~ .mobile-sidebar-backdrop { display: block; }
  .mobile-sidebar-backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }

  /* Bottom navigation — 5 tabs estilo app */
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--c-card);
    border-top: 1px solid var(--c-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0)) 4px;
    z-index: 50;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .mbn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--c-muted);
    text-decoration: none;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .15s, background .15s;
    min-height: 52px;
  }
  .mbn-item i { font-size: 22px; }
  .mbn-item span { line-height: 1; letter-spacing: .01em; }
  .mbn-item.active { color: var(--c-accent); }
  .mbn-item.active i { transform: translateY(-1px); }
  .mbn-item:active { background: var(--c-accent-bg); }

  /* KPIs — scroll horizontal com snap suave */
  .global-kpi-shell { padding: 8px 12px !important; }
  .global-kpi-shell::-webkit-scrollbar { display: none; }
  .global-kpi-shell { scrollbar-width: none; scroll-snap-type: x mandatory; }
  .global-kpi-card { scroll-snap-align: start; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
  .global-kpi-card .kpi-label { font-size: 11px !important; }
  .global-kpi-card .kpi-value { font-size: 20px !important; }

  /* Cards do dashboard — full-width empilhados, altura fixa pra caber ~3 produtos */
  #dashboard-tab-painel.is-active { height: auto !important; min-height: 0 !important; gap: 10px !important; }
  .pexec-row { grid-template-columns: 1fr !important; gap: 10px !important; flex: 0 0 auto !important; }
  .pexec-row .pexec-card { height: 320px !important; min-height: 320px !important; max-height: none !important; }
  .pexec-section-title { font-size: 13px !important; margin: 4px 0 2px 4px !important; }

  /* Item do produto no card — touch target ampliado */
  .pexec-item { min-height: 56px !important; padding: 10px 12px !important; grid-template-columns: 40px 1fr auto !important; gap: 12px !important; }
  .pexec-thumb { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
  .pexec-item-main strong { font-size: 13px !important; }
  .pexec-item-main span { font-size: 12px !important; }

  /* Barras de filtro — vira scroll horizontal com snap.
     Importante: desliga o "position:sticky" que a regra global (.page-content > .filter-bar)
     aplica em qualquer largura — no mobile isso sobrepunha o conteúdo abaixo porque o
     cálculo de "top" usa --global-kpi-h, que muda de valor no layout mobile. */
  .filter-bar,
  .page-content > .filter-bar,
  .dashboard-page > .filter-bar,
  .dashboard-sticky-panel .filter-bar,
  .page-content.has-sticky-filter > .filter-bar {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin-top: 0 !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
  }
  .page-content > .filter-bar::after { display: none !important; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex: 0 0 auto; scroll-snap-align: start; }
  .filter-bar .form-control { min-width: 130px; height: 38px; font-size: 13px; }
  .filter-bar .btn { height: 38px; padding: 0 14px; }

  /* Abas do dashboard — pills grandes */
  .dashboard-main-tabs { gap: 6px; padding: 4px !important; background: var(--c-bg); border-radius: 12px; }
  .dashboard-tab { flex: 1; padding: 10px 8px !important; font-size: 13px !important; border-radius: 8px; }

  /* Tabelas genéricas (sem tratamento dedicado) mantêm scroll horizontal como fallback */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
  }
  .table-wrap::-webkit-scrollbar { display: none; }
  .data-table { font-size: 12px; min-width: 640px; }
  .data-table tbody td { padding: 8px 10px !important; }

  /* Histórico de compras: tabela vira cards empilhados usando CSS grid (2 colunas)
     para os campos ficarem sempre alinhados em linhas certinhas. */
  .purchase-table-wrap .table-wrap { overflow: visible; border: 0; background: transparent; }
  .purchase-table { min-width: 0 !important; font-size: 13px; }
  .purchase-table thead { display: none; }
  .purchase-table, .purchase-table tbody { display: block !important; width: 100% !important; }
  .purchase-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
    width: 100% !important;
    background: var(--c-card);
    border: 1px solid var(--c-border) !important;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
  }
  .purchase-table tbody td { display: block !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  /* Data + checkbox no topo do card — ocupa as 2 colunas */
  .purchase-table tbody td[data-primary]:first-child {
    grid-column: 1 / -1;
    padding: 0 0 8px 0 !important; border-bottom: 1px dashed var(--c-border) !important;
    position: static !important;
    display: flex !important; align-items: center; gap: 10px;
  }
  .purchase-table tbody td[data-primary]:first-child input[type="checkbox"] {
    position: static !important;
    transform: none !important;
    width: 18px; height: 18px;
    flex: 0 0 auto;
    margin: 0;
  }
  .purchase-table tbody td[data-primary]:first-child > div { padding-left: 0 !important; }
  /* Produto: ocupa as 2 colunas */
  .purchase-table tbody td[data-primary]:nth-child(2) { grid-column: 1 / -1; }
  /* Campos com rótulo: label acima, valor abaixo — cada um numa célula do grid */
  .purchase-table tbody td[data-label] {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
  }
  .purchase-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--c-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 2px;
    font-weight: 600;
  }
  .purchase-table tbody td[data-label].right { text-align: left !important; }
  /* Notas ocupa a linha toda */
  .purchase-table tbody td[data-label="Notas"] { grid-column: 1 / -1; white-space: normal !important; max-width: none !important; }
  /* Ações no rodapé do card, ocupa as 2 colunas */
  .purchase-table tbody td[data-label="Ações"] {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 10px !important;
    border-top: 1px solid var(--c-border) !important;
  }
  .purchase-table tbody td[data-label="Ações"] > div { justify-content: flex-end; }
  .purchase-table tbody td[data-label="Ações"] .btn { min-width: 40px; justify-content: center; }
  /* Tfoot (linha de total) some no mobile — os totais já estão nos KPIs de cima */
  .purchase-table tfoot { display: none !important; }

  /* Envios FBA: card de shipment empilha (info em cima, ações embaixo em linha própria) */
  .shipment-card { flex-direction: column; align-items: stretch !important; }
  .shipment-meta span { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; margin-bottom: 4px; }
  .shipment-actions { flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border); }
  .shipment-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 90px; }
  .modal-dialog { width: 92% !important; }

  /* Modais — full-screen com bordas arredondadas em cima */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh;
    animation: mobileSheetIn .25s ease-out;
  }
  @keyframes mobileSheetIn { from { transform: translateY(30px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
  .modal-overlay.neobit-confirm-overlay { align-items: center !important; padding: 20px !important; }
  .modal-overlay.neobit-confirm-overlay .modal { border-radius: 16px !important; }

  /* Botões — touch target mínimo 40px */
  .btn { min-height: 38px; padding: 8px 14px; font-size: 13px; }
  .btn.btn-sm { min-height: 32px; }

  /* Sidebar interna: layout um pouco maior por causa do dedo */
  .sidebar .nav-item { padding: 12px 14px; font-size: 14px; }
  .sidebar .nav-subitem { padding: 10px 14px 10px 30px; font-size: 13px; }
}

/* Ajustes de folga extra pra telas muito pequenas (celulares até 400px) */
@media (max-width: 400px) {
  .mbn-item { font-size: 9px; }
  .mbn-item i { font-size: 20px; }
  .global-kpi-card { min-width: 200px; flex-basis: 200px; }
  .pexec-item-main strong { font-size: 12.5px !important; }
  .filter-bar .form-control { min-width: 110px; font-size: 12px; }
}

/* Desktop menor / notebooks: evita overflow horizontal da página inteira
   e faz o dashboard se adaptar melhor quando a área útil encolhe. */
@media (min-width: 761px) and (max-width: 1440px) {
  html, body {
    overflow-x: clip;
  }

  .main,
  .page-content,
  .global-kpi-shell,
  .dashboard-page,
  .dashboard-sticky-panel,
  .dashboard-tab-content {
    min-width: 0;
    max-width: 100%;
  }

  .page-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .global-kpi-shell {
    padding-left: 14px;
    padding-right: 14px;
    overflow-x: clip;
  }

  .global-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root {
    --global-kpi-h: 172px;
  }

  .dashboard-main-tabs,
  .tabs,
  .pexec-row,
  .pcc-grid,
  .pcc-lower-grid {
    min-width: 0;
    max-width: 100%;
  }

  .pexec-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcc-grid,
  .pcc-lower-grid {
    grid-template-columns: 1fr;
  }

  .pcc-table {
    min-width: 0;
  }

  .dashboard-page .dashboard-table-card,
  .dashboard-page .dashboard-table-card .card-body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .dashboard-page .dashboard-table-card .table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
  }

  .filter-bar .product-search-wrap,
  .page-content > .filter-bar .product-search-wrap,
  .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar .product-search-wrap,
  .filter-bar > input[type="text"],
  .page-content > .filter-bar > input[type="text"],
  .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"],
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar > input[type="text"] {
    flex: 1 1 240px !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 100% !important;
  }

  .page-content > .filter-bar select.form-control,
  .page-content > .filter-bar select,
  .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  .dashboard-page .dashboard-sticky-panel .filter-bar select,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select.form-control,
  body.scroll-down .dashboard-page .dashboard-sticky-panel .filter-bar select {
    flex: 1 1 140px !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
  }
}

/* AJUSTE: header do sidebar — logo à esquerda e botão recolher à direita, na mesma linha,
   ambos centralizados na vertical, com mais respiro em cima e embaixo. */
.sidebar-logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-align: left !important;
  padding: 24px 14px !important;
}
.sidebar-logo .sidebar-logo-box {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  padding: 7px 10px !important;   /* simétrico p/ a imagem centralizar com o botão */
}
.sidebar-logo .sidebar-logo-box img {
  height: 30px !important;   /* um pouco menor que os 34px antigos p/ caber ao lado do botão */
  max-width: 100% !important;
}
.sidebar-logo .sidebar-toggle-collapse {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* FIX 2026-07-13: seis KPIs globais em uma única linha no desktop.
   Compacta somente os cards; telas menores continuam usando o layout responsivo. */
@media (min-width: 1181px) {
  .global-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .global-kpi-card {
    min-width: 0 !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
  }
  .global-kpi-card .kpi-label {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .global-kpi-card .kpi-value {
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .global-kpi-card .kpi-sub {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  :root { --global-kpi-h: 92px; }
}