/* Dashboard System — camada compartilhada de UX/UI
   Mantém dados, gráficos e thumbnails intactos; só padroniza shell visual. */
:root {
  --ui-bg: #080b14;
  --ui-surface: rgba(17, 24, 39, 0.82);
  --ui-surface-strong: rgba(24, 31, 48, 0.94);
  --ui-card: rgba(20, 28, 44, 0.88);
  --ui-card-2: rgba(15, 23, 42, 0.92);
  --ui-border: rgba(148, 163, 184, 0.16);
  --ui-border-strong: rgba(148, 163, 184, 0.26);
  --ui-text: #eef4ff;
  --ui-muted: #8ea0bc;
  --ui-subtle: #b8c4d9;
  --ui-blue: #4f7cff;
  --ui-teal: #2dd4bf;
  --ui-red: #ef4444;
  --ui-yellow: #f59e0b;
  --ui-green: #22c55e;
  --ui-purple: #a855f7;
  --ui-radius: 18px;
  --ui-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

html { scroll-behavior: smooth; }
body.dashboard-standard {
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 124, 255, 0.15), transparent 34rem),
    radial-gradient(circle at 88% 14%, rgba(45, 212, 191, 0.10), transparent 30rem),
    linear-gradient(180deg, #070a12 0%, #0d1220 48%, #090d16 100%) !important;
  color: var(--ui-text) !important;
}

body.dashboard-standard::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
  z-index: -1;
}

/* Navegação única */
.topnav {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 54px !important;
  padding: 7px max(14px, calc((100vw - 1400px) / 2 + 18px)) !important;
  background: rgba(5, 8, 16, 0.88) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.tnav-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 8px !important;
  padding-right: 14px !important;
  border-right: 1px solid var(--ui-border) !important;
  font-size: 0.74rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  color: rgba(238, 244, 255, .55) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.tnav-brand::before { content: ''; width:7px; height:7px; border-radius:999px; background:var(--ui-red); box-shadow:0 0 12px rgba(239,68,68,.7); }

.tnav-mark {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(238,244,255,.78) !important;
  font-size: .58rem !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
}
.tnav-active .tnav-mark { background: rgba(79,124,255,.26) !important; color:#fff !important; border-color:rgba(79,124,255,.40) !important; }
body.dashboard-standard .card-icon-wrap,
body.dashboard-standard .page-icon,
body.dashboard-standard .brand-icon {
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}
body.dashboard-standard .nav-card .card-desc { max-width: 52ch; }
body.dashboard-standard .disabled,
body.dashboard-standard .is-disabled,
body.dashboard-standard [aria-disabled="true"] { opacity:.58 !important; filter:saturate(.7); }
body.dashboard-standard .empty-state { color: var(--ui-muted) !important; border:1px dashed var(--ui-border) !important; background:rgba(255,255,255,.035) !important; border-radius:14px !important; }

body.dashboard-standard { overflow-x: hidden !important; }
body.dashboard-standard .card,
body.dashboard-standard .panel,
body.dashboard-standard .section,
body.dashboard-standard .leader-item,
body.dashboard-standard .newsletter-lead,
body.dashboard-standard .scroll-list,
body.dashboard-standard .leader-main,
body.dashboard-standard .leader-meta,
body.dashboard-standard .leader-stats,
body.dashboard-standard .post-title,
body.dashboard-standard .lead-name {
  min-width: 0 !important;
  max-width: 100% !important;
}
body.dashboard-standard .leader-item { flex-wrap: wrap !important; gap: 10px !important; }
body.dashboard-standard .leader-item > * { min-width: 0 !important; }
body.dashboard-standard .leader-main { flex: 1 1 220px !important; }
body.dashboard-standard .leader-stats { flex: 1 1 160px !important; justify-content: flex-start !important; }
body.dashboard-standard .post-title,
body.dashboard-standard .lead-name { overflow-wrap: anywhere !important; }

body.dashboard-standard .table-wrap,
body.dashboard-standard .tablebox,
body.dashboard-standard .campaign-table,
body.dashboard-standard .creative-table,
body.dashboard-standard .data-table,
body.dashboard-standard .table-container { max-width:100% !important; overflow-x:auto !important; }
body.dashboard-standard table { min-width: max-content; }

.tnav-item {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(238, 244, 255, .64) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
  flex: 0 0 auto !important;
}
.tnav-item:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; border-color: var(--ui-border) !important; transform: translateY(-1px); }
.tnav-item.tnav-active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(79,124,255,.28), rgba(45,212,191,.12)) !important;
  border-color: rgba(79,124,255,.52) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 24px rgba(79,124,255,.14) !important;
}
.tnav-disabled { opacity: .42 !important; pointer-events: none !important; }

/* Header padrão */
.header {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  min-height: 76px !important;
  padding: 0 24px !important;
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(17,24,39,.84)) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: visible !important;
}
.header::before { content: none !important; }
.header-inner {
  max-width: 1400px !important;
  min-height: 76px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
.header-left, .header-right { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0; }
.header-right { justify-content: flex-end !important; flex-wrap: wrap !important; }
.btn-back { display: none !important; }
.page-id, .brand { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0; }
.page-icon, .brand-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--ui-blue), var(--ui-purple)) !important;
  box-shadow: 0 12px 28px rgba(79,124,255,.22), inset 0 0 0 1px rgba(255,255,255,.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.page-name, .brand-name, .header h1 {
  color: #fff !important;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
.page-acc, .brand-sub, .header .subtitle {
  color: var(--ui-muted) !important;
  font-size: .78rem !important;
  margin-top: 3px !important;
}
.header-meta { justify-content: flex-start !important; margin-top: 10px !important; gap: 8px !important; }
.header-meta span, .live-badge, .user-badge, .last-update, .btn-logout, .status-pill {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--ui-subtle) !important;
  padding: 6px 10px !important;
  font-size: .73rem !important;
  font-weight: 700 !important;
  backdrop-filter: blur(10px) !important;
}
.btn-logout { color: #fecaca !important; border-color: rgba(239,68,68,.24) !important; cursor: pointer; }

/* Conteúdo e seções */
.container, main.container {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 26px 18px 48px !important;
}
.section, .panel-section { margin-bottom: 30px !important; }
h2, .section-title {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
h2 .accent, .section-title .accent { color: var(--ui-teal) !important; }
body.dashboard-standard .section-title { flex-wrap: wrap !important; }
body.dashboard-standard .section-title > * { min-width: 0 !important; }

/* Cards, KPIs e gráficos */
.kpi-grid, .summary-grid, .cards-grid {
  gap: 14px !important;
  margin-bottom: 28px !important;
}
.kpi-card, .summary-card, .chart-card, .chart-full, .detail-card, .comp-card, .insight-card, .creative-card, .video-card, .content-card, .wip-card, .status-card, .metric-card, .nav-card {
  background: linear-gradient(180deg, rgba(24,31,48,.92), rgba(15,23,42,.88)) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}
.kpi-card, .summary-card, .detail-card, .comp-card, .insight-card, .metric-card { padding: 18px !important; }
.chart-card, .chart-full { padding: 18px !important; }
.cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
.kpi-card:hover, .summary-card:hover, .chart-card:hover, .chart-full:hover, .detail-card:hover, .creative-card:hover, .video-card:hover, .content-card:hover, .nav-card:hover {
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px);
  transition: transform .18s ease, border-color .18s ease;
}
.kpi-lbl, .metric-lbl, .creative-metric-lbl { color: var(--ui-muted) !important; font-size: .72rem !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 800 !important; }
.kpi-val, .metric-val { color: #fff !important; font-weight: 900 !important; letter-spacing: -.04em !important; }
.chart-card h3, .chart-full h3 { color: var(--ui-subtle) !important; font-size: .86rem !important; font-weight: 800 !important; margin-bottom: 14px !important; }
canvas { max-width: 100%; }

/* Filtros, tabs e botões */
.tab-btn, .fbtn, .metric-btn, .type-btn, .filter-btn, .period-btn, button[class*="tab"], button[class*="filter"] {
  border-radius: 999px !important;
  border: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--ui-subtle) !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-weight: 750 !important;
  transition: all .18s ease !important;
}
.tab-btn:hover, .fbtn:hover, .metric-btn:hover, .type-btn:hover, .filter-btn:hover, .period-btn:hover,
.tab-btn.active, .fbtn.active, .metric-btn.active, .type-btn.active, .filter-btn.active, .period-btn.active {
  background: rgba(79,124,255,.18) !important;
  border-color: rgba(79,124,255,.48) !important;
  color: #fff !important;
}

/* Tabelas */
table { border-collapse: separate !important; border-spacing: 0 !important; }
th { color: var(--ui-muted) !important; font-size: .72rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
td { border-color: rgba(148,163,184,.10) !important; }
tr:hover td { background: rgba(255,255,255,.025) !important; }

/* Thumbs preservadas, só acabamento visual */
.creative-thumb, .video-thumb, .thumb, img[class*="thumb"], .thumbnail {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.28) !important;
}
.creative-thumb img, .video-thumb img, img[class*="thumb"] { object-fit: cover; }

@media (max-width: 1100px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .topnav { padding: 7px 10px !important; min-height: 52px !important; }
  .tnav-brand { padding-right: 10px !important; margin-right: 2px !important; }
  .tnav-lbl { display: inline !important; }
  .header { padding: 0 16px !important; }
  .header-inner { align-items: flex-start !important; flex-direction: column !important; min-height: unset !important; width:100% !important; max-width:100% !important; }
  .header-right { justify-content: flex-start !important; width:100% !important; max-width:100% !important; flex-wrap:wrap !important; }
  .last-update, .header-meta span { max-width:100% !important; white-space:normal !important; overflow-wrap:anywhere !important; }
  .container, main.container { padding: 20px 12px 38px !important; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cards-grid { grid-template-columns: 1fr !important; }
  .kpi-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.dashboard-standard .hero { padding: 22px 16px !important; gap: 14px !important; }
  body.dashboard-standard h1 { font-size: clamp(1.75rem, 9vw, 2.55rem) !important; line-height: 1.02 !important; }
  body.dashboard-standard .filters, body.dashboard-standard .filter-bar, body.dashboard-standard .controls { overflow-x:auto !important; flex-wrap:nowrap !important; padding-bottom:4px !important; }
  body.dashboard-standard .grid4, body.dashboard-standard .grid3, body.dashboard-standard .grid2, body.dashboard-standard .method-flow { grid-template-columns:1fr !important; }
  body.dashboard-standard table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  body.dashboard-standard th, body.dashboard-standard td { padding: 8px 6px !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: .68rem !important; }
  body.dashboard-standard .num, body.dashboard-standard .r { text-align: left !important; }
}




@media (max-width: 760px) {
  body.dashboard-standard .header { display: none !important; }
}


@media (max-width: 760px) {
  body { overflow-x: hidden !important; }
  .intushub-header { position: sticky !important; top: 0 !important; }
  .intushub-header-inner { align-items: flex-start !important; flex-direction: column !important; gap: 9px !important; min-height: 0 !important; padding: 9px 12px !important; max-width: 100% !important; }
  .intushub-brand { min-width: 0 !important; }
  .intushub-brand-mark { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
  .intushub-brand-name { font-size: .92rem !important; }
  .intushub-brand-sub { font-size: .58rem !important; letter-spacing: .1em !important; max-width: 280px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .topnav, .intushub-nav { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 2px 2px 0 !important; }
  .topnav::-webkit-scrollbar, .intushub-nav::-webkit-scrollbar { display: none !important; }
  .tnav-item { flex: 0 0 auto !important; }
}