/* =====================================================================
   SupplyHub - identidade visual
   Azul institucional, laranja de acao e a escala de status de cobertura.
   ===================================================================== */

:root {
    --brand: #1F3A93;
    --brand-2: #3B5BDB;
    --brand-soft: #E8EDFB;
    --accent: #F5821F;
    --accent-dk: #C9660F;
    --accent-soft: #FFF1E4;

    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --surface-2: #EEF1F8;
    --side: #FAFBFD;
    --border: #DDE3EE;

    --ink: #141B2D;
    --ink-2: #5B6478;
    --ink-3: #9AA3B5;

    --ok: #22A06B;
    --warn: #F5A524;
    --err: #E5484D;

    --st-rup: #E5484D;
    --st-cri: #D9480F;
    --st-bai: #F5C518;
    --st-ide: #22A06B;
    --st-exc: #94A3B8;

    --display: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
    --body: 'Segoe UI', Roboto, system-ui, sans-serif;
    --mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;

    --sbw: 240px;
}

/* ---------------------------------------------------------------------
   Aparencia escura.

   Tres estados, conforme a preferencia gravada no usuario:
     - CLARO   -> data-theme="light" na raiz, nada abaixo se aplica
     - ESCURO  -> data-theme="dark"
     - SISTEMA -> sem data-theme, quem decide e o prefers-color-scheme
   --------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand: #6D8AF0;
        --brand-2: #5B7AE8;
        --brand-soft: #1E2A52;
        --accent: #F5821F;
        --accent-dk: #FF9A42;
        --accent-soft: #3A2410;

        --bg: #0F1424;
        --surface: #181F33;
        --surface-2: #1F2740;
        --side: #131A2C;
        --border: #2A3350;

        --ink: #E6EAF3;
        --ink-2: #A6AFC6;
        --ink-3: #6B7590;

        --ok: #3CBE87;
        --warn: #F5B742;
        --err: #F0646A;

        --st-rup: #F0646A;
        --st-cri: #F2762F;
        --st-bai: #F5C518;
        --st-ide: #3CBE87;
        --st-exc: #7C8AA5;
    }
}

:root[data-theme="dark"] {
    --brand: #6D8AF0;
    --brand-2: #5B7AE8;
    --brand-soft: #1E2A52;
    --accent: #F5821F;
    --accent-dk: #FF9A42;
    --accent-soft: #3A2410;

    --bg: #0F1424;
    --surface: #181F33;
    --surface-2: #1F2740;
    --side: #131A2C;
    --border: #2A3350;

    --ink: #E6EAF3;
    --ink-2: #A6AFC6;
    --ink-3: #6B7590;

    --ok: #3CBE87;
    --warn: #F5B742;
    --err: #F0646A;

    --st-rup: #F0646A;
    --st-cri: #F2762F;
    --st-bai: #F5C518;
    --st-ide: #3CBE87;
    --st-exc: #7C8AA5;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 13.5px;
    line-height: 1.5;
}

/* --------------------------------------------------------------- app */

.sh-app { display: flex; min-height: 100%; }

/* ----------------------------------------------------------- sidebar */

.sh-sb {
    width: var(--sbw);
    flex: 0 0 auto;
    background: var(--side);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sh-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    min-height: 56px;
}

.sh-brand .sh-wm {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--brand);
}

.sh-brand .sh-wm b { font-weight: 800; color: var(--ink); }
.sh-brand .sh-wm span { font-weight: 600; }

.sh-org {
    margin: 4px 10px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-org .sh-av {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--accent);
    color: #2A1400;
    font-weight: 700;
    font-size: 11px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.sh-org .sh-t {
    flex: 1;
    min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2;
}

.sh-org .sh-t small { display: block; color: var(--ink-3); font-size: 11px; }

/* seletor de fornecedor: so aparece para quem tem vinculo com mais de um */
.sh-org .sh-org-btn .ui-button {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-3) !important;
    padding: 4px !important;
    width: 24px; height: 24px;
    box-shadow: none !important;
}

.sh-org .sh-org-btn .ui-button:hover { color: var(--ink) !important; }
.sh-org .sh-org-btn .ui-button .ui-icon { margin: 0 !important; }

/* o menu e o rodape ficam dentro de um h:form, que precisa esticar */
.sh-nav-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sh-nav { padding: 4px 10px; flex: 1; overflow: auto; }

.sh-nav .sh-lbl {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 12px 8px 4px;
    font-weight: 600;
    white-space: nowrap;
}

.sh-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.sh-nav a:hover { background: var(--surface-2); color: var(--ink); }
.sh-nav a.sh-on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sh-nav a .pi { font-size: 15px; }

.sh-nav a .sh-cnt {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    background: var(--accent);
    color: #2A1400;
    border-radius: 999px;
    padding: 0 7px;
    line-height: 18px;
    font-weight: 500;
}

.sh-sb .sh-foot {
    border-top: 1px solid var(--border);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sh-sb .sh-foot .sh-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    margin: -4px -6px;
}

.sh-sb .sh-foot .sh-user:hover { background: var(--surface-2); }

.sh-sb .sh-foot .sh-av {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 auto;
}

.sh-sb .sh-foot .sh-alert-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: #2A1400;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border: 2px solid var(--surface);
}

/* Menu do usuario: mesmo componente ui-menu do resto do PrimeFaces, so
   que mais compacto - o tamanho padrao do tema fica grande demais para
   um menu de tres itens. */
.sh-user-menu.ui-menu {
    min-width: 180px;
    padding: 4px;
    border-radius: 10px;
}

.sh-user-menu .ui-menu-list { padding: 0; }

.sh-user-menu .ui-menuitem-link {
    padding: 6px 9px;
    border-radius: 6px;
    gap: 8px;
}

.sh-user-menu .ui-menuitem-icon {
    font-size: 13px;
    width: 14px;
    margin-right: 0;
}

.sh-user-menu .ui-menuitem-text { font-size: 12.5px; }

.sh-sb .sh-foot .sh-t {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    line-height: 1.2; font-size: 12.5px;
}

.sh-sb .sh-foot .sh-t small { display: block; color: var(--ink-3); font-size: 11px; }

.sh-sb .sh-collapse {
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    flex: 0 0 auto;
    text-decoration: none;
    background: transparent;
}

.sh-sb .sh-collapse:hover { background: var(--surface-2); color: var(--ink); }

/* ------------------------------------------- menu recolhido (so icones) */

.sh-app.sh-min { --sbw: 64px; }

.sh-app.sh-min .sh-wm,
.sh-app.sh-min .sh-org .sh-t,
.sh-app.sh-min .sh-nav .sh-lbl,
.sh-app.sh-min .sh-nav a span,
.sh-app.sh-min .sh-nav a .sh-cnt,
.sh-app.sh-min .sh-foot .sh-t {
    display: none;
}

.sh-app.sh-min .sh-brand { justify-content: center; padding: 14px 8px 10px; }
.sh-app.sh-min .sh-org { justify-content: center; padding: 8px; }
.sh-app.sh-min .sh-org-btn { display: none; }
.sh-app.sh-min .sh-nav a { justify-content: center; padding: 9px; }
.sh-app.sh-min .sh-foot { flex-direction: column; gap: 8px; }
.sh-app.sh-min .sh-collapse { margin-left: 0; }

/* -------------------------------------------------------------- main */

.sh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* O topo e as abas ficam cada um dentro de um h:form, e o sticky so se
   move dentro do proprio pai - o form tem a altura exata do elemento,
   entao nao sobrava folga e os dois subiam junto com a pagina. Com
   display:contents o form sai do layout e eles voltam a ser filhos
   diretos do .sh-main, que e alto o bastante para o sticky valer. */
.sh-main > form { display: contents; }

.sh-top {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 5;
}

.sh-crumb { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.sh-crumb b { color: var(--ink); font-weight: 600; }

.sh-top-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------- abas de trabalho */

.sh-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 12px 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    position: sticky;
    top: 56px;
    z-index: 4;
}

.sh-tabs::-webkit-scrollbar { height: 0; }

.sh-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px 7px 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 260px;
    position: relative;
    top: 1px;
}

.sh-tab .sh-tab-lnk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.sh-tab .sh-tab-lnk .pi { font-size: 14px; flex: 0 0 auto; }
.sh-tab .sh-lbl { overflow: hidden; text-overflow: ellipsis; }
.sh-tab .sh-ctx { color: var(--ink-3); font-weight: 400; }

.sh-tab:hover { background: var(--surface); color: var(--ink); }

.sh-tab.sh-on {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
    font-weight: 600;
}

.sh-tab.sh-on::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

.sh-tab .sh-x {
    width: 16px; height: 16px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    opacity: 0;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 auto;
}

.sh-tab:hover .sh-x, .sh-tab.sh-on .sh-x { opacity: 1; }
.sh-tab .sh-x:hover { background: var(--border); color: var(--ink); }
.sh-tab.sh-pin .sh-x { display: none; }

.sh-tab .sh-dirty {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
}

.sh-tabs .sh-ovf {
    margin-left: auto;
    margin-bottom: 5px;
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
    padding: 0 6px;
}

.sh-page {
    padding: 22px 20px 40px;
    width: 100%;
}

/* O espacamento vem da margem de cada bloco, e nao de um gap no flex:
   as telas montam o conteudo dentro de um h:form (e as vezes de um
   h:panelGroup), e o gap do pai nao alcanca os cards nesse caso. */
.sh-page .sh-ph,
.sh-page .sh-filters,
.sh-page .sh-kpis,
.sh-page .sh-row2,
.sh-page .sh-ord,
.sh-page .sh-card,
.sh-page .ui-tabs {
    margin-bottom: 18px;
}

.sh-page .sh-row2 .sh-card,
.sh-page .sh-ord .sh-card,
.sh-page .sh-side .sh-card {
    margin-bottom: 0;
}

.sh-page > *:last-child,
.sh-page form > *:last-child {
    margin-bottom: 0;
}

.sh-ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sh-ph h1 { font-family: var(--display); font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.sh-ph p { margin: 2px 0 0; color: var(--ink-2); }
.sh-ph .sh-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ filtros */

.sh-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* seletor de varejista e de loja do topo (sh-top): largura fixa - o
   rotulo cresce com a selecao (varias lojas marcadas), mas o campo nao,
   trunca com reticencias em vez de esticar o header. Um pouco maior que
   um campo comum porque o nome do varejista e da loja costuma ser longo. */
.sh-rsw-fld.ui-selectonemenu,
.sh-loja-fld.ui-selectcheckboxmenu {
    width: 220px;
    max-width: 220px;
}

.sh-rsw-fld .ui-selectonemenu-label,
.sh-loja-fld .ui-selectcheckboxmenu-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-rsw-fixo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13.5px;
}

.sh-chip .ui-button,
.sh-chip.ui-button {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    color: var(--ink-2) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.sh-chip-on .ui-button,
.sh-chip-on.ui-button {
    background: var(--brand-soft) !important;
    border-color: transparent !important;
    color: var(--brand) !important;
    font-weight: 600 !important;
}

/* Barra segmentada: opcoes excludentes coladas numa barra so - o periodo
   (sh:periodo), a venda bruta ou liquida, a base de comparacao. Ocupa
   bem menos que os chips soltos. O tema poe padding no botao e no texto
   dele; aqui fica so o do texto. */
.sh-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.sh-seg .ui-button {
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.sh-seg .ui-button .ui-button-text {
    padding: 3px 10px !important;
    line-height: 18px;
}

.sh-seg .ui-button-text-icon-left .ui-button-text { padding-left: 27px !important; }
.sh-seg .ui-button .ui-button-icon-left { left: 10px; font-size: 12px; }

.sh-seg .ui-button:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

.sh-seg .ui-button.sh-seg-on {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    font-weight: 600 !important;
}

/* periodo livre do sh:periodo: as duas datas e o "Aplicar" */
.sh-periodo-pnl .ui-overlaypanel-content { padding: 12px; }
.sh-periodo-datas { display: flex; align-items: center; gap: 8px; }
.sh-periodo-datas > span { color: var(--ink-3); font-size: 12px; }
.sh-periodo-datas .ui-calendar { width: 140px !important; }
.sh-periodo-acts { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.sh-periodo-acts > span { font-size: 11.5px; color: var(--ink-3); }
.sh-periodo-acts > .ui-button { margin-left: auto; }

/* busca na linha de filtros (Estoque): o campo e a lupa colados, na
   altura da barra segmentada, no fim da linha */
.sh-busca { margin-left: auto; display: inline-flex; align-items: stretch; }

.sh-busca .ui-inputfield,
.sh-busca .ui-button { height: 30px; box-sizing: border-box; }

.sh-busca .ui-inputfield {
    width: 200px;
    padding: 4px 10px !important;
    font-size: 12.5px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.sh-busca .ui-button {
    width: 32px;
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* menu de escolha na linha de filtros (Produtos: categoria e tributacao;
   Estoque: as especies das movimentacoes, varias de uma vez): na altura
   da busca e da barra segmentada, com largura fixa - o rotulo corta com
   reticencias, e a lista aberta mostra o texto inteiro. O filtro em uso
   fica com a cor da opcao ativa da barra segmentada. */
.sh-filters .sh-flt-sel.ui-selectonemenu,
.sh-filters .sh-flt-sel.ui-selectcheckboxmenu {
    width: 200px;
    min-width: 0 !important;
    height: 30px;
    box-sizing: border-box;
    border-radius: 8px;
}

/* o padding da direita guarda o lugar da seta, que fica por cima do rotulo */
.sh-filters .sh-flt-sel .ui-selectonemenu-label,
.sh-filters .sh-flt-sel .ui-selectcheckboxmenu-label {
    padding: 0 28px 0 10px !important;
    line-height: 28px;
    font-size: 12.5px;
    color: var(--ink-2) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* o tema poe padding no conteiner do rotulo, que empurrava o texto para baixo */
.sh-filters .sh-flt-sel .ui-selectcheckboxmenu-label-container { display: block; max-width: 100%; padding: 0 !important; }

.sh-filters .sh-flt-sel .ui-selectonemenu-trigger,
.sh-filters .sh-flt-sel .ui-selectcheckboxmenu-trigger { width: 26px; }
.sh-filters .sh-flt-sel .ui-selectonemenu-trigger .ui-icon,
.sh-filters .sh-flt-sel .ui-selectcheckboxmenu-trigger .ui-icon { font-size: 11px; }

.sh-filters .sh-flt-sel.sh-flt-on,
.sh-filters .sh-flt-sel.sh-flt-on .ui-selectonemenu-label,
.sh-filters .sh-flt-sel.sh-flt-on .ui-selectonemenu-trigger,
.sh-filters .sh-flt-sel.sh-flt-on .ui-selectcheckboxmenu-label,
.sh-filters .sh-flt-sel.sh-flt-on .ui-selectcheckboxmenu-trigger {
    background: var(--brand-soft) !important;
    border-color: transparent !important;
    color: var(--brand) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------- kpi */

.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.sh-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.sh-kpi .sh-l { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }

.sh-kpi .sh-v {
    font-family: var(--display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.sh-kpi .sh-v small { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sh-kpi .sh-d { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sh-kpi .sh-d.sh-up { color: var(--ok); }
.sh-kpi .sh-d.sh-dn { color: var(--err); }
.sh-kpi.sh-alert .sh-v { color: var(--err); }

/* -------------------------------------------------------------- card */

.sh-row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }

.sh-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 0;
}

.sh-card .sh-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; flex-wrap: wrap; }
.sh-card .sh-hd h2 { font-family: var(--display); font-size: 15px; font-weight: 700; margin: 0; }
.sh-card .sh-hd .sh-sub { color: var(--ink-3); font-size: 12px; }
.sh-card .sh-hd .sh-more { margin-left: auto; color: var(--brand); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.sh-card .sh-hd .sh-right { margin-left: auto; }

.sh-tfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 12.5px;
    flex-wrap: wrap;
}

.sh-tfoot .sh-right { margin-left: auto; }

/* ----------------------------------------------------------- grafico */

.sh-chart { padding: 10px 16px 14px; }

.sh-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 190px;
    padding-bottom: 20px;
    position: relative;
}

.sh-bars .sh-bar {
    flex: 1;
    min-width: 6px;
    background: var(--brand-2);
    border-radius: 3px 3px 0 0;
    position: relative;
    transition: background .15s;
    min-height: 2px;
}

.sh-bars .sh-bar.sh-wk { background: var(--ink-3); opacity: .55; }
.sh-bars .sh-bar:hover { background: var(--accent); }

.sh-bars .sh-bar .sh-cap {
    position: absolute;
    bottom: -19px;
    left: 0; right: 0;
    text-align: center;
    font-size: 10.5px;
    color: var(--ink-3);
    white-space: nowrap;
}

.sh-line { width: 100%; height: 200px; display: block; overflow: visible; }
.sh-line .sh-area { fill: rgba(59, 91, 219, .12); }
.sh-line .sh-stroke { fill: none; stroke: var(--brand-2); stroke-width: 2; stroke-linejoin: round; }
.sh-line .sh-grid { stroke: var(--border); stroke-width: 1; }

.sh-line .sh-stroke-prev {
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}

.sh-line .sh-point {
    fill: var(--brand-2);
    stroke: var(--surface);
    stroke-width: 1.5;
    cursor: pointer;
}

.sh-line .sh-point:hover { fill: var(--accent); }

.sh-line-caps {
    display: flex;
    gap: 2px;
    padding: 6px 0 0;
}

.sh-line-caps span {
    flex: 1;
    text-align: center;
    font-size: 10.5px;
    color: var(--ink-3);
    white-space: nowrap;
}

/* -------------------------------------------------------------- list */

.sh-list { list-style: none; margin: 0; padding: 6px 8px 10px; }
.sh-list li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.sh-list li:hover { background: var(--surface-2); }
.sh-list .sh-st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sh-list .sh-t { flex: 1; min-width: 0; }
.sh-list .sh-t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-list .sh-t small { color: var(--ink-3); }
.sh-list .sh-n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ------------------------------------------------------------ status */

.sh-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
}

.sh-tag i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.sh-st-ruptura i { background: var(--st-rup); }
.sh-st-critico i { background: var(--st-cri); }
.sh-st-baixo   i { background: var(--st-bai); }
.sh-st-ideal   i { background: var(--st-ide); }
.sh-st-excesso i { background: var(--st-exc); }

.sh-pd-rascunho i { background: var(--warn); }
.sh-pd-enviado  i { background: var(--brand-2); }
.sh-pd-faturado i { background: var(--ok); }
.sh-pd-erro     i { background: var(--err); }

/* ---------------------------------------------------------- cobertura */

.sh-cov { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sh-cov .sh-b { width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.sh-cov .sh-b i { display: block; height: 100%; border-radius: 3px; }

.sh-sug { color: var(--brand); font-weight: 600; }
.sh-mono { font-family: var(--mono); }
/* codigo do produto no ERP do varejista em foco, ao lado da descricao */
.sh-erp { margin-left: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.sh-num { text-align: right; }

.sh-rsw-item { display: flex; align-items: center; gap: 10px; padding: 2px 0; }

.sh-rsw-item .sh-av {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.sh-rsw-item .sh-t { flex: 1; min-width: 0; line-height: 1.2; }
.sh-rsw-item .sh-t b { display: block; font-weight: 600; }
.sh-rsw-item .sh-t small { color: var(--ink-3); font-size: 11.5px; }

.sh-rsw-item .sh-bd {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--accent);
    color: #2A1400;
    border-radius: 999px;
    padding: 0 7px;
    line-height: 18px;
}

/* --------------------------------------------------------- pedido/fluxo */

.sh-ord { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.sh-ord .sh-side { display: flex; flex-direction: column; gap: 12px; }

.sh-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 4px 16px 14px; font-size: 13px; margin: 0; }
.sh-kv dt { color: var(--ink-2); }
.sh-kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.sh-step { display: flex; gap: 10px; padding: 8px 16px; font-size: 12.5px; color: var(--ink-2); align-items: flex-start; }

.sh-step i {
    width: 18px; height: 18px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    border: 1.5px solid var(--border);
    color: var(--ink-3);
    margin-top: 1px;
    font-style: normal;
}

.sh-step.sh-done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.sh-step.sh-cur i { border-color: var(--accent); color: var(--accent-dk); }
.sh-step.sh-cur { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------ formulario de cadastro */

.sh-form { padding: 6px 16px 18px; }

.sh-form .sh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 20px;
}

.sh-form .sh-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sh-form .sh-fld > label,
.sh-form .sh-fld > .ui-outputlabel {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink-2);
}

.sh-form .sh-fld .ui-inputfield,
.sh-form .sh-fld .ui-selectonemenu,
.sh-form .sh-fld .ui-inputnumber,
.sh-form .sh-fld .ui-spinner {
    width: 100%;
}

/* O selectOneMenu nasce com um min-width inline, calculado pelo item
   mais largo da lista - o que o faz transbordar a coluna e cobrir o
   campo seguinte. O campo manda na largura; o rotulo interno corta com
   reticencias, e a lista aberta continua mostrando o texto inteiro. */
.sh-form .sh-fld .ui-selectonemenu {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.sh-form .sh-fld .ui-selectonemenu .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-form .sh-fld small { color: var(--ink-3); font-size: 11.5px; }

/* o indicador de campo obrigatorio vem do proprio p:outputLabel */
.sh-form .ui-outputlabel-rfi {
    color: var(--err);
    font-weight: 700;
    margin-left: 2px;
}

.sh-form .ui-message-error,
.sh-form .ui-message-error-detail {
    display: block;
    color: var(--err) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 11.5px;
    padding: 0 !important;
    margin: 0 !important;
}

.sh-form .ui-state-error,
.sh-form .ui-inputfield.ui-state-error {
    border-color: var(--err) !important;
}

/* arvore de permissoes */
.sh-arvore .ui-tree {
    border: 0 !important;
    background: transparent !important;
    padding: 0 16px 16px;
    width: 100%;
}

.sh-arvore .ui-treenode-label { color: var(--ink) !important; }
.sh-arvore .ui-treenode-content { padding: 3px 0; }
.sh-arvore .ui-tree .ui-treenode-children { padding-left: 22px; }

.sh-arvore .sh-bloco { font-weight: 700; }
.sh-arvore .sh-item-menu { color: var(--ink-2); }

/* Linha do formulario: doze colunas, para o cadastro dizer quanto cada
   campo ocupa (sh-c2 a sh-c12). A grade automatica nao serve quando a
   ordem e a largura dos campos importam - descricao larga ao lado de
   um switch estreito, por exemplo. No celular cada campo volta a
   ocupar a linha inteira. */
.sh-form .sh-linha {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
}

.sh-form .sh-linha + .sh-linha { margin-top: 14px; }

.sh-form .sh-c1  { grid-column: span 1; }
.sh-form .sh-c2  { grid-column: span 2; }
.sh-form .sh-c3  { grid-column: span 3; }
.sh-form .sh-c4  { grid-column: span 4; }
.sh-form .sh-c5  { grid-column: span 5; }
.sh-form .sh-c6  { grid-column: span 6; }
.sh-form .sh-c7  { grid-column: span 7; }
.sh-form .sh-c8  { grid-column: span 8; }
.sh-form .sh-c9  { grid-column: span 9; }
.sh-form .sh-c10 { grid-column: span 10; }
.sh-form .sh-c12 { grid-column: span 12; }

/* O switch nao tem rotulo em cima, entao nasceria colado no topo da
   celula. Aqui ele desce a altura de um rotulo (19px) mais o espaco
   ate o campo (5px) e ocupa a altura de um input, o que o deixa na
   mesma linha dos campos vizinhos - e nao na base deles, que varia
   com o texto de ajuda de cada campo. */
.sh-form .sh-switch {
    align-self: start;
    margin-top: 24px;
    min-height: 35px;
}

/* Campo composto de embalagem: a quantidade e a unidade sao um campo
   so, entao os dois controles ficam colados, com a unidade estreita a
   direita. */
.sh-emb { display: flex; width: 100%; }

.sh-emb > .ui-inputnumber {
    flex: 1 1 auto;
    min-width: 0;
}

/* a quantidade vem depois da unidade, entao so o lado direito e
   arredondado */
.sh-emb > .ui-inputnumber > .ui-inputfield {
    width: 100%;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* A unidade e o unico input solto dentro do campo, e vem na frente. A
   largura vai em width, e nao so no flex-basis: fora do .sh-form o
   input mantem a largura natural dele, que comeria a quantidade. */
.sh-emb > input.ui-inputfield {
    flex: 0 0 72px;
    width: 72px;
    min-width: 0;
    margin-right: -1px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center;
    text-transform: uppercase;
}

/* dentro da tabela de codigos o campo vem sem rotulo, entao nao
   precisa do espaco que separa um campo do outro no formulario */
.sh-emb-nu { gap: 0; }

/* p:message sem mensagem ainda renderiza a div: sem isto ela abre um
   buraco entre o campo e o texto de ajuda, e desalinha o campo dentro
   da celula de uma dataTable */
.ui-message:empty { display: none; }

/* campo que ocupa a linha inteira */
.sh-form .sh-fld-wide { grid-column: 1 / -1; }

/* Grade de tres colunas fixas, para cards com campos curtos: a grade
   automatica quebraria cada campo largo em uma linha so, esticando o
   formulario. sh-fld-2 e o campo que ocupa duas delas. */
.sh-form .sh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-form .sh-grid-3 .sh-fld-2 { grid-column: span 2; }

.sh-form .sh-switch {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.sh-form .sh-switch > .ui-toggleswitch { flex: 0 0 auto; }

.sh-form .sh-switch > label { order: 2; font-weight: 500; color: var(--ink); }

.sh-aviso {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 16px 14px;
}

.sh-aviso small { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }

/* ---------------------------------------------------------- login */

.sh-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sh-login-side {
    background: linear-gradient(150deg, var(--brand) 0%, #16296B 100%);
    color: #fff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.sh-login-side h1 { font-family: var(--display); font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.sh-login-side p { margin: 0; opacity: .85; max-width: 420px; line-height: 1.6; }

.sh-login-side ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sh-login-side ul li { display: flex; gap: 10px; align-items: center; opacity: .9; }
.sh-login-side ul li .pi { color: var(--accent); }

.sh-login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--bg);
}

.sh-login-box { width: 100%; max-width: 380px; }
.sh-login-box h2 { font-family: var(--display); font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.sh-login-box .sh-hint { color: var(--ink-2); margin: 0 0 22px; }
.sh-login-box .ui-inputfield { width: 100%; }
.sh-login-box .sh-field { margin-bottom: 14px; }
.sh-login-box .sh-field label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--ink-2); }

/* -------------------------------------------------------- primefaces */

.ui-button.sh-pri {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #2A1400 !important;
    font-weight: 600 !important;
}

.ui-button.sh-pri:hover {
    background: var(--accent-dk) !important;
    border-color: var(--accent-dk) !important;
    color: #fff !important;
}

.ui-button {
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-size: 13px !important;
}

/* Tabela larga rola dentro do proprio card, sem espremer a coluna livre
   nem fazer a pagina rolar na horizontal. */
.ui-datatable-tablewrapper,
.ui-datatable-scrollable-body { overflow-x: auto; }

/* O tema usa table-layout:fixed, que ignora o min-width das colunas e
   espreme ate zero a coluna sem largura declarada. Com layout automatico
   cada coluna respeita seu minimo e a tabela rola no wrapper acima. */
.ui-datatable table {
    font-size: 13px;
    table-layout: auto !important;
    width: 100%;
}

.ui-datatable thead th {
    background: var(--surface) !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-width: 0 0 1px 0 !important;
    border-color: var(--border) !important;
}

.ui-datatable tbody td {
    border-width: 0 0 1px 0 !important;
    border-color: var(--border) !important;
    font-variant-numeric: tabular-nums;
}

/* O titulo da coluna numerica acompanha o conteudo: o tema forca
   text-align:left no th, e a coluna .sh-num ficava com o titulo a
   esquerda e os numeros a direita. */
.ui-datatable thead th.sh-num,
.ui-treetable thead th.sh-num {
    text-align: right !important;
}

/* Pedidos em lote: a tabela de itens fica numa caixa de tres linhas, com o
   cabecalho fixo, para a tabela de filiais - onde se digita - ficar logo
   abaixo, sem rolar a pagina. O produto fica numa linha so. */
.sh-lote-itens .ui-datatable-tablewrapper {
    /* cabecalho de 34px, tres linhas de 34,5px e a barra de rolagem
       horizontal, quando ha */
    max-height: 154px;
    overflow-y: auto;
}

.sh-lote-itens thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* tudo numa linha (R$ 0,00 quebrava em dois e dobrava a altura) e mais
   justo, para caberem tres linhas */
.sh-lote-itens tbody td {
    white-space: nowrap;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* o item em digitacao fica marcado - com o mouse em cima tambem -, com a
   faixa da marca na borda; a filial em que esta o cursor ganha um tom */
.sh-lote-itens tbody tr.ui-state-highlight td,
.sh-lote-itens tbody tr.ui-state-highlight:hover td {
    background: var(--brand-soft) !important;
    color: var(--ink) !important;
    font-weight: 600;
}

.sh-lote-itens tbody tr.ui-state-highlight td:first-child {
    box-shadow: inset 3px 0 0 var(--brand);
}

.sh-lote-filiais tbody tr:focus-within td {
    background: var(--accent-soft) !important;
}

.ui-datatable tbody tr:hover td { background: var(--surface-2) !important; }
.ui-datatable .ui-paginator { background: var(--surface) !important; border: 0 !important; border-top: 1px solid var(--border) !important; }

/* mesma correcao de largura da dataTable, para a arvore de categorias */
.ui-treetable-tablewrapper { overflow-x: auto; }

.ui-treetable table {
    font-size: 13px;
    table-layout: auto !important;
    width: 100%;
}

.ui-treetable thead th {
    background: var(--surface) !important;
    color: var(--ink-3) !important;
    font-size: 11px !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-width: 0 0 1px 0 !important;
    border-color: var(--border) !important;
}

.ui-treetable tbody td {
    border-width: 0 0 1px 0 !important;
    border-color: var(--border) !important;
    background: var(--surface);
    color: var(--ink);
}

.ui-treetable tbody tr:hover td { background: var(--surface-2) !important; }
.ui-treetable .ui-treetable-empty-message td { background: var(--surface); color: var(--ink-3); }

.ui-panelgrid, .ui-panelgrid td { border: 0 !important; background: transparent !important; }

.sh-qty { width: 84px !important; text-align: right; font-family: var(--mono); font-size: 12.5px; }
.sh-qty.sh-chg { border-color: var(--accent) !important; background: var(--accent-soft) !important; }

/* ------------------------------------------------------------ painel */

/* periodo e comparacao, embaixo da saudacao */
.sh-ph p.sh-per { font-size: 12.5px; color: var(--ink-3); }
.sh-ph p.sh-per b { color: var(--ink-2); font-weight: 600; }

.sh-flt-l { font-size: 12px; color: var(--ink-3); }
.sh-filters .sh-seg + .sh-flt-l { margin-left: 10px; }

/* titulo discreto de um grupo de indicadores (pedidos pendentes) */
.sh-sec {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    margin: 0 0 8px 2px;
}

/* atalho no titulo do indicador, e o da linha de erro */
.sh-kpi .sh-l .sh-kpi-lnk { margin-left: auto; color: var(--brand); font-weight: 600; text-decoration: none; }
.sh-kpi .sh-d .sh-kpi-err { color: var(--err); font-weight: 600; text-decoration: none; }
.sh-kpi .sh-kpi-lnk:hover,
.sh-kpi .sh-kpi-err:hover { text-decoration: underline; }

/* variacao contra o periodo comparado (sh:comparativo) */
.sh-cmp { font-weight: 600; white-space: nowrap; }
.sh-cmp.sh-up { color: var(--ok); }
.sh-cmp.sh-dn { color: var(--err); }
.sh-cmp .sh-cmp-nb { font-weight: 400; color: var(--ink-3); white-space: normal; }
.sh-cmp-ant { color: var(--ink-3); white-space: nowrap; }

/* grafico de barras em pares: o periodo (cor) e o comparado (cinza) */
.sh-bars-cmp { gap: 3px; }

.sh-bars-cmp .sh-par {
    flex: 1;
    min-width: 5px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    position: relative;
    border-radius: 3px 3px 0 0;
}

/* fim de semana: uma faixa discreta atras do par, ja que o cinza e do comparado */
.sh-bars-cmp .sh-par.sh-wk { background: rgba(127, 127, 127, .07); }
.sh-bars-cmp .sh-par .sh-bar { min-width: 2px; }
.sh-bars-cmp .sh-par .sh-bar-ant { background: var(--ink-3); opacity: .45; }
.sh-bars-cmp .sh-par:hover .sh-bar { background: var(--accent); }
.sh-bars-cmp .sh-par:hover .sh-bar-ant { opacity: .35; }

.sh-bars-cmp .sh-par .sh-cap {
    position: absolute;
    bottom: -19px;
    left: -12px; right: -12px;
    text-align: center;
    font-size: 10.5px;
    color: var(--ink-3);
    white-space: nowrap;
}

/* dia da semana: o dia e a media embaixo de cada par, barras estreitas */
.sh-bars.sh-bars-sem { height: 214px; padding-bottom: 38px; gap: 14px; }
.sh-bars-sem .sh-par { justify-content: center; }
.sh-bars-sem .sh-par .sh-bar { max-width: 36px; }
.sh-bars-sem .sh-par .sh-cap { bottom: -36px; line-height: 1.4; }
.sh-bars-sem .sh-par .sh-cap b { display: block; color: var(--ink-2); font-weight: 600; text-transform: capitalize; }

.sh-legend { display: inline-flex; gap: 12px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.sh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sh-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sh-legend .sh-lg-at { background: var(--brand-2); }
.sh-legend .sh-lg-ant { background: var(--ink-3); opacity: .45; }

/* listas Top 10: quantas couberem com pelo menos 520px cada - duas lado
   a lado numa tela larga, uma por linha quando o conteudo e estreito */
.sh-rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 14px;
}
.sh-page .sh-rank-grid { margin-bottom: 18px; }
.sh-page .sh-rank-grid .sh-card { margin-bottom: 0; }

.sh-rank-wrap { overflow-x: auto; padding-bottom: 6px; }
.sh-rank { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.sh-rank th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.sh-rank td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sh-rank tbody tr:last-child td { border-bottom: 0; }
.sh-rank tbody tr:hover td { background: var(--surface-2); }
.sh-rank .sh-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-rank .sh-pos { width: 22px; padding-left: 16px; text-align: right; color: var(--ink-3); font-weight: 600; }
.sh-rank th:last-child,
.sh-rank td:last-child { padding-right: 16px; }
.sh-rank .sh-prd { min-width: 170px; }
.sh-rank .sh-prd b { font-weight: 600; }
.sh-rank .sh-prd small { display: block; color: var(--ink-3); font-size: 11px; }

.sh-rbar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; }
.sh-rbar i { display: block; height: 100%; border-radius: 2px; background: var(--brand-2); }
.sh-rbar.sh-rbar-err i { background: var(--err); }
.sh-rbar.sh-rbar-ant { height: 3px; margin-top: 2px; }
.sh-rbar.sh-rbar-ant i { background: var(--ink-3); opacity: .5; }

.sh-rank-vazio { padding: 22px 16px 26px; color: var(--ink-3); font-size: 13px; text-align: center; }
.sh-mute { color: var(--ink-3); }

/* arvore da venda (filial, categoria e produto): cada nivel com o seu peso */
.sh-visao { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-treetable tr.sh-nv-FILIAL td { font-weight: 600; }
.ui-treetable tr.sh-nv-CATEGORIA td .sh-nv-nome { font-weight: 600; }
.sh-nv-ic { font-size: 12px; color: var(--ink-3); margin-right: 6px; }
.sh-nv-det { margin-left: 8px; font-size: 11px; color: var(--ink-3); }
/* linha de totais (Venda, Resumo, movimentacoes do Estoque); o tema pinta
   o rodape da dataTable de claro com "body .ui-datatable tfoot td" */
body .ui-treetable tfoot td,
body .ui-datatable tfoot td {
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink);
    border-width: 2px 0 0 0;
    border-style: solid;
    border-color: var(--border);
    padding: 9px 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ui-treetable tfoot td.sh-num,
.ui-datatable tfoot td.sh-num { text-align: right; }
.sh-neg { color: var(--err); }

/* coluna que so existe para a exportacao: some do cabecalho, das linhas e do rodape */
.sh-so-export { display: none !important; }

/* dias sem venda, digitado no titulo do bloco */
.sh-dias { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; font-weight: 700; }
.sh-dias input { width: 58px; text-align: right; padding: 3px 6px; font-weight: 600; }

.sh-empty { padding: 40px; text-align: center; color: var(--ink-3); }

/* -------------------------------------------------------- responsivo */

@media (max-width: 1100px) {
    .sh-row2 { grid-template-columns: 1fr; }
    .sh-ord { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .sh-form .sh-grid-3 { grid-template-columns: 1fr; }
    .sh-form .sh-grid-3 .sh-fld-2 { grid-column: auto; }
    .sh-form .sh-linha { grid-template-columns: 1fr; }
    .sh-form .sh-linha > [class*="sh-c"] { grid-column: auto; }
    .sh-form .sh-switch { margin-top: 0; min-height: 0; }
    .sh-sb { display: none; }
    .sh-page { padding: 16px 14px 32px; }
}


/* ---------------------------------------------------------------------
   O tema do PrimeFaces traz cores fixas, que nao acompanham a troca de
   aparencia. Aqui os componentes passam a usar as variaveis da paleta,
   entao valem para o modo claro e para o escuro sem duplicar regras.
   --------------------------------------------------------------------- */

.ui-widget-content,
.ui-widget-header {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}

.ui-inputfield,
.ui-inputtext,
.ui-selectonemenu,
.ui-selectcheckboxmenu,
.ui-spinner-input,
.ui-inputnumber-input,
.ui-password-input,
.ui-selectonemenu-label,
.ui-selectcheckboxmenu-label {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.ui-inputfield::placeholder { color: var(--ink-3); }

.ui-inputfield:enabled:focus,
.ui-selectonemenu:not(.ui-state-disabled).ui-state-focus,
.ui-selectcheckboxmenu:not(.ui-state-disabled).ui-state-focus {
    border-color: var(--brand-2) !important;
    box-shadow: 0 0 0 2px var(--brand-soft) !important;
}

.ui-inputfield:disabled,
.ui-state-disabled {
    background: var(--surface-2) !important;
    color: var(--ink-3) !important;
}

.ui-selectonemenu-panel,
.ui-selectcheckboxmenu-panel,
.ui-autocomplete-panel,
.ui-menu,
.ui-menu-list,
.ui-overlaypanel-content {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.ui-selectonemenu-item,
.ui-selectcheckboxmenu-item,
.ui-menuitem-link,
.ui-menuitem-text,
.ui-menu .ui-menuitem-link .ui-menuitem-text,
.ui-menubutton .ui-menuitem-text {
    color: var(--ink) !important;
}

/* no modo escuro o tema mantinha o texto do menu quase preto */
.ui-menu-list .ui-menuitem-link .ui-icon,
.ui-menubutton .ui-button .ui-icon {
    color: var(--ink-2) !important;
}

.ui-selectonemenu-item:hover,
.ui-selectcheckboxmenu-item:hover,
.ui-menuitem-link:hover,
.ui-menuitem-link:hover .ui-menuitem-text {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
}

.ui-selectonemenu-item.ui-state-highlight,
.ui-selectcheckboxmenu-item.ui-state-highlight,
.ui-state-active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
}

.ui-button {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}

.ui-button:not(.sh-pri):enabled:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--border);
}

.ui-datatable .ui-datatable-empty-message,
.ui-datatable tbody td {
    background: var(--surface);
    color: var(--ink);
}

.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    color: var(--ink-2) !important;
    background: transparent !important;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
}

.ui-dialog,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-footer {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.ui-dialog .ui-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; }

.ui-widget-overlay { background: rgba(6, 10, 22, .6) !important; }

.ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.ui-tabs .ui-tabs-nav li a { color: var(--ink-2) !important; }
.ui-tabs .ui-tabs-nav li.ui-state-active a { color: var(--brand) !important; }

.ui-chkbox-box,
.ui-radiobutton-box {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.ui-chkbox-box.ui-state-active,
.ui-radiobutton-box.ui-state-active {
    background: var(--brand-2) !important;
    border-color: var(--brand-2) !important;
}

/* sem isto a marca de selecao some sobre o fundo azul */
.ui-chkbox-box.ui-state-active .ui-chkbox-icon,
.ui-radiobutton-box.ui-state-active .ui-radiobutton-icon {
    color: #FFFFFF !important;
}

.ui-growl-item {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.ui-growl-title, .ui-growl-message p { color: var(--ink) !important; }

.ui-column-filter { background: var(--surface) !important; color: var(--ink) !important; }

/* O campo do formulario ocupa 100% da largura, o que jogava o gatilho
   do calendario para a linha de baixo. Aqui os dois voltam a dividir a
   mesma linha. */

/* o tema declara o proprio display, entao a regra precisa vencer */
span.ui-calendar {
    display: inline-flex !important;
    align-items: stretch;
    width: 100%;
}

span.ui-calendar > .ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

span.ui-calendar > .ui-datepicker-trigger {
    flex: 0 0 auto;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.ui-datepicker-trigger .ui-button-text { display: none; }

/* Botao solto em um campo do formulario acompanha o proprio rotulo, em
   vez de esticar pela coluna inteira. */
.sh-form .sh-fld > .ui-button { width: fit-content; }

/* O calendario do datePicker vem com as cores fixas do tema; aqui ele
   acompanha a paleta como os demais componentes. */

.ui-datepicker,
.ui-datepicker-header,
.ui-datepicker .ui-datepicker-buttonbar {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-calendar th {
    color: var(--ink) !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: var(--ink-2) !important;
}

.ui-datepicker .ui-datepicker-calendar td > a,
.ui-datepicker .ui-datepicker-calendar td > span {
    color: var(--ink) !important;
    background: transparent !important;
}

.ui-datepicker .ui-datepicker-calendar td > a:hover {
    background: var(--surface-2) !important;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today > a,
.ui-datepicker .ui-datepicker-calendar td > a.ui-state-active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month > span {
    color: var(--ink-3) !important;
}

/* ------------------------------------------------ seletor de aparencia */

.sh-tema { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 16px 16px; }

.sh-tema .sh-opt .ui-button {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    min-width: 160px;
    padding: 12px 16px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
}

/* O tema posiciona o icone de forma absoluta, o que o joga por cima do
   texto quando o botao vira flex. Aqui ele volta ao fluxo normal. */
.sh-tema .sh-opt .ui-button .ui-button-icon-left {
    position: static !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    font-size: 15px;
}

.sh-tema .sh-opt-on .ui-button {
    border-color: var(--brand-2) !important;
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    font-weight: 600 !important;
}

.sh-tema .sh-opt .ui-button .ui-button-text { padding: 0 !important; }
.sh-tema .sh-opt .ui-button .ui-icon { text-indent: 0 !important; }