/* ════════════════════════════════════════════════════════════════════
   ÓRIGO ENERGIA — GLPI GLOBAL THEME
   Brandbook 2026
   ────────────────────────────────────────────────────────────────────
   Carregado em todas as páginas via head.html.twig.
   Sobrescreve o tema padrão GLPI (header roxo) com a identidade Órigo.
═══════════════════════════════════════════════════════════════════ */

/* ─── 1. TIPOGRAFIA ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

/* ─── 2. TOKENS ÓRIGO ───────────────────────────────────────────── */
:root {
    --teal-900: #0c5e58;
    --teal-800: #11756d;
    --teal-700: #16968D;
    --teal-600: #229b90;
    --teal-200: #a9d8d3;
    --teal-100: #d6ecea;
    --teal-50:  #ecf6f4;

    --plum-900: #5d1a52;
    --plum-700: #832472;
    --plum-200: #d6a8cc;
    --plum-100: #ebd5e3;
    --plum-50:  #f6ecf2;

    --sun-600: #ffc000;
    --sun-500: #ffc837;
    --sun-200: #ffe599;
    --sun-100: #fff4cc;

    --ink-900: #1a1a1a;
    --ink-800: #2c2c2c;
    --ink-700: #404040;
    --ink-600: #606060;
    --ink-500: #7f7f7f;
    --ink-400: #a8a8a8;
    --ink-200: #e8e8e8;
    --ink-100: #f3f3f3;
    --ink-50:  #fafafa;

    --og-font:  'Noto Sans', system-ui, -apple-system, sans-serif;
    --og-mono:  ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
}

/* ─── 3. BODY — só Self-Service (helpdesk) ──────────────────────── */
body.helpdesk {
    font-family: var(--og-font) !important;
    background: var(--ink-50) !important;
}

/* ─── 4. HEADER ─────────────────────────────────────────────────── */
/* Override do navbar roxo GLPI → branco Órigo
   Aplica em TODAS as páginas Self-Service (Home, Catálogo, Chamados, Reservas, FAQ) */
body.helpdesk .navbar,
body.helpdesk .navbar-helpdesk,
body.helpdesk header.navbar,
body.helpdesk .page-header,
body.helpdesk .navbar.bg-dark,
body.helpdesk .navbar.bg-primary,
body.helpdesk .navbar[data-bs-theme],
body.helpdesk > .page > header,
body.helpdesk #header,
body.helpdesk .header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--ink-200) !important;
    box-shadow: 0 1px 0 var(--ink-100) !important;
}

/* Logo Órigo no lugar do GLPI
   O PNG é 8000×4500 (16:9) mas o logo visível ocupa só ~50% da largura.
   Usamos width:50px para cortar a moldura em branco à direita. */
body.helpdesk .navbar .glpi-logo,
body.helpdesk .navbar-brand .glpi-logo,
body.helpdesk .navbar-brand img,
body.helpdesk .glpi-logo {
    background-image: url('/pics/logos/origo-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    width: 50px !important;
    height: 28px !important;
    display: block !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container do brand — alinha logo e lockup HELPDESK próximos */
body.helpdesk .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Lockup "HELPDESK" plum ao lado do logo */
body.helpdesk .navbar-brand::after {
    content: 'HELPDESK';
    font-family: var(--og-font);
    font-weight: 800;
    font-size: 13px;
    color: var(--plum-700);
    letter-spacing: .14em;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--ink-200);
    line-height: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Texto secundário do menu de usuário (entidade atual abaixo do perfil) */
body.helpdesk .navbar .text-muted-menu,
body.helpdesk .navbar [data-testid="current-entity"],
body.helpdesk .navbar .user-menu .small,
body.helpdesk .navbar .user-menu .text-muted {
    color: var(--ink-600) !important;
    opacity: 1 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Links de navegação (Home, Catálogo, Chamados...) */
body.helpdesk .navbar .nav-link,
body.helpdesk .navbar .nav-item > a,
body.helpdesk .navbar-nav .nav-link,
body.helpdesk .navbar a.nav-link {
    color: var(--ink-700) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    transition: background 120ms, color 120ms !important;
}
body.helpdesk .navbar .nav-link:hover,
body.helpdesk .navbar .nav-item > a:hover {
    background: var(--ink-100) !important;
    color: var(--ink-900) !important;
}
body.helpdesk .navbar .nav-link.active,
body.helpdesk .navbar .nav-item.active > a,
body.helpdesk .navbar .nav-link[aria-current] {
    background: var(--teal-50) !important;
    color: var(--teal-800) !important;
}

/* Ícones dos links — herdam currentColor */
body.helpdesk .navbar .nav-link i,
body.helpdesk .navbar .nav-link svg,
body.helpdesk .navbar .nav-link .ti {
    color: inherit !important;
}

/* Badge de notificação no nav */
body.helpdesk .navbar .badge,
body.helpdesk .navbar .notification-count {
    background: var(--plum-700) !important;
    color: white !important;
    border-radius: 999px !important;
}

/* Avatar do usuário */
body.helpdesk .navbar .avatar,
body.helpdesk .navbar .user-avatar,
body.helpdesk .navbar .avatar-sm {
    background: var(--teal-700) !important;
    color: white !important;
    font-family: var(--og-font) !important;
    font-weight: 800 !important;
}

/* Texto auxiliar (perfil, entidade) */
body.helpdesk .navbar .navbar-text,
body.helpdesk .navbar .text-muted,
body.helpdesk .navbar small {
    color: var(--ink-600) !important;
    font-family: var(--og-font) !important;
}

/* Separador vertical */
body.helpdesk .navbar .vr,
body.helpdesk .navbar .navbar-divider {
    background: var(--ink-200) !important;
}

/* Dropdown menu (perfil, entidade...) */
body.helpdesk .navbar .dropdown-menu {
    border: 1px solid var(--ink-200) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(20,30,40,.1), 0 2px 6px rgba(20,30,40,.05) !important;
    padding: 6px !important;
    font-family: var(--og-font) !important;
}
body.helpdesk .navbar .dropdown-item {
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--ink-700) !important;
    padding: 8px 12px !important;
    transition: background 120ms !important;
}
body.helpdesk .navbar .dropdown-item:hover {
    background: var(--teal-50) !important;
    color: var(--teal-800) !important;
}

/* ─── 5. BOTÕES PRIMÁRIOS ───────────────────────────────────────── */
body.helpdesk .btn-primary {
    background: var(--teal-700) !important;
    border-color: var(--teal-700) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
}
body.helpdesk .btn-primary:hover {
    background: var(--teal-800) !important;
    border-color: var(--teal-800) !important;
}
body.helpdesk .btn-secondary {
    background: white !important;
    border-color: var(--ink-200) !important;
    color: var(--ink-700) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
}
body.helpdesk .btn-secondary:hover {
    border-color: var(--teal-200) !important;
    background: var(--teal-50) !important;
    color: var(--teal-700) !important;
}

/* ─── 6. LINKS ─────────────────────────────────────────────────── */
body.helpdesk a {
    color: var(--teal-700);
}
body.helpdesk a:hover {
    color: var(--teal-800);
}

/* ─── 7. CARDS / PAINÉIS ────────────────────────────────────────── */
body.helpdesk .card {
    border: 1px solid var(--ink-200) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
body.helpdesk .card-header {
    background: white !important;
    border-bottom: 1px solid var(--ink-100) !important;
    font-family: var(--og-font) !important;
    font-weight: 700 !important;
}

/* ─── 8. FORMULÁRIOS ───────────────────────────────────────────── */
body.helpdesk .form-control:focus,
body.helpdesk .form-select:focus {
    border-color: var(--teal-700) !important;
    box-shadow: 0 0 0 3px rgba(22,150,141,.15) !important;
}

/* ─── 9. TABS GERAIS ────────────────────────────────────────────── */
body.helpdesk .nav-tabs .nav-link.active {
    color: var(--teal-700) !important;
    border-bottom-color: var(--teal-700) !important;
}

/* ─── 10. BADGES ─────────────────────────────────────────────────── */
body.helpdesk .badge.bg-primary { background: var(--teal-700) !important; }
body.helpdesk .badge.bg-info    { background: var(--teal-600) !important; }

/* ─── 11. BREADCRUMB ────────────────────────────────────────────── */
body.helpdesk .breadcrumb {
    background: transparent !important;
    font-family: var(--og-font) !important;
    font-size: 13px !important;
}
body.helpdesk .breadcrumb-item.active { color: var(--ink-700) !important; }
body.helpdesk .breadcrumb-item a { color: var(--teal-700) !important; }

/* ─── 12. FOOTER GLPI — padronizado em todas as páginas ─────────────
   Inclui logo Órigo pequeno antes do texto e suffix "· Personalizado
   por Órigo Energia" depois do copyright do GLPI. Aplica em login,
   helpdesk e central (área admin/técnica). */
body.helpdesk .page-footer,
body.helpdesk footer.footer,
body.central .page-footer,
body.central footer.footer,
.login-page .page-footer,
.login-page footer.footer,
body footer.footer {
    background: white !important;
    border-top: 1px solid var(--ink-100) !important;
    font-family: var(--og-font) !important;
    font-size: 12px !important;
    color: var(--ink-500) !important;
    padding: 14px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

/* Logo Órigo pequeno antes do texto do copyright */
body.helpdesk .page-footer::before,
body.helpdesk footer.footer::before,
body.central .page-footer::before,
body.central footer.footer::before,
.login-page .page-footer::before,
.login-page footer.footer::before,
body footer.footer::before {
    content: '' !important;
    display: inline-block !important;
    width: 28px !important;
    height: 16px !important;
    background-image: url('/pics/logos/origo-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    opacity: .7 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Sufixo "· Personalizado por Órigo Energia" depois do texto do GLPI */
body.helpdesk .page-footer::after,
body.helpdesk footer.footer::after,
body.central .page-footer::after,
body.central footer.footer::after,
.login-page .page-footer::after,
.login-page footer.footer::after,
body footer.footer::after {
    content: '· Personalizado por Órigo Energia' !important;
    color: var(--ink-600) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    margin-left: 2px !important;
}

/* ════════════════════════════════════════════════════════════════════
   15. SIDEBAR ADMIN (CENTRAL) — Menu lateral das páginas internas
   Aplica a identidade Órigo no menu lateral usado pelos técnicos
   nas páginas administrativas (Assistência, Ativos, Gerência…).
═══════════════════════════════════════════════════════════════════ */

/* Container do sidebar */
body:not(.helpdesk) aside.navbar-vertical,
aside.navbar-vertical {
    background: var(--teal-700) !important;
    border-right: 1px solid var(--teal-800) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.05) !important;
    font-family: var(--og-font) !important;
}

/* Header do sidebar (logo + brand) */
aside.navbar-vertical .navbar-brand,
aside.navbar-vertical .navbar-brand-image,
aside.navbar-vertical > .navbar-brand,
aside.navbar-vertical .navbar-header {
    background: transparent !important;
    padding: 18px 18px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    min-height: auto !important;
    color: transparent !important;
}

/* Logo Órigo via ::before do .navbar-brand
   O PNG é 8000×4500 (16:9) mas o logo visível ocupa só ~50% da largura.
   Usamos width:50px (proporção visível) com background-size:contain
   para o logo encostar no pipe sem deixar moldura em branco. */
aside.navbar-vertical .navbar-brand::before {
    content: '' !important;
    display: inline-block !important;
    width: 50px !important;
    height: 28px !important;
    background-image: url('/pics/logos/origo-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    filter: brightness(0) invert(1) !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Esconde o logo original do GLPI (span .glpi-logo, img, ou outros elementos) */
aside.navbar-vertical .navbar-brand .glpi-logo,
aside.navbar-vertical .navbar-brand img,
aside.navbar-vertical .navbar-brand > span:not(.menu-label),
aside.navbar-vertical .navbar-brand-image,
aside.navbar-vertical .glpi-logo {
    display: none !important;
}

/* Lockup "HELPDESK" amarelo ao lado do logo */
aside.navbar-vertical .navbar-brand::after {
    content: 'HELPDESK';
    display: inline-flex;
    align-items: center;
    font-family: var(--og-font);
    font-weight: 800;
    font-size: 13px;
    color: var(--sun-600);
    letter-spacing: .14em;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.22);
    height: 22px;
    line-height: 22px;
    flex-shrink: 0;
}

/* ─── Esconde o botão hambúrguer no topo (3 traços) ─── */
aside.navbar-vertical .navbar-toggler:not(.menu-fold):not([data-bs-toggle="fold-menu"]),
aside.navbar-vertical button.navbar-toggler[data-bs-toggle="collapse"],
aside.navbar-vertical .navbar-nav ~ .navbar-toggler,
aside.navbar-vertical > button:first-child,
aside.navbar-vertical .navbar-header > .navbar-toggler {
    display: none !important;
}

/* Campo de busca "Encontrar um menu" */
aside.navbar-vertical .form-control,
aside.navbar-vertical input[type="search"],
aside.navbar-vertical input[type="text"] {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    color: white !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 16px 14px 44px !important;
    box-shadow: none !important;
    outline: none !important;
}
aside.navbar-vertical .form-control::placeholder,
aside.navbar-vertical input::placeholder {
    color: rgba(255,255,255,.7) !important;
    opacity: 1 !important;
}
aside.navbar-vertical .form-control:focus {
    border-bottom-color: var(--sun-600) !important;
    background: transparent !important;
}
aside.navbar-vertical .input-icon-addon,
aside.navbar-vertical .ti-search {
    color: rgba(255,255,255,.7) !important;
}

/* Lista principal de menu */
aside.navbar-vertical .navbar-nav {
    padding: 8px 12px !important;
    gap: 2px !important;
}

aside.navbar-vertical .navbar-nav .nav-item {
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Link principal (nível 1) */
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link,
aside.navbar-vertical .nav-item .nav-link {
    color: rgba(255,255,255,.92) !important;
    font-family: var(--og-font) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: background 120ms, color 120ms !important;
    text-decoration: none !important;
    border: none !important;
    position: relative !important;
}

aside.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    color: white !important;
}

/* Ícone do nível 1 */
aside.navbar-vertical .navbar-nav .nav-link i,
aside.navbar-vertical .navbar-nav .nav-link .ti {
    color: inherit !important;
    font-size: 18px !important;
    width: 20px !important;
    text-align: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Label do menu */
aside.navbar-vertical .menu-label {
    flex: 1 !important;
    font-family: var(--og-font) !important;
    font-weight: 700 !important;
}

/* Seta do dropdown — SVG chevron via mask em ::after */
aside.navbar-vertical .nav-link.dropdown-toggle::after,
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    background-color: rgba(255,255,255,.5) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
    border: none !important;
    /* Estado padrão: seta apontando para a DIREITA (rotate 0) */
    transform: rotate(0deg) !important;
    transition: transform 200ms ease !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Quando o dropdown está expandido, seta gira para baixo */
aside.navbar-vertical .nav-link.dropdown-toggle.show::after,
aside.navbar-vertical .nav-link.dropdown-toggle[aria-expanded="true"]::after,
aside.navbar-vertical .nav-item.active > .nav-link.dropdown-toggle::after {
    transform: rotate(90deg) !important;
}

/* Quando NÃO expandido (estado padrão), garante rotação 0 mesmo se o GLPI
   deixar restos de classes — força reset visual */
aside.navbar-vertical .nav-link.dropdown-toggle[aria-expanded="false"]::after,
aside.navbar-vertical .nav-link.dropdown-toggle:not(.show):not([aria-expanded="true"])::after {
    transform: rotate(0deg) !important;
}

/* Setas em links não-dropdown (que não devem ter seta) — esconde */
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after {
    display: none !important;
    content: none !important;
}

/* Item ativo (Assistência aberto no print) */
aside.navbar-vertical .navbar-nav > .nav-item.active,
aside.navbar-vertical .navbar-nav > .nav-item.active > .nav-link,
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.active,
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.show {
    background: var(--teal-800) !important;
    color: white !important;
}
/* Barra amarela à esquerda do item ativo (acento Órigo) */
aside.navbar-vertical .navbar-nav > .nav-item.active::before,
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.active::before,
aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.show::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
    background: var(--sun-600) !important;
    border-radius: 0 3px 3px 0 !important;
}

/* ─── Dropdown menu (sub-itens) ─── */
aside.navbar-vertical .dropdown-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 6px 0 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    animation: none !important;
}

aside.navbar-vertical .dropdown-menu.show {
    display: block !important;
}

aside.navbar-vertical .dropdown-header {
    display: none !important; /* já temos o item principal acima */
}

/* Colunas de sub-menu — em sidebar vertical viram lista única */
aside.navbar-vertical .dropdown-menu-columns {
    display: block !important;
}
aside.navbar-vertical .dropdown-menu-column {
    display: block !important;
    width: 100% !important;
}

/* Sub-item (Chamados, Problemas…) */
aside.navbar-vertical .dropdown-item {
    color: rgba(255,255,255,.85) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 14px 8px 20px !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    transition: background 120ms, color 120ms !important;
    text-decoration: none !important;
}

/* Ícone do sub-item: visível, tamanho reduzido em relação ao nível 1 */
aside.navbar-vertical .dropdown-item i,
aside.navbar-vertical .dropdown-item .ti {
    color: rgba(255,255,255,.65) !important;
    font-size: 16px !important;
    width: 18px !important;
    text-align: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

aside.navbar-vertical .dropdown-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: white !important;
}
aside.navbar-vertical .dropdown-item:hover i,
aside.navbar-vertical .dropdown-item:hover .ti {
    color: white !important;
}

aside.navbar-vertical .dropdown-item:focus {
    background: rgba(255,255,255,.08) !important;
    color: white !important;
}

/* Sub-item ativo — amarelo Órigo */
aside.navbar-vertical .dropdown-item.active,
aside.navbar-vertical .dropdown-item[aria-current="page"] {
    background: transparent !important;
    color: var(--sun-600) !important;
    font-weight: 700 !important;
}
aside.navbar-vertical .dropdown-item.active i,
aside.navbar-vertical .dropdown-item.active .ti,
aside.navbar-vertical .dropdown-item[aria-current="page"] i,
aside.navbar-vertical .dropdown-item[aria-current="page"] .ti {
    color: var(--sun-600) !important;
}

aside.navbar-vertical .dropdown-item.active::before,
aside.navbar-vertical .dropdown-item[aria-current="page"]::before {
    content: '' !important;
    width: 0 !important;
}

/* ─── Botão "Recolher menu" no rodapé ─── */
aside.navbar-vertical .navbar-toggler,
aside.navbar-vertical .menu-fold,
aside.navbar-vertical .btn-fold-menu,
aside.navbar-vertical [data-bs-toggle="fold-menu"] {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.85) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 14px 18px !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background 120ms !important;
}
aside.navbar-vertical .navbar-toggler:hover,
aside.navbar-vertical [data-bs-toggle="fold-menu"]:hover {
    background: rgba(255,255,255,.06) !important;
    color: white !important;
}

/* ─── Scrollbar customizada ─── */
aside.navbar-vertical::-webkit-scrollbar {
    width: 6px;
}
aside.navbar-vertical::-webkit-scrollbar-track {
    background: transparent;
}
aside.navbar-vertical::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 3px;
}
aside.navbar-vertical::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.25);
}

/* ════════════════════════════════════════════════════════════════════
   ─── Modo recolhido (icon-only) ────────────────────────────────────
   GLPI marca o body com a classe `navbar-collapsed` quando o usuário
   ativa o fold via user_pref('fold_menu') ou clica em "Recolher menu".
   Ver: templates/layout/parts/page_header.html.twig
═══════════════════════════════════════════════════════════════════ */

/* No modo recolhido escondemos: labels, lockup HELPDESK, busca, ícone de busca */
body.navbar-collapsed aside.navbar-vertical .menu-label,
body.navbar-collapsed aside.navbar-vertical .navbar-brand::after,
body.navbar-collapsed aside.navbar-vertical .form-control,
body.navbar-collapsed aside.navbar-vertical input[type="search"],
body.navbar-collapsed aside.navbar-vertical input[type="text"],
body.navbar-collapsed aside.navbar-vertical .input-icon-addon {
    display: none !important;
}

/* O input-icon vira só um placeholder de ícone — esconde a borda */
body.navbar-collapsed aside.navbar-vertical .input-icon {
    border-bottom: none !important;
    padding: 0 !important;
}

/* Logo centralizado e menor — só o ícone Órigo */
body.navbar-collapsed aside.navbar-vertical .navbar-brand {
    justify-content: center !important;
    padding: 16px 8px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.navbar-collapsed aside.navbar-vertical .navbar-brand::before {
    width: 36px !important;
    height: 28px !important;
    background-position: center !important;
}

/* Links: ícone centralizado, sem seta de dropdown */
body.navbar-collapsed aside.navbar-vertical .nav-link {
    justify-content: center !important;
    padding: 12px 0 !important;
    gap: 0 !important;
}
body.navbar-collapsed aside.navbar-vertical .nav-link::after {
    display: none !important;
}

/* ─── Popover de submenu ao hover ───────────────────────────────── */
/* IMPORTANTE: No modo recolhido o GLPI desativa o JS do Bootstrap dropdown
   (ver menu.html.twig: "shouldn't be handled by Bootstrap") e espera
   que o CSS controle a exibição via :hover.

   Por padrão, .dropdown-menu tem display:none — precisamos sobrescrever. */

/* Estado padrão (escondido) — largura automática para acomodar 2-4 colunas */
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown .dropdown-menu {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-left: 6px !important;
    /* Largura: cresce com o conteúdo. Sem max-width fixo —
       deixa o flex distribuir as colunas naturalmente. */
    min-width: 240px !important;
    width: max-content !important;
    max-width: calc(100vw - 100px) !important;
    background: white !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 12px 32px rgba(20,30,40,.18), 0 2px 8px rgba(20,30,40,.08) !important;
    transform: none !important;
    animation: none !important;
    z-index: 1050 !important;
}

/* Mostra o popover ao passar o mouse em qualquer parte do nav-item */
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown:hover > .dropdown-menu,
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown:focus-within > .dropdown-menu,
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown .dropdown-menu:hover,
body.navbar-collapsed aside.navbar-vertical .dropdown-menu.show {
    display: block !important;
}

/* Header ocupa toda a largura do popover */
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-header {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Grid de colunas: distribui igualmente, sem vazar */
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-menu-columns {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-menu-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 180px !important;
    min-width: 180px !important;
}

/* Cria uma "ponte invisível" para não fechar quando o mouse atravessa
   o gap entre o ícone e o popover */
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown:hover > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 100%;
    background: transparent;
}

/* Garante que o aside permite overflow para o popover sair */
body.navbar-collapsed aside.navbar-vertical {
    overflow: visible !important;
}
body.navbar-collapsed aside.navbar-vertical .navbar-nav,
body.navbar-collapsed aside.navbar-vertical .navbar-collapse,
body.navbar-collapsed aside.navbar-vertical .nav-item.dropdown {
    overflow: visible !important;
    position: relative !important;
}

/* ─── Item ativo no modo recolhido — fundo teal-800 sem deformação ─── */
/* Importante: no modo recolhido o item NÃO tem margem lateral, ocupa
   toda a largura do sidebar de 64px. A pílula é criada via border-radius
   no próprio nav-link. */
body.navbar-collapsed aside.navbar-vertical .navbar-nav {
    padding: 8px 8px !important;
}

body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item {
    width: 100% !important;
    margin: 2px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link {
    width: 100% !important;
    height: 44px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

/* Hover: apenas o nav-link recebe o fundo */
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
}

/* Item ativo (Ferramentas/Administração quando dentro deles) */
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item.active > .nav-link,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.active {
    background: var(--teal-800) !important;
}

/* Barra amarela do item ativo no modo recolhido */
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item.active::before,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 3px !important;
    background: var(--sun-600) !important;
    border-radius: 0 3px 3px 0 !important;
    height: auto !important;
    display: block !important;
}

/* IMPORTANTE: esconde a seta `>` que herda do modo expandido,
   incluindo no item ativo (que era o caso da imagem com a ponta verde) */
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link::after,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.active::after,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.show::after,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link[aria-expanded]::after,
body.navbar-collapsed aside.navbar-vertical .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Header do popover ("ATIVOS", "ASSISTÊNCIA"...) */
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-header {
    display: block !important;
    font-family: var(--og-font) !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--plum-700) !important;
    padding: 8px 12px 10px !important;
    margin: 0 0 4px !important;
    border-bottom: 1px solid var(--ink-100) !important;
    background: transparent !important;
}

/* Grid de colunas no popover (2-3 colunas) */
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-menu-columns {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-menu-column {
    display: flex !important;
    flex-direction: column !important;
    min-width: 180px !important;
    flex: 1 !important;
}

/* Itens do popover — fundo branco, texto escuro Órigo */
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item {
    color: var(--ink-700) !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item i,
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item .ti {
    color: var(--teal-700) !important;
    font-size: 16px !important;
    width: 18px !important;
    text-align: center !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
}

body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item:hover {
    background: var(--teal-50) !important;
    color: var(--teal-800) !important;
}
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item:hover i,
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item:hover .ti {
    color: var(--teal-800) !important;
}

body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item.active,
body.navbar-collapsed aside.navbar-vertical .dropdown-menu .dropdown-item[aria-current="page"] {
    background: var(--teal-50) !important;
    color: var(--teal-800) !important;
    font-weight: 700 !important;
}

/* Botão "Expandir menu" no rodapé (substitui "Recolher menu" no modo recolhido) */
body.navbar-collapsed aside.navbar-vertical .navbar-toggler,
body.navbar-collapsed aside.navbar-vertical [data-bs-toggle="fold-menu"] {
    justify-content: center !important;
    padding: 14px 0 !important;
    font-size: 0 !important; /* esconde o texto */
}
body.navbar-collapsed aside.navbar-vertical .navbar-toggler i,
body.navbar-collapsed aside.navbar-vertical [data-bs-toggle="fold-menu"] i {
    font-size: 18px !important;
    color: rgba(255,255,255,.85) !important;
}

/* ════════════════════════════════════════════════════════════════════
   16. CENTRAL DASHBOARD — Página inicial da área técnica
   ────────────────────────────────────────────────────────────────────
   Estrutura real do GLPI (inspecionada via DevTools):

   .grid-stack-item-content
     <style>...</style>             (estilo inline gerado por ID)
     <a class="card big-number ..." id="bn_NNN">
       .content > .formatted-number > .number + .suffix
       .label
       i.main-icon
     </a>

   Para sobrescrever os estilos inline gerados pelo GLPI por #ID,
   usamos !important + body[class] como prefixo para boost de specificity.
═══════════════════════════════════════════════════════════════════ */

/* ─── Container wrapper Órigo ─── */
.og-central-wrapper, body.central .dashboard {
    background: var(--ink-50) !important;
    padding: 0;
    font-family: var(--og-font);
}
/* Aplica Noto Sans em texto, MAS preserva as fontes dos ícones Tabler
   e Font Awesome, que renderizam glyphs via font-family específica. */
.og-central-wrapper *:not(i):not([class*="ti-"]):not([class*="fa-"]):not(.ti):not(.fa):not(.fas):not(.fab):not(.far), body.central .dashboard *:not(i):not([class*="ti-"]):not([class*="fa-"]):not(.ti):not(.fa):not(.fas):not(.fab):not(.far) {
    font-family: var(--og-font) !important;
}

/* ─── Wrapper geral do dashboard ─── */
.og-central-wrapper .dashboard, body.central .dashboard .dashboard {
    background: var(--ink-50) !important;
    padding: 0 !important;
}

/* ─── Tabs superiores (Dashboard, Visão pessoal, Visão do grupo...) ─── */
.og-central-wrapper .nav-tabs, body.central .dashboard .nav-tabs {
    background: white !important;
    border-bottom: 1px solid var(--ink-200) !important;
    padding: 0 28px !important;
    gap: 4px !important;
    margin: 0 !important;
}
.og-central-wrapper .nav-tabs .nav-link, body.central .dashboard .nav-tabs .nav-link {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--ink-700) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 14px !important;
    position: relative !important;
    background: transparent !important;
}
.og-central-wrapper .nav-tabs .nav-link.active, body.central .dashboard .nav-tabs .nav-link.active {
    color: var(--teal-800) !important;
    background: transparent !important;
    border: none !important;
}
.og-central-wrapper .nav-tabs .nav-link.active::after, body.central .dashboard .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 2.5px;
    background: var(--teal-700);
    border-radius: 2px;
}
.og-central-wrapper .nav-tabs .nav-link i,
body.central .dashboard .nav-tabs .nav-link i,
.og-central-wrapper .nav-tabs .nav-link .ti,
body.central .dashboard .nav-tabs .nav-link .ti {
    color: var(--ink-500) !important;
}
.og-central-wrapper .nav-tabs .nav-link.active i,
body.central .dashboard .nav-tabs .nav-link.active i,
.og-central-wrapper .nav-tabs .nav-link.active .ti,
body.central .dashboard .nav-tabs .nav-link.active .ti {
    color: var(--teal-700) !important;
}

/* tab-content card → remove border, sem padding extra */
.og-central-wrapper .tab-content.card, body.central .dashboard .tab-content.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─── Toolbar da dashboard (seletor + botões) ─── */
.og-central-wrapper .dashboard-card-tools,
body.central .dashboard .dashboard-card-tools,
.og-central-wrapper .dashboard-card-buttons,
body.central .dashboard .dashboard-card-buttons,
.og-central-wrapper .toolbar,
body.central .dashboard .toolbar {
    padding: 18px 28px 8px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.og-central-wrapper .dashboard-card-tools button,
body.central .dashboard .dashboard-card-tools button,
.og-central-wrapper .dashboard-card-tools .btn,
body.central .dashboard .dashboard-card-tools .btn,
.og-central-wrapper .dashboard-card-buttons button,
body.central .dashboard .dashboard-card-buttons button,
.og-central-wrapper .dashboard-card-buttons .btn,
body.central .dashboard .dashboard-card-buttons .btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: white !important;
    border: 1px solid var(--ink-200) !important;
    color: var(--ink-700) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.og-central-wrapper .dashboard-card-tools button:hover,
body.central .dashboard .dashboard-card-tools button:hover,
.og-central-wrapper .dashboard-card-buttons button:hover,
body.central .dashboard .dashboard-card-buttons button:hover {
    background: var(--teal-50) !important;
    border-color: var(--teal-200) !important;
    color: var(--teal-700) !important;
}

/* ─── Grid principal ─── */
.og-central-wrapper .grid-stack, body.central .dashboard .grid-stack {
    background: transparent !important;
    padding: 8px 28px 36px !important;
}

/* ─── Widget item container ─── */
.og-central-wrapper .grid-stack-item-content, body.central .dashboard .grid-stack-item-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   KPI BIG NUMBER — card.big-number
   GLPI usa a MESMA classe .card.big-number tanto para KPIs grandes
   amarelos QUANTO para stat tiles pequenos. A diferença é a altura
   no grid (atributo gs-h do grid-stack-item).

   IMPORTANTE: NÃO usar min-height — o conteúdo deve caber dentro
   do container fornecido pelo grid-stack para evitar overflow.
═══════════════════════════════════════════════════════════════ */

/* ─── ESTILO BASE: card.big-number — NÃO impõe cor de fundo
   para preservar as cores que o GLPI gera por widget (amarelo,
   laranja, vermelho, verde…). Só layout, tipografia e tamanho. ─── */
.og-central-wrapper .card.big-number, body.central .dashboard .card.big-number {
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: filter 160ms !important;
}
.og-central-wrapper .card.big-number:hover, body.central .dashboard .card.big-number:hover {
    border: none !important;
    filter: brightness(.96) !important;
}

/* Conteúdo do número */
.og-central-wrapper .card.big-number .content, body.central .dashboard .card.big-number .content {
    display: flex !important;
    align-items: baseline !important;
    width: auto !important;
    min-width: 0 !important;
}
.og-central-wrapper .card.big-number .formatted-number, body.central .dashboard .card.big-number .formatted-number {
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    color: inherit !important;
    font-size: 22px !important;
    width: auto !important;
    white-space: nowrap !important;
}
.og-central-wrapper .card.big-number .formatted-number .number,
body.central .dashboard .card.big-number .formatted-number .number,
.og-central-wrapper .card.big-number .formatted-number .suffix,
body.central .dashboard .card.big-number .formatted-number .suffix {
    font-weight: 800 !important;
    font-size: inherit !important;
    line-height: 1 !important;
    width: auto !important;
}
.og-central-wrapper .card.big-number .formatted-number .suffix, body.central .dashboard .card.big-number .formatted-number .suffix {
    font-size: .55em !important;
    margin-left: 1px !important;
    opacity: .8 !important;
}

/* Label embaixo */
.og-central-wrapper .card.big-number .label, body.central .dashboard .card.big-number .label {
    font-weight: 600 !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    opacity: .85 !important;
    color: inherit !important;
    width: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ícone no canto superior direito — cor herdada do card */
.og-central-wrapper .card.big-number .main-icon, body.central .dashboard .card.big-number .main-icon {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 15px !important;
    opacity: .6 !important;
    color: inherit !important;
}

/* ════════════════════════════════════════════════════════════════
   KPI MÉDIO — widgets com altura 2 (gs-h="2")
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .grid-stack-item[gs-h="2"] .card.big-number, body.central .dashboard .grid-stack-item[gs-h="2"] .card.big-number {
    padding: 12px 16px !important;
}
.og-central-wrapper .grid-stack-item[gs-h="2"] .card.big-number .formatted-number, body.central .dashboard .grid-stack-item[gs-h="2"] .card.big-number .formatted-number {
    font-size: 28px !important;
}
.og-central-wrapper .grid-stack-item[gs-h="2"] .card.big-number .label, body.central .dashboard .grid-stack-item[gs-h="2"] .card.big-number .label {
    font-size: 12px !important;
    margin-top: 4px !important;
    white-space: normal !important;
}
.og-central-wrapper .grid-stack-item[gs-h="2"] .card.big-number .main-icon, body.central .dashboard .grid-stack-item[gs-h="2"] .card.big-number .main-icon {
    top: 12px !important;
    right: 14px !important;
    font-size: 16px !important;
}

/* ════════════════════════════════════════════════════════════════
   KPI GRANDE — widgets com altura ≥3
   Mantém as cores ORIGINAIS do GLPI (amarelo/laranja/vermelho/verde
   geradas inline pelo <style> de cada widget). Só ajusta layout.
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .grid-stack-item[gs-h="3"] .card.big-number,
body.central .dashboard .grid-stack-item[gs-h="3"] .card.big-number,
.og-central-wrapper .grid-stack-item[gs-h="4"] .card.big-number,
body.central .dashboard .grid-stack-item[gs-h="4"] .card.big-number,
.og-central-wrapper .grid-stack-item[gs-h="5"] .card.big-number,
body.central .dashboard .grid-stack-item[gs-h="5"] .card.big-number,
.og-central-wrapper .grid-stack-item[gs-h="6"] .card.big-number,
body.central .dashboard .grid-stack-item[gs-h="6"] .card.big-number {
    border-radius: 18px !important;
    padding: 18px !important;
}

.og-central-wrapper .grid-stack-item[gs-h="3"] .card.big-number .formatted-number,
body.central .dashboard .grid-stack-item[gs-h="3"] .card.big-number .formatted-number,
.og-central-wrapper .grid-stack-item[gs-h="4"] .card.big-number .formatted-number,
body.central .dashboard .grid-stack-item[gs-h="4"] .card.big-number .formatted-number,
.og-central-wrapper .grid-stack-item[gs-h="5"] .card.big-number .formatted-number,
body.central .dashboard .grid-stack-item[gs-h="5"] .card.big-number .formatted-number,
.og-central-wrapper .grid-stack-item[gs-h="6"] .card.big-number .formatted-number,
body.central .dashboard .grid-stack-item[gs-h="6"] .card.big-number .formatted-number {
    font-size: 38px !important;
    letter-spacing: -.02em !important;
}

.og-central-wrapper .grid-stack-item[gs-h="3"] .card.big-number .label,
body.central .dashboard .grid-stack-item[gs-h="3"] .card.big-number .label,
.og-central-wrapper .grid-stack-item[gs-h="4"] .card.big-number .label,
body.central .dashboard .grid-stack-item[gs-h="4"] .card.big-number .label,
.og-central-wrapper .grid-stack-item[gs-h="5"] .card.big-number .label,
body.central .dashboard .grid-stack-item[gs-h="5"] .card.big-number .label,
.og-central-wrapper .grid-stack-item[gs-h="6"] .card.big-number .label,
body.central .dashboard .grid-stack-item[gs-h="6"] .card.big-number .label {
    font-size: 13px !important;
    margin-top: 8px !important;
    white-space: normal !important;
}

.og-central-wrapper .grid-stack-item[gs-h="3"] .card.big-number .main-icon,
body.central .dashboard .grid-stack-item[gs-h="3"] .card.big-number .main-icon,
.og-central-wrapper .grid-stack-item[gs-h="4"] .card.big-number .main-icon,
body.central .dashboard .grid-stack-item[gs-h="4"] .card.big-number .main-icon,
.og-central-wrapper .grid-stack-item[gs-h="5"] .card.big-number .main-icon,
body.central .dashboard .grid-stack-item[gs-h="5"] .card.big-number .main-icon,
.og-central-wrapper .grid-stack-item[gs-h="6"] .card.big-number .main-icon,
body.central .dashboard .grid-stack-item[gs-h="6"] .card.big-number .main-icon {
    top: 14px !important;
    right: 16px !important;
    font-size: 20px !important;
    opacity: .55 !important;
}

/* ════════════════════════════════════════════════════════════════
   COUNT — Stat tiles pequenos (Usuários, Grupos, Documentos…)
   GLPI usa .card.count para esses tiles menores.
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .card.count,
body.central .dashboard .card.count,
.og-central-wrapper .card.summary-numbers,
body.central .dashboard .card.summary-numbers {
    background: #eef0f2 !important;
    color: var(--ink-900) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 16px !important;
    height: 100% !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.og-central-wrapper .card.count:hover,
body.central .dashboard .card.count:hover,
.og-central-wrapper .card.summary-numbers:hover,
body.central .dashboard .card.summary-numbers:hover {
    background: #e2e5e9 !important;
    color: var(--ink-900) !important;
    border: none !important;
}

.og-central-wrapper .card.count .content,
body.central .dashboard .card.count .content,
.og-central-wrapper .card.summary-numbers .content,
body.central .dashboard .card.summary-numbers .content {
    display: flex !important;
    align-items: baseline !important;
}
.og-central-wrapper .card.count .formatted-number,
body.central .dashboard .card.count .formatted-number,
.og-central-wrapper .card.summary-numbers .formatted-number,
body.central .dashboard .card.summary-numbers .formatted-number {
    font-family: var(--og-font) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    color: var(--ink-900) !important;
}
.og-central-wrapper .card.count .formatted-number .number,
body.central .dashboard .card.count .formatted-number .number,
.og-central-wrapper .card.count .formatted-number .suffix,
body.central .dashboard .card.count .formatted-number .suffix,
.og-central-wrapper .card.summary-numbers .formatted-number .number,
body.central .dashboard .card.summary-numbers .formatted-number .number,
.og-central-wrapper .card.summary-numbers .formatted-number .suffix,
body.central .dashboard .card.summary-numbers .formatted-number .suffix {
    font-family: var(--og-font) !important;
    font-weight: 800 !important;
    font-size: inherit !important;
}
.og-central-wrapper .card.count .formatted-number .suffix,
body.central .dashboard .card.count .formatted-number .suffix,
.og-central-wrapper .card.summary-numbers .formatted-number .suffix,
body.central .dashboard .card.summary-numbers .formatted-number .suffix {
    font-size: .55em !important;
    margin-left: 2px !important;
    opacity: .8 !important;
}
.og-central-wrapper .card.count .label,
body.central .dashboard .card.count .label,
.og-central-wrapper .card.summary-numbers .label,
body.central .dashboard .card.summary-numbers .label {
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    opacity: .85 !important;
    color: var(--ink-700) !important;
}
.og-central-wrapper .card.count .main-icon,
body.central .dashboard .card.count .main-icon,
.og-central-wrapper .card.summary-numbers .main-icon,
body.central .dashboard .card.summary-numbers .main-icon {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    font-size: 17px !important;
    color: var(--ink-500) !important;
    opacity: .7 !important;
}

/* ════════════════════════════════════════════════════════════════
   SEARCH RESULT NUMBERS — cards "Computadores por Fabricante" etc.
   GLPI usa .card.search ou .card.searchShowList para listas com gráfico.
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .card.search,
body.central .dashboard .card.search,
.og-central-wrapper .card.searchShowList,
body.central .dashboard .card.searchShowList,
.og-central-wrapper .card[class*="chart"],
body.central .dashboard .card[class*="chart"],
.og-central-wrapper .card.dashboard-card,
body.central .dashboard .card.dashboard-card {
    background: white !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    height: 100% !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Título dos cards de gráfico — sempre no topo */
.og-central-wrapper .card.search .card-title,
body.central .dashboard .card.search .card-title,
.og-central-wrapper .card.searchShowList .card-title,
body.central .dashboard .card.searchShowList .card-title,
.og-central-wrapper .card[class*="chart"] .card-title,
body.central .dashboard .card[class*="chart"] .card-title,
.og-central-wrapper .card.dashboard-card .card-title,
body.central .dashboard .card.dashboard-card .card-title,
.og-central-wrapper .grid-stack-item-content > .card > .card-title,
body.central .dashboard .grid-stack-item-content > .card > .card-title,
.og-central-wrapper .grid-stack-item-content > .card > h3,
body.central .dashboard .grid-stack-item-content > .card > h3 {
    font-family: var(--og-font) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    margin: 0 0 12px !important;
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Ícone à direita do título (lado do "Computadores por Fabricante") */
.og-central-wrapper .card .main-icon ~ .label,
body.central .dashboard .card .main-icon ~ .label,
.og-central-wrapper .card > .main-icon,
body.central .dashboard .card > .main-icon {
    color: var(--ink-400) !important;
    font-size: 16px !important;
}

/* ════════════════════════════════════════════════════════════════
   GRÁFICOS — ApexCharts / Chart.js
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .apexcharts-canvas,
body.central .dashboard .apexcharts-canvas,
.og-central-wrapper canvas,
body.central .dashboard canvas {
    font-family: var(--og-font) !important;
}
.og-central-wrapper .apexcharts-xaxis text,
body.central .dashboard .apexcharts-xaxis text,
.og-central-wrapper .apexcharts-yaxis text,
body.central .dashboard .apexcharts-yaxis text {
    fill: var(--ink-500) !important;
    font-size: 10px !important;
}
.og-central-wrapper .apexcharts-gridline, body.central .dashboard .apexcharts-gridline {
    stroke: var(--ink-100) !important;
    stroke-dasharray: 2 3 !important;
}
.og-central-wrapper .apexcharts-legend-text, body.central .dashboard .apexcharts-legend-text {
    color: var(--ink-700) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.og-central-wrapper .apexcharts-tooltip, body.central .dashboard .apexcharts-tooltip {
    background: white !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(20,30,40,.12) !important;
    font-family: var(--og-font) !important;
}

/* ════════════════════════════════════════════════════════════════
   TABELAS dentro dos cards
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .card table th, body.central .dashboard .card table th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--ink-500) !important;
    background: var(--ink-50) !important;
    padding: 10px 14px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ink-100) !important;
}
.og-central-wrapper .card table td, body.central .dashboard .card table td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-top: 1px solid var(--ink-100) !important;
}

/* ════════════════════════════════════════════════════════════════
   Botão de edição (lápis) — discreto no canto, aparece no hover
═══════════════════════════════════════════════════════════════ */

.og-central-wrapper .grid-stack-item-content .ti-pencil,
body.central .dashboard .grid-stack-item-content .ti-pencil,
.og-central-wrapper .grid-stack-item-content .card-edit-mode,
body.central .dashboard .grid-stack-item-content .card-edit-mode {
    opacity: 0;
    transition: opacity 120ms !important;
}
.og-central-wrapper .grid-stack-item-content:hover .ti-pencil,
body.central .dashboard .grid-stack-item-content:hover .ti-pencil,
.og-central-wrapper .grid-stack-item-content:hover .card-edit-mode,
body.central .dashboard .grid-stack-item-content:hover .card-edit-mode {
    opacity: 1;
}

/* ─── Top bar global da área central ─── */
body:not(.helpdesk) .navbar-horizontal .input-group,
body:not(.helpdesk) header.navbar:not(.navbar-vertical) .form-control {
    background: var(--ink-50) !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

body:not(.helpdesk) .navbar .user-profile-type,
body:not(.helpdesk) .navbar .profile-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    background: var(--plum-50) !important;
    color: var(--plum-700) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* ─── Responsivo ─── */
@media (max-width: 900px) {
.og-central-wrapper .grid-stack, body.central .dashboard .grid-stack {
        padding: 8px 18px 24px !important;
    }
.og-central-wrapper .nav-tabs, body.central .dashboard .nav-tabs {
        padding: 0 18px !important;
        overflow-x: auto !important;
    }
}