/*
 * Casca da aplicação — menu lateral + header, no mesmo desenho do omni.
 *
 * As classes `ds-*` (sidebar, header, botões) vêm do `haass.css` do design system e NÃO se
 * repetem aqui. O que este arquivo cobre é só o que no omni mora no próprio app, fora do DS:
 * a grade de duas colunas e o título da página. No omni isso se chama `main-layout`; aqui
 * `sim-layout`, para não sugerir que é o mesmo arquivo compartilhado.
 *
 * Convive com o Bootstrap das páginas antigas: o seletor é sempre `.sim-layout*`, então nada
 * daqui alcança Endpoints, Triggers, Cenários ou Logs.
 */

.sim-layout {
    display: flex;
    height: 100vh;
    background: var(--color-gray-50, #f9fafb);
}

.sim-layout__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* `hidden` aqui e `auto` no conteúdo: é o que mantém o header fixo e faz rolar só a área
       de baixo, como no omni. Invertido, a página inteira rola e o header some. */
    overflow: hidden;
}

.sim-layout__content {
    flex: 1;
    overflow: auto;
    padding: 24px 32px;
}

.sim-layout__page-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-900, #101828);
}

/* O logo do omni é um SVG com gradiente que mora no front dele. Aqui basta a marca em texto —
   copiar o SVG criaria uma segunda cópia para manter sem nenhum ganho. */
.sim-layout__brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
}

.sim-layout__brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary-600, #0177cc);
}

.sim-layout__brand-tag {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-500, #667085);
}

/* Aviso permanente de que este app não é o HAASS. Ele existe só em localhost e sandbox, e
   confundir os dois é o erro que a barra evita. */
.sim-layout__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 32px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-warning-700, #b54708);
    background: var(--color-warning-50, #fffaeb);
    border-bottom: 1px solid var(--color-warning-200, #fedf89);
}

/*
 * Controles de formulário.
 *
 * NÃO usam `ds-input` / `ds-select`: no design system esses são COMPONENTES REACT com markup
 * próprio — o `Input` é `div.ds-input__container > input.ds-input__tag > label.ds-input__label`,
 * e o `Select` nem sequer é um `<select>`: é um botão com popover e listbox, movido por JS.
 * Pendurar a classe num `<select>` nativo não pega estilo nenhum, e foi o que deixou o formulário
 * sem formato na primeira versão.
 *
 * Aqui os controles são nativos, estilizados com os TOKENS do DS (`--color-*`, `--radius-*`).
 * O resultado fica coerente com o omni sem fingir ser componente do DS e sem trazer React.
 */

.sim-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
}

.sim-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-form__row {
    display: flex;
    gap: 16px;
}

.sim-form__row > .sim-form__field {
    flex: 1;
}

.sim-form__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-700, #344054);
}

.sim-form__control {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--color-gray-900, #101828);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-300, #d0d5dd);
    border-radius: var(--radius-md, 8px);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.sim-form__control:focus {
    border-color: var(--color-primary-500, #0177cc);
    box-shadow: 0 0 0 3px var(--color-primary-100, #e6f2fb);
}

select.sim-form__control {
    appearance: none;
    /* A seta do `<select>` nativo é do sistema e destoa. Desenhada em background, como o
       `ds-select__chevron` faz com ícone. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

.sim-form__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-gray-500, #667085);
}

.sim-form__hint code {
    font-size: 12px;
    color: var(--color-gray-700, #344054);
}

.sim-card {
    padding: 24px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #eaecf0);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 24px;
    max-width: 720px;
}

.sim-page__intro {
    max-width: 720px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-gray-600, #475467);
}

.sim-result__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 16px 0;
    font-size: 13px;
}

/* Lista de valores curtos — SKU, conector — como chips.
   Sem isto os `<code>` adjacentes encostam e a linha vira um paredão de monospace: o espaço entre
   eles existe, mas não SEPARA visualmente, e ler sete conectores exige contar parênteses. */
.sim-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.sim-chips code {
    padding: 2px 6px;
    font-size: 12px;
    color: var(--color-gray-700, #344054);
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200, #eaecf0);
    border-radius: var(--radius-sm, 6px);
    white-space: nowrap;
}

/* Integrator entra no meio do caminho; distinguir os dois papéis por COR faz a leitura ser por
   varredura, não por parênteses. Marcado no elemento, não por posição na lista. */
.sim-chips code[data-papel="Integrator"] {
    color: var(--color-warning-700, #b54708);
    background: var(--color-warning-50, #fffaeb);
    border-color: var(--color-warning-200, #fedf89);
}

/* Roteiro de conferência — três colunas, e a de contagem é a que se varre.
   `<table>` e não o grid de duas colunas do `.sim-result__grid`: aqui o valor da direita é um
   NÚMERO que se compara linha a linha, e cabeçalho de coluna é o que diz o que comparar.
   Alinhar a contagem à direita põe os dígitos em coluna — `≥ 1` e `0` desalinhados se leem como
   texto, não como quantidade. */
.sim-table {
    width: 100%;
    margin: 8px 0 0;
    font-size: 13px;
    border-collapse: collapse;
}

.sim-table th,
.sim-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200, #eaecf0);
}

.sim-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-500, #667085);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sim-table th:last-child,
.sim-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.sim-table code {
    font-size: 12px;
    color: var(--color-gray-700, #344054);
}

.sim-result__pre {
    overflow-x: auto;
    padding: 12px;
    margin: 8px 0 0;
    font-size: 12px;
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200, #eaecf0);
    border-radius: var(--radius-md, 8px);
}