/* ============================================================================
SDP — Sidebar Redesigned (opt-in via body.sdp-redesigned)
============================================================================
Console institucional premium. Paralelo a topbar-redesigned.css (PR #12).
CSS-only. Não modifica markup.
Markup real (assets/js/components/sidebar.js):
---------------------------------------------------------------------------
CONTRATO DE TOKEN COM PR #12 (topbar-redesigned.css)
---------------------------------------------------------------------------
Este arquivo lê o token `--topbar-height` publicado pelo PR #12. Os fallbacks
hardcoded abaixo (64px no desktop, 56px no mobile) refletem a especificação
atual do topbar e existem APENAS para o caso de o token não estar disponível
(carregamento parcial, ordem errada, fallback de SSR, etc.).
Se o PR #12 alterar a altura da topbar, atualize os fallbacks aqui também,
E vice-versa: nunca permita que estes dois arquivos divirjam silenciosamente.
---------------------------------------------------------------------------
POLÍTICA DE !important (errata §1.3 / prompt-codex v2 §5)
---------------------------------------------------------------------------
sidebar-redesign.css (legado, singular "redesign") e modern-layout.css usam
!important em massa nas propriedades de posicionamento, dimensão, cor de
item e background da sidebar. Para vencer a cascata sem mexer no legado,
replicamos !important nas MESMAS propriedades neste arquivo.
Cada bloco abaixo carrega comentário acima da regra dizendo qual arquivo
legado e quais propriedades estão sendo contornados. Linhas exatas do
arquivo legado devem ser preenchidas pelo revisor durante o code-review do
PR (use `grep -n "" assets/css/sidebar-redesign.css`).
Follow-up obrigatório: ao mergear este PR, abrir issue de housekeeping com
título "Remover !important do CSS legado da sidebar após migração de ondas",
referenciada no corpo do PR.
Não usar !important em propriedades que o legado NÃO usa com !important.
============================================================================ */
body.sdp-redesigned {
/* ----- Cores (light) ----- */
--sdp-sidebar-bg-1: #FEFCF8;
--sdp-sidebar-bg-2: #F4EEDD;
--sdp-sidebar-bg-glaze: rgba(181, 144, 74, 0.045);
--sdp-sidebar-grain: rgba(31, 45, 74, 0.02);
--sdp-sidebar-ink: #0F1A2E; /* texto enfático (logo, active) */
--sdp-sidebar-ink-muted: #475063; /* itens default (9.42:1 sobre cream) */
--sdp-sidebar-ink-faint: #6B7488; /* subitens default (5.74:1) */
--sdp-sidebar-title: #7A6644; /* títulos seção (5.11:1) */
--sdp-sidebar-arrow: #9AA3B5;
/* ----- Linhas / divisores ----- */
--sdp-sidebar-line: rgba(31, 45, 74, 0.13);
--sdp-sidebar-line-soft: rgba(31, 45, 74, 0.07);
--sdp-sidebar-line-faint: rgba(31, 45, 74, 0.04);
/* ----- Surfaces interativas ----- */
--sdp-sidebar-hover-bg: rgba(181, 144, 74, 0.09);
--sdp-sidebar-hover-bg-strong: rgba(181, 144, 74, 0.14);
--sdp-sidebar-hover-border: rgba(181, 144, 74, 0.18);
/* ----- Marca / ouro institucional ----- */
--sdp-sidebar-gold: #B5904A;
--sdp-sidebar-gold-warm: #C9A05A;
--sdp-sidebar-gold-soft: rgba(181, 144, 74, 0.22);
--sdp-sidebar-gold-line: rgba(181, 144, 74, 0.34);
--sdp-sidebar-gold-glow: rgba(181, 144, 74, 0.32);
--sdp-sidebar-navy: #1F2D4A; /* azul-puro alinhado com login (era #17243C — virava verde-azulado em alguns monitores) */
/* ----- Icone container ----- */
--sdp-sidebar-icon-bg: rgba(31, 45, 74, 0.05);
--sdp-sidebar-icon-bg-hover: rgba(181, 144, 74, 0.16);
--sdp-sidebar-icon-ink: #4A5567;
--sdp-sidebar-icon-ink-hover: #17243C;
/* ----- Sombras / glows ----- */
--sdp-sidebar-shadow: 12px 0 32px -8px rgba(31, 45, 74, 0.10),
1px 0 0 0 rgba(31, 45, 74, 0.04);
--sdp-sidebar-active-glow: 0 6px 14px -8px rgba(181, 144, 74, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.65);
--sdp-sidebar-focus-ring: 0 0 0 2px rgba(181, 144, 74, 0.55),
0 0 0 4px rgba(181, 144, 74, 0.18);
/* ----- Tokens estruturais ----- */
--sdp-sidebar-width: 288px;
--sdp-sidebar-pad-x: 14px;
--sdp-sidebar-radius-item: 10px;
--sdp-sidebar-radius-sub: 8px;
/* ----- Curvas de animação ----- */
--sdp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--sdp-ease-decel: cubic-bezier(0.0, 0, 0.2, 1);
--sdp-ease-accel: cubic-bezier(0.4, 0, 1, 1);
--sdp-ease-emph: cubic-bezier(0.2, 0, 0, 1);
}
/* ============================================================================
1. Container
----------------------------------------------------------------------------
!important map (verificar linhas no review):
- top, width, height, background: modern-layout.css ".sidebar" (legado)
- border-right, box-shadow, color: sidebar-redesign.css ".sidebar" (legado)
============================================================================ */
body.sdp-redesigned .sidebar {
top: var(--topbar-height, 64px) !important;
width: var(--sdp-sidebar-width) !important;
height: calc(100vh - var(--topbar-height, 64px)) !important;
background:
radial-gradient(120% 60% at 100% 0%, var(--sdp-sidebar-bg-glaze) 0%, transparent 60%),
linear-gradient(180deg, var(--sdp-sidebar-bg-1) 0%, var(--sdp-sidebar-bg-2) 100%) !important;
border-right: 1px solid var(--sdp-sidebar-line) !important;
box-shadow: var(--sdp-sidebar-shadow) !important;
color: var(--sdp-sidebar-ink) !important;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--sdp-sidebar-gold-line) transparent;
transition: transform 320ms var(--sdp-ease-emph),
box-shadow 320ms var(--sdp-ease-standard);
}
/* FIX 1 (sticky → absolute): pseudo-elemento de faixa gold no topo.
Anterior usava position: sticky, que tem comportamento divergente entre
Safari e Chromium quando aplicado a ::before dentro de container com
overflow-y: auto. A sidebar é fixed-positioned, então position: absolute
com top: 0 pina a faixa ao topo do bounding box da sidebar, independente
do scroll interno. Comportamento idêntico em todos os browsers modernos. */
body.sdp-redesigned .sidebar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--sdp-sidebar-gold) 18%,
var(--sdp-sidebar-gold-warm) 50%,
var(--sdp-sidebar-gold) 82%,
transparent 100%);
opacity: 0.62;
z-index: 2;
pointer-events: none;
}
/* FIX 2 (backdrop-filter performance): blur só quando suportado, com raio
reduzido de 20px para 8px. Raio de 20 era custo alto em Chromium ao scrollar
listas longas atrás da sidebar; 8px preserva a sensação de profundidade com
~70% menos custo de pixel-fill. Browsers sem suporte (Firefox <103, Safari
<14) simplesmente não aplicam blur — o background gradient já é opaco o
suficiente para que isso seja graceful. */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
body.sdp-redesigned .sidebar {
backdrop-filter: blur(8px) saturate(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.05);
}
}
/* Scrollbar webkit (Chrome, Safari, Edge) */
body.sdp-redesigned .sidebar::-webkit-scrollbar {
width: 6px;
}
body.sdp-redesigned .sidebar::-webkit-scrollbar-track {
background: transparent;
}
body.sdp-redesigned .sidebar::-webkit-scrollbar-thumb {
background: var(--sdp-sidebar-line);
border-radius: 4px;
transition: background 200ms var(--sdp-ease-standard);
}
body.sdp-redesigned .sidebar:hover::-webkit-scrollbar-thumb {
background: var(--sdp-sidebar-gold-line);
}
body.sdp-redesigned .sidebar::-webkit-scrollbar-thumb:hover {
background: var(--sdp-sidebar-gold);
}
/* ============================================================================
2. Header (logo)
----------------------------------------------------------------------------
!important map:
- min-height, padding, border-bottom: sidebar-redesign.css ".sidebar-header"
- display, gap, color, text-decoration: sidebar-redesign.css ".sidebar-logo"
- img dimensions: sidebar-redesign.css ".sidebar-logo img"
- logo-text typography: sidebar-redesign.css ".sidebar-logo-text"
============================================================================ */
body.sdp-redesigned .sidebar-header {
min-height: 76px !important;
padding: 18px var(--sdp-sidebar-pad-x) 16px !important;
border-bottom: 1px solid var(--sdp-sidebar-line) !important;
display: flex;
align-items: center;
position: relative;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
}
body.sdp-redesigned .sidebar-logo {
display: flex !important;
align-items: center;
gap: 12px !important;
width: 100%;
color: var(--sdp-sidebar-ink) !important;
text-decoration: none !important;
transition: transform 220ms var(--sdp-ease-standard);
}
body.sdp-redesigned .sidebar-logo:hover {
transform: translateY(-1px);
}
body.sdp-redesigned .sidebar-logo img {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
border: 1px solid var(--sdp-sidebar-gold-line);
background: linear-gradient(180deg, #FFFCF3, #F2E8CE);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
0 8px 20px -6px rgba(31, 45, 74, 0.22),
0 0 0 1px rgba(181, 144, 74, 0.16);
transition: box-shadow 260ms var(--sdp-ease-standard),
transform 260ms var(--sdp-ease-standard);
flex-shrink: 0;
}
body.sdp-redesigned .sidebar-logo:hover img {
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.85) inset,
0 10px 22px -4px rgba(181, 144, 74, 0.32),
0 0 0 1px rgba(181, 144, 74, 0.28);
}
body.sdp-redesigned .sidebar-logo-text {
color: var(--sdp-sidebar-ink) !important;
font-size: 0.78rem !important; /* 12.5px */
font-weight: 700 !important;
line-height: 1.28 !important;
letter-spacing: -0.005em !important;
text-transform: uppercase;
/* Permitir quebra em até 2 linhas (legado sidebar-redesign.css força nowrap). */
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
flex: 1;
min-width: 0;
}
/* ============================================================================
3. Sections + Titles
----------------------------------------------------------------------------
!important map:
- padding, border-bottom: sidebar-redesign.css ".sidebar-section"
- title typography (padding, margin, color, font-*, letter-spacing):
sidebar-redesign.css ".sidebar-title"
============================================================================ */
body.sdp-redesigned .sidebar-section {
padding: 16px var(--sdp-sidebar-pad-x) 14px !important;
border-bottom: 1px solid var(--sdp-sidebar-line-soft) !important;
position: relative;
}
body.sdp-redesigned .sidebar-section + .sidebar-section {
padding-top: 14px !important;
}
body.sdp-redesigned .sidebar-section:last-child {
border-bottom: none !important;
padding-bottom: 24px !important;
}
body.sdp-redesigned .sidebar-title {
padding: 4px 12px 10px !important;
margin: 0 !important;
color: var(--sdp-sidebar-title) !important;
font-size: 0.66rem !important; /* 10.5px */
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
/* hairline gold after the title (sutil) */
body.sdp-redesigned .sidebar-title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--sdp-sidebar-gold-line), transparent 60%);
opacity: 0.7;
}
/* ============================================================================
4. Items — rest / hover / active / focus
----------------------------------------------------------------------------
!important map (zona mais densa do legado):
- display, min-height, width, margin, padding, border-radius:
sidebar-redesign.css ".sidebar-item"
- color, background, border, box-shadow, text-decoration:
sidebar-redesign.css ".sidebar-item" + ".sidebar-item.active"
- ::before pseudo (left/width/height/border-radius/background):
sidebar-redesign.css ".sidebar-item::before" (se existir; do contrário,
!important só para vencer modern-layout.css generic ::before reset)
============================================================================ */
body.sdp-redesigned .sidebar-item {
position: relative;
display: flex !important;
align-items: center;
min-height: 44px !important;
width: 100% !important;
margin: 2px 0 !important;
padding: 9px 12px 9px 14px !important;
border-radius: var(--sdp-sidebar-radius-item) !important;
color: var(--sdp-sidebar-ink-muted) !important;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
text-decoration: none !important;
cursor: pointer;
transition:
color 200ms var(--sdp-ease-standard),
background-color 200ms var(--sdp-ease-standard),
border-color 200ms var(--sdp-ease-standard),
box-shadow 240ms var(--sdp-ease-standard);
}
/* Barra vertical gold no início (left accent) */
body.sdp-redesigned .sidebar-item::before {
content: "";
position: absolute;
left: 0 !important;
top: 50%;
transform: translateY(-50%) scaleY(0);
transform-origin: center;
width: 3px !important;
height: 22px !important;
border-radius: 0 3px 3px 0 !important;
background: var(--sdp-sidebar-gold) !important;
box-shadow: 0 0 12px var(--sdp-sidebar-gold-glow);
transition: transform 280ms var(--sdp-ease-emph);
}
body.sdp-redesigned .sidebar-item:hover {
color: var(--sdp-sidebar-navy) !important;
background: var(--sdp-sidebar-hover-bg) !important;
border-color: var(--sdp-sidebar-hover-border) !important;
}
body.sdp-redesigned .sidebar-item:hover::before {
transform: translateY(-50%) scaleY(0.5);
opacity: 0.6;
}
body.sdp-redesigned .sidebar-item.active,
body.sdp-redesigned .sidebar-item.active:hover {
color: var(--sdp-sidebar-navy) !important;
background:
linear-gradient(90deg,
var(--sdp-sidebar-gold-soft) 0%,
rgba(255, 254, 248, 0.55) 90%) !important;
border-color: var(--sdp-sidebar-gold-line) !important;
box-shadow: var(--sdp-sidebar-active-glow) !important;
}
body.sdp-redesigned .sidebar-item.active::before {
transform: translateY(-50%) scaleY(1);
opacity: 1;
}
body.sdp-redesigned .sidebar-item.active .sidebar-text {
font-weight: 600 !important;
letter-spacing: -0.005em !important;
}
body.sdp-redesigned .sidebar-item:focus-visible {
outline: none !important;
box-shadow: var(--sdp-sidebar-focus-ring) !important;
}
body.sdp-redesigned .sidebar-item:active {
transform: scale(0.985);
transition-duration: 100ms;
}
/* ============================================================================
5. Icons
----------------------------------------------------------------------------
!important map:
- display, dimensions, margin, border-radius, color:
sidebar-redesign.css ".sidebar-icon"
- svg dimensions e stroke-width: sidebar-redesign.css ".sidebar-icon svg"
============================================================================ */
body.sdp-redesigned .sidebar-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px !important;
height: 30px !important;
margin-right: 11px !important;
border-radius: 8px !important;
color: var(--sdp-sidebar-icon-ink) !important;
background: var(--sdp-sidebar-icon-bg);
flex-shrink: 0;
transition:
background 220ms var(--sdp-ease-standard),
color 220ms var(--sdp-ease-standard),
box-shadow 220ms var(--sdp-ease-standard),
transform 280ms var(--sdp-ease-emph);
}
body.sdp-redesigned .sidebar-icon svg {
width: 17px !important;
height: 17px !important;
stroke-width: 1.85 !important;
}
body.sdp-redesigned .sidebar-item:hover .sidebar-icon {
background: var(--sdp-sidebar-icon-bg-hover);
color: var(--sdp-sidebar-icon-ink-hover) !important;
}
body.sdp-redesigned .sidebar-item.active .sidebar-icon {
background: var(--sdp-sidebar-navy) !important;
color: #FFFFFF !important;
box-shadow:
0 4px 10px -3px rgba(31, 45, 74, 0.45),
inset 0 1px 0 0 rgba(255, 255, 255, 0.18) !important;
}
/* Anular vazamento TEAL VERDE do sidebar-redesign.css legado:
- stroke: #D4B574 (teal claro nos SVGs)
- filter: drop-shadow(rgba(181, 144, 74, 0.4)) (glow verde)
- box-shadow: inset 1px rgba(181, 144, 74, 0.2) (borda verde)
Aplicado tanto no item base quanto no active porque o legado usa em ambos. */
body.sdp-redesigned .sidebar-item.active .sidebar-icon svg,
body.sdp-redesigned .sidebar-item.active:hover .sidebar-icon svg {
stroke: #FFFFFF !important;
color: #FFFFFF !important;
filter: none !important;
}
body.sdp-redesigned .sidebar-subitem.active .sidebar-icon svg {
filter: none !important;
}
body.sdp-redesigned .sidebar-item:hover {
box-shadow: none !important;
}
body.sdp-redesigned .sidebar-item:hover .sidebar-icon svg {
stroke: currentColor !important;
}
body.sdp-redesigned .sidebar-item.active:hover .sidebar-icon {
transform: scale(1.04);
}
/* ============================================================================
6. Text + Arrow
----------------------------------------------------------------------------
!important map:
- text typography (font-*, letter-spacing, line-height):
sidebar-redesign.css ".sidebar-text"
- arrow display + dimensions + color: sidebar-redesign.css ".sidebar-arrow"
============================================================================ */
body.sdp-redesigned .sidebar-text {
font-size: 0.875rem !important; /* 14px */
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.sdp-redesigned .sidebar-arrow {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--sdp-sidebar-arrow) !important;
flex-shrink: 0;
transition: transform 260ms var(--sdp-ease-emph),
color 200ms var(--sdp-ease-standard);
}
body.sdp-redesigned .sidebar-arrow svg {
width: 14px !important;
height: 14px !important;
}
body.sdp-redesigned .sidebar-item:hover .sidebar-arrow {
color: var(--sdp-sidebar-navy) !important;
}
body.sdp-redesigned .sidebar-item[aria-expanded="true"] .sidebar-arrow,
body.sdp-redesigned .sidebar-item.open .sidebar-arrow,
body.sdp-redesigned .sidebar-item-parent.expanded .sidebar-arrow {
transform: rotate(180deg);
color: var(--sdp-sidebar-gold) !important;
}
/* ============================================================================
7. Submenu
----------------------------------------------------------------------------
!important map:
- margin, padding, border-left: sidebar-redesign.css ".sidebar-submenu"
- max-height collapse: sidebar-redesign.css regra de fechamento (animação)
============================================================================ */
body.sdp-redesigned .sidebar-submenu {
margin: 4px 0 8px 26px !important;
padding: 4px 0 4px 14px !important;
border-left: 1px solid rgba(31, 45, 74, 0.12) !important;
position: relative;
transition:
max-height 320ms var(--sdp-ease-emph),
opacity 240ms var(--sdp-ease-standard),
padding 240ms var(--sdp-ease-standard),
margin 240ms var(--sdp-ease-standard);
}
/* faixa gold no parent-side da linha (esquerda) */
body.sdp-redesigned .sidebar-submenu::before {
content: "";
position: absolute;
left: -1px;
top: 6px;
width: 1px;
height: 14px;
background: var(--sdp-sidebar-gold);
opacity: 0.55;
border-radius: 1px;
}
body.sdp-redesigned .sidebar-submenu:not(.open):not(.expanded):not(.active) {
max-height: 0 !important;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
border-left-color: transparent !important;
}
body.sdp-redesigned .sidebar-submenu:not(.open):not(.expanded):not(.active)::before {
display: none;
}
/* Painel do submenu alinhado ao item pai expandido (sem “degrau” visual) */
body.sdp-redesigned .sidebar-item-parent.expanded,
body.sdp-redesigned .sidebar-item-parent.open,
body.sdp-redesigned .sidebar-item-parent.active {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-bottom: 0 !important;
}
body.sdp-redesigned .sidebar-item-parent.expanded + .sidebar-submenu,
body.sdp-redesigned .sidebar-item-parent.open + .sidebar-submenu,
body.sdp-redesigned .sidebar-item-parent.active + .sidebar-submenu,
body.sdp-redesigned .sidebar-item-parent.expanded + .sidebar-submenu.open,
body.sdp-redesigned .sidebar-item-parent.expanded + .sidebar-submenu.expanded,
body.sdp-redesigned .sidebar-item-parent.expanded + .sidebar-submenu.active {
margin-top: 0 !important;
margin-left: 12px !important;
margin-right: 8px !important;
padding: 6px 10px 10px 12px !important;
background: rgba(243, 230, 199, 0.28) !important;
border-radius: 0 0 12px 12px !important;
border: 1px solid rgba(31, 45, 74, 0.12) !important;
border-top: none !important;
border-left-width: 1px !important;
}
/* ============================================================================
8. Subitems
----------------------------------------------------------------------------
!important map:
- display, min-height, padding, margin, border-radius, color, text-decoration:
sidebar-redesign.css ".sidebar-subitem"
- subitem icon overrides: sidebar-redesign.css ".sidebar-subitem .sidebar-icon"
- subitem text font-size: sidebar-redesign.css ".sidebar-subitem .sidebar-text"
============================================================================ */
body.sdp-redesigned .sidebar-subitem {
position: relative;
display: flex !important;
align-items: center;
min-height: 34px !important;
padding: 7px 10px 7px 10px !important;
margin: 1px 0 !important;
border-radius: var(--sdp-sidebar-radius-sub) !important;
color: var(--sdp-sidebar-ink-faint) !important;
text-decoration: none !important;
transition:
background 200ms var(--sdp-ease-standard),
color 200ms var(--sdp-ease-standard),
padding-left 220ms var(--sdp-ease-standard);
}
body.sdp-redesigned .sidebar-subitem .sidebar-icon {
width: 22px !important;
height: 22px !important;
margin-right: 9px !important;
background: transparent !important;
border-radius: 6px !important;
color: var(--sdp-sidebar-ink-faint) !important;
}
body.sdp-redesigned .sidebar-subitem .sidebar-icon svg {
width: 13px !important;
height: 13px !important;
stroke-width: 1.85 !important;
}
body.sdp-redesigned .sidebar-subitem .sidebar-text {
font-size: 0.8125rem !important; /* 13px */
font-weight: 500 !important;
letter-spacing: -0.003em !important;
}
body.sdp-redesigned .sidebar-subitem:hover {
background: var(--sdp-sidebar-hover-bg) !important;
color: var(--sdp-sidebar-navy) !important;
padding-left: 12px !important;
}
body.sdp-redesigned .sidebar-subitem:hover .sidebar-icon {
color: var(--sdp-sidebar-gold) !important;
}
body.sdp-redesigned .sidebar-subitem.active {
background: var(--sdp-sidebar-hover-bg-strong) !important;
color: var(--sdp-sidebar-navy) !important;
padding-left: 12px !important;
}
body.sdp-redesigned .sidebar-subitem.active::before {
content: "";
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sdp-sidebar-gold);
box-shadow: 0 0 0 3px rgba(181, 144, 74, 0.18);
}
body.sdp-redesigned .sidebar-subitem.active .sidebar-icon {
color: var(--sdp-sidebar-gold) !important;
}
body.sdp-redesigned .sidebar-subitem.active .sidebar-text {
font-weight: 600 !important;
}
body.sdp-redesigned .sidebar-subitem:focus-visible {
outline: none !important;
box-shadow: var(--sdp-sidebar-focus-ring) !important;
}
/* ============================================================================
8.1 Override anti-teal/green do legado sidebar-redesign.css (sem -ed).
----------------------------------------------------------------------------
O arquivo sidebar-redesign.css (legado) tem regras NÃO escopadas que
pintam stroke do SVG do subitem em teal (#4db6ac) no hover e marcam o
active com background+color teal. Como o seletor "X svg" vence o nosso
"X .sidebar-icon" pra elementos SVG (currentColor não consegue sobrescrever
stroke: hardcoded !important), forçamos gold + navy aqui escopando direto
no svg.
============================================================================ */
body.sdp-redesigned .sidebar-subitem:hover .sidebar-icon svg,
body.sdp-redesigned .sidebar-subitem.active .sidebar-icon svg {
stroke: var(--sdp-sidebar-gold) !important;
color: var(--sdp-sidebar-gold) !important;
transform: none !important;
}
body.sdp-redesigned .sidebar-subitem.active {
background: var(--sdp-sidebar-hover-bg-strong) !important;
color: var(--sdp-sidebar-navy) !important;
}
body.sdp-redesigned .sidebar-subitem.active .sidebar-text {
color: var(--sdp-sidebar-navy) !important;
}
/* ============================================================================
8.2 Kill switch: barra vertical verde no subitem (legado teal).
----------------------------------------------------------------------------
Apesar de tudo escopado, o user reportou barra vertical verde escuro à
esquerda dos subitens. Possíveis fontes: border-left herdado, gradient
teal num ::before legado, ou some inline. Forçamos navy/gold em TODOS os
caminhos possíveis pra eliminar a barra verde.
============================================================================ */
body.sdp-redesigned .sidebar-subitem,
body.sdp-redesigned .sidebar-subitem:hover,
body.sdp-redesigned .sidebar-subitem.active {
border-left: 0 !important;
border-left-color: transparent !important;
border-color: transparent !important;
outline: none !important;
}
body.sdp-redesigned .sidebar-subitem::after,
body.sdp-redesigned .sidebar-subitem:hover::after,
body.sdp-redesigned .sidebar-subitem.active::after {
display: none !important;
background: none !important;
background-image: none !important;
content: none !important;
}
body.sdp-redesigned .sidebar-subitem:hover::before {
background: var(--sdp-sidebar-gold) !important;
background-image: none !important;
}
/* Garante que o border-left do CONTAINER do submenu seja navy translúcido
(não teal/verde), vencendo qualquer override legado. */
body.sdp-redesigned .sidebar-submenu,
body.sdp-redesigned .sidebar-submenu.open,
body.sdp-redesigned .sidebar-submenu.expanded {
border-left-color: rgba(31, 45, 74, 0.12) !important;
}
/* ============================================================================
9. Mobile overlay (criado dinamicamente por sidebar.js)
----------------------------------------------------------------------------
!important map:
- background, backdrop-filter, transition: sidebar-redesign.css ".sidebar-overlay"
============================================================================ */
body.sdp-redesigned .sidebar-overlay {
background:
linear-gradient(135deg, rgba(15, 26, 46, 0.55), rgba(15, 26, 46, 0.65)) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
transition: opacity 300ms var(--sdp-ease-standard) !important;
}
/* ============================================================================
10. Dark mode
----------------------------------------------------------------------------
Dark mode redefine tokens via [data-theme="dark"]; as regras de !important
herdam dos blocos light. Adicionais aqui aplicam apenas quando dark mode
precisa override específico de cor (não de estrutura).
============================================================================ */
[data-theme="dark"] body.sdp-redesigned {
--sdp-sidebar-bg-1: #0F1A2E;
--sdp-sidebar-bg-2: #0A1320;
--sdp-sidebar-bg-glaze: rgba(181, 144, 74, 0.06);
--sdp-sidebar-grain: rgba(255, 255, 255, 0.015);
--sdp-sidebar-ink: #F5F8FF;
--sdp-sidebar-ink-muted: #B8C3D6;
--sdp-sidebar-ink-faint: #9AA6BD;
--sdp-sidebar-title: #D4B47C;
--sdp-sidebar-arrow: #7A8499;
--sdp-sidebar-line: rgba(255, 255, 255, 0.10);
--sdp-sidebar-line-soft: rgba(255, 255, 255, 0.06);
--sdp-sidebar-line-faint: rgba(255, 255, 255, 0.03);
--sdp-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
--sdp-sidebar-hover-bg-strong: rgba(181, 144, 74, 0.16);
--sdp-sidebar-hover-border: rgba(255, 255, 255, 0.10);
--sdp-sidebar-gold-soft: rgba(181, 144, 74, 0.20);
--sdp-sidebar-gold-line: rgba(181, 144, 74, 0.45);
--sdp-sidebar-gold-glow: rgba(181, 144, 74, 0.55);
--sdp-sidebar-icon-bg: rgba(255, 255, 255, 0.06);
--sdp-sidebar-icon-bg-hover: rgba(181, 144, 74, 0.20);
--sdp-sidebar-icon-ink: #B8C3D6;
--sdp-sidebar-icon-ink-hover: #F5F8FF;
--sdp-sidebar-shadow: 12px 0 32px -6px rgba(0, 0, 0, 0.50),
1px 0 0 0 rgba(255, 255, 255, 0.04);
--sdp-sidebar-active-glow: 0 6px 16px -8px rgba(181, 144, 74, 0.65),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] body.sdp-redesigned .sidebar-header {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}
[data-theme="dark"] body.sdp-redesigned .sidebar-logo img {
background: linear-gradient(180deg, #1E2A42, #15233A);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
0 8px 20px -6px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(181, 144, 74, 0.24);
}
[data-theme="dark"] body.sdp-redesigned .sidebar-logo-text {
color: var(--sdp-sidebar-ink) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-item {
color: var(--sdp-sidebar-ink-muted) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-item:hover,
[data-theme="dark"] body.sdp-redesigned .sidebar-item.active,
[data-theme="dark"] body.sdp-redesigned .sidebar-item.active:hover {
color: var(--sdp-sidebar-ink) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-item.active {
background:
linear-gradient(90deg,
rgba(181, 144, 74, 0.32) 0%,
rgba(181, 144, 74, 0.06) 100%) !important;
border-color: var(--sdp-sidebar-gold-line) !important;
box-shadow: var(--sdp-sidebar-active-glow) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-item.active .sidebar-icon {
background: var(--sdp-sidebar-gold) !important;
color: var(--sdp-sidebar-navy) !important;
box-shadow:
0 4px 12px -3px rgba(181, 144, 74, 0.55),
inset 0 1px 0 0 rgba(255, 255, 255, 0.32);
}
[data-theme="dark"] body.sdp-redesigned .sidebar-subitem {
color: var(--sdp-sidebar-ink-faint) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-subitem:hover,
[data-theme="dark"] body.sdp-redesigned .sidebar-subitem.active {
color: var(--sdp-sidebar-ink) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-subitem.active {
background: rgba(181, 144, 74, 0.22) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-submenu {
border-left-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-section {
border-bottom-color: var(--sdp-sidebar-line-soft) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-header {
border-bottom-color: var(--sdp-sidebar-line) !important;
}
[data-theme="dark"] body.sdp-redesigned .sidebar-overlay {
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)) !important;
}
/* ============================================================================
11. Mobile breakpoint
----------------------------------------------------------------------------
FIX 3 (contrato --topbar-height): fallback 56px aqui é o valor responsivo
que o PR #12 publica em mobile. Se o PR #12 alterar a altura responsiva,
atualizar este valor JUNTO. Não permitir divergência silenciosa.
!important map:
- top, height, transform: modern-layout.css media query (.sidebar mobile)
- mobile-open transform: sidebar-redesign.css ".sidebar.mobile-open"
============================================================================ */
@media (max-width: 768px) {
body.sdp-redesigned .sidebar {
top: var(--topbar-height, 56px) !important;
height: calc(100dvh - var(--topbar-height, 56px)) !important;
transform: translateX(-100%) !important;
box-shadow:
0 0 0 0 transparent,
12px 0 48px -6px rgba(15, 26, 46, 0.35) !important;
}
body.sdp-redesigned.sidebar-open .sidebar,
body.sdp-redesigned .sidebar.mobile-open,
body.sdp-redesigned .sidebar.open {
transform: translateX(0) !important;
}
/* Subitens em mobile — alvo de toque mínimo 44px (WCAG) */
body.sdp-redesigned .sidebar-subitem {
min-height: 44px !important;
}
}
/* ============================================================================
11.5 Collapsed mode — minimizar pra 72px (só ícones) em desktop.
----------------------------------------------------------------------------
Override do legado sidebar-redesign.css que faz transform: translateX(-100%)
(esconde completamente a sidebar quando recebe .collapsed). Aqui mantemos
visível com largura reduzida (72px) e só os ícones. Em mobile (≤768px)
preserva o comportamento legado de esconder por completo (já tratado em §11).
============================================================================ */
@media (min-width: 769px) {
body.sdp-redesigned .sidebar.collapsed {
width: 72px !important;
transform: none !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden;
overflow-y: auto;
/* Scrollbar oculto no modo compacto (72px é estreito e a barra estilizada
em gold-line aparece como uma faixa visível desconfortável). Em viewport
baixa o scroll continua funcionando com gestos touch / wheel. */
scrollbar-width: none;
-ms-overflow-style: none;
}
body.sdp-redesigned .sidebar.collapsed::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Garantir que o box-shadow dourado do item ativo não vaze além da sidebar
causando scroll horizontal ou faixa de glow no content-area. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active {
box-shadow: inset 0 0 0 1px var(--sdp-sidebar-gold-line) !important;
}
/* Títulos das seções: REMOVIDOS DO FLUXO no collapsed. opacity+width sozinho
deixava ~22px de altura vazia (padding 4/10 vertical no .sidebar-title +
line-height) entre o header e o primeiro ícone — visualmente parecia que
o header da logo era enorme. display:none mata a caixa inteira. */
body.sdp-redesigned .sidebar.collapsed .sidebar-title {
display: none !important;
}
/* Demais elementos textuais: fade suave (mantém o fluxo neutro pq são
filhos diretos do .sidebar-item que mantém altura fixa de 40px). */
body.sdp-redesigned .sidebar.collapsed .sidebar-text,
body.sdp-redesigned .sidebar.collapsed .sidebar-arrow,
body.sdp-redesigned .sidebar.collapsed .sidebar-logo-text {
opacity: 0 !important;
width: 0 !important;
overflow: hidden !important;
pointer-events: none;
transition: opacity 180ms var(--sdp-ease-standard);
}
/* Header: ALTURA FIXA (56px) — position: relative pra suportar
position: absolute na logo (centralização matemática à prova de cascata). */
body.sdp-redesigned .sidebar.collapsed .sidebar-header {
display: block !important;
position: relative !important;
padding: 0 !important;
min-height: 56px !important;
height: 56px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Logo wrapper: ABSOLUTAMENTE POSICIONADO no centro do header.
position: absolute + top:50% + left:50% + translate(-50%,-50%) é
centralização matemática — IMUNE a padding/margin/flex/cascata legada.
Esta é a "última linha de defesa" depois de várias tentativas com flex
que não venciam alguma cascata residual de modern-layout.css ou similar. */
body.sdp-redesigned .sidebar.collapsed .sidebar-logo {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: block !important;
width: auto !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Logo img: tamanho reduzido + reset COMPLETO do card cremoso. Como o
pai (.sidebar-logo) está absolute centralizado, a img só precisa ter
display: block pra remover o baseline-gap. */
body.sdp-redesigned .sidebar.collapsed .sidebar-logo img {
display: block !important;
width: 34px !important;
height: 34px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sections: padding reduzido + hairline gold do title some (defensivo,
o title já está display:none mas o ::after é renderizado pelo pseudo).
padding-bottom da última section reduzido pra não criar vazio enorme. */
body.sdp-redesigned .sidebar.collapsed .sidebar-section {
padding: 4px 8px !important;
}
body.sdp-redesigned .sidebar.collapsed .sidebar-section:last-child {
padding-bottom: 8px !important;
}
body.sdp-redesigned .sidebar.collapsed .sidebar-section + .sidebar-section {
padding-top: 4px !important;
}
body.sdp-redesigned .sidebar.collapsed .sidebar-title::after {
display: none;
}
/* Itens: centralizar ícone usando CSS Grid place-items: center.
Grid é MAIS ROBUSTO que flex+justify-content pra centralização absoluta
porque ignora padding interno legado (modern-layout.css faz padding:12px
20px com !important — em flex isso encolhe a área de conteúdo e o icon
desloca; em grid place-items:center o icon é centralizado no GRID CELL
que é igual ao content-box do item, imune ao padding).
box-sizing: border-box garante que padding fica DENTRO do width:40px. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
place-items: center !important;
justify-content: center !important;
padding: 6px 0 !important;
margin: 2px auto !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
min-height: 40px !important;
box-sizing: border-box !important;
border-color: transparent !important;
}
/* ICON UNIFORMITY — regra explícita pra TODOS os pseudo-states.
Causa do bug "3 primeiros ícones grandes" reportado: a regra base
.sidebar-item.active .sidebar-icon (linha ~459) seta box-shadow gigante
(0 4px 10px -3px) e o estado .sidebar-item.active:hover .sidebar-icon
(linha ~491) seta transform: scale(1.04). Esses estilos persistem no
collapsed se eu não overridar EXPLICITAMENTE cada pseudo-state.
Listar todos os 4 estados (rest, hover, active, active:hover) com
mesmas dimensões + box-shadow:none + transform:none é a única forma
garantida de uniformidade. */
body.sdp-redesigned .sidebar.collapsed .sidebar-icon,
body.sdp-redesigned .sidebar.collapsed .sidebar-item:hover .sidebar-icon,
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active .sidebar-icon,
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active:hover .sidebar-icon {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
box-shadow: none !important;
transform: none !important;
place-self: center !important;
}
/* Background do icon: cinza claro por default, navy quando active.
Hover NÃO muda o icon (background já é dado pelo .sidebar-item:hover). */
body.sdp-redesigned .sidebar.collapsed .sidebar-icon {
background: var(--sdp-sidebar-icon-bg) !important;
color: var(--sdp-sidebar-icon-ink) !important;
}
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active .sidebar-icon,
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active:hover .sidebar-icon {
background: var(--sdp-sidebar-navy) !important;
color: #FFFFFF !important;
}
/* SVG dentro do icon: tamanho fixo 16px, centralizado no span 28x28
via flex centering do .sidebar-icon (que é inline-flex align/justify
center pela regra base). */
body.sdp-redesigned .sidebar.collapsed .sidebar-icon svg,
body.sdp-redesigned .sidebar.collapsed .sidebar-item:hover .sidebar-icon svg,
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active .sidebar-icon svg {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
display: block !important;
margin: 0 auto !important;
transform: none !important;
}
/* Item ativo no collapsed: sem background gradient e sem moldura — só o
ícone navy + a barra vertical gold à esquerda sinalizam o estado. Limpa
visualmente e evita o "quadrado bege" estourar a sidebar. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active,
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active:hover {
background: transparent !important;
border: none !important;
border-color: transparent !important;
border-left-width: 0 !important;
box-shadow: none !important;
}
/* Indicador active (barra vertical gold) reposicionado pra ficar à esquerda
do ícone centralizado mas dentro da sidebar. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item.active::before {
left: -4px !important;
width: 3px !important;
height: 22px !important;
}
/* Esconder submenus inteiros (não cabem na largura 72) */
body.sdp-redesigned .sidebar.collapsed .sidebar-submenu {
display: none !important;
}
/* ============================================================================
CLICABILIDADE — defesa em profundidade pra parents collapsed.
Causa do bug "alguns ícones não clicáveis" reportado pelo user:
1. .sidebar-item-parent é , não
.
Se algum CSS legado (modern-layout.css, design-enhancements.css) seta
pointer-events:none herdado num ancestral, divs onclick param de
funcionar (links sobreviveriam pelo native href).
2. cursor:pointer precisa ser EXPLICITAMENTE setado pra dar feedback
visual de "isso é clicável" — sem ele o user fica em dúvida.
3. position:relative + z-index baixo garante que ::before (barra gold)
não bloqueia clicks (z-index do item > z-index do ::before).
Solução: declarar pointer-events:auto !important + cursor:pointer !important
EXPLICITAMENTE em TODOS os items + parents + links no collapsed. Vence
qualquer herança. ============================================================================ */
body.sdp-redesigned .sidebar.collapsed .sidebar-item,
body.sdp-redesigned .sidebar.collapsed .sidebar-item-parent,
body.sdp-redesigned .sidebar.collapsed a.sidebar-item,
body.sdp-redesigned .sidebar.collapsed div.sidebar-item {
pointer-events: auto !important;
cursor: pointer !important;
position: relative;
z-index: 1;
}
/* ::before (barra gold) não captura clicks. Defensivo — pseudo-elements
não capturam por default, mas algum legado pode ter setado pointer-events
em ::before pra tooltip etc. Garante que o item embaixo recebe o click. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item::before {
pointer-events: none !important;
}
/* Matar o tooltip legado (sidebar-redesign.css:122-145) que cria pseudo-
element ::after com content: attr(data-tooltip) — mas o HTML não tem
data-tooltip, então renderiza string vazia/"undefined" em alguns
browsers, e ocupa espaço em layout absoluto à direita do item podendo
vazar pro content-area. Forçar display: none mata o efeito. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item::after {
display: none !important;
content: none !important;
}
/* Hover discreto nos items collapsed pra dar feedback visual claro
de "isso é clicável". Background gold-soft + animação suave.
CRÍTICO: modern-layout.css:876-881 setou padding-left: 25px !important
no .sidebar-item:hover (pensado pro estado expandido pra deslocar texto
pra direita simulando indent). Em collapsed isso DESLOCA O ÍCONE pra
fora do centro do quadrado cremoso e pode vazar dos 72px da sidebar.
Sobrescrever ZERANDO padding em todos os lados + travar width pra que
o grid place-items: center continue centralizando perfeitamente. */
body.sdp-redesigned .sidebar.collapsed .sidebar-item:hover {
background: var(--sdp-sidebar-hover-bg-strong) !important;
border-color: var(--sdp-sidebar-hover-border) !important;
padding: 6px 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
}
body.sdp-redesigned .sidebar.collapsed .sidebar-item:hover .sidebar-icon {
background: var(--sdp-sidebar-icon-bg-hover) !important;
color: var(--sdp-sidebar-icon-ink-hover) !important;
margin: 0 !important;
place-self: center !important;
}
/* Conteúdo acompanha a sidebar no desktop: 288px expandida, 72px collapsed.
Ver sdp-redesign-base.css (body.sdp-redesigned.sidebar-collapsed). */
}
/* ============================================================================
12. Reduced motion
============================================================================ */
@media (prefers-reduced-motion: reduce) {
body.sdp-redesigned .sidebar,
body.sdp-redesigned .sidebar-logo,
body.sdp-redesigned .sidebar-logo img,
body.sdp-redesigned .sidebar-item,
body.sdp-redesigned .sidebar-item::before,
body.sdp-redesigned .sidebar-icon,
body.sdp-redesigned .sidebar-arrow,
body.sdp-redesigned .sidebar-submenu,
body.sdp-redesigned .sidebar-subitem,
body.sdp-redesigned .sidebar-overlay {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
body.sdp-redesigned .sidebar-logo:hover,
body.sdp-redesigned .sidebar-item:active,
body.sdp-redesigned .sidebar-item.active:hover .sidebar-icon,
body.sdp-redesigned .sidebar-subitem:hover {
transform: none !important;
}
}
/* ============================================================================
13. Forced colors / high contrast (Windows)
============================================================================ */
@media (forced-colors: active) {
body.sdp-redesigned .sidebar {
border-right: 1px solid CanvasText !important;
}
body.sdp-redesigned .sidebar-item.active,
body.sdp-redesigned .sidebar-subitem.active {
outline: 2px solid Highlight;
outline-offset: -2px;
}
}