/* SGW V823 - Dashboard usando a MESMA BASE da SGW_INTERFACE_CLARA_PREVIEW(2)
   Esta folha NAO cria dados ficticios. Ela apenas aplica a mesma linguagem visual
   aos componentes reais que ja existem no dashboard do SGW.
*/

html.sgw823-dashboard-preview2,
html.sgw823-dashboard-preview2 body{
  --sgw-bg:#F2F6FA;
  --sgw-surface:#FFFFFF;
  --sgw-surface-2:#F6FAFF;
  --sgw-border:#D9E5F5;
  --sgw-primary:#0F67ED;
  --sgw-primary-2:#164D9C;
  --sgw-primary-dark:#09285A;
  --sgw-primary-deep:#071532;
  --sgw-primary-soft:#669BEB;
  --sgw-cyan:#00D4FF;
  --sgw-text:#071532;
  --sgw-text-2:#637093;
  --sgw-text-3:#929AB1;
  --ok:#10B981;
  --warn:#F59E0B;
  --danger:#EF4444;
  --info:#06B6D4;
  --shadow:0 10px 30px rgba(15,103,237,.09);
  --shadow-sm:0 6px 18px rgba(15,103,237,.07);
  --radius:16px;

  background:var(--sgw-bg)!important;
  color:var(--sgw-text)!important;
  font-family:Inter,Segoe UI,Arial,sans-serif!important;
}

/* Mantem o topo V822 e apenas harmoniza com a mesma base */
html.sgw823-dashboard-preview2 body.sgw453-provider-server #sgw450TopShell{
  background:#fff!important;
  border-bottom:1px solid var(--sgw-border)!important;
  box-shadow:0 4px 16px rgba(7,21,50,.05)!important;
}

/* area real do dashboard */
html.sgw823-dashboard-preview2 .sgw823-dashboard-root,
html.sgw823-dashboard-preview2 main{
  color:var(--sgw-text)!important;
}

html.sgw823-dashboard-preview2 .sgw823-dashboard-root{
  background:var(--sgw-bg)!important;
  padding:0 16px 22px!important;
  min-width:0!important;
}

/* CARROSSEL/BANNER REAL já existente: preserva imagem, link e tempo */
html.sgw823-dashboard-preview2 .sgw392-carousel,
html.sgw823-dashboard-preview2 .sgw823-banner-real{
  border-radius:18px!important;
  overflow:hidden!important;
  margin-bottom:14px!important;
  border:1px solid rgba(15,103,237,.10)!important;
  box-shadow:var(--shadow)!important;
  background:linear-gradient(120deg,#0A2B66 0%,#0F67ED 58%,#19B8FF 100%)!important;
}
html.sgw823-dashboard-preview2 .sgw392-slides{
  border-radius:18px!important;
  overflow:hidden!important;
}
html.sgw823-dashboard-preview2 .sgw392-slide img,
html.sgw823-dashboard-preview2 .sgw392-slide video{
  display:block!important;
  width:100%!important;
}
html.sgw823-dashboard-preview2 .sgw392-slide .caption{
  background:linear-gradient(180deg,transparent,rgba(7,21,50,.76))!important;
  color:#fff!important;
}
html.sgw823-dashboard-preview2 .sgw392-prev,
html.sgw823-dashboard-preview2 .sgw392-next{
  border:1px solid rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  backdrop-filter:blur(5px);
}

/* Grade real do dashboard: não altera ordem, largura ou altura salvas pelo V458 */
html.sgw823-dashboard-preview2 .sgw823-dashboard-grid{
  gap:12px!important;
}

/* Painel/card base exatamente na linguagem da prévia */
html.sgw823-dashboard-preview2 .sgw823-panel,
html.sgw823-dashboard-preview2 .sgw823-metric{
  background:#fff!important;
  background-color:#fff!important;
  border:1px solid var(--sgw-border)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-sm)!important;
  color:var(--sgw-text)!important;
  overflow:hidden;
}

/* Evita quebrar drag/resize do editor */
html.sgw823-dashboard-preview2 [data-dashboard-card].sgw823-panel,
html.sgw823-dashboard-preview2 [data-dashboard-card].sgw823-metric,
html.sgw823-dashboard-preview2 [data-widget].sgw823-panel,
html.sgw823-dashboard-preview2 [data-widget].sgw823-metric{
  min-width:0!important;
}

/* Cards de números / métricas */
html.sgw823-dashboard-preview2 .sgw823-metric{
  padding:15px!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric .sgw823-ico{
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:#EAF1FB!important;
  color:var(--sgw-primary)!important;
  font-weight:900!important;
  margin-bottom:10px!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric small,
html.sgw823-dashboard-preview2 .sgw823-metric .subtitle,
html.sgw823-dashboard-preview2 .sgw823-metric .label{
  color:var(--sgw-text-2)!important;
  font-weight:700!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric strong,
html.sgw823-dashboard-preview2 .sgw823-metric .value,
html.sgw823-dashboard-preview2 .sgw823-metric [class*="number"]{
  color:var(--sgw-primary-dark)!important;
  font-weight:900!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric em{
  color:var(--sgw-text-2)!important;
  font-style:normal!important;
}

/* Cores funcionais iguais à prévia */
html.sgw823-dashboard-preview2 .sgw823-metric.sgw823-ok .sgw823-ico{
  background:#E8FFF7!important;color:var(--ok)!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric.sgw823-warn .sgw823-ico{
  background:#FFF6DF!important;color:var(--warn)!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric.sgw823-danger .sgw823-ico{
  background:#FFECEC!important;color:var(--danger)!important;
}
html.sgw823-dashboard-preview2 .sgw823-metric.sgw823-info .sgw823-ico{
  background:#E7FBFF!important;color:var(--info)!important;
}

/* Títulos dos painéis */
html.sgw823-dashboard-preview2 .sgw823-panel > h1,
html.sgw823-dashboard-preview2 .sgw823-panel > h2,
html.sgw823-dashboard-preview2 .sgw823-panel > h3,
html.sgw823-dashboard-preview2 .sgw823-panel header h1,
html.sgw823-dashboard-preview2 .sgw823-panel header h2,
html.sgw823-dashboard-preview2 .sgw823-panel header h3,
html.sgw823-dashboard-preview2 .sgw823-panel .card-title,
html.sgw823-dashboard-preview2 .sgw823-panel [class*="title"]{
  color:var(--sgw-primary-dark)!important;
}

/* cabeçalhos internos parecidos com .ph da prévia */
html.sgw823-dashboard-preview2 .sgw823-panel > header,
html.sgw823-dashboard-preview2 .sgw823-panel > .header,
html.sgw823-dashboard-preview2 .sgw823-panel > [class*="head"]{
  border-bottom-color:var(--sgw-border)!important;
}

/* Links de ação */
html.sgw823-dashboard-preview2 .sgw823-panel a{
  color:var(--sgw-primary)!important;
}

/* Hero/avisos/cobrança SaaS que já existem */
html.sgw823-dashboard-preview2 .v167-hero,
html.sgw823-dashboard-preview2 .v167-payments-card,
html.sgw823-dashboard-preview2 .v167-platform-billing{
  background:#fff!important;
  border:1px solid var(--sgw-border)!important;
  border-radius:16px!important;
  box-shadow:var(--shadow-sm)!important;
  color:var(--sgw-text)!important;
}
html.sgw823-dashboard-preview2 .v167-hero h1,
html.sgw823-dashboard-preview2 .v167-hero h2,
html.sgw823-dashboard-preview2 .v167-payments-card h1,
html.sgw823-dashboard-preview2 .v167-payments-card h2,
html.sgw823-dashboard-preview2 .v167-platform-billing h1,
html.sgw823-dashboard-preview2 .v167-platform-billing h2{
  color:var(--sgw-primary-dark)!important;
}

/* DownDetector dashboard */
html.sgw823-dashboard-preview2 .dd374-dashboard-host,
html.sgw823-dashboard-preview2 .dd375-dashboard-host{
  background:transparent!important;
}
html.sgw823-dashboard-preview2 .dd374-dash-card,
html.sgw823-dashboard-preview2 .dd375-dash-card{
  background:#fff!important;
  border-color:var(--sgw-border)!important;
  border-radius:12px!important;
  box-shadow:0 3px 12px rgba(15,103,237,.05)!important;
}

/* Gráficos reais */
html.sgw823-dashboard-preview2 canvas,
html.sgw823-dashboard-preview2 svg{
  max-width:100%;
}
html.sgw823-dashboard-preview2 .sgw823-chart-host{
  border-color:#E0EAF6!important;
  border-radius:12px!important;
  background:#fff!important;
}

/* Tabelas dentro do dashboard */
html.sgw823-dashboard-preview2 .sgw823-dashboard-root table{
  background:#fff!important;
  color:var(--sgw-text)!important;
  border-color:var(--sgw-border)!important;
}
html.sgw823-dashboard-preview2 .sgw823-dashboard-root th{
  background:#F6FAFF!important;
  color:var(--sgw-primary-dark)!important;
  border-color:var(--sgw-border)!important;
}
html.sgw823-dashboard-preview2 .sgw823-dashboard-root td{
  border-color:#E6EEF7!important;
}

/* Inputs do dashboard */
html.sgw823-dashboard-preview2 .sgw823-dashboard-root input,
html.sgw823-dashboard-preview2 .sgw823-dashboard-root select,
html.sgw823-dashboard-preview2 .sgw823-dashboard-root textarea{
  background:#fff!important;
  color:var(--sgw-text)!important;
  border-color:var(--sgw-border)!important;
  border-radius:10px!important;
}

/* Botões */
html.sgw823-dashboard-preview2 .sgw823-dashboard-root .btn-primary,
html.sgw823-dashboard-preview2 .sgw823-dashboard-root button.primary{
  background:var(--sgw-primary)!important;
  border-color:var(--sgw-primary)!important;
  color:#fff!important;
}

/* Mantém mapas reais em vez de simular mapa da prévia */
html.sgw823-dashboard-preview2 .leaflet-container,
html.sgw823-dashboard-preview2 [class*="map"] .leaflet-container{
  border-radius:12px!important;
  border:1px solid #DCE7F5!important;
}

/* Área vazia/fallback */
html.sgw823-dashboard-preview2 .empty,
html.sgw823-dashboard-preview2 [class*="empty"]{
  color:var(--sgw-text-2)!important;
}

/* Responsivo baseado no mesmo código da prévia */
@media(max-width:1200px){
  html.sgw823-dashboard-preview2 .sgw823-dashboard-root{padding:0 12px 20px!important}
}
@media(max-width:760px){
  html.sgw823-dashboard-preview2 .sgw823-dashboard-root{padding:0 8px 16px!important}
  html.sgw823-dashboard-preview2 .sgw823-panel,
  html.sgw823-dashboard-preview2 .sgw823-metric{border-radius:13px!important}
}