/* ==========================================================================
Suite Omnichannel — suite.css
Folha nova, escrita para o layout aprovado (Suite Omnichannel.dc.html).
Não foi evolução da folha antiga (aposentada na Etapa 8 Bloco 4): o vocabulário
de classes é outro, porque a arquitetura de informação mudou (rail por papel,
workspace de três colunas, diálogos).
Fonte: Manrope (Google Fonts). Numerais tabulares ligados no body.
White-label: a cor de destaque é --ac e derivadas. A ESTRUTURA da interface
não depende dela — só elementos de ação. Emitir no do layout:
========================================================================== */
:root {
/* destaque (sobrescrito pelo branding do tenant) */
--ac: #6d28d9;
--ac-d: #5b21b6;
--ac-s: #f2ecfd;
--ac-b: #ddd0fa;
/* superfícies */
--canvas: #f4f5f7;
--surface: #ffffff;
--surface-alt: #fafbfc;
--rail: #101828;
/* traços */
--line: #e4e7ec;
--line-soft: #f0f1f4;
--line-softer: #f6f7f8;
--line-strong: #d0d5dd;
/* texto */
--text: #101828;
--text-2: #344054;
--text-3: #475467;
--text-muted: #667085;
--text-faint: #98a2b3;
--text-ghost: #c3c8d0;
/* estados */
--ok: #027a48; --ok-bg: #ecfdf3; --ok-dot: #12b76a;
--warn: #b54708; --warn-bg: #fffaeb; --warn-line: #fedf89; --warn-dot: #f79009;
--bad: #b42318; --bad-bg: #fef3f2; --bad-line: #fecdca; --bad-dot: #f04438;
/* medidas */
--h-header: 52px;
/* Pedido do usuário 2026-08-31: barra virou só texto (sem ícone) — 64px (pensado pra um
quadrado de ícone) deixava rótulos de duas palavras ("Credenciais OAuth") espremidos,
quebrando em 2 linhas com altura desigual entre os itens (feio, "não ficou legal"). Alargado
pra caber o rótulo mais longo numa linha só, com espaçamento uniforme item a item. */
--w-rail: 132px;
--w-panel: 296px;
--w-cfgnav: 224px;
--r-sm: 7px;
--r: 8px;
--r-md: 9px;
--r-lg: 12px;
--r-pill: 20px;
--sh-sm: 0 1px 2px rgba(16, 24, 40, .05);
--sh-md: 0 8px 24px rgba(16, 24, 40, .10);
--sh-lg: 0 24px 60px rgba(16, 24, 40, .28);
--font: Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono: ui-monospace, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--canvas);
color: var(--text);
font: 400 14px/1.5 var(--font);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
h1 { margin: 0 0 4px; font: 700 22px/1.2 var(--font); letter-spacing: -.02em; }
h2 { margin: 0; font: 700 13.5px/1.3 var(--font); }
h3 { margin: 0; font: 700 12.5px/1.3 var(--font); }
p { margin: 0; }
a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ac-d); text-decoration: underline; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.spacer { flex: 1; min-width: 0; }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* barra de "Entrar como" (TenantsController.Impersonate) — sempre visível enquanto ativo,
independente de focusMode, pra nunca ficar preso na visão do tenant por engano */
.impersonate-bar {
flex: none; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 6px 14px;
background: var(--warn-bg); border-bottom: 1px solid var(--warn-line);
color: var(--warn); font: 600 12.5px/1 var(--font);
}
.impersonate-bar .btn { height: 26px; padding: 0 10px; font-size: 11.5px; }
/* ============================================================== shell ==== */
.app { height: 100vh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; }
.app-body { flex: 1; display: flex; min-height: 0; }
/* header escuro, 52px */
.topbar {
flex: none; height: var(--h-header);
display: flex; align-items: center; gap: 12px;
padding: 0 14px;
background: var(--rail); color: #fff;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; flex: none; color: #fff; text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand-mark {
width: 26px; height: 26px; border-radius: var(--r);
background: var(--ac); display: grid; place-items: center;
font: 700 12px/1 var(--font);
}
.topbar .brand-name { font: 700 14px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.topbar .divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .14); flex: none; }
.topbar .tenant {
display: flex; align-items: center; gap: 8px;
height: 30px; padding: 0 10px; max-width: 210px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r);
color: rgba(255, 255, 255, .9);
font: 500 12.5px/1 var(--font); cursor: pointer;
text-decoration: none;
}
/* achado 2026-08-28: virou na visão de plataforma (antes só