#cer-pro-card .cer-divider { height:1px; background: rgba(17,24,39,0.06); margin: 0 12px; }

.kpi .t .tooltip-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Toasts (top-right, non-blocking) */
#toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
  pointer-events: none; /* let clicks pass except inside the toast */
}

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  background: #0f1020;
  border: 1px solid rgba(124,58,237,0.35);
  border-left: 4px solid #7C3AED;
  color: #e6e6f0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  min-width: 280px;
  max-width: min(420px, 90vw);
  transform: translateY(-6px);
  opacity: 0;
  animation: toast-in 180ms ease-out forwards;
}
.toast-hide {
  animation: toast-out 180ms ease-in forwards;
}
.toast-icon { color: #C4B5FD; margin-top: 2px; }
.toast-title { font-weight: 800; margin-bottom: 4px; color: #ffffff; }
.toast-message { font-size: 14px; line-height: 1.6; color: #e5e7eb; }
.toast-close { background: transparent; border: 0; color: #cbd5e1; font-size: 18px; cursor: pointer; padding: 0 4px; }
.toast-success { border-left-color: #10b981; }
.toast-error { border-left-color: #ef4444; }
.toast-info { border-left-color: #7C3AED; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }

/* CER custom tooltip */
#cer-tooltip {
  position: fixed;
  display: none;
  z-index: 9999;
  min-width: 420px;
  max-width: min(640px, calc(100vw - 24px));
  background: #111827;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(124,58,237,.35);
  max-height: min(80vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: auto; /* allow hover without flicker */
}
#cer-tooltip .tip-title { font-weight: 800; letter-spacing:.2px; color:#e5e7eb; margin-bottom:12px; font-size:20px; }
#cer-tooltip .tip-sep { height:2px; background: linear-gradient(90deg,#7c3aed,transparent); border-radius:2px; margin:12px 0 16px; }
#cer-tooltip .tip-row { margin:12px 0; line-height:1.7; font-size:16px; white-space:pre-line; }
#cer-tooltip .dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#7c3aed; margin-right:10px; vertical-align:middle; }
#cer-tooltip .muted { color:#cbd5e1; }
#cer-tooltip .strong { color:#ffffff; font-weight:700; }
#cer-pro-card .cer-situacao-row { padding:10px 14px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; text-align:center; }
#cer-pro-card .cer-content { padding:10px 14px 14px; }
#cer-pro-card .cer-subtitle { font-weight:800; color:#6b7280; margin:8px 0 10px; letter-spacing:.2px; text-transform:uppercase; font-size:12px; }
#cer-pro-card .cer-panel { background:#0b1220; border:1px solid #30363d; border-radius:10px; padding:12px; color:#e6edf3; }
#cer-pro-card .cer-panel-divider { grid-column:1 / -1; height:1px; background:#30363d; margin:6px 0; }
#cer-pro-card .cascata-box-header { display:flex; align-items:center; gap:8px; padding:12px 14px; font-weight:800; letter-spacing:.3px; color:#3f3f46; }
#cer-pro-card .cascata-box-header i { color:#7c3aed; }
#cer-pro-card .cer-link { margin-left:8px; text-decoration:underline; color:#fff; font-weight:700; opacity:.95; }
#cer-pro-card .cer-link:hover { opacity:1; }

/* Light variant to match dashboard cards */
#cer-pro-card .cer-panel-light { background:#f8fafc; border:1px solid #e5e7eb; color:#111827; border-radius:10px; padding:0; }
#cer-pro-card .cer-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; font-size:15px; }
#cer-pro-card .cer-row:last-child { border-bottom:0; }
#cer-pro-card .cer-row-left { display:flex; align-items:center; gap:8px; font-weight:700; color:#374151; }
#cer-pro-card .cer-row-right { font-weight:800; color:#111827; font-size:15px; }
#cer-pro-card #cer-status-line { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:18px; }
#cer-pro-card #cer-status-pct { font-weight:800; }

/* Storytelling colors for values */
#cer-pro-card #cer-cupons-100,
#cer-pro-card #cer-taxasifood-100,
#cer-pro-card #cer-outros-100,
#cer-pro-card #cer-custos-100 { color:#ef4444; }
#cer-pro-card #cer-sobra-100 { color:#10b981; }

/* Match icon color to value color per row */
#cer-pro-card .cer-expense .cascata-icone i { color:#ef4444; }
#cer-pro-card .cer-income .cascata-icone i { color:#10b981; }

/* Left accent (aba lateral) 1:1 with cascade */
#cer-pro-card .cer-list .cascata-linha {
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #eef1f6;
  box-shadow: 0 6px 20px rgba(102,126,234,0.08);
  transition: all 0.2s ease;
}
#cer-pro-card .cer-list .cascata-linha:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(102,126,234,0.12); }
#cer-pro-card .cer-list .cascata-linha.cer-expense { border-left: 4px solid #ef4444; background: linear-gradient(90deg, #fff 0%, #fff5f5 100%); }
#cer-pro-card .cer-list .cascata-linha.cer-income { border-left: 4px solid #10b981; background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.10) 100%); box-shadow: 0 6px 24px rgba(16,185,129,0.12); }
.btn-primary {
  background: #7C3AED !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(124,58,237,0.35) !important;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease !important;
}
.btn-primary:hover { background: #6D28D9 !important; box-shadow: 0 8px 20px rgba(124,58,237,0.45) !important; }
.btn-primary:active { transform: translateY(1px) !important; }
.btn-primary:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 2px; }
.btn-primary[disabled] { opacity: .7; cursor: not-allowed; box-shadow: none !important; }

.btn-ghost {
  background: rgba(124,58,237,0.08) !important;
  color: #7C3AED !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.btn-ghost:hover { background: rgba(124,58,237,0.14) !important; border-color: rgba(124,58,237,0.35) !important; }
.btn-ghost:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 2px; }

.info-card,
.cascata-card,
.kpis .kpi {
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.page-header h1, .info-card h2, .info-card h3 {
  letter-spacing: .1px;
  color: #0f172a;
}

.muted { color: #64748b; }

.cascata-card { overflow: hidden; }
.cascata-card .cascata-body { padding: 24px; }

/* Business header (name) */
.business-header { display:flex; align-items:center; gap:12px; margin: 12px 0 16px; }
.business-avatar {
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg,#7C3AED,#6D28D9);
  color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(124,58,237,.35);
  flex: 0 0 auto;
}
.business-title-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.business-overline{
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#6b7280;
}

.business-title {
  margin:0;
  font-weight:800;
  font-size: clamp(24px, 2.0vw, 32px);
  line-height:1.12;
  letter-spacing:-0.25px;
  color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.business-title::after{
  content:'';
  display:block;
  margin-top:6px;
  width:82px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#7C3AED,#6D28D9);
}
.business-header{ gap:14px; }

/* ===============================
   Meus Negócios – Cards com degradê profissional
   =============================== */
.page-header{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:clamp(36px, 4vw, 44px); padding-top:clamp(16px, 2vw, 20px); padding-bottom:clamp(20px, 2.5vw, 24px); border-bottom:1px solid rgba(148,163,184,0.08); position:relative; }
.page-header::after{ content:""; position:absolute; bottom:0; left:0; width:80px; height:2px; background:linear-gradient(90deg, #7C3AED, transparent); border-radius:2px; }
.page-header h1{ margin:0; font-weight:800; font-size:clamp(28px, 3vw, 34px); color:#0f172a; letter-spacing:-0.4px; display:flex; align-items:center; gap:12px; }
.brand-crop{ display:inline-flex; align-items:center; justify-content:center; width: 280px; height: 140px; overflow:hidden; border-radius: 12px; }
.brand-logo{ height:140px; width:auto; vertical-align:middle; margin-right:0; border-radius:8px; filter: invert(1) saturate(0) brightness(2) contrast(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.35)); transform: scale(2.1); transform-origin:center; }
.brand-pill{ display:inline-flex; align-items:center; justify-content:center; padding:0; margin-right:12px; border-radius:999px; background:transparent; border:0; box-shadow:none; }
.brand-logo.blend-on-dark{ mix-blend-mode:normal; filter:none; opacity:1; }

@media (max-width: 640px){
  .brand-crop{ width: 180px; height: 72px; }
  .brand-logo{ height:72px; transform: scale(2.1); }
}

.page-dark .header-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:18px; padding:24px 26px; position:relative; overflow:hidden; background:linear-gradient(135deg, rgba(18,22,42,0.95) 0%, rgba(15,18,32,0.98) 100%) !important; backdrop-filter:blur(12px); border:1px solid rgba(148,163,184,0.18); box-shadow:0 8px 20px rgba(2,6,23,.32), 0 2px 6px rgba(124,58,237,0.12), inset 0 1px 0 rgba(255,255,255,0.04); width:100%; min-width:0; }
.page-dark .header-card{ flex-wrap: nowrap; }
.page-dark .header-card > div{ flex:1 1 auto; min-width:0; }
.page-dark .header-card h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-dark .header-card #add-business-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width: 1200px){ .page-dark .header-card #add-business-btn{ padding:8px 12px !important; } }
.header-card::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, #7C3AED 0%, #9A5BFF 50%, #6D28D9 100%); opacity:.95; }
.page-dark .header-card h2{ margin:0 0 4px 0; font-size:20px; font-weight:600 !important; color:#e6edf3; display:flex; align-items:center; gap:8px; }
.page-dark .header-card h2 i{ color:#C4B5FD; }
.header-card .muted{ margin:0; color:#9aa2b1; }

/* Business list cards (markup gerado via JS: .info-card) */
#business-list{ margin-top:20px; display:grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); width:100%; max-width:100%; }
.page-dark .col-main #business-list{ margin-top:0; width:100%; max-width:100%; }
.page-dark #business-list .info-card{ position:relative; border-radius:16px; padding:22px 24px; background:linear-gradient(135deg, rgba(18,22,42,0.95) 0%, rgba(15,18,32,0.98) 100%) !important; backdrop-filter:blur(12px); border:1px solid rgba(148,163,184,0.15); box-shadow:0 4px 16px rgba(2,6,23,.32), 0 1px 3px rgba(124,58,237,0.08), inset 0 1px 0 rgba(255,255,255,0.03); transition: all 180ms cubic-bezier(.2,.7,.2,1); }
.page-dark #business-list .info-card:hover{ border-color:rgba(196,181,253,0.28); box-shadow:0 8px 24px rgba(2,6,23,.38), 0 2px 8px rgba(124,58,237,0.18), inset 0 1px 0 rgba(255,255,255,0.06); transform:translateY(-3px) scale(1.01); }
#business-list .info-card::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, #7C3AED 0%, #9A5BFF 52%, #6D28D9 100%); opacity:.25; }
.page-dark #business-list .info-card:hover::after{ opacity:.38; }
.page-dark #business-list .info-card h3{ margin:0 0 4px; font-weight:600 !important; font-size:18px; color:#e6edf3; letter-spacing:-0.1px; }
#business-list .info-card .muted{ color:#9aa2b1; }

/* Botão primário com degradê roxo (alto contraste) */
.btn.btn-primary{ background:linear-gradient(180deg,#7C3AED 0%, #6D28D9 100%); color:#ffffff; border:1px solid rgba(124,58,237,.45); box-shadow:0 4px 10px rgba(124,58,237,.28); transition:filter .15s ease, transform .05s ease; }
.btn.btn-primary:hover{ filter:brightness(1.05); }
.btn.btn-primary:active{ transform:translateY(1px); }
.btn.btn-primary:focus-visible{ outline:2px solid #C4B5FD; outline-offset:2px; }
#business-list .btn{ font-weight:700; }

/* ===== Escopo de página escura (Meus Negócios) ===== */
.page-dark{ min-height:100vh; padding:12px 18px 18px; position:relative; z-index:0; background:
  radial-gradient(1200px 500px at -10% -10%, rgba(124,58,237,.14), transparent 60%),
  radial-gradient(1000px 400px at 110% -10%, rgba(109,40,217,.12), transparent 60%),
  linear-gradient(180deg, #0C0F1A 0%, #0F1220 60%, #0C0F1A 100%) !important; }
.page-dark::before{ content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(1200px 500px at -10% -10%, rgba(124,58,237,.14), transparent 60%),
  radial-gradient(1000px 400px at 110% -10%, rgba(109,40,217,.12), transparent 60%),
  linear-gradient(180deg, #0C0F1A 0%, #0F1220 60%, #0C0F1A 100%);
}
.page-dark .page-header h1{ color:#e6edf3; letter-spacing:-0.4px; text-shadow:0 2px 12px rgba(124,58,237,0.25); }
.page-dark .page-header h1{ font-weight:800; }
.page-dark .page-header .page-subtitle{ margin:0; margin-top:2px; font-size:15px; color:#a8b0c1; font-weight:400; letter-spacing:0.1px; }
.page-dark .page-header::after{ background:linear-gradient(90deg, #7C3AED 0%, #9A5BFF 60%, transparent); box-shadow:0 0 12px rgba(124,58,237,0.4); }
.page-dark .muted{ color:#9aa2b1; }

/* Container responsivo: alinha header e lista em qualquer resolução */
.page-dark > .page-header,
.page-dark > .header-card,
.page-dark > #business-list,
.page-dark > .layout-grid{
  width: 100%;
  max-width: 1200px; /* fixa composição igual ao 90% */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* ===== Premium layout: main + right-rail ===== */
.page-dark .layout-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: clamp(14px, 2vw, 20px);
  align-items: start;
  margin-top: 16px;
}
.page-dark .col-main{ grid-column: 1 / span 8; display:flex; flex-direction:column; gap:16px; min-width:0; }
.page-dark .col-main > *{ width:100%; max-width:100%; min-width:0; }
.page-dark .col-side{ grid-column: 9 / -1; display:flex; flex-direction:column; gap:20px; position: sticky; top: 16px; align-self: start; min-width:0; margin-top: -4px; }
@media (max-width: 1200px){ .page-dark .col-main{ grid-column: 1 / span 8; } .page-dark .col-side{ grid-column: 9 / -1; } }
@media (max-width: 1024px){ .page-dark .layout-grid{ grid-template-columns: 1fr; } .page-dark .col-main{ grid-column: 1 / -1; } .page-dark .col-side{ grid-column: 1 / -1; position: static; } }

/* KPI row */
.page-dark .kpi-row{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; grid-auto-flow: row dense; }
.page-dark .kpi-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; background:linear-gradient(135deg, rgba(18,22,42,0.92) 0%, rgba(15,18,32,0.95) 100%); backdrop-filter:blur(10px); border:1px solid rgba(148,163,184,0.14); box-shadow:0 3px 12px rgba(2,6,23,.3), 0 1px 3px rgba(124,58,237,0.06), inset 0 1px 0 rgba(255,255,255,0.02); transition: all 160ms cubic-bezier(.2,.7,.2,1); min-height:78px; height:100%; overflow:hidden; }
.page-dark .kpi-card:hover{ border-color:rgba(196,181,253,0.25); box-shadow:0 6px 20px rgba(2,6,23,.38), 0 2px 6px rgba(124,58,237,0.16), inset 0 1px 0 rgba(255,255,255,0.05); transform: translateY(-3px) scale(1.02); }
.page-dark .kpi-icon{ width:42px; height:42px; min-width:42px; min-height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#9A5BFF 0%, #7C3AED 50%, #6D28D9 100%); color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.38), 0 2px 6px rgba(124,58,237,0.25), inset 0 1px 0 rgba(255,255,255,0.15); flex-shrink:0; position:relative; }
.page-dark .kpi-icon i{ color:#fff !important; opacity:1 !important; filter:none; font-size:16px; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.page-dark .kpi-meta{ min-width:0; }
.page-dark .kpi-value{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
@media (max-width: 520px){ .page-dark .kpi-value{ font-size:16px; } }
.page-dark .kpi-label{ display:block; color:#9aa2b1; font-size:12px; }
.page-dark .kpi-value{ font-size:18px; color:#e6edf3; letter-spacing:-0.1px; }

/* Upload Hub */
.page-dark .upload-hub{ padding:18px; border-radius:16px; border:1px solid rgba(148,163,184,0.12); background:#12162A; box-shadow:0 2px 8px rgba(2,6,23,.28); margin:0; box-sizing:border-box; }
.page-dark .upload-hub .upload-head{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; }
.page-dark .upload-hub .upload-head h3{ margin:0; }
.page-dark .upload-hub .upload-head .muted{ margin:0; }
.page-dark .upload-hub h3{ margin:0; font-size:18px; font-weight:600; color:#e6edf3; }
.page-dark .upload-hub .dropzone{ position:relative; display:flex; align-items:center; gap:14px; margin-top:14px; padding:18px; border-radius:14px; border:1px dashed rgba(148,163,184,0.25); background:#0f1528; cursor:pointer; transition: border-color 120ms cubic-bezier(.2,.7,.2,1), box-shadow 120ms cubic-bezier(.2,.7,.2,1), transform 60ms ease; }
.page-dark .upload-hub .dropzone i{ color:#C4B5FD; font-size:22px; }
.page-dark .upload-hub .dz-text strong{ color:#e6edf3; display:block; }
.page-dark .upload-hub .dz-text small{ color:#9aa2b1; }
.page-dark .upload-hub .dropzone:hover{ border-color: rgba(124,58,237,0.65); box-shadow: 0 0 0 2px rgba(124,58,237,0.20), 0 8px 24px rgba(124,58,237,0.18); }
.page-dark .upload-hub .dropzone:active{ transform: translateY(1px); }
.page-dark .upload-hub .dz-input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.page-dark .upload-hub .upload-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* Upload Status card (dark) */
.page-dark .upload-status-section{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.12);
  background:#12162A;
  box-shadow:0 2px 8px rgba(2,6,23,.28);
  color:#e6edf3;
}
.page-dark .upload-status-section strong{ color:#e6edf3; }
.page-dark .upload-status-section .muted{ color:#9aa2b1; }


/* Timeline */
.page-dark .timeline{ padding:18px; border-radius:16px; border:1px solid rgba(148,163,184,0.12); background:#12162A; box-shadow:0 2px 8px rgba(2,6,23,.28); box-sizing:border-box; }
.page-dark .timeline-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.page-dark .timeline h3{ margin:0; font-size:18px; font-weight:600; color:#e6edf3; }
.page-dark .timeline-list{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px; }
.page-dark .timeline-item{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  color:#C4B5FD;
  overflow:hidden;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
}
.page-dark .timeline-item.empty{ color:#9aa2b1; }
.page-dark .timeline-item > *:first-child{
  flex-shrink:0;
}
.page-dark .timeline-item > *:nth-child(2){
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-dark .timeline-item > *:last-child{
  flex-shrink:0;
  font-size:11px;
  color:#9aa2b1;
  white-space:nowrap;
}

/* Right-rail cards */
.page-dark .support, .page-dark .status, .page-dark .changelog{ padding:16px; border-radius:16px; border:1px solid rgba(148,163,184,0.12); background:#12162A; box-shadow:0 2px 8px rgba(2,6,23,.28); }
.page-dark .status{ display:none !important; }
.page-dark .support h3, .page-dark .status h3, .page-dark .changelog h3{ margin:0 0 8px; font-size:16px; font-weight:600; color:#e6edf3; }
.page-dark .support .links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.page-dark .support .links a{ color:#C4B5FD; text-decoration:none; display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; transition: background 120ms cubic-bezier(.2,.7,.2,1); }
.page-dark .support .links a:hover{ background:rgba(124,58,237,0.10); }
.page-dark .status .status-row{ display:flex; align-items:center; gap:8px; }
.page-dark .badge{ width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 0 2px rgba(16,185,129,.18), 0 0 8px rgba(16,185,129,.45); }
.page-dark .badge-ok{ background:#10B981; }
.page-dark .changelog .changes{ list-style:disc; padding-left:18px; margin:8px 0 0; color:#9aa2b1; }

/* Força header-card escuro mesmo com .info-card */
.page-dark .info-card.header-card{ background:#12162A !important; color:#e6edf3; border:1px solid rgba(148,163,184,0.12); box-shadow:0 6px 14px rgba(2,6,23,.26) inset, 0 6px 14px rgba(2,6,23,.28); }
.info-card.header-card h2{ color:#e6edf3; }
.info-card.header-card .muted{ color:#9aa2b1; }

/* Botões secundários/danger dentro de cards escuros */
.page-dark .btn.btn-ghost{ background:transparent; color:#E5E7EB; border:1px solid rgba(148,163,184,0.22); }
.page-dark .btn.btn-ghost:hover{ background:rgba(148,163,184,0.10); border-color:rgba(148,163,184,0.30); }

/* Secundário (Novo Upload) como outline roxo */
.page-dark .btn.btn-secondary{ background:transparent; color:#C4B5FD; border:1px solid rgba(124,58,237,0.55); box-shadow:none; }
.page-dark .btn.btn-secondary:hover{ background:rgba(124,58,237,0.12); color:#E9D5FF; border-color:rgba(124,58,237,0.75); }

/* Destrutivos como ghost-danger (sem preenchimento vermelho) */
.page-dark .btn-delete-sheet,
.page-dark .btn-delete-business{
  background:transparent !important;
  color:#FCA5A5 !important;
  border:1px solid rgba(239,68,68,0.60) !important;
  box-shadow:none !important;
}
.page-dark .btn-delete-sheet:hover,
.page-dark .btn-delete-business:hover{
  background:rgba(239,68,68,0.12) !important;
  color:#FFE4E6 !important;
  border-color:rgba(239,68,68,0.75) !important;
}
.page-dark .btn-delete-sheet i,
.page-dark .btn-delete-business i{ color:inherit !important; }

/* Padrão de "pill" e tamanhos consistentes dentro da página escura */
.page-dark .btn{ border-radius:999px; padding:8px 14px; line-height:1; }
.page-dark #business-list .btn{ padding:8px 12px; }

/* ===============================
   Klib Dashboard – VERSÃO COMPLETA COM SPRINT 2
   ✅ Setas nas tendências
   ✅ Sublabel no CER
   ✅ Análises Rápidas VISUAIS
   ✅ "vs anterior" formatado
   ✅ Menu lateral recolhível
   ✅ SPRINT 2: Header Estimativa + Cascata
   =============================== */

/* SIDEBAR RECOLHÍVEL */
.sidebar-collapsed .sidebar {
  width: 70px;
  padding: 18px 8px;
}

/* Esconde TODOS os textos no menu recolhido */
.sidebar-collapsed .sidebar .logo {
  font-size:0; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:0;
}

.sidebar-collapsed .sidebar .logo::before {
  content: none !important;
}

/* MENU RECOLHIDO: mostrar só ícones, sem text-indent (evita artefatos) */
.sidebar-collapsed .sidebar nav a {
  justify-content: center;
  gap: 0;
  padding: 12px;
  position: relative;
  max-width: 54px;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-collapsed .sidebar nav a span,
.sidebar-collapsed .sidebar nav a .toggle-text { display: none !important; }

.sidebar-collapsed .sidebar nav a i {
  margin: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  font-size: 16px;
  display: inline-flex; align-items:center; justify-content:center;
}

/* Tooltip ao passar mouse */
.sidebar-collapsed .sidebar nav a:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  text-indent: 0;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  animation: tooltipFadeIn 0.2s ease-out;
}

.sidebar-collapsed .sidebar nav a:hover::before {
  content: "";
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #7C3AED;
  z-index: 1001;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-5px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.sidebar-collapsed .main-content {
  margin-left: 70px;
}
.sidebar-collapsed .sidebar .logo .wordmark{ display:none; }
.sidebar-collapsed .sidebar .logo .brand-icon{ display:inline-block; }

/* Collapsed: keep image logo visible and sized */
.sidebar-collapsed .sidebar .logo .sidebar-logo{ height:24px; margin:0 auto; }

/* VARIÁVEIS - CORES DO DESIGN ATUALIZADAS */
:root{
  /* Cores primárias atualizadas */
  --accent-500: #7C3AED;
  --accent-600: #6D28D9;
  --accent-700: #5B21B6;
  --accent-light: #8B5CF6;
  --accent-lighter: #A78BFA;

  /* Backgrounds atualizados */
  --bg-sidebar: #1A0B2E;
  --bg-body: #F8F7FC;
  --card: #FFFFFF;
  --border: #E9E4F0;

  /* Textos */
  --text-strong: #0F172A;
  --text: #1F2937;
  --text-muted: #7A8197;
  --muted: #9AA2B1;

  /* Cores semânticas */
  --success: #10b981;
  --success-light: #6ee7b7;
  --success-bg: #d1fae5;
  --success-border: #6ee7b7;

  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;

  --danger: #ef4444;
  --danger-light: #f87171;
  --danger-bg: #fee2e2;
  --danger-border: #fca5a5;

  --info: #3b82f6;
  --info-light: #60a5fa;
  --info-bg: #dbeafe;
  --info-border: #93c5fd;

  /* Sombras atualizadas com toque roxo */
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.04);
  --shadow-md: 0 6px 24px rgba(15,23,42,0.06);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.10);
  --shadow-accent: 0 4px 12px rgba(124, 58, 237, 0.15);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

/* ANIMAÇÕES */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* RESET */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: linear-gradient(180deg, #F6F7FB 0%, var(--bg-body) 100%);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* LAYOUT PRINCIPAL */
.sidebar{
  position:fixed; inset:0 auto 0 0;
  width:240px;
  background:var(--bg-sidebar);
  color:#C9D1E8;
  padding:18px 14px;
  display:flex; flex-direction:column; gap:12px;
  border-right:1px solid rgba(255,255,255,.06);
  z-index:100;
  transition: width 0.3s ease;
}

/* Separadores e espaçamento conforme mock */
.sidebar .sidebar-sep{
  height:1px;
  background: rgba(255,255,255,.18);
  margin: 16px 8px; /* mais respiro acima e abaixo */
  border-radius: 2px;
}
.sidebar > .sidebar-sep:nth-of-type(1){ margin-top: 40px; margin-bottom: 22px; } /* separador após Meus Negócios (descer mais) */
.sidebar > .sidebar-sep:nth-of-type(2){ margin-top: 14px; margin-bottom: 8px; }  /* separador antes do footer, sobe footer um pouco */
.sidebar > nav:first-of-type{ margin-top: 0; margin-bottom: 8px; }
.sidebar .sidebar-group{ display:flex; flex-direction:column; gap:10px; }
.sidebar .sidebar-footer{ padding-top: 6px; }

/* Esconde separadores no estado recolhido */
.sidebar-collapsed .sidebar .sidebar-sep{ display:none; }


.sidebar .logo{
  margin:8px 8px 56px; display:flex; align-items:center; gap:8px; /* desce 'Meus Negócios' bastante */
}
.sidebar .logo .wordmark{
  font-weight:900; font-size:34.5px; letter-spacing:-0.2px;
  color:#FFFFFF;
  text-shadow: 0 2px 10px rgba(0,0,0,.30);
}
.sidebar .logo .brand-icon{
  display:none;
  font-weight:900; font-size:28px; line-height:1; letter-spacing:-0.2px;
  color:transparent;
  background: linear-gradient(135deg,#9A5BFF 0%, #7C3AED 45%, #6D28D9 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow: 0 4px 18px rgba(124,58,237,.45);
}

.sidebar nav{
  display:flex; flex-direction:column; gap:8px; margin-top:4px;
}

.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  color:#C9D1E8; text-decoration:none; border-radius:10px;
  border:1px solid transparent; transition:all .2s ease;
}

.sidebar nav a i{
  width:36px; height:36px; min-width:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#E9EAF5; text-align:center; opacity:1;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.24);
  font-size:16px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.sidebar nav a:hover i{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.sidebar nav a.active i{
  background: linear-gradient(180deg,#7C3AED 0%, #6D28D9 100%);
  border-color: rgba(124,58,237,.55);
  color:#FFFFFF;
  box-shadow: 0 6px 16px rgba(124,58,237,.35);
}

.sidebar nav a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  transform: translateX(2px);
}

.sidebar nav a.active{
  background:var(--accent-500);
  color:#fff;
  box-shadow:0 10px 20px rgba(124, 58, 237, 0.25);
}

.sidebar nav a.active:hover {
  background: var(--accent-600);
}

.sidebar .sidebar-footer{
  margin-top:auto; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* CONTEÚDO PRINCIPAL */
.main-content{
  margin-left:240px;
  min-height:100vh;
  padding:24px;
  transition: margin-left 0.3s ease;
}

.main-content .page-header,
.main-content .main-header,
.main-content .info-card,
.main-content .kpi-grid,
.main-content .subnav,
.main-content .tabs,
.main-content .report-pane{
  max-width:1120px; margin-left:auto; margin-right:auto;
}

.page-header h1,
.main-header h1{
  color:var(--text-strong);
  font-weight:800;
}

.muted{ color:var(--text-muted); }

/* CARDS */
.info-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  box-shadow:var(--shadow-md);
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease-out;
}

.info-card:hover{
  box-shadow:var(--shadow-lg);
  transform: translateY(-2px);
}

/* ===============================
   KPIs - MINIMALISTAS COM BORDA SUPERIOR
   =============================== */
.kpis {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.kpi {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  transition: all 0.2s ease;
  border-top: 3px solid #E5E7EB;
  animation: fadeInUp 0.4s ease-out;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi.status-success { border-top-color: #10B981; }
.kpi.status-warning { border-top-color: #F59E0B; }
.kpi.status-danger { border-top-color: #EF4444; }
.kpi.status-info { border-top-color: #3B82F6; }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 4px;
  flex-wrap: nowrap;
  min-height: 48px;
  position: relative;
}

.kpi .t {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: clamp(9px, 1.5vw, 12px);
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  position: relative;
  padding-right: 22px;
}

/* Texto do título com fonte responsiva */
.kpi-title-text {
  white-space: nowrap;
  display: block;
  width: 100%;
  font-size: clamp(6px, 0.8vw, 12px);
  letter-spacing: 0.1px;
}

.kpi-icon {
  font-size: clamp(14px, 2vw, 16px);
  color: #6B7280;
  opacity: 0.7;
  flex-shrink: 0;
  min-width: 16px;
  width: 16px;
}

.kpi-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-width: 0;
}

.kpi-value,
.kpi .v {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
  margin: 12px 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.kpi-sublabel {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  font-weight: 500;
}

/* TENDÊNCIAS - MINIMALISTAS */
.kpi-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.kpi-trend i {
  font-size: 14px;
}

.kpi-trend .delta-text {
  font-size: 11px;
  font-weight: 400;
  color: #9CA3AF;
  margin-left: 2px;
}

.kpi-trend.positive { color: #059669; }
.kpi-trend.negative { color: #DC2626; }
.kpi-trend.neutral { color: #2563EB; }

.trend-badge,
.trend-value,
.vs-anterior-caption {
  display: none;
}

.tooltip-icon {
  width: 16px;
  height: 16px;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px;
  max-height: 16px;
  border-radius: 50%;
  border: 1px solid var(--accent-500);
  background: transparent;
  color: var(--accent-500);
  cursor: help;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s;
  margin-left: 4px;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 16px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
}

.tooltip-icon:hover {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kpi:nth-child(1) { animation-delay: 0ms; }
.kpi:nth-child(2) { animation-delay: 50ms; }
.kpi:nth-child(3) { animation-delay: 100ms; }
.kpi:nth-child(4) { animation-delay: 150ms; }
.kpi:nth-child(5) { animation-delay: 200ms; }

.tooltip-icon[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  z-index: 1000;
  pointer-events: none;
  max-width: 250px;
  white-space: normal;
}

.tooltip-icon[title]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #7C3AED;
  z-index: 1000;
}

/* ========================================
   SPRINT 2: ESTILOS HEADER + CASCATA
   ======================================== */

/* Header de Estimativa de Recebimento Hoje */
.estimativa-hoje-card {
  background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--info);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-md);
  animation: slideIn 0.5s ease-out;
  margin-bottom: 20px;
}

.estimativa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.estimativa-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.estimativa-title i {
  font-size: 22px;
  color: var(--info);
}

.estimativa-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

.estimativa-body {
  display: grid;
  gap: 16px;
}

.estimativa-valor-principal {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e0f2fe;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.estimativa-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.estimativa-valor {
  font-size: clamp(34px, 4.5vw, 44px);
  font-weight: 900;
  color: var(--info);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 10px;
}

.estimativa-sublabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.estimativa-sublabel i {
  font-size: 12px;
}

.estimativa-comparacao {
  background: #fff;
  border: 1px solid #e0f2fe;
  border-radius: 12px;
  padding: 16px;
}

.estimativa-comp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 14px;
}

.estimativa-comp-title i {
  font-size: 12px;
  color: var(--info);
}

.estimativa-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.estimativa-metrica {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
}

.metrica-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
}

.metrica-valor {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-strong);
}

.metrica-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  width: fit-content;
}

.metrica-badge.positive {
  background: var(--success-bg);
  color: var(--success);
}

.metrica-badge.negative {
  background: var(--danger-bg);
  color: var(--danger);
}

.metrica-badge.neutral {
  background: var(--info-bg);
  color: var(--info);
}

.estimativa-vazio {
  text-align: center;
  padding: 32px 24px;
  color: var(--muted);
}

.estimativa-vazio i {
  font-size: 36px;
  color: #cbd5e1;
  margin-bottom: 14px;
  display: block;
}

.estimativa-vazio p {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.estimativa-vazio small {
  font-size: 13px;
  color: var(--muted);
}

/* Cascata de Custos - ATUALIZADA COM NOVAS CORES */
.cascata-custos-card {
  background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
  border: 1px solid #E9E4F0;
  border-left: 4px solid var(--accent-500);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-md);
  animation: slideIn 0.6s ease-out;
  margin-bottom: 20px;
}

.cascata-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.cascata-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cascata-title i {
  font-size: 22px;
  color: var(--accent-500);
}

.cascata-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

.cascata-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cascata-nivel {
  background: #fff;
  border: 1px solid #E9E4F0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.cascata-nivel:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

.cascata-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.cascata-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cascata-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  background: #faf5ff;
  color: var(--accent-500);
  flex-shrink: 0;
}

.cascata-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 2px;
}

.cascata-desc {
  font-size: 11px;
  color: var(--muted);
}

.cascata-info-right {
  text-align: right;
}

.cascata-valor {
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.5px;
  line-height: 1;
}

.cascata-percent {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
}

.cascata-barra {
  height: 14px;
  background: #f1f5f9;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}

.cascata-barra-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 7px;
}

.cascata-seta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0 16px;
}

.cascata-seta i {
  font-size: 16px;
  color: #94a3b8;
}

.cascata-custo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.cascata-custo-label i {
  font-size: 12px;
  color: #ef4444;
}

.cascata-resumo {
  background: #fff;
  border: 1px solid #E9E4F0;
  border-radius: 12px;
  padding: 18px;
  margin-top: 10px;
}

.cascata-resumo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 14px;
}

.cascata-resumo-title i {
  font-size: 17px;
  color: var(--accent-500);
}

.cascata-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.cascata-resumo-item {
  text-align: center;
  padding: 14px 12px;
  background: #faf5ff;
  border-radius: 10px;
}

.cascata-resumo-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.cascata-resumo-valor {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1;
}

.cascata-resumo-status {
  font-size: 11px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 700;
}

.cascata-resumo-status.bom {
  background: var(--success-bg);
  color: var(--success);
}

.cascata-resumo-status.atencao {
  background: var(--warning-bg);
  color: var(--warning);
}

.cascata-resumo-status.critico {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ======================================== FIM SPRINT 2 ======================================== */

/* BOTÕES */
.btn{
  font-weight:700;
  border-radius:10px;
  line-height:1;
  transition: all 0.2s ease;
  padding:10px 16px;
  cursor:pointer;
  border:0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

.btn-primary{
  background: var(--accent-500);
  color:#fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.btn-primary:hover{
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-secondary{
  background:#fff;
  color:var(--accent-600);
  border:1.5px solid var(--accent-600);
}

.btn-secondary:hover{
  background:var(--accent-500);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:10px;
}

.btn-ghost:hover{
  background:#F9FAFB;
  transform: translateY(-1px);
}

.btn-danger{
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}

.btn-danger:hover{
  background: #dc2626;
  transform: translateY(-1px);
}

/* CHIPS */
.chip{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 13px;
  font-weight:700;
  font-size: 12px;
  cursor:pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-500);
}

.chip.active{
  background: var(--accent-500);
  color:#fff;
  border-color:transparent;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

/* FILTROS */
.filters-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-500);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.filters-badge i {
  font-size: 10px;
  color: #fff;
}

.filterbar {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.filterbar i {
  color: var(--muted);
  font-size: 16px;
}

.filterbar input[type="date"] {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  flex: 1;
  min-width: 140px;
  transition: all 0.2s;
}

.filterbar input[type="date"]:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: var(--focus-ring);
}

.filter-sep {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* SLICERS */
.slicers {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.slicer {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.slicer .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--text-strong);
}

.slicer .title i {
  font-size: 14px;
  color: var(--muted);
}

.slicer .opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  user-select: none;
}

.check:hover {
  background: #f9fafb;
  border-color: var(--accent-500);
  transform: translateX(2px);
}

.check:has(input:checked) {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2);
}

.check input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent-500);
}

/* GRÁFICOS */
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.chart-header h3 {
  margin: 0;
  font-size: clamp(15px, 2.3vw, 18px);
  font-weight: 700;
  color: var(--text-strong);
}

.chart-badge {
  font-size: 11px;
  color: var(--muted);
  background: #f8fafc;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.metric-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.metric-switch .chip {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s;
}

.metric-switch .chip:hover {
  background: #f9fafb;
  transform: translateY(-1px);
  border-color: var(--accent-500);
}

.metric-switch .chip.active {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.chart-wrap {
  flex: 1;
  position: relative;
  min-height: 320px;
}

/* ANÁLISES RÁPIDAS COM PROVA VISUAL */
.analises-rapidas {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.analises-rapidas h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}

.analises-rapidas h3 i {
  color: var(--accent-500);
}

#analises-rapidas-container {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 12px;
}

.analise-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s;
  animation: slideIn 0.4s ease-out backwards;
}

.analise-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.filtros-avancados {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.2s;
  user-select: none;
}

.accordion-header:hover {
  background: rgba(0,0,0,0.02);
}

.accordion-header h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.accordion-header i.toggle-icon {
  color: var(--muted);
  transition: transform 0.2s;
}

.accordion-header.open i.toggle-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 500px;
}

.accordion-body {
  padding: 14px 10px 0;
  display: grid;
  gap: 14px;
}

.slicer-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slicer-compact .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-strong);
}

.slicer-compact .opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.header h3 {
  margin: 0;
  font-size: clamp(14px, 2.3vw, 17px);
  font-weight: 700;
  color: var(--text-strong);
}

.badge {
  font-size: 11px;
  color: var(--muted);
  background: #f8fafc;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* RESPONSIVO */
@media (max-width: 1024px) {
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .estimativa-metricas {
    grid-template-columns: 1fr;
  }

  .cascata-resumo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 70px;
    padding: 18px 8px;
  }

  .sidebar .logo {
    font-size: 0;
  }

  .sidebar .logo::before {
    content: "K";
    font-size: 22px;
  }

  .sidebar nav a {
    justify-content: center;
    padding: 12px;
  }

  .sidebar nav a span {
    display: none;
  }

  .main-content {
    margin-left: 70px;
  }

  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  #analises-rapidas-container {
    grid-template-columns: 1fr;
  }

  .filterbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filterbar input[type="date"] {
    width: 100%;
    min-width: auto;
  }

  .estimativa-header,
  .cascata-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .estimativa-metricas {
    grid-template-columns: 1fr;
  }

  .cascata-resumo-grid {
    grid-template-columns: 1fr;
  }

  .cascata-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .cascata-info-right {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr;
  }

  .metric-switch {
    flex-direction: column;
  }

  .quick-filters {
    flex-direction: column;
  }

  .quick-filter-btn {
    width: 100%;
    text-align: center;
  }

  .estimativa-valor {
    font-size: 32px;
  }

  .cascata-valor {
    font-size: 18px;
  }
}

/* === KLIB PATCHES (UI CONSISTENCY) === */

/* Anti-clipping nos cards KPI */
.kpi, .kpi * { min-width:0 }
.kpi .t, .kpi .kpi-sublabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.kpi .kpi-trend { flex-wrap:nowrap }
@media (max-width:768px){
  .kpi .t, .kpi .kpi-sublabel { white-space:normal }
  .kpi .kpi-trend { flex-wrap:wrap }
}


:root{
  --grad-positive-start:#34d399; /* emerald-400 */
  --grad-positive-end:#10b981;   /* emerald-500 */
  --grad-info-start:#93c5fd;     /* blue-300 */
  --grad-info-end:#3b82f6;       /* blue-500 */
  /* Align accent gradient to brand: #667EEA → #764BA2 */
  --grad-accent-start:#667eea;   /* brand start */
  --grad-accent-end:#764ba2;     /* brand end */
}
.cascata-barra-fill.is-bruto{background:linear-gradient(90deg,var(--grad-positive-start),var(--grad-positive-end))}
.cascata-barra-fill.is-comissao{background:linear-gradient(90deg,var(--grad-info-start),var(--grad-info-end))}
.cascata-barra-fill.is-taxas{background:linear-gradient(90deg,#fcd34d,#f59e0b)}
.cascata-barra-fill.is-outros{background:linear-gradient(90deg,#fecaca,#ef4444)}
.cascata-barra-fill.is-repasse{background:linear-gradient(90deg,var(--grad-accent-start),var(--grad-accent-end))}


@media (min-width:1024px){
  .kpis{grid-template-columns:repeat(5,1fr)}
}


.tooltip-icon[title]:hover::after{ max-width:320px; white-space:normal }

 /* ===============================
    Meus Negócios: alinhamento de cores (ícones e cabeçalhos)
    =============================== */
 /* Cabeçalho em branco no tema escuro */
 .page-dark .page-header h1,
 .page-dark .main-header h1,
 .page-dark .timeline h3,
 .page-dark .support h3,
 .page-dark .changelog h3 { color:#FFFFFF !important; }

 /* KPI: títulos e ícones com mesma linguagem do menu lateral */
 .page-dark .kpi .t { color:#E6EDF3 !important; }
  .page-dark .kpi-icon {
  color:#FFFFFF !important;
  opacity:1 !important;
  width:36px; height:36px; /* restaurar dimensões base */
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: linear-gradient(180deg,#7C3AED 0%, #6D28D9 100%); /* mesmo gradiente do .btn.btn-primary */
  border:1px solid rgba(124,58,237,.45);
  box-shadow: 0 4px 10px rgba(124,58,237,.28);
 }

/* ===============================
   Meus Negócios: melhorias sutis nos ícones (versão corrigida)
   =============================== */
/* Ícones brancos visíveis em Meus Negócios */
.page-dark .cascata-icon,
.page-dark .upload-hub .dropzone i,
.page-dark .support .links a i,
.page-dark .status .status-row i,
.page-dark .timeline-item i,
.page-dark .kpi .t i,
.page-dark .kpi .kpi-trend i,
.page-dark .cascata-title i,
.page-dark .estimativa-title i,
.page-dark .analises-rapidas h3 i,
.page-dark .slicer .title i {
  color: #FFFFFF !important;
  filter: brightness(1.5) !important;
}

/* Forçar todos os ícones dentro de page-dark */
.page-dark i,
.page-dark .fa,
.page-dark .fas,
.page-dark .far,
.page-dark .fal,
.page-dark .fab,
.page-dark [class*="fa-"] {
  color: #FFFFFF !important;
  filter: brightness(1.2) !important;
}

/* Botões Selecionar arquivo e Guia de importação - visibilidade melhorada */
.page-dark .dropzone,
.page-dark .btn-select-file,
.page-dark .select-file-btn,
.page-dark .guia-importacao.btn,
.page-dark .btn.guia-importacao,
.page-dark .btn-import-guide,
.page-dark .import-tab-btn,
.page-dark .btn-import {
  background: rgba(30,27,75,0.60) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(196,181,253,0.40) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
}
.page-dark .dropzone:hover,
.page-dark .btn-select-file:hover,
.page-dark .select-file-btn:hover,
.page-dark .guia-importacao.btn:hover,
.page-dark .btn.guia-importacao:hover,
.page-dark .btn-import-guide:hover,
.page-dark .import-tab-btn:hover,
.page-dark .btn-import:hover {
  background: rgba(124,58,237,0.25) !important;
  border-color: rgba(196,181,253,0.60) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(124,58,237,0.30) !important;
}
.page-dark .dropzone i,
.page-dark .btn-select-file i,
.page-dark .select-file-btn i,
.page-dark .guia-importacao.btn i,
.page-dark .btn.guia-importacao i,
.page-dark .btn-import-guide i,
.page-dark .import-tab-btn i,
.page-dark .btn-import i {
  color: #FFFFFF !important;
  filter: brightness(1.3) !important;
  margin-right: 6px !important;
}

/* ===============================
   ICONS: Force brand purple
   =============================== */
/* Generic Font Awesome icon classes */
i.fa, i.fas, i.far, i.fal, i.fab,
.fa, .fas, .far, .fal, .fab,
i[class^="fa-"], i[class*=" fa-"] {
  color: var(--accent-500) !important;
}

/* Sidebar icons: high contrast on dark background */
.sidebar nav a i {
  color: #FFFFFF !important; /* max contrast */
  opacity: 1;
  font-size: 20px; /* readability */
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.35));
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease, color .2s ease;
}
.sidebar nav a:hover i,
.sidebar nav a.active i {
  color: #FFFFFF !important;
  background: rgba(124, 58, 237, 0.35);
  border-color: rgba(124, 58, 237, 0.65);
  filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.85));
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}

/* Keyboard accessibility */
.sidebar nav a:focus-visible i {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* Section titles and cascata arrows */
.analises-rapidas h3 i,
.slicer .title i,
.cascata-title i,
.estimativa-title i,
.cascata-seta i { color: var(--accent-500) !important; }

/* KPI and filters icon overrides */
.kpi .t i,
.filters .filter i { color: var(--accent-500) !important; }

/* ===============================
   Neon/Dark Theme (scoped)
   Apply by adding class 'theme-neon' to <body>
   =============================== */
:root{
  --neon-surface-900: #0f172a;
  --neon-surface-950: #0b1020;
  --neon-border: rgba(148, 163, 184, 0.18);
  --neon-card-shadow: 0 10px 30px rgba(2,6,23,0.45);
  --neon-ink: #e6edf3;
  --neon-ink-muted: #9aa2b1;
  --neon-accent: #7C3AED; /* brand */
  --neon-accent-2: #6D28D9;
}

body.theme-neon .cascata-header-banner{
  background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(11,16,32,0.95) 100%);
  color:#fff;
  border: 1px solid var(--neon-border);
  box-shadow: var(--neon-card-shadow);
}

body.theme-neon .info-card,
body.theme-neon .cascata-card,
body.theme-neon .kpis .kpi{
  background: var(--neon-surface-950) !important;
  color: var(--neon-ink);
  border: 1px solid var(--neon-border);
  box-shadow: var(--neon-card-shadow);
}

body.theme-neon .info-card h1,
body.theme-neon .info-card h2,
body.theme-neon .info-card h3,
body.theme-neon .cascata-linha .cascata-titulo,
body.theme-neon .page-header h1{
  color: #eef2ff !important;
}

body.theme-neon .muted,
body.theme-neon .cascata-subtitulo{ color: var(--neon-ink-muted) !important; }

/* Accents */
body.theme-neon .btn-primary{ box-shadow: 0 10px 24px rgba(124,58,237,0.45) !important; }
body.theme-neon .btn-ghost{ background: rgba(124,58,237,0.10) !important; border-color: rgba(124,58,237,0.28) !important; }
body.theme-neon .btn-ghost:hover{ background: rgba(124,58,237,0.16) !important; }

/* ===============================
   Enhanced Mobile Responsiveness
   =============================== */
@media (max-width: 768px) {
  /* Sidebar Mobile Improvements */
  .sidebar {
    transition: transform 0.3s ease;
  }
  
  .sidebar nav a {
    padding: 14px;
    justify-content: center;
  }
  
  .sidebar nav a span {
    display: none;
  }
  
  .sidebar .logo .wordmark {
    display: none;
  }
  
  /* Main Content Mobile */
  .main {
    margin-left: 70px;
    padding: 16px;
    overflow-x: hidden;
  }
  
  /* Cards Mobile */
  .info-card,
  .cascata-card {
    padding: 1.25rem;
    overflow-x: auto;
  }
  
  .card-header h2,
  .card-header h3 {
    font-size: 1.125rem;
  }
  
  /* KPI Grid Mobile */
  .kpis {
    gap: 12px;
    grid-template-columns: 1fr 1fr;
  }
  
  .kpi {
    padding: 1rem;
    min-width: 0;
  }
  
  .kpi .t {
    font-size: 0.875rem;
    white-space: normal;
  }
  
  .kpi-value {
    font-size: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .kpi-sublabel {
    font-size: 0.75rem;
    white-space: normal;
  }
  
  /* Numbers wrapping fix */
  .cascata-valor,
  .estimativa-valor {
    font-size: 1.125rem;
    word-break: break-word;
  }
  
  /* Modals Mobile - Cadastrar Negócio */
  .modal-overlay {
    padding: 0.5rem;
    overflow-y: auto;
  }
  
  .modal-card {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modal-header {
    padding: 1rem;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }
  
  .modal-header h2 {
    font-size: 1.25rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  /* Forms Mobile */
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-group label {
    font-size: 0.875rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevent iOS zoom */
    padding: 12px;
  }
  
  /* Buttons Mobile */
  .btn {
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
  }
  
  .btn-large {
    padding: 14px 24px;
  }
  
  /* Tooltips Mobile - Fix overflow */
  [title]::after,
  .tooltip-icon::after {
    max-width: 200px !important;
    white-space: normal !important;
    word-wrap: break-word;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  
  /* Business Grid Mobile */
  .business-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .business-card {
    padding: 1rem;
  }
  
  /* Business Detail Header Mobile */
  #business-detail-header {
    padding: 14px 12px !important;
  }
  
  #business-detail-header > div {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  
  #business-detail-header .business-header {
    width: 100%;
    margin: 0 !important;
  }
  
  #business-detail-header .business-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  
  #business-detail-header .business-overline {
    font-size: 11px !important;
  }
  
  #business-detail-header .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  #business-detail-header #btn-voltar {
    order: -1;
  }
  
  /* Profile/Security Tabs Mobile */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .tabs button {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
  
  /* Profile Cards Mobile */
  .profile-card,
  .security-card {
    padding: 1rem;
  }
  
  .profile-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Behavior/Pedido Cards Mobile */
  .pedido-card,
  .behavior-card {
    padding: 1rem;
    overflow-x: auto;
  }
  
  .pedido-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .pedido-id {
    font-size: 0.875rem;
  }
  
  .pedido-valor {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  /* Extra Small Mobile */
  .sidebar {
    width: 60px;
    padding: 12px 6px;
  }
  
  .main {
    margin-left: 60px;
    padding: 12px;
  }
  
  /* Page Header Mobile */
  .page-header {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 1.25rem;
  }
  
  /* Cards Extra Small */
  .info-card,
  .cascata-card {
    padding: 0.875rem;
    border-radius: 12px;
  }
  
  /* KPI Extra Small - Single Column */
  .kpis {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .kpi {
    padding: 0.875rem;
  }
  
  .kpi .t {
    font-size: 0.8rem;
  }
  
  .kpi-value {
    font-size: 1.125rem;
  }
  
  .kpi-icon {
    width: 32px;
    height: 32px;
  }
  
  /* Cascata Mobile */
  .cascata-linha {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .cascata-titulo {
    font-size: 0.8rem;
  }
  
  .cascata-valor {
    font-size: 0.95rem;
  }
  
  /* Business Cards Mobile */
  .business-card {
    padding: 0.875rem;
  }
  
  .business-card h3 {
    font-size: 0.95rem;
  }
  
  /* Upload Dropzone Mobile */
  .dropzone {
    padding: 1.25rem 0.875rem;
  }
  
  .dropzone-text {
    font-size: 0.8rem;
  }
  
  /* Modal Extra Small */
  .modal-overlay {
    padding: 0.25rem;
  }
  
  .modal-card {
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 0.875rem;
  }
  
  .modal-header h2 {
    font-size: 1.125rem;
  }
  
  .modal-body {
    padding: 0.875rem;
  }
  
  /* Forms Extra Small */
  .form-group {
    margin-bottom: 0.875rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    padding: 10px;
    font-size: 16px;
  }
  
  /* Tabs Extra Small */
  .tabs button {
    font-size: 0.8rem;
    padding: 0.625rem 0.875rem;
  }
  
  /* Profile/Security Extra Small */
  .profile-card,
  .security-card {
    padding: 0.875rem;
  }
  
  .profile-info-item {
    font-size: 0.875rem;
  }
  
  /* Pedido/Behavior Extra Small */
  .pedido-card,
  .behavior-card {
    padding: 0.875rem;
  }
  
  .pedido-id {
    font-size: 0.8rem;
  }
  
  .pedido-valor {
    font-size: 1rem;
  }
  
  /* Tooltips Extra Small */
  [title]::after,
  .tooltip-icon::after {
    max-width: 160px !important;
    font-size: 0.75rem;
  }
  
  /* Numbers wrapping extra small */
  .cascata-valor,
  .estimativa-valor,
  .kpi-value {
    word-break: break-all;
  }
}