/* ═══════════════════════════════════════
   DRE — Design System v6.0 SEU VENDEDOR
   Especiarias da Roça · Navy Blue + Vibrant Gold
   ═══════════════════════════════════════ */

/* Geist font loaded via index.html Google Fonts link */

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ══════════════════════════════════════
   Design Tokens — Dark Mode (Default)
   Identidade: Seu Vendedor / Especiarias da Roça
   Navy azul-marinho profundo + Amarelo-ouro vibrante
   ══════════════════════════════════════ */
:root {
  /* Core — Navy Azul-Marinho (identidade Seu Vendedor) */
  --bg-deepest: #030810;
  --bg-deep:    #060E1C;
  --bg:         #0A1628;
  --bg-subtle:  #0F1E35;
  --bg-elevated:#152440;
  --bg-surface: #1A2B4A;

  /* Card / Glassmorphism */
  --card: rgba(15, 30, 53, 0.82);
  --card-solid: rgba(15, 30, 53, 0.90);
  --card-hover: rgba(21, 36, 64, 0.55);
  --card-border: rgba(245, 197, 24, 0.10);
  --card-border-hover: rgba(245, 197, 24, 0.30);
  --glass: blur(20px) saturate(180%);

  /* Accent — Amarelo-Ouro Vibrante (identidade Seu Vendedor) */
  --accent: #F5C518;
  --accent-light: #FFD740;
  --accent-dark: #C9A200;
  --accent-glow: rgba(245, 197, 24, 0.15);
  --accent-gradient: linear-gradient(135deg, #FFD740 0%, #F5C518 45%, #C9A200 100%);

  /* Accent 2 — Azul médio (navy complementar) */
  --cyan: #2563EB;
  --cyan-light: #3B82F6;
  --cyan-dark: #1D4ED8;
  --cyan-glow: rgba(37, 99, 235, 0.12);

  /* Semânticas */
  --success: #22C55E;
  --success-light: #4ADE80;
  --success-bg: rgba(34, 197, 94, 0.10);
  --danger: #EF4444;
  --danger-light: #F87171;
  --danger-bg: rgba(239, 68, 68, 0.10);
  --warning: #F5C518;
  --warning-light: #FFD740;
  --warning-bg: rgba(245, 197, 24, 0.10);
  --info: #3B82F6;
  --info-bg: rgba(59, 130, 246, 0.10);

  /* Texto */
  --text: #E8EDF5;
  --text-secondary: #8DA3C2;
  --text-muted: #4A6080;
  --text-inverse: #0A1628;
  --text-bright: #F0F5FF;

  /* DRE Row Colors */
  --row-verde: #4ADE80;
  --row-verde-bg: rgba(74, 222, 128, 0.08);
  --row-vermelho: #F87171;
  --row-vermelho-bg: rgba(248, 113, 113, 0.08);

  /* Tabela */
  --header-bg: linear-gradient(135deg, #060E1C 0%, #0A1628 50%, #060E1C 100%);
  --header-bg-solid: #060E1C;
  --row-zebra: rgba(10, 22, 40, 0.25);
  --row-hover: rgba(245, 197, 24, 0.05);
  --cell-border: rgba(255, 255, 255, 0.04);
  --st-bg: rgba(245, 197, 24, 0.08);
  --st-text: #FFD740;
  --st-border: rgba(245, 197, 24, 0.28);
  --t-bg: rgba(6, 14, 28, 0.60);
  --t-border: rgba(255, 255, 255, 0.06);

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.50), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.60);
  --shadow-glow-accent: 0 0 30px rgba(245, 197, 24, 0.20);
  --shadow-glow-cyan: 0 0 30px rgba(37, 99, 235, 0.15);
  --shadow-glow-success: 0 0 25px rgba(34, 197, 94, 0.15);
  --shadow-glow-danger: 0 0 25px rgba(239, 68, 68, 0.15);
  --shadow-glow-warning: 0 0 25px rgba(245, 197, 24, 0.15);

  /* Tipografia — Geist */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', 'Consolas', monospace;

  /* Raios */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Espaçamento */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Sidebar */
  /* sidebar removed */

  /* Skeleton */
  --skeleton-from: #152440;
  --skeleton-to: #1E2F50;

  /* Níveis */
  --nvl2-bg: rgba(21, 36, 64, 0.18);
  --nvl3-bg: rgba(6, 14, 28, 0.12);
}

/* ══════════════════════════════════════
   Light Mode — Identidade Seu Vendedor
   ══════════════════════════════════════ */
body.light {
  --bg-deepest: #EEF2FA;
  --bg-deep:    #F4F7FD;
  --bg:         #FAFBFF;
  --bg-subtle:  #FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-surface: #EEF2FA;

  --card: rgba(255, 255, 255, 0.85);
  --card-solid: rgba(255, 255, 255, 0.90);
  --card-hover: rgba(250, 251, 255, 0.60);
  --card-border: rgba(0, 0, 0, 0.07);
  --card-border-hover: rgba(201, 162, 0, 0.25);

  --accent: #C9A200;
  --accent-light: #E5B800;
  --accent-dark: #9E7F00;
  --accent-glow: rgba(201, 162, 0, 0.10);
  --accent-gradient: linear-gradient(135deg, #E5B800 0%, #C9A200 50%, #9E7F00 100%);

  --cyan: #1D4ED8;
  --cyan-light: #2563EB;
  --cyan-dark: #1E40AF;
  --cyan-glow: rgba(29, 78, 216, 0.08);

  --text: #0A1628;
  --text-secondary: #1A2B4A;
  --text-muted: #4A6080;
  --text-inverse: #FAFBFF;
  --text-bright: #060E1C;

  --row-verde: #15803D;
  --row-verde-bg: rgba(21, 128, 61, 0.07);
  --row-vermelho: #DC2626;
  --row-vermelho-bg: rgba(220, 38, 38, 0.07);

  --header-bg: linear-gradient(135deg, #152440 0%, #1A2B4A 50%, #0F1E35 100%);
  --header-bg-solid: #152440;
  --row-zebra: rgba(238, 242, 250, 0.4);
  --row-hover: rgba(201, 162, 0, 0.05);
  --cell-border: rgba(0, 0, 0, 0.07);
  --st-bg: rgba(201, 162, 0, 0.07);
  --st-text: #9E7F00;
  --st-border: rgba(201, 162, 0, 0.25);
  --t-bg: rgba(238, 242, 250, 0.65);
  --t-border: rgba(0, 0, 0, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.09), 0 4px 10px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.12);
  --shadow-glow-accent: 0 0 30px rgba(201, 162, 0, 0.10);
  --shadow-glow-cyan: 0 0 30px rgba(29, 78, 216, 0.08);
  --shadow-glow-success: 0 0 25px rgba(21, 128, 61, 0.09);
  --shadow-glow-danger: 0 0 25px rgba(220, 38, 38, 0.09);
  --shadow-glow-warning: 0 0 25px rgba(201, 162, 0, 0.09);

  --success: #15803D;
  --success-light: #16A34A;
  --success-bg: rgba(21, 128, 61, 0.07);
  --danger: #DC2626;
  --danger-light: #EF4444;
  --danger-bg: rgba(220, 38, 38, 0.07);
  --warning: #C9A200;
  --warning-light: #E5B800;
  --warning-bg: rgba(201, 162, 0, 0.07);

  --skeleton-from: #DDE4F2;
  --skeleton-to: #EEF2FA;

  --nvl2-bg: rgba(250, 251, 255, 0.35);
  --nvl3-bg: rgba(238, 242, 250, 0.25);
}

/* ══════════════════════════════════════
   Base
   ══════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition-slow), color var(--transition-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   Animated Background
   ══════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(245, 197, 24, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(245, 197, 24, 0.03) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  animation: bgShift 20s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Grid Pattern Overlay — identidade Seu Vendedor */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 197, 24, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 197, 24, 0.018) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

body.light::before {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(201, 162, 0, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(29, 78, 216, 0.04) 0%, transparent 50%);
}

body.light::after {
  background-image:
    linear-gradient(rgba(201, 162, 0, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 0, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ══════════════════════════════════════
   App Layout (Sidebar + Main)
   ══════════════════════════════════════ */
.app-layout {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════
   API Status (top bar dot)
   ══════════════════════════════════════ */
.api-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(74, 124, 89, 0); }
}

/* ══════════════════════════════════════
   Main Content Area
   ══════════════════════════════════════ */
.main-content {
  flex: 1;
  padding: 16px 20px;
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  margin: 0 auto;
}

/* ══════════════════════════════════════
   Top Brand (replaces sidebar brand)
   ══════════════════════════════════════ */
.top-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-right: var(--space-lg);
  margin-right: var(--space-lg);
  border-right: 1px solid var(--card-border);
}

.top-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: white;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-accent);
}

.top-brand-logo svg {
  width: 15px;
  height: 15px;
}

.top-brand-name {
  font-family: var(--font-display);
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   Top Theme Toggle (icon only)
   ══════════════════════════════════════ */
.top-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.top-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}

.top-theme-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.top-theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* ══════════════════════════════════════
   Top API Status (compact dot)
   ══════════════════════════════════════ */
.top-api-status {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--success-bg);
  cursor: default;
}

/* ══════════════════════════════════════
   Top Bar / Header
   ══════════════════════════════════════ */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}

.top-bar-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.68em;
  color: var(--text-muted);
  font-weight: 500;
}

.breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

.breadcrumb-active {
  color: var(--accent-light);
  font-weight: 600;
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.page-title .title-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-timestamp {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 0.62em;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  backdrop-filter: var(--glass);
}

.data-timestamp svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.notification-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  backdrop-filter: var(--glass);
}

.notification-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: var(--shadow-glow-accent);
}

.notification-btn svg {
  width: 18px;
  height: 18px;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 0.55em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow var(--transition-base);
}

.user-avatar:hover {
  box-shadow: var(--shadow-glow-accent);
}

/* Logout button */
.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.btn-logout:hover {
  border-color: var(--danger);
  color: var(--danger-light);
  background: var(--danger-bg);
  box-shadow: var(--shadow-glow-danger);
}

.btn-logout svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.btn-logout:hover svg {
  transform: translateX(2px);
}

/* ══════════════════════════════════════
   Top Bar — Row (Title + Nav)
   ══════════════════════════════════════ */
.top-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   Top Navigation (subtle horizontal)
   ══════════════════════════════════════ */
.top-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.top-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.68em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.top-nav-link:hover {
  color: var(--accent-light);
  background: var(--accent-glow);
}

.top-nav-link.active {
  color: var(--accent);
  background: var(--accent-glow);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.top-nav-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: opacity var(--transition-base);
}

.top-nav-link:hover svg,
.top-nav-link.active svg {
  opacity: 1;
}

.top-nav-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.3;
  margin: 0 var(--space-xs);
}

/* ══════════════════════════════════════
   Summary Cards (KPI)
   ══════════════════════════════════════ */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Left accent bar */
.summary-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  transition: width var(--transition-base);
}

.summary-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover);
}

.summary-card:hover::before {
  width: 4px;
}

/* Card accent colors */
.summary-card.card-fat::before { background: var(--accent-gradient); }
.summary-card.card-mb::before { background: linear-gradient(180deg, var(--success), var(--success-light)); }
.summary-card.card-ml::before { background: linear-gradient(180deg, var(--cyan), var(--cyan-light)); }
.summary-card.card-rf::before { background: linear-gradient(180deg, var(--warning), var(--warning-light)); }

.summary-card.card-fat:hover { box-shadow: var(--shadow-glow-accent); }
.summary-card.card-mb:hover { box-shadow: var(--shadow-glow-success); }
.summary-card.card-ml:hover { box-shadow: var(--shadow-glow-cyan); }
.summary-card.card-rf:hover { box-shadow: var(--shadow-glow-warning); }

/* Card top row (icon + sparkline) */
.sc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.summary-card .sc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}

.summary-card .sc-icon svg {
  width: 16px;
  height: 16px;
}

.summary-card.card-fat .sc-icon { background: var(--accent-glow); color: var(--accent-light); }
.summary-card.card-mb .sc-icon { background: var(--success-bg); color: var(--success-light); }
.summary-card.card-ml .sc-icon { background: var(--cyan-glow); color: var(--cyan); }
.summary-card.card-rf .sc-icon { background: var(--warning-bg); color: var(--warning); }

/* Sparkline canvas */
.sc-sparkline {
  width: 72px;
  height: 28px;
  opacity: 0.6;
}

.summary-card .sc-label {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.summary-card .sc-value {
  font-size: 1.35em;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.summary-card .sc-sub {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
  font-family: var(--font-mono);
}

/* Value colors */
.sc-value.pos { color: var(--success-light) !important; }
.sc-value.neg { color: var(--danger-light) !important; }
.sc-value.neutral { color: var(--text) !important; }

body.light .sc-value.pos { color: var(--success) !important; }
body.light .sc-value.neg { color: var(--danger) !important; }

/* Card animation */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summary-card.animate-in {
  animation: cardSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.summary-card.animate-in:nth-child(2) { animation-delay: 0.08s; }
.summary-card.animate-in:nth-child(3) { animation-delay: 0.16s; }
.summary-card.animate-in:nth-child(4) { animation-delay: 0.24s; }

/* ══════════════════════════════════════
   Filters
   ══════════════════════════════════════ */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 12px 18px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.filters label {
  font-size: 0.6em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.filters select,
.filters input {
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 0.8em;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  outline: none;
}

.filters select:focus,
.filters input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.filters select:hover,
.filters input:hover {
  border-color: var(--text-muted);
}

/* Botões */
.filters button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.78em;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.filters button svg {
  width: 14px;
  height: 14px;
}

.filters button.primary {
  background: var(--accent-gradient);
  color: #0A1628;
  box-shadow: 0 2px 10px rgba(245, 197, 24, 0.30);
  font-weight: 700;
}

.filters button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(245, 197, 24, 0.45);
}

.filters button.primary:active {
  transform: translateY(0);
}

/* CSV Button */
.filters .btn-csv {
  background: linear-gradient(135deg, #15803D, #22C55E) !important;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.25) !important;
  color: #fff !important;
}
.filters .btn-csv:hover {
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.38) !important;
}

/* Excel Button */
.filters .btn-excel {
  background: linear-gradient(135deg, #1D4ED8, #3B82F6) !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28) !important;
  color: #fff !important;
}
.filters .btn-excel:hover {
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.42) !important;
}

/* PDF Button */
.filters .btn-pdf {
  background: linear-gradient(135deg, #991B1B, #EF4444) !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
}
.filters .btn-pdf:hover {
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.38) !important;
}

/* Filtro Mês (PDF) */
.filters .filter-select {
  min-width: 120px;
  align-self: flex-end;
}

/* Separator */
.filters .filter-sep {
  width: 1px;
  height: 24px;
  background: var(--card-border);
  align-self: flex-end;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Search box */
.filters .search-box {
  display: flex;
  align-items: center;
  position: relative;
}

.filters .search-box .search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.filters .search-box .search-icon svg {
  width: 15px;
  height: 15px;
}

.filters .search-box input {
  width: 160px;
  padding-left: 32px;
  cursor: text;
  transition: all var(--transition-base);
}

.filters .search-box input:focus {
  width: 220px;
}

/* ══════════════════════════════════════
   Card (Table container)
   ══════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--radius-xl);
}

/* ══════════════════════════════════════
   Table
   ══════════════════════════════════════ */
table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78em;
  min-width: 100%;
  width: max-content;
}

/* Column widths */
.col-exp   { width: 26px; min-width: 26px; }
.col-desc  { width: 220px; min-width: 220px; }
.col-pct   { width: 62px; min-width: 62px; }
.col-mes   { min-width: 115px; }
.col-total { min-width: 125px; }

/* ── Header row (sticky top) ── */
thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg-solid);
  text-align: left;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 0.64em;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(212, 165, 116, 0.3);
  white-space: nowrap;
  user-select: none;
}

thead th.col-mes,
thead th.col-total,
thead th.col-pct {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.64em;
}

/* Sortable header */
thead th.sortable {
  cursor: pointer;
  transition: all var(--transition-fast);
}

thead th.sortable:hover {
  background: rgba(212, 165, 116, 0.15);
  color: #FFFFFF;
}

thead th.sortable .sort-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0.3;
  transition: all var(--transition-fast);
}

thead th.sortable .sort-icon svg {
  width: 12px;
  height: 12px;
}

thead th.sortable:hover .sort-icon {
  opacity: 0.6;
}

thead th.sortable.sort-asc .sort-icon,
thead th.sortable.sort-desc .sort-icon {
  opacity: 1;
  color: var(--accent-light);
}

/* ── Cells ── */
td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--cell-border);
  border-right: 1px solid var(--cell-border);
  font-size: 0.9em;
  background: transparent;
  transition: background var(--transition-fast);
}

thead th:last-child,
td:last-child {
  border-right: none;
}

tbody tr:last-child td {
  border-bottom: 2px solid var(--cell-border);
}

/* ── Numbers ── */
.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: -0.2px;
  font-weight: 500;
  white-space: nowrap;
}

.num.neg { color: var(--danger-light) !important; }
.num.pos { color: var(--success-light) !important; }

body.light .num.neg { color: var(--danger) !important; }
body.light .num.pos { color: var(--success) !important; }

/* ── Pct badge (pill style) ── */
.pct-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.pct-badge.pct-pos {
  background: var(--success-bg);
  color: var(--success-light);
}
.pct-badge.pct-neg {
  background: var(--danger-bg);
  color: var(--danger-light);
}
.pct-badge.pct-zero {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

body.light .pct-badge.pct-pos { color: var(--success); }
body.light .pct-badge.pct-neg { color: var(--danger); }

/* ── Sticky left columns ── */
td.col-exp, th.col-exp {
  position: sticky; left: 0; z-index: 3; background: inherit;
}
td.col-desc, th.col-desc {
  position: sticky; left: 26px; z-index: 3; background: inherit;
}
td.col-pct, th.col-pct {
  position: sticky; left: 246px; z-index: 3; background: inherit;
}

thead th.col-exp,
thead th.col-desc,
thead th.col-pct {
  z-index: 12;
}

/* Sticky backgrounds para tree rows */
.nvl2-row td.col-exp,
.nvl2-row td.col-desc,
.nvl2-row td.col-pct,
.nvl3-row td.col-exp,
.nvl3-row td.col-desc,
.nvl3-row td.col-pct {
  background: transparent;
}

.nvl2-row:hover td.col-exp,
.nvl2-row:hover td.col-desc,
.nvl2-row:hover td.col-pct,
.nvl3-row:hover td.col-exp,
.nvl3-row:hover td.col-desc,
.nvl3-row:hover td.col-pct {
  background: var(--row-hover) !important;
}

/* ── Zebra ── */
tbody tr:nth-child(even):not(.st-row):not(.nvl2-row):not(.nvl3-row):not(.t-row) td {
  background: var(--row-zebra);
}

/* ── Hover ── */
tbody tr:hover td {
  background: var(--row-hover) !important;
}

/* ══════════════════════════════════════
   ST (SubTotal) rows
   ══════════════════════════════════════ */
.st-row td {
  background: var(--st-bg) !important;
  font-weight: 700;
  border-top: 2px solid var(--st-border);
  border-bottom: 2px solid var(--st-border);
  padding: 6px 8px;
  color: var(--st-text);
}
.st-row .num { color: var(--st-text); }

/* Faixa lateral no ST */
.st-row td.col-exp {
  position: relative;
}
.st-row td.col-exp::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-gradient);
  border-radius: 0 2px 2px 0;
}

/* ══════════════════════════════════════
   T rubrica rows
   ══════════════════════════════════════ */
.t-row td {
  background: var(--t-bg) !important;
  font-weight: 700;
  font-size: 0.92em;
  border-top: 2px solid var(--t-border);
  border-bottom: 2px solid var(--t-border);
  padding: 6px 8px;
}

.t-row .col-desc {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.82em;
}

/* ══════════════════════════════════════
   Tree: NVL2 rows
   ══════════════════════════════════════ */
.nvl2-row td {
  padding: 4px 8px;
  border-bottom: none;
  font-size: 0.87em;
}
.nvl2-row:last-child td { border-bottom: 1px solid var(--cell-border); }
.nvl2-row:hover td { background: var(--row-hover); }
.nvl2-row .col-desc {
  padding-left: 16px !important;
  font-weight: 500;
}

/* NVL2 sem NVL3 (flat) */
.nvl2-flat td {
  padding: 4px 8px;
  border-bottom: none;
  font-size: 0.87em;
}
.nvl2-flat:last-child td { border-bottom: 1px solid var(--cell-border); }
.nvl2-flat:hover td { background: var(--row-hover); }

/* NVL2 dark adjustments */
.nvl2-row td,
.nvl2-flat td {
  background: var(--nvl2-bg);
}
.nvl2-row td.col-exp,
.nvl2-row td.col-desc,
.nvl2-row td.col-pct,
.nvl2-flat td.col-exp,
.nvl2-flat td.col-desc,
.nvl2-flat td.col-pct {
  background: var(--nvl2-bg);
}
.nvl2-row:hover td,
.nvl2-flat:hover td {
  background: var(--row-hover) !important;
}
.nvl2-row:hover td.col-exp,
.nvl2-row:hover td.col-desc,
.nvl2-row:hover td.col-pct,
.nvl2-flat:hover td.col-exp,
.nvl2-flat:hover td.col-desc,
.nvl2-flat:hover td.col-pct {
  background: var(--row-hover) !important;
}

/* ══════════════════════════════════════
   Tree: NVL3 rows
   ══════════════════════════════════════ */
.nvl3-row td {
  padding: 3px 8px;
  border-bottom: none;
  font-size: 0.83em;
  background: var(--nvl3-bg);
}
.nvl3-row:last-child td { border-bottom: 1px solid var(--cell-border); }
.nvl3-row:hover td { background: var(--row-hover) !important; }
.nvl3-row .col-desc {
  padding-left: 32px !important;
  color: var(--text-secondary);
  font-weight: 400;
}
.nvl3-row td.col-exp,
.nvl3-row td.col-desc,
.nvl3-row td.col-pct {
  background: var(--nvl3-bg);
}
.nvl3-row:hover td.col-exp,
.nvl3-row:hover td.col-desc,
.nvl3-row:hover td.col-pct {
  background: var(--row-hover) !important;
}

/* ══════════════════════════════════════
   Skeleton Loader
   ══════════════════════════════════════ */
.skeleton {
  padding: var(--space-lg);
}

.skeleton-row {
  height: 18px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--skeleton-from) 25%,
    var(--skeleton-to) 50%,
    var(--skeleton-from) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPremium 1.8s ease-in-out infinite;
}

.skeleton-row:nth-child(odd) { width: 100%; }
.skeleton-row:nth-child(even) { width: 85%; }
.skeleton-row:last-child { width: 55%; }

@keyframes shimmerPremium {
  0%   { background-position: 200% 0; opacity: 0.5; }
  50%  { opacity: 0.8; }
  100% { background-position: -200% 0; opacity: 0.5; }
}

/* ══════════════════════════════════════
   States
   ══════════════════════════════════════ */
.loading {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
  font-weight: 500;
}

.error {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--danger);
  font-weight: 600;
}

.error small {
  display: block;
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.85em;
  font-weight: 400;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
  font-weight: 500;
}

.empty-state svg {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* ══════════════════════════════════════
   DRE Analítica: Árvore & Cores
   ══════════════════════════════════════ */

/* Row colors */
.row-verde td {
  color: var(--row-verde) !important;
}
.row-verde td.col-desc {
  color: var(--row-verde) !important;
}
.row-verde .pct-badge {
  background: var(--row-verde-bg) !important;
  color: var(--row-verde) !important;
}

.row-vermelho td {
  color: var(--row-vermelho) !important;
}
.row-vermelho td.col-desc {
  color: var(--row-vermelho) !important;
}
.row-vermelho .pct-badge {
  background: var(--row-vermelho-bg) !important;
  color: var(--row-vermelho) !important;
}

/* Valor + % na mesma célula */
.pct-sub {
  font-size: 0.68em;
  opacity: 0.55;
  display: block;
  margin-top: 0;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.2;
}

/* Árvore Interativa */
.tree-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-right: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.tree-toggle:hover {
  color: var(--accent-light);
}

.tree-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tree-bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 9px;
  vertical-align: middle;
  opacity: 0.4;
}

/* Indentação de árvore */
.st-row td.col-desc {
  padding-left: 10px !important;
}

.t-row td.col-desc {
  padding-left: 10px !important;
}

.nvl2-row td.col-desc,
.nvl2-flat td.col-desc {
  padding-left: 26px !important;
}

.nvl3-row td.col-desc {
  padding-left: 42px !important;
}

/* Badge de contagem de filhos */
.child-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  color: var(--accent-light);
  font-size: 0.68em;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  margin-left: 6px;
  vertical-align: middle;
}

body.light .child-count-badge {
  background: rgba(139, 105, 20, 0.08);
  color: var(--accent);
}

/* Table actions */
.table-actions-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.action-link {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.65em;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 0.7px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.action-link:hover {
  color: var(--accent-light);
  background: var(--accent-glow);
}

.action-sep {
  font-size: 0.72em;
  color: var(--text-muted);
  opacity: 0.3;
}

/* ══════════════════════════════════════
   Charts Grid
   ══════════════════════════════════════ */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: var(--space-2xl);
}

.chart-card {
  padding: 18px !important;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  position: relative;
}

/* Subcategory popup (mini pizza on hover) */
.subcat-popup {
  position: absolute;
  z-index: 50;
  display: none;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  box-shadow: var(--shadow-xl);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 360px;
  width: auto;
}

.subcat-popup-title {
  font-family: var(--font-display);
  font-size: 0.95em;
  font-weight: 700;
  color: var(--accent-light);
  text-align: center;
  padding: 0 0 12px;
  letter-spacing: 0.5px;
}

/* ── Modal main values (tooltip columns) ── */
.modal-mv-table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 16px;
  padding: 0 4px 8px;
  font-size: 0.85em;
}

.modal-mv-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.modal-mv-value {
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
  color: var(--text-bright);
  white-space: nowrap;
}

.modal-mv-value.pct {
  color: var(--accent-light);
}

/* ── Divider ── */
.modal-divider {
  height: 1px;
  background: var(--card-border);
  margin: 10px 0 14px;
}

/* ── Subcategory table ── */
.modal-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-table-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.modal-table-label {
  font-size: 0.82em;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}

.modal-table-val {
  font-size: 0.82em;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-bright);
  text-align: right;
  white-space: nowrap;
}

.modal-table-pct {
  font-size: 0.78em;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--accent-light);
  text-align: right;
  white-space: nowrap;
  min-width: 52px;
}

.modal-table-total {
  border-top: 1px solid var(--card-border);
  margin-top: 2px;
  padding-top: 2px;
}

.modal-table-total .modal-table-label {
  font-weight: 700;
  color: var(--text-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75em;
}

.modal-table-total .modal-table-val {
  color: var(--accent-light);
}

.chart-card.full-width {
  grid-column: span 2;
}

.chart-header {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chart-header h3 {
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-header h3 .chart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  color: var(--accent-light);
}

.chart-header h3 .chart-icon svg {
  width: 13px;
  height: 13px;
}

.chart-header p {
  font-size: 0.72em;
  color: var(--text-muted);
}

.chart-container {
  position: relative;
  flex-grow: 1;
  height: 290px;
  width: 100%;
}

/* ══════════════════════════════════════
   Responsive
   ══════════════════════════════════════ */
@media (max-width: 1100px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
  .chart-card.full-width {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 12px;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-title { font-size: 1.15em; }

  .filters {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }
  .filters > div { width: 100%; }
  .filters select,
  .filters button,
  .filters input {
    width: 100%;
  }
  .filters .search-box { width: 100%; }
  .filters .search-box input { width: 100% !important; }
  .filters .filter-sep { display: none; }

  .col-mes { width: 80px; min-width: 80px; }
  .col-total { width: 100px; min-width: 100px; }

  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .mobile-toggle {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }
  .summary-card {
    padding: 14px 16px;
  }
}

/* ══════════════════════════════════════
   Scrollbar Custom
   ══════════════════════════════════════ */
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: var(--radius-full);
  opacity: 0.4;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

/* ══════════════════════════════════════
   Print
   ══════════════════════════════════════ */
@media print {
  body { background: white; padding: 0; }
  body::before, body::after { display: none; }
  .top-theme-toggle, .notification-btn, .user-avatar { display: none; }
  .filters button { display: none; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .summary-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ══════════════════════════════════════
   Section Fade-in Animation
   ══════════════════════════════════════ */
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.filters,
.card,
.chart-card {
  animation: sectionFadeIn 0.5s ease-out both;
}

.filters { animation-delay: 0.1s; }
.card { animation-delay: 0.2s; }
.chart-card { animation-delay: 0.3s; }
.chart-card:nth-child(2) { animation-delay: 0.4s; }
.chart-card:nth-child(3) { animation-delay: 0.5s; }
.chart-card:nth-child(4) { animation-delay: 0.6s; }

/* Particle canvas — controlled by backgrounds.js */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}