/* ============================================================
GMA SHELL — tokens + header + topbar + body background
Cole este bloco no do resources/views/layouts/bi.blade.php
(envolvido em ) OU salve como
public/css/gma-shell.css e normalmente.
NÃO conflita com Bootstrap nem Metronic — todo seletor estilizado
é .gma-shell-* OU uma classe Metronic ANINHADA dentro de
.gma-shell-nav / .gma-shell-topbar / .gma-shell-header.
============================================================ */
:root {
--gma-shell-sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--gma-shell-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--gma-shell-bg-0: #020617;
--gma-shell-bg-1: #060d24;
--gma-shell-bg-2: #0a1635;
--gma-shell-line: rgba(96,165,250,0.10);
--gma-shell-line-strong: rgba(96,165,250,0.20);
--gma-shell-fg: #f8fafc;
--gma-shell-fg-muted: #cbd5e1;
--gma-shell-fg-dim: #94a3b8;
--gma-shell-fg-tag: #64748b;
--gma-shell-accent: #60a5fa;
--gma-shell-accent-strong: #2563eb;
--gma-shell-success: #10b981;
--gma-shell-h: 80px;
}
/* ----- BODY BACKGROUND -----
No bi.blade.php remova style="background-image:url('/img/fundo_01.png');..."
do e adicione a classe gma-shell-body.
Decisão v2 — PROFUNDIDADE: três camadas empilhadas em viewport units +
background-attachment:fixed (travadas durante scroll):
1. radial azul atmosférico vindo do topo-centro (cor, não cinza)
2. radial azul-frio largo no canto direito (assimetria, evita "túnel")
3. scrim escuro vertical forte que dissolve em ~42vh
Cobre ~30–40% da viewport. Termina em #ffffff puro. */
.gma-shell-body {
background:
radial-gradient(ellipse 80% 50% at 50% -8%,
rgba(37, 99, 235, 0.28) 0%,
rgba(37, 99, 235, 0.10) 32%,
rgba(37, 99, 235, 0) 60%
) fixed,
radial-gradient(ellipse 55% 40% at 95% 0%,
rgba(96, 165, 250, 0.18) 0%,
rgba(96, 165, 250, 0) 55%
) fixed,
linear-gradient(180deg,
rgba(15, 23, 42, 0.42) 0vh,
rgba(15, 23, 42, 0.26) 8vh,
rgba(15, 23, 42, 0.13) 18vh,
rgba(15, 23, 42, 0.05) 30vh,
rgba(15, 23, 42, 0) 42vh
) fixed,
#ffffff !important;
}
/* hairline luminosa direto abaixo do header — sela a transição
chrome→conteúdo sem virar uma linha dura nem destacar demais. */
.gma-shell-body::before {
content: "";
position: fixed;
left: 0; right: 0;
top: var(--gma-shell-h, 80px);
height: 1px;
background: linear-gradient(90deg,
rgba(96,165,250,0) 0%,
rgba(96,165,250,0.5) 35%,
rgba(96,165,250,0.5) 65%,
rgba(96,165,250,0) 100%);
z-index: 4;
pointer-events: none;
}
/* ----- HERDADO DO METRONIC: anular o background branco do header
quando data-header-scroll=on (vinha do bi.blade.php linha 30) */
.header-fixed[data-header-scroll=on] .header.gma-shell-header,
.header.gma-shell-header {
background-color: rgba(2,6,23,0.72) !important;
background-image: none !important;
}
/* ============================================================
CARDS LEGADOS — sombra + hairline
Aplica elevation sutil aos do Bootstrap/Metronic
QUANDO o body é .gma-shell-body. Não afeta cards de outros temas
(login, telas Vue/Inertia novas, etc.). Não altera padding nem
border-radius internos — apenas adiciona profundidade.
============================================================ */
.gma-shell-body .card {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 28px -10px rgba(15, 23, 42, 0.12) !important;
border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
.gma-shell-body .card:hover {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 14px 36px -10px rgba(15, 23, 42, 0.16) !important;
transition: box-shadow .18s ease;
}
/* ============================================================
HEADER
============================================================ */
.gma-shell-header {
position: relative;
z-index: 5;
height: var(--gma-shell-h);
background: rgba(2,6,23,0.72);
border-bottom: 1px solid var(--gma-shell-line);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
font-family: var(--gma-shell-sans);
color: var(--gma-shell-fg);
}
.gma-shell-header__inner {
height: 100%;
display: flex;
align-items: stretch;
padding: 0 24px;
/* width: 100% é o que faz o .gma-shell-spacer (flex:1) realmente esticar
e empurrar a topbar (Município/Sistema/Fernando/Sair) até a borda direita.
Sem isso, o flex container fazia shrink-to-fit do conteúdo. */
width: 100%;
max-width: 100%;
}
/* ----- Marca + tenant ----- */
.gma-shell-brand {
display: flex; align-items: center; gap: 14px;
padding-right: 18px; flex-shrink: 0;
}
.gma-shell-brand__logo {
/* !important pra anular o display:none que as classes Metronic
.logo-default/.logo-sticky aplicam em estados de scroll. */
height: 26px !important;
width: auto !important;
display: block !important;
flex-shrink: 0;
}
.gma-shell-brand__divider {
width: 1px; height: 26px; background: rgba(255,255,255,0.10);
flex-shrink: 0;
}
/* Wrapper do chip de Sistema (dropdown) dentro do brand. */
.gma-shell-brand__system { display: flex; align-items: center; position: relative; }
.gma-shell-brand__system .dropdown-menu {
/* dropdown branco com texto preto — coerente com os submenus do menu nav */
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: 10px !important;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.06),
0 20px 60px -10px rgba(15, 23, 42, 0.20) !important;
margin-top: 6px !important;
min-width: 220px !important;
}
.gma-shell-brand__system .navi-link { color: #0f172a !important; }
.gma-shell-brand__system .navi-text { color: inherit !important; }
.gma-shell-tenant {
display: flex; flex-direction: column; line-height: 1.1; min-width: 0;
}
.gma-shell-tenant__label {
font-family: var(--gma-shell-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--gma-shell-fg-dim);
}
.gma-shell-tenant__name {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
color: var(--gma-shell-fg); margin-top: 2px;
}
.gma-shell-tenant__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gma-shell-success);
box-shadow: 0 0 8px var(--gma-shell-success);
flex-shrink: 0;
}
/* tenant clicável (leva pra tela de trocar de município) */
.gma-shell-tenant--link {
text-decoration: none !important;
cursor: pointer;
padding: 6px 8px;
margin-left: -8px;
border-radius: 8px;
transition: background-color .14s ease;
}
.gma-shell-tenant--link:hover {
background: rgba(255,255,255,0.05);
}
.gma-shell-tenant--link:hover .gma-shell-tenant__name { color: var(--gma-shell-accent); }
/* ============================================================
NAV
============================================================ */
.gma-shell-header #kt_header_menu_wrapper { display: flex; align-items: stretch; }
.gma-shell-header #kt_header_menu { display: flex; align-items: stretch; height: 100%; }
.gma-shell-nav {
display: flex !important;
align-items: stretch;
gap: 2px;
height: 100%;
margin: 0 18px;
padding: 0;
list-style: none;
}
.gma-shell-nav .menu-item {
display: flex !important;
align-items: stretch;
height: 100%;
position: relative;
}
.gma-shell-nav .menu-link {
display: inline-flex !important;
align-items: center;
gap: 7px;
height: 100%;
padding: 0 14px;
font-family: var(--gma-shell-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
/* texto branco puro sobre o header escuro — máximo contraste */
color: #ffffff !important;
text-decoration: none;
transition: color .14s ease, background-color .14s ease;
background: transparent !important;
border: 0;
position: relative;
}
.gma-shell-nav .menu-link .menu-text { white-space: nowrap; color: inherit !important; }
.gma-shell-nav .menu-link:hover { color: #ffffff !important; opacity: 0.85; }
.gma-shell-nav .menu-arrow {
display: inline-block;
width: 0; height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: .55; margin-left: 2px;
}
/* ACTIVE — border bottom (default) */
.gma-shell-nav[data-active-style="border"] .menu-item.menu-item-here > .menu-link,
.gma-shell-nav[data-active-style="border"] .menu-item.menu-item-active > .menu-link {
color: var(--gma-shell-fg) !important;
}
.gma-shell-nav[data-active-style="border"] .menu-item.menu-item-here > .menu-link::after,
.gma-shell-nav[data-active-style="border"] .menu-item.menu-item-active > .menu-link::after {
content: "";
position: absolute; left: 10px; right: 10px; bottom: -1px;
height: 2px;
background: var(--gma-shell-accent);
border-radius: 2px 2px 0 0;
box-shadow: 0 0 12px rgba(96,165,250,0.5);
}
/* ACTIVE — pill */
.gma-shell-nav[data-active-style="pill"] .menu-item.menu-item-here > .menu-link,
.gma-shell-nav[data-active-style="pill"] .menu-item.menu-item-active > .menu-link {
color: #93c5fd !important;
}
.gma-shell-nav[data-active-style="pill"] .menu-item.menu-item-here > .menu-link::before,
.gma-shell-nav[data-active-style="pill"] .menu-item.menu-item-active > .menu-link::before {
content: "";
position: absolute; inset: 18px 6px;
background: rgba(37,99,235,0.14);
border: 1px solid rgba(96,165,250,0.25);
border-radius: 8px;
z-index: -1;
}
/* ACTIVE — bracket */
.gma-shell-nav[data-active-style="bracket"] .menu-item.menu-item-here > .menu-link {
color: var(--gma-shell-fg) !important;
}
.gma-shell-nav[data-active-style="bracket"] .menu-item.menu-item-here > .menu-link .menu-text::before {
content: "["; color: var(--gma-shell-accent);
margin-right: 4px; font-family: var(--gma-shell-mono); font-weight: 400;
}
.gma-shell-nav[data-active-style="bracket"] .menu-item.menu-item-here > .menu-link .menu-text::after {
content: "]"; color: var(--gma-shell-accent);
margin-left: 4px; font-family: var(--gma-shell-mono); font-weight: 400;
}
/* ----- submenu dropdown -----
O Metronic legado força background:#fff nos submenus (especificidade alta).
Em vez de brigar, abraçamos: fundo branco + texto preto puro pra contraste
máximo. Mantém legibilidade independente do estado de scroll. */
.gma-shell-nav .menu-submenu,
.gma-shell-nav .menu-submenu.menu-submenu-classic {
position: absolute !important;
top: 100% !important; left: 0 !important;
/* largura compacta (~260px). Textos longos quebram em 2 linhas em vez de
esticar o container — assim o submenu cabe melhor sem vazar pelas
bordas. width: max-content respeita o teto, min só pra não ficar magrelo. */
width: max-content !important;
min-width: 220px !important;
max-width: 280px !important;
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: 10px !important;
padding: 6px !important;
margin-top: 4px !important;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.06),
0 20px 60px -10px rgba(15, 23, 42, 0.20) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .12s ease, transform .12s ease, visibility .12s;
z-index: 50;
}
.gma-shell-nav .menu-item.menu-item-submenu:hover > .menu-submenu,
.gma-shell-nav .menu-item.menu-item-submenu.menu-item-hover > .menu-submenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.gma-shell-nav .menu-subnav { list-style: none; margin: 0; padding: 0; }
.gma-shell-nav .menu-subnav .menu-item { display: block !important; height: auto !important; }
.gma-shell-nav .menu-subnav .menu-link {
display: flex !important;
align-items: flex-start !important;
height: auto !important;
padding: 9px 14px !important;
border-radius: 7px !important;
font-size: 13px !important;
/* texto 100% preto sobre o fundo branco do submenu */
color: #0f172a !important;
font-weight: 500 !important;
width: 100% !important;
/* permite quebra em múltiplas linhas para itens longos como
"Componente de Vínculo e Acompanhamento Territorial". */
white-space: normal !important;
line-height: 1.35 !important;
}
.gma-shell-nav .menu-subnav .menu-link .menu-text {
color: inherit !important;
white-space: normal !important;
}
.gma-shell-nav .menu-subnav .menu-link:hover {
background: rgba(37, 99, 235, 0.08) !important;
color: #1d4ed8 !important;
}
.gma-shell-nav .menu-subnav .menu-link:hover .menu-text { color: inherit !important; }
/* submenus aninhados (menu-submenu dentro de menu-submenu) — abrem à direita */
.gma-shell-nav .menu-submenu .menu-submenu {
top: -6px !important;
left: 100% !important;
margin-top: 0 !important;
margin-left: 4px !important;
}
/* ----- flip pra esquerda (controlado por JS no bi.blade.php) -----
Quando o submenu ultrapassa a borda direita do viewport, o JS
adiciona a classe .gma-shell-flip-left e essas regras o
posicionam pra abrir do lado oposto. */
.gma-shell-nav .menu-submenu.gma-shell-flip-left {
/* submenus de nível 1 (descendentes do menu-item da barra) viram
pra esquerda, alinhando a borda direita ao parent. */
left: auto !important;
right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.gma-shell-nav .menu-submenu .menu-submenu.gma-shell-flip-left {
/* submenus aninhados (nível 2+) que estavam à direita do parent
viram à esquerda do parent. */
left: auto !important;
right: 100% !important;
margin-left: 0 !important;
margin-right: 4px !important;
}
/* ============================================================
TOPBAR (mantém .topbar, .topbar-item, .topbar-separator)
============================================================ */
.gma-shell-spacer { flex: 1; }
.gma-shell-topbar.topbar {
display: flex !important;
align-items: center;
gap: 6px;
height: 100%;
padding-left: 12px;
flex-shrink: 0;
}
.gma-shell-topbar .topbar-item { display: flex; align-items: center; }
.gma-shell-topbar .topbar-separator {
width: 1px !important; height: 22px !important;
background: rgba(255,255,255,0.08) !important;
margin: 0 8px !important;
flex-shrink: 0;
}
.gma-shell-chip {
display: inline-flex !important;
align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--gma-shell-fg-muted) !important;
font-family: var(--gma-shell-sans);
font-size: 13px; font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none !important;
transition: background-color .14s ease, border-color .14s ease, color .14s ease;
cursor: pointer;
white-space: nowrap;
max-width: 220px; min-width: 0;
}
.gma-shell-chip:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
color: var(--gma-shell-fg) !important;
}
.gma-shell-chip__icon {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--gma-shell-fg-dim);
flex-shrink: 0;
}
.gma-shell-chip__label {
font-family: var(--gma-shell-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gma-shell-fg-tag);
margin-right: 2px;
}
.gma-shell-chip__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gma-shell-chip__caret {
width: 0; height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: .5; margin-left: 4px;
}
.gma-shell-user {
display: inline-flex; align-items: center; gap: 10px;
padding: 4px 8px 4px 12px;
margin-left: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: var(--gma-shell-fg);
cursor: pointer;
transition: background-color .14s ease, border-color .14s ease;
}
.gma-shell-user:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(96,165,250,0.25);
}
.gma-shell-user__name {
font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
max-width: 140px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gma-shell-user__avatar {
width: 30px; height: 30px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 700;
letter-spacing: -0.02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
flex-shrink: 0;
}
.gma-shell-logout {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--gma-shell-fg-dim);
margin-left: 4px;
cursor: pointer;
transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.gma-shell-logout:hover {
background: rgba(239,68,68,0.08);
color: #fca5a5;
border-color: rgba(239,68,68,0.20);
}
/* ============================================================
SUBHEADER (#kt_subheader já existe — só estilizamos por dentro)
============================================================ */
#kt_subheader.subheader.subheader-transparent {
background: transparent !important;
padding-top: 22px !important;
padding-bottom: 6px !important;
}
#kt_subheader h2 {
font-family: var(--gma-shell-sans) !important;
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: -0.02em;
/* Agora vive sobre fundo branco do body — sobrescreve a classe Bootstrap
`text-white` que o HTML legado aplica inline no
. */
color: #0f172a !important;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.gma-shell-tenant { display: none; }
.gma-shell-brand__divider { display: none; }
}
@media (max-width: 900px) {
.gma-shell-nav { display: none !important; }
.gma-shell-topbar .gma-shell-chip__label { display: none; }
}