/* ============================================================================
   Edgium design system - camada de tokens e componentes do painel Lua.

   O design system da empresa (edgium-design-system/) entrega APENAS tokens:
   `styles.css` la e uma cadeia de @import de tokens/*.css e nada mais. Toda a
   especificacao visual dos componentes vive em objetos `style={{}}` inline
   dentro dos .jsx, que sao fonte de referencia, nao codigo distribuivel. Este
   arquivo e a transcricao daquilo para classes - e a unica camada de CSS
   autoral do painel.

   Duas coisas que este arquivo NAO faz, de proposito:

     1. Nao usa !important. O runtime do Tailwind injeta a folha dele no <head>
        DEPOIS deste <link>, entao num empate de especificidade o utilitario
        vence. As regras globais aqui foram escolhidas para nao empatar: ou
        casam so com elemento (0,0,1), onde nenhuma classe compete pela mesma
        propriedade (`table thead` e borda, `bg-gray-50` e fundo), ou estao em
        classes .eg-* aplicadas a elementos que ja estamos editando. Se algum
        dia uma regra daqui "nao pega", a resposta certa e o remap em
        base.html, nao um !important.

     2. Nao esconde a barra de rolagem. O DS faz `scrollbar-width: none` global
        (styles.scss do produto Angular). Aqui isso e defeito: este painel tem
        listagem de log, gerenciador de arquivo e tabela de 500 linhas, onde a
        barra e a unica pista de quanto conteudo falta. Fica a barra fina e
        escura. Desvio consciente, nao esquecimento.

   As cores hexadecimais abaixo sao copia literal de
   edgium-design-system/tokens/*.css. Nao invente valor novo: se precisar de
   uma cor que nao esta aqui, ela nao existe na marca.
   ============================================================================ */

/* ---------------------------------------------------------------- fontes ---
   O DS carrega Noto Sans Display e Material Icons do CDN do Google. Aqui nao
   da: a CSP e `default-src 'self'` e o test_nenhum_script_vem_de_fora reprova
   qualquer https:// no markup. Os .woff2 estao versionados em static/fonts/,
   pelo mesmo motivo que o Tailwind esta em static/vendor/ - ver o comentario
   no <head> de base.html. Origem e sha256 de cada arquivo: static/vendor/README.md.

   Noto Sans Display e fonte VARIAVEL (eixo wght 100..900), entao os tres pesos
   que o produto usa (400/600/700) saem de um arquivo so por subset. Roboto nao
   foi vendorizada: o readme do DS diz que ela so sobrevive em regra morta. */
@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/noto-sans-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/noto-sans-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* `block`, nao `swap`, e a diferenca entre um icone invisivel por 100ms e a
   palavra literal "check_circle" escrita na tela por ate 3 segundos. Numa fonte
   de ligatura o fallback nao e um glifo parecido: e o nome do glifo em texto. */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/fonts/material-icons.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens ---
   Copia literal de edgium-design-system/tokens/{colors,typography,spacing,
   radius-elevation,motion}.css, colapsados num :root so. O DS distribui em
   cinco arquivos encadeados por @import; aqui isso custaria cinco round trips
   e nao compra nada. */
:root {
  /* ---- Superficies ---- */
  --dark-bg: #252525;            /* sidebar, linhas de configuracao */
  --dark-bg-secondary: #292929;  /* fundo da pagina, toolbar, faixa de abas */
  --bg-black: #000000;           /* paineis do split de login */
  --bg-nav-button: #242424;      /* pilulas de breadcrumb, menus suspensos */
  --bg-chart-card: #1211118d;    /* tiles de analytics (55% preto) */
  --overlay-hover: #ffffff14;    /* o UNICO preenchimento de hover do produto */
  --overlay-disabled: #ffffff14;
  --backdrop: #252525b3;
  --backdrop-solid: #252525;
  --dialog-bg: #121212;

  /* ---- Marca ---- */
  --main-bg: #e5ff78;            /* lime Edgium - preenchimento E regra de acento */
  --main-bg-hover: #D3DD25;
  --light-blue: #D3E5E4;
  --on-brand: #000000;           /* texto sobre lime e SEMPRE preto */

  /* ---- Texto ---- */
  --main-font: #E2E2E2;
  --off-white: #FFFFFFDE;        /* texto primario (87% branco) */
  --grey: #FFFFFF99;             /* texto secundario (60% branco) */
  --text-disabled: #ffffff4d;
  --text-muted: #A2A2A2;
  --text-hint: #a09e9e;
  --text-faint: #707070;
  --text-nav-pill: #8a8a8a;
  --text-status: #b3b3b3;

  /* ---- Status ---- */
  --info: #90beba;
  --info-bg: #90beba33;
  --danger: #cf6679;
  --danger-strong: #dd556e;
  --danger-bg: #cf66792f;
  --warning-bg: #feefb3;
  --warning-fg: #9f6000;
  --warning-icon: #edb957;
  --success: #8acf66;

  /* ---- Linhas ---- */
  --border-subtle: lightgrey;
  --border-divider: var(--dark-bg-secondary);
  --border-input: #a0a0a0;
  --border-table-row: #e5ff784d;  /* 30% lime */
  --border-item: #FFFFFF14;
  --divider-color: slategray;

  /* ---- Paleta de grafico (bloco .dark do styles.scss) ---- */
  --chart-bg-dark: #232837;
  --chart-bg-med: #2f3646;
  --chart-bg-light: #455066;
  --chart-bg-lighter: #5b6882;
  --chart-text-dark: #72809b;
  --chart-text-med-dark: #919db5;
  --chart-text-med: #a0aabe;
  --chart-text-med-light: #d9dce1;
  --chart-text-light: #f0f1f6;

  /* ---- Aliases semanticos: use estes em codigo novo ---- */
  --surface-page: var(--dark-bg-secondary);
  --surface-card: var(--dark-bg);
  --surface-raised: var(--bg-nav-button);
  --surface-sidebar: var(--dark-bg);
  --surface-toolbar: var(--dark-bg-secondary);
  --text-primary: var(--off-white);
  --text-secondary: var(--grey);
  --text-setting: var(--main-font);
  --accent: var(--main-bg);
  --accent-rule: var(--main-bg);
  --link: slategray;
  --link-hover: var(--main-bg);
  --link-active: rgb(250, 167, 0);

  /* ---- Tipografia ---- */
  --font-sans: "Noto Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-icons: "Material Icons";
  --fw-regular: 400;
  --fw-mat-button: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-micro: 8px;
  --fs-stat-label: 10px;
  --fs-caption: 11px;
  --fs-meta: 12px;
  --fs-body: 14px;        /* a medida de carga do produto */
  --fs-body-lg: 16px;
  --fs-h3: 18px;
  --fs-title: 20px;
  --fs-banner-lead: 26px;
  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --ls-wide: 1.5px;

  /* ---- Espaco e layout ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;   /* padding padrao da linha de configuracao */
  --space-6: 28px;   /* gap entre linhas de configuracao */
  --space-7: 32px;
  --space-8: 48px;
  --sidebar-width: 256px;
  --toolbar-height: 44px;
  --breadcrumb-height: 100px;
  --tab-header-padding-x: 48px;
  --measure-settings: 1000px;
  --measure-banner: 900px;
  --measure-form: 390px;
  --measure-search: 500px;
  --menu-item-height: 48px;
  --menu-button-height: 40px;
  --table-row-height: 56px;
  --accent-rule-width: 3px;
  --accent-rule-height: 23px;

  /* ---- Forma e elevacao ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 0;   /* a Edgium nunca usa pilula; botao de icone e quadrado */
  /* A UNICA sombra do produto inteiro. */
  --shadow-select: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

  /* ---- Movimento ---- */
  --ease: linear;
  --duration-fast: 300ms;
  --duration-accent: 0.3s;
  --duration-slow: 0.5s;
}

/* ------------------------------------------------------------------ base ---
   Seletor de elemento, especificidade (0,0,1): qualquer utilitario Tailwind
   ganha destas regras. E o que queremos - aqui e so o piso. */
html,
body {
  background: var(--surface-page);
  color: var(--text-primary);
}

/* Barra fina e escura no lugar da barra escondida do DS (ver cabecalho). */
* {
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border: 2px solid var(--surface-page);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover { background: #5e5e5e; }

/* Link nu. Link com classe do Tailwind (a maioria neste painel) vence por
   especificidade e fica lime pelo remap - ver base.html. */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* A regra lime sob o cabecalho da tabela: o unico tracado que o DS pede em
   <table>. Nenhum <thead> do painel define borda, entao (0,0,2) basta. */
table thead { border-bottom: 1px solid var(--accent); }

/* Campo nativo: o navegador desenha o dropdown do <select> e o calendario do
   <input type=date> com a paleta do sistema. Sem isto sai painel branco. */
:root { color-scheme: dark; }

::selection { background: var(--accent); color: var(--on-brand); }

/* Foco visivel. O DS nao tem anel de foco em lugar nenhum - so tinge o rotulo
   de lime - o que deixa navegacao por teclado invisivel. Num painel que
   administra servidor isso nao serve; o anel lime respeita a marca e devolve
   a pista. Desvio consciente, como a barra de rolagem. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   COMPONENTES
   Valores transcritos dos .jsx do design system. O nome do arquivo de origem
   esta em cada bloco para que a proxima pessoa confira contra a fonte.
   ============================================================================ */

/* ---- O motivo assinatura (base.css do DS) ------------------------------- */
/* Tique lime de 3x23px na sarjeta esquerda. Mora em `left: -24px`, entao o pai
   PRECISA ter padding-left >= 24px ou o tique some sob a borda do card. E o
   erro visual mais provavel desta migracao. */
.eg-accent-rule { position: relative; }
.eg-accent-rule::before {
  content: " ";
  position: absolute;
  top: 5%;
  left: calc(-1 * var(--space-5));
  display: block;
  width: 0;
  height: var(--accent-rule-height);
  border-left: var(--accent-rule-width) solid var(--accent-rule);
}

/* ---- Casca da pagina ---------------------------------------------------- */
/* Substitui `ml-64 p-8`. O topo abre espaco para a toolbar fixa de 44px. */
/* O padding lateral e 48px e nao 32px por causa do tique: ele mora em
   `left: -24px` a partir do titulo, entao 32px deixariam 8px entre o tique e a
   borda da barra lateral - visivel, mas colado. 48px dao a mesma folga de 24px
   que o tique tem do texto. */
.eg-page {
  margin-left: var(--sidebar-width);
  padding: var(--space-5) var(--space-8) var(--space-8);
  padding-top: calc(var(--toolbar-height) + var(--space-5));
  min-height: 100vh;
}
.eg-page--breadcrumb {
  padding-top: calc(var(--toolbar-height) + var(--breadcrumb-height));
}
/* Coluna de configuracao: 1000px centrados, 28px entre linhas (SettingRow.jsx). */
.eg-settings {
  max-width: var(--measure-settings);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- SideMenu.jsx ------------------------------------------------------- */
.eg-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  background: var(--surface-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.eg-sidebar-brand { padding: var(--space-4) var(--space-4) 0; }
.eg-sidebar-logo { width: 80%; display: block; }
/* O DS nao tem logo de produto: sub-marca e eyebrow ALL CAPS, como "EDGIUM DNS". */
.eg-sidebar-eyebrow {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}
.eg-sidebar-role {
  margin: 2px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.eg-sidebar-nav { margin-top: var(--space-5); }
.eg-sidebar-section {
  margin: 0 0 var(--space-5);
  padding-left: 25px;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}
.eg-sidebar-divider {
  border: 0;
  border-top: 1px solid var(--border-divider);
  margin: var(--space-2) var(--space-2) var(--space-5);
}
.eg-nav-item {
  height: var(--menu-item-height);
  margin: 0 var(--space-2);
  display: flex;
  align-items: center;
}
.eg-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--menu-button-height);
  padding: 0 var(--space-4) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
}
.eg-nav-link:hover { background: var(--overlay-hover); color: var(--accent); }
.eg-nav-link .material-icons { font-size: 24px; color: var(--off-white); }
/* Item selecionado inverte: preenchimento lime, glifo e rotulo na cor do card. */
.eg-nav-link--active,
.eg-nav-link--active:hover {
  background: var(--accent);
  color: var(--dark-bg);
}
.eg-nav-link--active .material-icons { color: var(--dark-bg); }

/* ---- Toolbar.jsx -------------------------------------------------------- */
.eg-toolbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 30;
  height: var(--toolbar-height);
  background: var(--surface-toolbar);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}
/* IconButton.jsx: quadrado (radius-pill e 0) e o hover INVERTE, nao tinge. */
.eg-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--off-white);
  cursor: pointer;
}
.eg-icon-btn:hover { background: var(--accent); color: var(--dark-bg-secondary); }
.eg-icon-btn:disabled {
  background: transparent;
  color: var(--overlay-disabled);
  cursor: default;
}

/* ---- Breadcrumb.jsx ----------------------------------------------------- */
.eg-breadcrumb {
  position: fixed;
  top: var(--toolbar-height);
  left: var(--sidebar-width);
  z-index: 20;
  width: calc(100% - var(--sidebar-width));
  height: var(--breadcrumb-height);
  background: var(--surface-page);
  padding: var(--space-4);
}
.eg-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-7);
  padding-top: 30px;
}
.eg-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-nav-button);
  color: var(--text-nav-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  cursor: pointer;
}
.eg-pill .material-icons { font-size: 18px; }
.eg-pill:hover { background: var(--overlay-hover); }
.eg-pill--open,
.eg-pill--open:hover { background: var(--accent); color: var(--on-brand); }
.eg-pill-path {
  margin-left: 6px;
  font-size: var(--fs-body);
  color: var(--grey);
}

/* ---- Tabs.jsx ----------------------------------------------------------- */
/* animationDuration="0" no produto: aba nunca desliza. */
.eg-tabs {
  display: flex;
  overflow-x: auto;
  background: var(--surface-page);
  border-bottom: 3px solid var(--bg-nav-button);
  padding: 0 var(--tab-header-padding-x);
  scrollbar-width: none;
}
.eg-tabs::-webkit-scrollbar { height: 0; }
.eg-tab {
  min-width: 160px;
  height: 48px;
  margin: 3px;
  padding: 3px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-mat-button);
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
}
.eg-tab:hover { background: var(--overlay-hover); }
.eg-tab--active,
.eg-tab--active:hover {
  background: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.eg-tab:disabled { opacity: 0.3; cursor: default; }

/* ---- SettingRow.jsx ----------------------------------------------------- */
.eg-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-sm);
}
.eg-setting-label {
  position: relative;
  width: 100%;
  max-width: 400px;
}
/* labelWidth=800 nas linhas de valor numerico (SettingInput.jsx). */
.eg-setting-label--wide { max-width: 800px; }
.eg-setting-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-setting);
}
.eg-setting-sub {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--text-setting);
}
.eg-setting-control { flex-shrink: 0; text-align: end; }

/* ---- Button.jsx --------------------------------------------------------- */
.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-brand);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-mat-button);
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-slow), color var(--duration-slow);
}
.eg-btn:hover { background: var(--main-bg-hover); }
.eg-btn .material-icons { font-size: 18px; }
.eg-btn--sm { height: 32px; padding: 0 var(--space-3); }
.eg-btn--text { background: transparent; color: var(--accent); }
.eg-btn--plain { background: transparent; color: var(--off-white); }
.eg-btn--stroked {
  background: var(--surface-card);
  color: var(--off-white);
  border: 1px solid transparent;
}
/* Nao ha preenchimento vermelho de destruicao no produto: o botao destrutivo
   e texto, e quem carrega o peso e a copy do dialogo. */
.eg-btn--danger { background: transparent; color: var(--light-blue); }
.eg-btn--text:hover,
.eg-btn--plain:hover,
.eg-btn--stroked:hover,
.eg-btn--danger:hover { background: var(--overlay-hover); }
.eg-btn:disabled,
.eg-btn[disabled] {
  background: var(--overlay-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.eg-btn--text:disabled,
.eg-btn--plain:disabled,
.eg-btn--stroked:disabled,
.eg-btn--danger:disabled { background: transparent; color: var(--text-disabled); }

/* ---- TextField.jsx ------------------------------------------------------ */
.eg-field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-meta);
  color: var(--off-white);
}
.eg-field {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--overlay-hover);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  outline: none;
}
.eg-field::placeholder { color: var(--text-faint); }
.eg-field:focus { border-color: var(--accent); }
.eg-field:disabled { background: var(--surface-card); color: var(--grey); }
.eg-field--error { border-color: var(--danger); }
.eg-field-hint {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-hint);
}
.eg-field-error {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--danger);
}

/* ---- SettingToggle.jsx -------------------------------------------------- */
.eg-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  cursor: pointer;
}
.eg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.eg-toggle-off { color: #ffffffde; }
.eg-toggle-on { color: #ffffff80; }
.eg-toggle input:checked ~ .eg-toggle-off { color: #ffffff80; }
.eg-toggle input:checked ~ .eg-toggle-on { color: #ffffffde; }
.eg-toggle-track {
  position: relative;
  width: 36px;
  height: 14px;
  margin: 0 var(--space-2);
  border-radius: 7px;
  background: #7a7a7a;
  transition: background var(--duration-fast) var(--ease);
}
.eg-toggle-knob {
  position: absolute;
  top: -3px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fafafa;
  transition: left var(--duration-fast) var(--ease);
}
.eg-toggle input:checked + .eg-toggle-track { background: rgba(229, 255, 120, 0.5); }
.eg-toggle input:checked + .eg-toggle-track .eg-toggle-knob {
  left: 20px;
  background: var(--accent);
}
.eg-toggle input:disabled + .eg-toggle-track { background: #ffffff33; }
.eg-toggle input:disabled + .eg-toggle-track .eg-toggle-knob { background: #bdbdbd; }

/* ---- SettingSelect.jsx -------------------------------------------------- */
/* O unico lugar do produto que usa --shadow-select, que e a unica sombra que
   existe. Card nao tem sombra; se voce esta prestes a por uma, esta errado. */
.eg-select {
  height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--overlay-hover);
  box-shadow: var(--shadow-select);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  cursor: pointer;
}

/* ---- Notice.jsx (.warn-box / .error-box) -------------------------------- */
/* Caixa semantica no DS e sempre borda tingida + 20% da mesma cor. */
.eg-notice {
  display: flex;
  align-items: center;
  margin: var(--space-2) 0 var(--space-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--info);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  font-size: var(--fs-body);
  color: var(--off-white);
}
.eg-notice .material-icons {
  flex-shrink: 0;
  width: var(--space-8);
  color: var(--info);
}
.eg-notice--error { border-color: var(--danger-strong); background: var(--danger-bg); }
.eg-notice--error .material-icons { color: var(--danger-strong); }

/* ---- SnackBar.jsx (o showToast do painel) ------------------------------- */
.eg-snack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 48px;
  padding: 14px var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-select);
}
.eg-snack--success { background: var(--info); color: var(--on-brand); }
.eg-snack--info { background: var(--info); color: var(--on-brand); }
.eg-snack--error { background: var(--danger); color: var(--off-white); }
.eg-snack--warning { background: var(--warning-bg); color: var(--warning-fg); }

/* ---- ConfirmDialog.jsx -------------------------------------------------- */
.eg-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--backdrop);
  display: grid;
  place-items: center;
}
.eg-dialog {
  background: var(--dialog-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.eg-dialog h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--off-white);
}
.eg-dialog p {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  letter-spacing: 0.25px;
  color: var(--grey);
}
.eg-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---- DataTable.jsx ------------------------------------------------------ */
.eg-table-wrap { border-radius: var(--radius-lg); overflow: hidden; }
.eg-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
}
.eg-table th {
  height: 48px;
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--off-white);
  text-align: left;
  border-bottom: 1px solid var(--accent);
}
.eg-table td {
  height: var(--table-row-height);
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
  color: var(--off-white);
  border-bottom: 0.1px solid var(--border-table-row);
}

/* ---- StatTile.jsx ------------------------------------------------------- */
/* A borda lime de 5px embaixo e a UNICA decoracao do tile: sem topo, sem
   lateral, sem sombra. */
.eg-stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-chart-card);
  border-bottom: 5px solid var(--accent);
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.eg-stat-label {
  font-size: var(--fs-stat-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--off-white);
}
.eg-stat-value {
  font-size: var(--fs-banner-lead);
  font-weight: var(--fw-semibold);
  color: var(--off-white);
}
.eg-stat-sub { font-size: var(--fs-caption); color: var(--grey); }

/* ---- SelectCard.jsx ----------------------------------------------------- */
/* O unico gesto de delicadeza do produto: o tique de 23px cresce ate a altura
   inteira do card em 0.3s. O readme do DS pede explicitamente para nao remover. */
.eg-select-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  width: 260px;
  height: 96px;
  margin: 6px 6px 6px 19px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}
.eg-select-card::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 32px;
  height: var(--accent-rule-height);
  border-left: var(--accent-rule-width) solid var(--accent-rule);
  transition: all var(--duration-accent);
}
.eg-select-card:hover { background: var(--overlay-hover); }
.eg-select-card:hover::before { top: 0; height: 96px; }

/* ---- LoadInfo.jsx ------------------------------------------------------- */
/* Nao existe spinner no produto Edgium. O estado de carga e a marca e uma
   frase. O .jsx usa margin-bottom: 126px, calibrado para splash de pagina
   inteira; aqui o bloco vive dentro de card, entao cai para 40px. Unico valor
   deste arquivo que nao e copia literal do DS. */
.eg-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
}
.eg-load img {
  width: 100%;
  max-width: 156px;
  margin-bottom: 40px;
  opacity: 0.9;
}
.eg-load p {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--off-white);
  text-align: center;
}

/* ---- Banner de produto (DashboardScreen.jsx) ---------------------------- */
.eg-banner {
  max-width: var(--measure-banner);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-card) url("/static/img/bg-dashboard.png") center / cover;
}
.eg-banner-eyebrow {
  margin: 0;
  font-size: var(--fs-title);
  letter-spacing: var(--ls-wide);
  color: var(--off-white);
}
.eg-banner-lead {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-banner-lead);
  font-weight: var(--fw-semibold);
  color: var(--off-white);
}
.eg-banner img { width: 130px; flex-shrink: 0; }

/* ---- Split de login (LoginScreen.jsx) ----------------------------------- */
.eg-login { display: flex; min-height: 100vh; }
.eg-login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-8) var(--space-5);
  background: var(--surface-page);
}
.eg-login-form > * { width: 100%; max-width: var(--measure-form); }
.eg-login-logo { max-width: var(--measure-form); margin-bottom: var(--space-8); }
/* O DS usa dark-bg.png aqui. Nao vale 690 KB versionados para um degrade que
   o proprio DS proibe em qualquer outro lugar: fica o preto chapado de
   --bg-black, que e o token do painel de login. */
.eg-login-aside { flex: 1; background: var(--bg-black); }
@media (max-width: 900px) {
  .eg-login-aside { display: none; }
}

/* ---- Icones ------------------------------------------------------------- */
/* Ligatura Material Icons. `shrink-0` do Tailwind continua sendo aplicado no
   markup onde a linha e flex - o glifo dimensiona por font-size, entao NAO
   ponha w-4/h-4 junto, que corta o desenho. */
.material-icons {
  font-family: var(--font-icons);
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.eg-i-16 { font-size: 16px; }
.eg-i-18 { font-size: 18px; }
.eg-i-20 { font-size: 20px; }
.eg-i-24 { font-size: 24px; }
.eg-i-32 { font-size: 32px; }
.eg-i-48 { font-size: 48px; }