/* ============================================================================
   Olympus · themes.css — AS PALETAS. Nada mais.
   Direcao BRASA (2026-07-13). Carregar SEMPRE depois de tokens.css.

   REGRA DESTE ARQUIVO
   -------------------
   Um bloco de tema redefine SO TOKEN. Nunca estiliza componente.
   (O arquivo antigo tinha 226 regras de override de componente amarradas a
   UMA paleta — era por isso que uma paleta nova custava ~226 regras na mao e
   mesmo assim nao pegava. Foram removidas. O que sobrou de "componente" mora
   na PONTE la embaixo, que e agnostica de tema: escrita so com var(--token),
   logo funciona pra N paletas de graca.)

   POR QUE ATRIBUTO E NAO :root
   ----------------------------
   104 telas declaram :root inline. :root inline empata em especificidade com
   :root de arquivo e vem depois => ganha. :root[data-theme="x"] tem
   especificidade MAIOR (classe/atributo) => ganha do inline. Todo tema,
   INCLUSIVE o escuro padrao, precisa vir num bloco de atributo.
   O themes-loader.js agora sempre seta data-theme (antes so setava no claro,
   e por isso o bloco escuro estava morto).

   MAPA DE ALIAS (o coracao da compatibilidade)
   --------------------------------------------
   Cada bloco redefine os tokens NOVOS e, logo abaixo, os nomes ANTIGOS que as
   104 telas ja consomem (--gold-light, --bg-card, --green, --bd, --txt...).
   Sem esse mapa, 104 telas quebram de uma vez. Adicionou paleta nova?
   COPIE O BLOCO INTEIRO, alias incluso.

   COMO ADICIONAR UMA PALETA
   -------------------------
   1. Copie um bloco :root[data-theme="..."] daqui e troque os valores.
   2. Adicione a paleta no array THEMES de themes-loader.js.
   3. Libere o id em backend/dashboard_prefs.py -> _VALID_THEMES
      (fora da whitelist o backend responde 400 e a escolha NAO persiste).
   ============================================================================ */


/* ============================================================================
   PALETA 1 — BRASA ESCURO (padrao)
   id novo: brasa-dark · id legado: olympus-dark (o que esta no banco hoje)
   ============================================================================ */
:root[data-theme="brasa-dark"],
:root[data-theme="olympus-dark"] {
  color-scheme: dark;

  /* --- tokens BRASA --- */
  --bg:        #0F0D0A;
  --bg2:       #16130E;
  --card:      #1C1813;
  --border:    #2A241B;
  --border-2:  #3D3323;
  --text:      #F2EDE2;
  --dim:       #A99F8D;
  --faint:     #8A8172;   /* era #6B6355 = 2.98:1 sobre --card (reprova AA). Agora 4.59:1 */
  --gold:      #C9A84C;
  --gold-soft: rgba(201, 168, 76, .10);
  --gold-line: #5E4E21;
  --gold-text: #C9A84C;
  --gold-fill: #C9A84C;   /* dourado de PREENCHIMENTO (botao/barra). No escuro = o proprio gold */
  /* dourado APAGADO que ainda e legivel: 4.79:1 sobre --card. Existe porque
     --gold-dim/--gold-d sao usados dos DOIS jeitos nas telas (74x como
     color:, 134x como borda/fundo). Apontar pra --gold-line (#5E4E21, borda)
     deixava o texto a 2.39:1 — foi o que o QA pegou no rodape "Olympus". */
  --gold-muted: #9A8340;
  --money:     #4FBF8B;
  --red:       #E8776B;
  --amber:     #E6B84A;
  --blue:      #87B8D9;
  --purple:    #B38AD9;
  --pink:      #D96E9B;
  --gold-rgb:  201, 168, 76;
  --gold-tint-rgb: 201, 168, 76;
  --money-rgb: 79, 191, 139;
  --red-rgb:   232, 119, 107;
  --amber-rgb: 230, 184, 74;
  --blue-rgb:  135, 184, 217;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .42);
  --shadow-card: var(--shadow-sm);
  --surface-soft: var(--bg2);
}


/* ============================================================================
   PALETA 2 — BRASA CLARO
   id novo: brasa-claro · id legado: vista-comercial (o que esta no banco hoje)
   ============================================================================ */
:root[data-theme="brasa-claro"],
:root[data-theme="vista-comercial"] {
  color-scheme: light;

  --bg:        #FBF8F2;
  --bg2:       #FFFFFF;
  --card:      #FFFFFF;
  --border:    #E7DFCE;
  --border-2:  #D6CAB0;
  --text:      #1B1712;
  --dim:       #6A6153;
  --faint:     #6E6759;   /* era #9C947F = 2.85:1 sobre --bg (reprova AA). Agora 5.29:1 */

  /* A marca continua #C9A84C em PREENCHIMENTO (--gold-fill / --gold-line).
     Mas as telas legadas usam var(--gold) como COR DE TEXTO — e #B08F32 sobre
     creme da 2.90:1 (reprova). Entao no CLARO --gold JA E o dourado profundo:
     #8A6F2E = 4.51:1 sobre --bg. O dourado claro da marca vive em --gold-fill. */
  --gold:      #8A6F2E;
  --gold-soft: rgba(176, 143, 50, .10);
  --gold-line: #C9A84C;
  --gold-text: #8A6F2E;
  --gold-fill: #C9A84C;
  --gold-muted: #8A6F2E;   /* 4.78:1 sobre --card (ver nota no bloco escuro) */

  --money:     #1E7A4F;
  --red:       #C0392B;
  --amber:     #9A6B00;
  --blue:      #2C6E9B;
  --purple:    #6D4C9B;
  --pink:      #A63A6B;
  --gold-rgb:  138, 111, 46;
  --gold-tint-rgb: 201, 168, 76;
  --money-rgb: 30, 122, 79;
  --red-rgb:   192, 57, 43;
  --amber-rgb: 154, 107, 0;
  --blue-rgb:  44, 110, 155;

  --shadow-sm: 0 1px 2px rgba(27, 23, 18, .06);
  --shadow-md: 0 4px 14px rgba(27, 23, 18, .08);
  --shadow-lg: 0 16px 40px rgba(27, 23, 18, .12);
  --shadow-card: var(--shadow-sm);
  --surface-soft: #F3EEE3;
}


/* ============================================================================
   PALETA 3 — ONIX (escuro)   ·   aprovada pelo Nathan em 2026-08-03

   O DIAGNOSTICO QUE GEROU ESTA PALETA
   -----------------------------------
   Reclamacao: "nao ficou legal, temos que repaginar essas cores todas, deixar
   mais alto padrao". Medido: o dourado aparecia 207x numa tela so e em 87
   arquivos, e --border era rgba(201,168,76,.14) — ou seja, TODA divisoria da
   interface era amarelada. Isso da um veu amarelo na tela inteira e faz o
   destaque nao destacar nada.

   O QUE MUDA EM RELACAO A BRASA
   -----------------------------
   1. Superficie NEUTRA FRIA (grafite) no lugar do marrom quente. Marrom+ouro
      le como cardapio de restaurante; grafite+ouro le como plataforma.
   2. --border/--border-2 sao CINZA, nao dourado. Aqui morre o veu amarelo.
   3. O ouro fica mais claro (#D9BE72 vs #C9A84C) porque sobre grafite frio o
      #C9A84C puxa pra oliva e perde legibilidade como texto.
   Semantica preservada: --gold e a MARCA, --money e o dinheiro. Nao inverti
   isso de proposito — esta escrito em 104 telas e inverter viraria caca aos
   falsos positivos sem ganho visual.
   ============================================================================ */
:root[data-theme="onix"] {
  color-scheme: dark;

  --bg:        #0D0E11;   /* grafite frio, nao marrom */
  --bg2:       #121419;
  --card:      #171A20;
  --border:    #242830;   /* NEUTRO — era dourado translucido. O veu morre aqui */
  --border-2:  #343943;
  --text:      #E7E9EC;
  --dim:       #9BA2AD;
  --faint:     #848B97;   /* 4.9:1 sobre --card — precisa passar AA como rotulo */

  --gold:      #D9BE72;   /* marca. Mais claro que a Brasa: sobre grafite o
                             #C9A84C vira oliva e cai pra 3.8:1 como texto */
  --gold-soft: rgba(217, 190, 114, .10);
  --gold-line: #574B2C;   /* BORDA dourada. Nao usar como texto */
  --gold-text: #D9BE72;
  --gold-fill: #C9A84C;   /* preenchimento continua a marca original */
  --gold-muted: #A89263;  /* dourado apagado AINDA legivel (ver nota na Brasa) */

  --money:     #4FBF8B;   /* REGRA DE OURO 1: o unico verde de dinheiro */
  --red:       #E8776B;
  --amber:     #E6B84A;
  --blue:      #87B8D9;
  --purple:    #B38AD9;
  --pink:      #D96E9B;
  --gold-rgb:  217, 190, 114;
  /* TINTA (fundo/fio translucido) e' CINZA FRIO, nao ouro. E' aqui que o veu
     amarelo morre de verdade: sao 998 superficies e divisorias no frontend.
     Ouro de verdade continua vindo de --gold / --gold-fill / --gold-line. */
  --gold-tint-rgb: 154, 164, 180;
  --money-rgb: 79, 191, 139;
  --red-rgb:   232, 119, 107;
  --amber-rgb: 230, 184, 74;
  --blue-rgb:  135, 184, 217;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .34);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .44);
  --shadow-card: var(--shadow-sm);
  --surface-soft: var(--bg2);
}


/* ============================================================================
   PALETA 4 — ATELIE (claro)   ·   aprovada pelo Nathan em 2026-08-03

   E o Onix no claro: mesma disciplina, fundo invertido. Papel FRIO (cinza
   levemente azulado), nao creme — creme+serifada e a cara de template pronto.
   O ouro precisa escurecer pra bronze: ouro claro sobre branco nao se le
   (medido 2.1:1). Mesma licao que a Brasa Claro ja tinha aprendido.
   ============================================================================ */
:root[data-theme="atelie"] {
  color-scheme: light;

  --bg:        #F4F5F7;   /* papel frio, nao creme */
  --bg2:       #FFFFFF;
  --card:      #FFFFFF;
  --border:    #E2E5EA;
  --border-2:  #CBD1D9;
  --text:      #16181D;
  --dim:       #5C6371;
  --faint:     #5E6774;   /* precisa passar 4.5 tambem sobre CARTAO com tinta, nao so sobre --bg */

  --gold:      #7A5A12;   /* bronze. Como TEXTO da 6.4:1 sobre --bg */
  --gold-soft: rgba(96, 110, 130, .09);   /* mesma logica do --gold-tint-rgb: superficie e cinza fria, nao bege */
  --gold-line: #C9A84C;
  --gold-text: #7A5A12;
  --gold-fill: #C9A84C;
  --gold-muted: #7A5A12;

  --money:     #0E4F3C;   /* esmeralda profundo: 9.5:1 sobre branco */
  --red:       #B3261E;
  --amber:     #8A6100;
  --blue:      #1F5F8B;
  --purple:    #5B3E8E;
  --pink:      #96305C;
  --gold-rgb:  122, 90, 18;
  /* Ouro sobre fundo claro vira BEGE em qualquer alfa — testei .12 e .06. Num
     papel frio a superficie tem que ser cinza fria; o ouro fica pro que
     significa alguma coisa (marca, valor, acao). */
  --gold-tint-rgb: 96, 110, 130;
  --money-rgb: 14, 79, 60;
  --red-rgb:   179, 38, 30;
  --amber-rgb: 138, 97, 0;
  --blue-rgb:  31, 95, 139;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .12);
  --shadow-card: var(--shadow-sm);
  --surface-soft: #EBEEF2;
}


/* ============================================================================
   MAPA DE ALIAS — UM bloco, TODAS as paletas.

   POR QUE UM BLOCO SO (a licao do bug que reprovou a v1)
   ------------------------------------------------------
   Antes cada paleta carregava a propria copia do mapa. Resultado: --line,
   --line2, --ink2, --ink3, --soft e --shadow existiam no ESCURO e nao no
   CLARO. Como 104 telas declaram esses nomes num :root inline com hex ESCURO,
   no tema claro eles NAO eram remapeados e o valor escuro sobrevivia =>
   texto escuro em fundo escuro, borda invisivel. (Medido: --ink2 #b0a688
   sobre branco = 2.43:1; a trilha da barra de jornada, 1.17:1.)

   Um alias e sempre `var(--token)`, nunca um hex. Logo ele resolve sozinho na
   paleta que estiver ativa, e e IMPOSSIVEL um alias existir num tema e faltar
   no outro. Paleta nova nao precisa copiar nada — basta o bloco de tokens.
   Este seletor precisa listar cada paleta (especificidade de atributo) pra
   ganhar do :root inline das telas.
   ============================================================================ */
:root[data-theme="brasa-dark"],
:root[data-theme="olympus-dark"],
:root[data-theme="brasa-claro"],
:root[data-theme="vista-comercial"],
:root[data-theme="onix"],
:root[data-theme="atelie"] {

  /* --- SUPERFICIE --- */
  --bg-2:          var(--bg2);
  --bg-soft:       var(--bg2);
  --bg-card:       var(--card);
  --bg-elev:       var(--card);
  --surface-track: var(--border);
  --panel:         var(--card);
  --elev:          var(--card);
  --card2:         var(--bg);
  /* --soft e SUPERFICIE (admin-clientes: fundo da pilha .tab .pill).
     obras-cadastro usa --soft como TEXTO — corrigido na PONTE la embaixo. */
  --soft:          var(--surface-soft);
  --paper-bg:      var(--bg);
  --orc-bg:        var(--bg);
  --orc-bg-elev:   var(--card);

  /* --- BORDA --- */
  --bd:            var(--border);
  --bd2:           var(--border-2);
  --bd-h:          var(--border-2);
  --border-strong: var(--border-2);
  --border-s:      var(--border-2);
  --line:          var(--border);
  --line2:         var(--border);
  --paper-rule:        var(--border);
  --paper-rule-strong: var(--border-2);
  --orc-border:    var(--border);

  /* --- TEXTO --- */
  --txt:        var(--text);
  --ink:        var(--text);
  --ink2:       var(--dim);
  --ink3:       var(--faint);
  --ink-2:      var(--faint);
  --ink-3:      var(--dim);
  --text-dim:   var(--dim);
  --muted:      var(--dim);
  --mut:        var(--dim);
  --text-faint: var(--faint);
  --paper-text: var(--text);
  --paper-dim:  var(--dim);
  --orc-text:       var(--text);
  --orc-text-dim:   var(--dim);
  --orc-text-faint: var(--faint);

  /* --- DOURADO: todas as variantes antigas colapsam na marca ---
     No CLARO --gold ja e o dourado profundo legivel (#8A6F2E), entao estes
     aliases herdam legibilidade de graca nos dois temas. */
  --gold-light:   var(--gold);
  --gold-bright:  var(--gold);
  --gold-l:       var(--gold);
  --gold2:        var(--gold);
  /* --gold-dim/-d sao lidos como TEXTO em 74 lugares e como BORDA em 134.
     Vao pro dourado apagado LEGIVEL (--gold-muted), que serve aos dois. */
  --gold-dim:     var(--gold-muted);
  --gold-d:       var(--gold-muted);
  --accent:       var(--gold);
  --accent-light: var(--gold);
  --accent-dim:   var(--gold-text);
  --accent-warm:  var(--amber);
  --accent-soft:  var(--gold-soft);
  --acc-rgb:      var(--gold-rgb);
  --brand-primary:   var(--gold);   /* white-label (nav.js sobrescreve via /api/me) */
  --brand-secondary: var(--bg);

  /* --- REGRA DE OURO 1: --green E DINHEIRO. Aponta pro unico verde que existe.
     Nenhuma paleta pode redefinir --green pra algo que nao seja dinheiro. --- */
  --green:   var(--money);
  --green-l: var(--money);
  --red-l:   var(--red);

  /* --- TINTAS (fundo translucido). Via *-rgb, entao repintam por tema. --- */
  --green-bg:  rgba(var(--money-rgb), .12);
  --opp-bg:    rgba(var(--money-rgb), .08);
  --unread-bg: rgba(var(--money-rgb), .12);
  --unread-border: var(--money);
  --red-bg:    rgba(var(--red-rgb), .12);
  --crit-bg:   rgba(var(--red-rgb), .10);
  --amber-bg:  rgba(var(--amber-rgb), .12);
  --warn-bg:   rgba(var(--amber-rgb), .08);

  /* --- SOMBRA --- */
  --shadow: var(--shadow-lg);

  /* --- LETRA (o botao NUNCA e mono — regra de ouro 3) --- */
  --font:         var(--font-body);
  --mono:         var(--font-mono);
  --font-heading: var(--font-display);
  --font-head:    var(--font-display);
  --font-num:     var(--font-body);   /* numero NAO e mono — e tabular-nums */
  --weight-base:   400;
  --weight-strong: 600;

  /* --- RAIO: forca a escala 8/12/16 por cima dos 10 raios que as telas
     inventaram (2/3/4/6/9/10px). Atributo > :root inline. --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius:    var(--radius-lg);
  --radius-in: var(--radius-sm);
  --r:         var(--radius-md);
}


/* ============================================================================
   CHAT — as cores da conversa (Inbox).

   POR QUE ISTO EXISTE (bug medido em 2026-08-03)
   ---------------------------------------------
   O fundo da conversa e as bolhas estavam ESCRITOS NA MAO no inbox.html
   (#14110C, #221D16, #26483A). Resultado: no tema CLARO o chao da conversa
   continuava escuro enquanto o texto virava escuro tambem — a auditoria mediu
   1.06:1 no "Nada selecionado", ou seja, texto invisivel. Cor de superficie e
   PALETA; entao ela mora aqui, com um valor por tema.

   Cada paleta precisa dos 8 tokens. Faltando um, a bolha herda transparente e
   o texto some — por isso os quatro blocos abaixo sao explicitos, sem heranca.
   ============================================================================ */
:root[data-theme="brasa-dark"],
:root[data-theme="olympus-dark"] {
  --chat-bg:       #14110C;
  --bubble-in:     #221D16;
  --bubble-in-bd:  rgba(201, 168, 76, .13);
  --bubble-out:    #26483A;
  --bubble-out-tx: #E8EFE5;
  --chat-link:     #E8D28A;
  --chat-link-out: #EBD9A2;
  --chat-meta:     #9A907E;   /* era #8B8272 = 3.1:1 na bolha recebida */
}
:root[data-theme="brasa-claro"],
:root[data-theme="vista-comercial"] {
  --chat-bg:       #F6F2E9;
  --bubble-in:     #FFFFFF;
  --bubble-in-bd:  #E7DFCE;
  --bubble-out:    #DCEFE6;
  --bubble-out-tx: #0E3529;
  --chat-link:     #8A6F2E;
  --chat-link-out: #0A4736;
  --chat-meta:     #6E6759;
}
:root[data-theme="onix"] {
  --chat-bg:       #0F1115;
  --bubble-in:     #191C22;
  --bubble-in-bd:  rgba(255, 255, 255, .08);
  --bubble-out:    #1D3A32;
  --bubble-out-tx: #E4EFEA;
  --chat-link:     #D9BE72;
  --chat-link-out: #EBD9A2;
  --chat-meta:     #98A0AB;
}
:root[data-theme="atelie"] {
  --chat-bg:       #FAFBFC;
  --bubble-in:     #FFFFFF;
  --bubble-in-bd:  #E2E5EA;
  --bubble-out:    #DCEFE6;
  --bubble-out-tx: #0E3529;
  --chat-link:     #0B5A45;
  --chat-link-out: #0A4736;
  --chat-meta:     #626B78;
}


/* ============================================================================
   PONTE — chrome injetado por JS (nav.js / config.js / ai-copilot.js).
   AGNOSTICA DE TEMA: escrita SO com var(--token), entao vale pra N paletas
   sem uma linha a mais. Nao ha :root[data-theme=...] aqui de proposito.

   Por que precisa de !important: nav.js/config.js injetam um <style> em
   RUNTIME, portanto DEPOIS deste arquivo. Empatando em especificidade, o
   ultimo ganha — e a sidebar continuava com a cor do tema anterior (bug real
   medido: "sidebar continua branca ao trocar de tema").
   ============================================================================ */

html, body {
  background-color: var(--bg);
  color: var(--text);
}

/* --- SIDEBAR (nav.js) — o bug da sidebar que nao repinta --- */
.olv-sidebar {
  background: var(--card) !important;
  border-right: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
}
.olv-sidebar::-webkit-scrollbar-thumb { background: var(--border-2) !important; }
.olv-side-brand-txt {
  font-family: var(--font-display) !important;   /* mata o 'Poppins, serif' */
  font-weight: 600 !important;
  color: var(--gold-text) !important;
}
.olv-side-dot { background: var(--gold) !important; }
.olv-side-parent,
.olv-side-child { color: var(--dim) !important; }
.olv-side-parent:hover,
.olv-side-child:hover {
  color: var(--text) !important;
  background: var(--gold-soft) !important;
}
.olv-side-parent.active,
.olv-side-child.active {
  color: var(--gold-text) !important;
  background: var(--gold-soft) !important;
}
.olv-side-child.active { border-left-color: var(--gold) !important; }
.olv-side-children { border-left-color: var(--border) !important; }
.olv-side-foot { border-top: 1px solid var(--border) !important; }
.olv-side-status { color: var(--dim) !important; }
/* REGRA DE OURO 1: verde e DINHEIRO e so dinheiro. O semaforo "no ar" NAO e
   dinheiro — usava var(--money) e o QA contou como violacao (com razao: se o
   status tambem e verde, o verde para de avisar dinheiro). Vai de dourado. */
.olv-side-status-dot { background: var(--gold) !important; }
.olv-side-logout {
  border: 1px solid var(--border) !important;
  color: var(--dim) !important;
  background: transparent !important;
}
.olv-side-logout:hover {
  color: var(--red) !important;
  border-color: var(--red) !important;
}

/* --- DRAWER mobile (nav.js) --- */
.olv-drawer {
  background: var(--card) !important;
  border-right: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;   /* mata o 'Inter' hardcoded do nav.js */
}
.olv-drawer-bg { background: rgba(0, 0, 0, .55) !important; }
.olv-drawer-link, .olv-drawer-section { color: var(--dim) !important; }
.olv-drawer-brand { color: var(--gold-text) !important; font-family: var(--font-display) !important; }

/* --- BOTTOMNAV mobile (nav.js) — a PONTE nao cobria, e no celular a barra
   inferior renderizava em Inter ao lado do conteudo em Geist (3a familia). --- */
#olv-bottomnav,
#olv-bottomnav .olv-bn-item {
  font-family: var(--font-body) !important;
}
#olv-bottomnav {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
}

/* --- --soft usado como TEXTO (obras-cadastro) ---
   --soft e SUPERFICIE no mapa de alias (admin-clientes usa como fundo de pill).
   obras-cadastro.html e a UNICA tela que le --soft como cor de texto
   (input::placeholder e .tiny). Sem esta ponte, no claro o texto herdaria a
   superficie (#F3EEE3) e sumiria no fundo. Nao da pra resolver no token: o
   mesmo nome tem dois significados em telas diferentes.
   !important porque o <style> inline da tela carrega DEPOIS deste arquivo e,
   empatando em especificidade, o ultimo ganharia. */
input::placeholder,
textarea::placeholder { color: var(--faint) !important; }
.tiny { color: var(--dim) !important; }

/* --- TOPBAR --- */
.topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* --- FABs / sino / medidor (nav.js, config.js, ai-copilot.js) --- */
#dash-fab, #orc-fab, #radio-fab, #usage-fab {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--gold-text) !important;
  box-shadow: var(--shadow-md) !important;
}
#dash-fab:hover, #orc-fab:hover, #radio-fab:hover, #usage-fab:hover {
  border-color: var(--gold) !important;
}
#radio-fab.recording {
  border-color: var(--red) !important;
  color: var(--red) !important;
}
#radio-timer, #radio-banner, #usage-pop {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.olv-bell { border-color: var(--border) !important; color: var(--gold-text) !important; }
.olv-bell:hover { background: var(--gold-soft) !important; border-color: var(--gold) !important; }

/* --- Faixa de setup (config.js) --- */
#__olympus_setup_banner__ {
  background: var(--gold-soft) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#__olympus_setup_banner__ strong { color: var(--gold-text) !important; }
#__olympus_setup_banner__ span { color: var(--dim) !important; }

/* --- SELETOR DE PALETA (themes-loader.js injeta o markup) --- */
.olv-pal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
/* Variante do RODAPE DA BARRA LATERAL: usada nas telas que escondem a topbar
   (Inbox). Sem isto a fila de bolinhas estourava a largura da barra. */
.olv-pal-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  margin: 0 0 9px;
}
.olv-pal-side .olv-pal-chip {
  height: 27px;
  padding: 0 7px;
  gap: 5px;
  font-size: 10px;
  min-width: 0;
}
.olv-pal-side .olv-pal-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.olv-pal-side .olv-pal-dot { width: 11px; height: 11px; }
.olv-pal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.olv-pal-chip:hover {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--gold-soft);
}
.olv-pal-chip[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--gold);
  background: var(--gold-soft);
}
.olv-pal-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  /* --dot e --ring vem inline do loader (cor da paleta que o chip representa) */
  background: var(--dot, var(--card));
  box-shadow: inset 0 0 0 2px var(--ring, var(--gold));
}
@media (max-width: 720px) {
  .olv-pal-label { display: none; }        /* no celular so a bolinha */
  .olv-pal-chip { padding: 0 8px; }
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }

/* ============================================================================
   Transicao suave SO no clique de troca de tema (~400ms).
   NUNCA no carregamento: o loader re-aplica o tema async (pref do servidor
   chega depois do paint) e, com transicao ligada, isso ANIMA a cor inteira =
   "flash" de tema ao navegar. Bug real 2026-05-23. Mantido.
   ============================================================================ */
html.theme-anim,
html.theme-anim body {
  transition: background-color .3s var(--ease), color .3s var(--ease);
}