/* ============================================================================
 * script-server — tema "Binance" (design.md)
 * ----------------------------------------------------------------------------
 * Arquivo de tema OFICIAL do script-server (servido por ThemeStaticFileHandler
 * a partir de conf/theme/). Puramente aditivo e 100% reversível:
 * apagar/renomear este arquivo volta ao tema padrão na hora.
 * NÃO altera o bundle web/, o backend Python, nem qualquer regra de script.
 *
 * Tokens de cor extraídos de getdesign.md/binance/design-md:
 *   yellow  #fcd535 / active #f0b90b · on-yellow PRETO #181a20
 *   canvas  #0b0e11 · card #1e2329 · elevado #2b3139 · hairline #2b3139
 *   texto   #eaecef / médio #929aa5 / fraco #707a8a
 *   trading green #0ecb81 · red #f6465d · info/focus #3b82f6
 * ============================================================================ */

/* ----- Fontes self-hosted (servidas de /theme/fonts/, liberadas no login) --- */
/* BinanceNova → Inter · BinancePlex → JetBrains Mono (substitutos open-source) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jbmono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jbmono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jbmono-700.woff2') format('woff2');}

/* ============================================================================
 * CAMADA 1 — Tokens: remapeia as variáveis que o bundle já consome.
 * Inverte o tema claro padrão (teal/branco) para o dark Binance.
 *
 * IMPORTANTE: o theme.css é carregado ANTES do bundle no HTML. O bundle
 * define um :root{} default (0,1,0) que, por vir depois, venceria a cascata.
 * Por isso usamos `html:root` (0,1,1) — especificidade maior vence a ordem.
 * ============================================================================ */
html:root{
  /* --- superfícies / elevação --- */
  --background-color:#0b0e11;                 /* canvas near-black */
  --surface-color:#1e2329;                    /* cards, painéis */
  --background-color-slight-emphasis:rgba(255,255,255,.025);
  --background-color-high-emphasis:rgba(255,255,255,.06);
  --background-color-level-4dp:#1e2329;
  --background-color-level-8dp:#222831;
  --background-color-level-16dp:#2b3139;
  --background-color-disabled:rgba(255,255,255,.10);

  /* --- texto --- */
  --font-color-main:#eaecef;
  --font-color-medium:#929aa5;
  --font-color-disabled:#707a8a;

  /* --- interação --- */
  --hover-color:rgba(255,255,255,.05);
  --focus-color:rgba(255,255,255,.12);
  --focus-color-solid:#2b3139;

  /* --- primário (Binance Yellow) + TEXTO PRETO no amarelo --- */
  --primary-color:#fcd535;
  --primary-color-raised-hover-solid:#f0b90b;
  --primary-color-raised-focus-solid:#f0b90b;
  --primary-color-when-hovered:rgba(0,0,0,.08);   /* overlay escurece o amarelo */
  --primary-color-when-focused:rgba(0,0,0,.16);
  --font-on-primary-color-main:#181a20;
  --font-on-primary-color-medium:rgba(24,26,32,.72);

  /* variante "dark" do primário (estados ativos) */
  --primary-color-dark-color:#f0b90b;
  --primary-color-dark-when-hovered:rgba(0,0,0,.08);
  --primary-color-dark-when-focused:rgba(0,0,0,.16);
  --font-on-primary-color-dark-main:#181a20;
  --font-on-primary-color-dark-medium:rgba(24,26,32,.72);

  /* variante "light" do primário (tint sutil sobre dark) */
  --primary-color-light-color:rgba(252,213,53,.14);
  --primary-color-light-when-hovered:rgba(252,213,53,.20);
  --primary-color-light-when-focused:rgba(252,213,53,.26);
  --font-on-primary-color-light--main:#fcd535;

  /* --- bordas / separadores --- */
  --separator-color:#2b3139;                  /* hairline Binance */
  --outline-color:rgba(255,255,255,.18);
  --outline-color-disabled:rgba(255,255,255,.08);

  /* --- semântica --- */
  --error-color:#f6465d;                      /* trading-down red */

  /* --- headers (eram imagens .jpg → cor sólida / acento sutil) --- */
  --script-header-background:linear-gradient(180deg,#1e2329 0%,#0b0e11 100%);
  --login-header-background:radial-gradient(circle at 28% 30%,rgba(252,213,53,.12),transparent 60%),#0b0e11;

  /* token auxiliar usado na Camada 2 */
  --binance-focus-ring:0 0 0 2px rgba(59,130,246,.45);
  --trading-up:#0ecb81;
  --trading-down:#f6465d;
}

/* ============================================================================
 * CAMADA 2 — Polish: tipografia + acabamentos pontuais sobre o Materialize.
 * (Sem seletor universal: Material Icons NÃO podem perder a própria fonte.)
 * ============================================================================ */

/* --- Tipografia: Inter no texto, preservando .material-icons --- */
html,body,body.script-server{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
body.script-server input,
body.script-server select,
body.script-server textarea,
body.script-server button,
body.script-server .btn,
body.script-server .btn-flat,
body.script-server h1,body.script-server h2,body.script-server h3,
body.script-server h4,body.script-server h5,body.script-server h6,
body.script-server .app-name,
body.script-server .script-list-item,
body.script-server label{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* --- Console de saída: "terminal" near-black destacado do card + monospace.
 * O bundle deixa .log-panel em var(--surface-color) (= tom do card), então a
 * saída se confundia com o card. Aqui escurece pra #06080a (composição do
 * mockup) e força JetBrains Mono inclusive nos pre/code/terminal-output. --- */
body.script-server .log-panel,
body.script-server .log-panel .log-content{
  background:#06080a!important;
  border-radius:8px;
}
body.script-server .log-content,
body.script-server .log-content pre,
body.script-server .log-content code,
body.script-server .log-content samp,
body.script-server .terminal-output,
body.script-server .terminal-output *{
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace!important;
  font-variant-ligatures:none;
}
body.script-server .log-content{color:var(--font-color-main);padding:16px 18px;line-height:1.7;}

/* --- ANSI → Binance palette.
 * O terminal renderer converte escape codes em spans com text_color_* / text_style_*.
 * Scripts devem emitir \033[Xm para acionar estas classes. --- */
body.script-server .log-content .text_color_darkgray  {color:#707a8a;}   /* muted — timestamps   \033[90m */
body.script-server .log-content .text_color_green     {color:#0ecb81;}   /* up — sucesso         \033[32m */
body.script-server .log-content .text_color_lightgreen{color:#0ecb81;}   /*                      \033[92m */
body.script-server .log-content .text_color_red       {color:#f6465d;}   /* down — erro          \033[31m */
body.script-server .log-content .text_color_lightred  {color:#f6465d;}   /*                      \033[91m */
body.script-server .log-content .text_color_yellow    {color:#fcd535;}   /* primary — números    \033[33m */
body.script-server .log-content .text_color_lightyellow{color:#f0b90b;}  /*                      \033[93m */
body.script-server .log-content .text_color_cyan      {color:#3b82f6;}   /* info                 \033[36m */
body.script-server .log-content .text_color_lightcyan {color:#3b82f6;}   /*                      \033[96m */
body.script-server .log-content .text_color_blue      {color:#3b82f6;}   /*                      \033[34m */
body.script-server .log-content .text_color_magenta   {color:#929aa5;}   /* muted-strong         \033[35m */
body.script-server .log-content .text_color_lightgray {color:#eaecef;}   /* body text            \033[37m */
body.script-server .log-content .text_color_white     {color:#ffffff;}   /*                      \033[97m */
body.script-server .log-content .text_style_bold      {font-weight:700;}
body.script-server .log-content .text_style_dim       {opacity:.55;}
body.script-server .log-content .text_style_underlined{text-decoration:underline;}

/* --- Sidebar: item ativo. O real é .collection-item.active (Materialize pinta
 * de amarelo CHEIO — viola "amarelo escasso"). Troco por destaque sutil +
 * barra amarela + texto amarelo, como no protótipo. --- */
body.script-server .scripts-list .collection-item.active,
body.script-server .script-list-item.active,
body.script-server .script-list-item.router-link-active{
  background:var(--background-color-level-16dp)!important;   /* #2b3139 */
  color:var(--primary-color)!important;
  box-shadow:inset 3px 0 0 var(--primary-color);
}

/* --- Sidebar: label "SCRIPTS" (injetado, o app não tem cabeçalho de seção) --- */
body.script-server .scripts-list::before{
  content:"SCRIPTS";
  display:block;
  padding:14px 16px 6px;
  font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--font-color-medium);
}

/* --- Parâmetros: já é grid (colunas inline). Força responsivo multi-coluna
 * (2+ quando cabe, 1 se for parâmetro único) pra aproximar do protótipo. --- */
body.script-server .script-parameters-panel{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
}

/* --- Foco visível (anel azul info do Binance), aditivo --- */
body.script-server input:focus-visible,
body.script-server select:focus-visible,
body.script-server textarea:focus-visible,
body.script-server button:focus-visible,
body.script-server .btn:focus-visible{
  outline:none;
  box-shadow:var(--binance-focus-ring);
}

/* --- Raios mais próximos da escala Binance (6–12px) --- */
body.script-server .btn,
body.script-server .btn-flat,
body.script-server .btn-large{border-radius:6px;}
body.script-server .card,
body.script-server .modal{border-radius:12px;}
body.script-server input[type=text],
body.script-server input[type=password],
body.script-server input[type=email],
body.script-server input[type=number],
body.script-server textarea,
body.script-server select,
body.script-server .dropdown-content{border-radius:8px;}

/* --- Scrollbars no tom do tema --- */
*{scrollbar-width:thin;scrollbar-color:#2b3139 #0b0e11;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#0b0e11;}
::-webkit-scrollbar-thumb{background:#2b3139;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#3a424c;}

/* --- Seleção de texto em amarelo translúcido --- */
::selection{background:rgba(252,213,53,.30);color:#fff;}

/* --- Login: contraste card vs. fundo ---------------------------------------
 * O login usa body{background:var(--surface-color)} e card{level-4dp}.
 * Como deixei os dois em #1e2329, o card "sumia". Escopo #login-body (só a
 * tela de login) → página no canvas near-black, card destaca + hairline. */
body#login-body{background:var(--background-color);}
body.script-server #login-panel{
  border:1px solid var(--separator-color);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}

/* --- Autofill: o navegador força fundo claro nos campos preenchidos.
 * O truque do box-shadow inset repinta o fundo no tom do card (#1e2329). --- */
body.script-server input:-webkit-autofill,
body.script-server input:-webkit-autofill:hover,
body.script-server input:-webkit-autofill:focus,
body.script-server input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--font-color-main)!important;
  -webkit-box-shadow:0 0 0 1000px var(--background-color-level-4dp) inset!important;
  box-shadow:0 0 0 1000px var(--background-color-level-4dp) inset!important;
  caret-color:var(--font-color-main);
  transition:background-color 9999s ease-out 0s;
}

/* --- Estado "valid/invalid" do Materialize: troca verde/vermelho gritante
 * pelo hairline do tema (mantém vermelho só pra erro real). --- */
body.script-server input.valid:not(:focus),
body.script-server input:valid:not(:focus){
  border-bottom:1px solid var(--separator-color)!important;
  box-shadow:0 1px 0 0 var(--separator-color)!important;
}
body.script-server input:focus{
  border-bottom:1px solid var(--primary-color)!important;
  box-shadow:0 1px 0 0 var(--primary-color)!important;
}

/* ============================================================================
 * CAMADA 3 — Componentes do painel (Binance: compacto e denso)
 * ============================================================================ */

/* --- Botões: altura 40px (eram 48px do Materialize) + sem UPPERCASE.
 * !important porque o Materialize força text-transform:uppercase no .btn. --- */
body.script-server .btn,
body.script-server .btn-large,
body.script-server .btn-flat,
body.script-server .button-execute{
  height:40px;line-height:40px;
  text-transform:none!important;   /* Binance é Title Case ("Sign Up"), não grita */
  font-weight:600!important;
  letter-spacing:0!important;
  font-size:14px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
}

/* --- Botão EXECUTE: parar o esticão (flex:4) e virar botão compacto --- */
body.script-server .button-execute{
  -webkit-box-flex:0!important;
  -ms-flex:0 1 auto!important;
  flex:0 1 auto!important;
  width:auto!important;min-width:0;
  height:40px!important;line-height:40px!important;
  padding:0 28px!important;
}
body.script-server .button-execute>.btn{
  width:auto!important;height:40px!important;line-height:40px!important;
  padding:0 28px!important;
}

/* --- Tabelas no padrão "markets table" da referência Binance:
 * header discreto uppercase, divisórias hairline, sem zebra pesada,
 * números em monospace. (datepicker fica de fora.) --- */
body.script-server table.striped>tbody>tr,
body.script-server .executions-log-table tbody>tr{
  border-bottom:1px solid var(--separator-color);
  background:transparent!important;        /* remove a zebra do Materialize */
}
body.script-server table.striped>tbody>tr:hover,
body.script-server .executions-log-table tbody>tr:hover{
  background:var(--hover-color)!important;
}
body.script-server table th,
body.script-server .executions-log-table th{
  color:var(--font-color-medium);
  font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--separator-color);
}
body.script-server .executions-log-table td,
body.script-server .executions-log-table th{padding:12px 16px;vertical-align:middle;}
/* REGRA design.md: número em JetBrains Mono (BinancePlex), texto em Inter
 * (BinanceNova). Só ID e START TIME são numéricos → mono. O resto = Inter. */
body.script-server .executions-log-table .id-column,
body.script-server .executions-log-table .start_time-column{
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
body.script-server .executions-log-table .script-column,
body.script-server .executions-log-table .user-column,
body.script-server .executions-log-table .status-column{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* --- Rebalancear larguras: SCRIPT estava em 25% e o nome quebrava em 2 linhas
 * (linhas desiguais). USER tinha 25% sobrando. Dá o espaço ao SCRIPT. --- */
body.script-server .executions-log-table{table-layout:fixed;width:100%;}
body.script-server .executions-log-table .id-column{width:7%;}
body.script-server .executions-log-table .start_time-column{width:20%;}
body.script-server .executions-log-table .user-column{width:10%;}
body.script-server .executions-log-table .script-column{width:48%;}
body.script-server .executions-log-table .status-column{width:15%;}
/* nome do script numa linha só; se faltar espaço, reticências (não quebra) */
body.script-server .executions-log-table .script-column{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}