/* ==========================================================================
   Identidade — preto e vermelho

   A referência é azul-marinho e ciano. Este arquivo troca só os tokens de
   cor; nenhuma regra de layout é reescrita, então tudo que já funcionava
   continua funcionando e a repaginação cabe num arquivo que dá para ler.

   O problema que essa troca cria, e como ele foi resolvido:

   Vermelho já era a cor de "deu errado" neste painel. Promovê-lo a cor da
   marca faria o botão de salvar parecer um alerta, e o de excluir parecer o
   botão comum. Então o vermelho ficou reservado a três coisas — a marca, a
   ação principal e a série principal dos gráficos — e o resto da interface
   virou preto e grafite. Assim sobra espaço para o vermelho de alarme ainda
   significar alarme.

   Destrutivo continua distinguível por FORMA, não só por matiz: ação
   principal é preenchida, exclusão é contornada e vazia. Quem não separa os
   dois vermelhos separa cheio de vazio.

   O vermelho abaixo é aproximado ao da GoodWe. Se você tiver o hexadecimal
   exato da marca, é trocar --marca-vermelho e --marca-vermelho-forte aqui.
   ========================================================================== */
:root {
  --marca-vermelho: #E1251B;        /* identidade, linhas, acentos */
  --marca-vermelho-forte: #B4160F;  /* fundo de botão: carrega texto branco */
  --marca-vermelho-claro: #FDEBEA;  /* fundo suave */
  --marca-preto: #0D0D0F;
  --marca-grafite: #17171B;
  --marca-carvao: #232329;

  /* ---- superfícies ---- */
  --bg-app: #F4F4F6;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-soft: #ECECEF;
  --header-bg: #FAFAFB;
  --table-header-bg: #F0F0F3;
  --table-row-hover: #F7F7F9;
  --table-bg: #FFFFFF;
  --table-row-border: #E7E7EB;
  --table-row-selected: #FDEBEA;

  /* ---- menu lateral: preto com a linha ativa em vermelho ---- */
  --sidebar-bg: var(--marca-preto);
  --sidebar-bg-secondary: var(--marca-grafite);
  --sidebar-hover: #26262C;
  --sidebar-active: #32323A;
  --sidebar-active-line: var(--marca-vermelho);

  /* ---- texto e linhas ---- */
  --text-primary: #16161A;
  --text-secondary: #5B5B66;         /* medido em 5,6 sobre o fundo do app */
  --text-muted: #74747F;
  --text-on-dark: #F7F7F8;
  --text-on-dark-secondary: #C2C2CB;
  --border-default: #E2E2E7;
  --border-strong: #C9C9D1;
  --table-header-text: #4C4C56;
  --table-cell-muted: #63636D;

  /* ---- ação principal ---- */
  --primary: var(--marca-vermelho-forte);
  --primary-hover: #8F0F09;
  --primary-soft: var(--marca-vermelho-claro);
  --accent-cyan: var(--marca-vermelho);
  --text-on-primary: #FFFFFF;
  --primary-accessible-text: #9E120C;
  --primary-action-bg: var(--marca-vermelho-forte);
  --primary-action-hover: #8F0F09;

  /* ---- estados ----
     Verde e âmbar ficam: são o outro lado do semáforo, e trocá-los por tons
     de vermelho apagaria a diferença entre "deu certo" e "deu errado".
     Crítico vai para um vermelho mais escuro e fechado que o da marca, para
     os dois não se confundirem lado a lado. */
  --success: #128A5A;
  --success-soft: #E3F5EC;
  --success-accessible-text: #0C6B45;
  --warning: #B5760A;
  --warning-soft: #FDF2DC;
  --warning-accessible-text: #7C5006;
  --danger: #9B1C1C;
  --danger-soft: #FBE7E7;
  --danger-accessible-text: #8A1616;
  --status-alarm-bg: #FBE7E7;
  --status-alarm-text: #8A1616;
  --status-alarm-border: #9B1C1C;
  --status-alarm-contrast-text: #8A1616;
  --info: #44444E;                   /* neutro: informativo não disputa com a marca */
  --info-soft: #EDEDF1;
  --info-accessible-text: #3A3A44;

  /* ---- apoio ---- */
  --bg-overlay: rgba(13, 13, 15, 0.5);
  --bg-surface-translucent: rgba(255, 255, 255, 0.96);
  --bg-surface-subtle: rgba(255, 255, 255, 0.86);
  --focus-ring: rgba(225, 37, 27, 0.26);
  --scrollbar-thumb: rgba(35, 35, 41, 0.42);
  --shadow-color: rgba(13, 13, 15, 0.14);
  --shadow-color-soft: rgba(13, 13, 15, 0.08);
  --inactive-soft: rgba(116, 116, 127, 0.14);
  --chart-grid: rgba(91, 91, 102, 0.18);
  --tooltip-bg: var(--marca-preto);
  --tooltip-text: #F7F7F8;

  /* ---- a esfera da assistente ----
     Ela é feita de branco com tinta por cima, e a tinta era gelo — daí ela
     continuar lendo como azul mesmo depois de eu trocar o "pensando". São 29
     tokens, não 6; trocar meia dúzia deixou o resto do vidro azulado.

     O núcleo continua branco de propósito. Uma esfera vermelha inteira
     pulsando num canto o tempo todo lê como alarme, não como assistente
     disponível — o vermelho entra como reflexo e halo, não como massa. */
  --ai-orb-halo-white: rgba(255, 255, 255, 0.34);
  --ai-orb-halo-ice: rgba(255, 235, 233, 0.28);
  --ai-orb-halo-cyan: rgba(255, 90, 78, 0.16);
  --ai-orb-halo-silver: rgba(238, 226, 225, 0.16);

  --ai-orb-surface-core: rgba(255, 255, 255, 0.96);
  --ai-orb-surface-mid: rgba(255, 238, 236, 0.84);
  --ai-orb-surface-soft: rgba(250, 205, 200, 0.26);
  --ai-orb-surface-white: rgba(255, 255, 255, 0.34);
  --ai-orb-surface-ice: rgba(255, 226, 222, 0.28);
  --ai-orb-surface-cyan: rgba(255, 90, 78, 0.16);
  --ai-orb-surface-silver: rgba(242, 230, 229, 0.22);

  --ai-orb-form-a: rgba(255, 255, 255, 0.64);
  --ai-orb-form-b: rgba(255, 238, 236, 0.54);
  --ai-orb-form-c: rgba(255, 226, 222, 0.48);
  --ai-orb-form-d: rgba(255, 255, 255, 0.5);
  --ai-orb-form-e: rgba(255, 200, 194, 0.34);
  --ai-orb-form-f: rgba(255, 246, 245, 0.44);
  --ai-orb-form-g: rgba(255, 255, 255, 0.34);

  --ai-orb-idle-core: rgba(255, 255, 255, 0.98);
  --ai-orb-idle-mid: rgba(255, 238, 236, 0.82);
  --ai-orb-idle-soft: rgba(255, 90, 78, 0.22);

  --ai-orb-thinking-core: rgba(225, 37, 27, 0.98);
  --ai-orb-thinking-mid: rgba(180, 22, 15, 0.86);
  --ai-orb-thinking-soft: rgba(225, 37, 27, 0.3);

  /* alarme fica âmbar: é o único estado em que a esfera precisa NÃO parecer
     com os outros, e agora que "pensando" é vermelho, âmbar é o que sobra
     para destoar. */
  --ai-orb-shadow-white: rgba(255, 255, 255, 0.54);
  --ai-orb-shadow-cyan: rgba(255, 90, 78, 0.32);
}

/* ==========================================================================
   Escuro: preto de verdade, com o vermelho clareado para aguentar o fundo
   ========================================================================== */
:root[data-theme="dark"] {
  --marca-vermelho: #FF4D42;
  --marca-vermelho-forte: #E1251B;
  --marca-vermelho-claro: rgba(255, 77, 66, 0.16);

  --bg-app: #08080A;
  --bg-surface: #131317;
  --bg-elevated: #1A1A20;
  --bg-soft: #0F0F12;
  --header-bg: #111115;
  --table-header-bg: #1B1B21;
  --table-row-hover: #1E1E25;
  --table-bg: #131317;
  --table-row-border: #26262E;
  --table-row-selected: rgba(255, 77, 66, 0.12);

  --sidebar-bg: #000000;
  --sidebar-bg-secondary: #0C0C0F;
  --sidebar-hover: #1D1D23;
  --sidebar-active: #2A2A32;
  --sidebar-active-line: var(--marca-vermelho);

  --text-primary: #F5F5F7;
  --text-secondary: #B0B0BC;
  --text-muted: #85858F;
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: #C6C6D0;
  --border-default: #2C2C35;
  --border-strong: #3E3E4A;
  --table-header-text: #B6B6C2;
  --table-cell-muted: #9A9AA6;

  --primary: var(--marca-vermelho);
  --primary-hover: #FF6B61;
  --primary-soft: var(--marca-vermelho-claro);
  --accent-cyan: var(--marca-vermelho);
  /* Branco, e não texto escuro. Eu tinha suposto que sobre vermelho claro o
     texto quase preto ganharia, como acontece sobre azul claro — medido, dá
     4,27 e reprova. Branco sobre #D01E15 dá 5,41, e ainda fica igual ao tema
     claro, o que é uma coisa a menos para divergir. */
  --text-on-primary: #FFFFFF;
  --primary-accessible-text: #FF7A70;
  --primary-action-bg: #D01E15;
  --primary-action-hover: #E1251B;

  --success: #34C98A;
  --success-soft: rgba(52, 201, 138, 0.16);
  --success-accessible-text: #5FE0AB;
  --warning: #F0B64B;
  --warning-soft: rgba(240, 182, 75, 0.16);
  --warning-accessible-text: #F5CC80;
  --danger: #FF8A7E;
  --danger-soft: rgba(255, 138, 126, 0.16);
  --danger-accessible-text: #FFA79E;
  --status-alarm-bg: rgba(255, 138, 126, 0.18);
  --status-alarm-text: #FFA79E;
  --status-alarm-border: #FF8A7E;
  --status-alarm-contrast-text: #FFA79E;
  --info: #9E9EAC;
  --info-soft: rgba(158, 158, 172, 0.15);
  --info-accessible-text: #B5B5C2;

  --bg-overlay: rgba(0, 0, 0, 0.72);
  --bg-surface-translucent: rgba(19, 19, 23, 0.96);
  --bg-surface-subtle: rgba(26, 26, 32, 0.9);
  --focus-ring: rgba(255, 77, 66, 0.3);
  --scrollbar-thumb: rgba(255, 77, 66, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-color-soft: rgba(0, 0, 0, 0.4);
  --inactive-soft: rgba(133, 133, 143, 0.16);
  --chart-grid: rgba(176, 176, 188, 0.16);
  --tooltip-bg: #1A1A20;
  --tooltip-text: #F5F5F7;

  --ai-orb-halo-cyan: rgba(255, 77, 66, 0.2);
  --ai-orb-surface-cyan: rgba(255, 77, 66, 0.18);
  --ai-orb-thinking-core: rgba(255, 77, 66, 0.98);
  --ai-orb-thinking-mid: rgba(225, 37, 27, 0.86);
  --ai-orb-thinking-soft: rgba(255, 77, 66, 0.32);
  --ai-orb-shadow-cyan: rgba(255, 77, 66, 0.32);
}

/* --------------------------------------------------------------------------
   Destrutivo separado por forma, não por matiz.
   O botão de excluir fica vazio e contornado; o de ação principal, cheio.
   Quem não distingue os dois vermelhos distingue cheio de vazio.
   -------------------------------------------------------------------------- */
.ghost-button.danger-outline,
.editor-delete-button {
  color: var(--danger-accessible-text);
  background: transparent;
  border: 1px solid var(--danger);
}
.ghost-button.danger-outline:hover:not(:disabled),
.editor-delete-button:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* --------------------------------------------------------------------------
   A marca no topo do menu

   Era um quadrado vermelho com um raio branco desenhado dentro. Agora é a
   logo, que já vem vermelha e recortada — então o quadrado sai: fundo
   colorido por baixo de uma logo da mesma cor esconde a logo.

   O menu é preto, e vermelho sobre preto dá 3,6 — acima do mínimo de 3 que
   vale para elemento gráfico. O nome "Smart Charge" ao lado continua branco
   e é ele que carrega a leitura.
   -------------------------------------------------------------------------- */
.brand-mark {
  background: none !important;
  color: var(--marca-vermelho) !important;
}
.brand-mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* Linha do item ativo: era ciano, agora é a cor da marca. */
.nav-item.active::before,
.nav-item.active::after { background: var(--marca-vermelho); }

/* ==========================================================================
   A esfera no tema claro

   Este bloco existe porque a referência tem um igual, e com especificidade
   maior que `:root` — `:root:not([data-theme="dark"])`. Enquanto os meus
   tokens da esfera estavam só no `:root`, este bloco os anulava inteiros no
   claro, e a esfera continuava azul mesmo com tudo o resto já vermelho. Era
   isso que estava aparecendo.

   E a razão da referência fazer isso é boa: no escuro a esfera é uma pérola
   branca e se destaca sozinha; no claro, uma pérola branca sobre página
   branca simplesmente some. Então no claro ela precisa mesmo ser uma bola
   com cor.

   Só que "com cor" aqui é o vermelho FECHADO da marca (#B4160F), não o vivo.
   Uma bola vermelho-vivo pulsando num canto o tempo todo lê como alarme, e
   esta é a peça mais permanente da tela. O fechado lê como marca.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --ai-orb-halo-white: rgba(180, 22, 15, 0.30);
  --ai-orb-halo-ice: rgba(200, 34, 26, 0.28);
  --ai-orb-halo-cyan: rgba(225, 37, 27, 0.20);
  --ai-orb-halo-silver: rgba(214, 92, 84, 0.18);

  --ai-orb-surface-core: rgba(163, 18, 12, 0.98);
  --ai-orb-surface-mid: rgba(180, 22, 15, 0.90);
  --ai-orb-surface-soft: rgba(204, 46, 38, 0.40);
  --ai-orb-surface-white: rgba(190, 30, 22, 0.46);
  --ai-orb-surface-ice: rgba(204, 46, 38, 0.40);
  --ai-orb-surface-cyan: rgba(225, 37, 27, 0.30);
  --ai-orb-surface-silver: rgba(214, 92, 84, 0.24);

  --ai-orb-form-a: rgba(163, 18, 12, 0.78);
  --ai-orb-form-b: rgba(180, 22, 15, 0.70);
  --ai-orb-form-c: rgba(198, 40, 32, 0.60);
  --ai-orb-form-d: rgba(212, 52, 44, 0.64);
  --ai-orb-form-e: rgba(220, 96, 88, 0.42);
  --ai-orb-form-f: rgba(190, 30, 22, 0.54);
  --ai-orb-form-g: rgba(225, 37, 27, 0.46);

  --ai-orb-idle-core: rgba(163, 18, 12, 0.99);
  --ai-orb-idle-mid: rgba(180, 22, 15, 0.94);
  --ai-orb-idle-soft: rgba(212, 52, 44, 0.40);

  --ai-orb-shadow-white: rgba(163, 18, 12, 0.42);
  --ai-orb-shadow-cyan: rgba(225, 37, 27, 0.34);
}

/* --------------------------------------------------------------------------
   Os selos "Compartilhado" e "Privado" no popup de painéis

   Aqui os tokens cientes do tema seriam ERRADOS, e eu já errei assim uma vez.

   O popup "Ver painéis" é escuro nos DOIS temas — rgba(24,23,23,0.97). Ele
   não acompanha o tema da página, é uma superfície própria. Então um token
   que escurece o texto quando a página está clara escurece texto que está
   sobre preto: eu tinha posto --primary-accessible-text aqui, e medido
   contra o fundo da página em vez do fundo do popup. Dava 1,88.

   Cor fixa, clara, escolhida contra o fundo real do popup: 8,33 e 8,99.
   -------------------------------------------------------------------------- */
.dashboard-workspaces-visibility-badge.is-shared {
  color: #FFA79E;
  background: rgba(180, 22, 15, 0.18);
}
.dashboard-workspaces-visibility-badge.is-private {
  color: #F5CC80;
  background: rgba(181, 118, 10, 0.18);
}

/* --------------------------------------------------------------------------
   Vermelho de TEXTO e vermelho de PREENCHIMENTO são coisas diferentes

   No tema escuro, --danger é #FF8A7E: um salmão claro, feito para ser lido
   SOBRE fundo escuro. A referência usa esse mesmo token como FUNDO de botão
   com texto branco — e aí dá 2,29. O botão "Sair" da confirmação de logout
   estava assim: branco sobre salmão, ilegível.

   Os pontinhos de estado continuam usando --danger, e ali está certo: são
   gráficos sem texto por cima, e claro sobre escuro é o que se quer.

   Só o que carrega texto ganha o preenchimento fechado. Um valor só serve
   aos dois temas, porque branco sobre #8A1616 dá 9,5 em qualquer fundo.
   -------------------------------------------------------------------------- */
:root { --danger-fill: #8A1616; }
:root[data-theme="dark"] { --danger-fill: #8A1616; }

.danger-button,
.danger-button:hover,
.danger-button:focus-visible,
.primary-button.is-save-error,
.ghost-button.is-save-error,
#profileSettingsApply.is-save-error,
.center-status-toast.error {
  background: var(--danger-fill);
  border-color: var(--danger-fill);
  color: #FFFFFF;
}

/* A logo na tela de carregamento. A placa de 88px continua: ali ela é o
   fundo claro que a logo pede, e não some por baixo dela como o quadrado
   vermelho do menu sumia. */
.dashboard-loading-mark img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}