/* ════════════════════════════════════════════════════════════════════
   SNAKE — GLPI GLOBAL THEME
   ────────────────────────────────────────────────────────────────────
   Carregado em todas as páginas pelo plugin customtheme (SPEC §14).
   Sobrescreve o tema padrão GLPI com a identidade Snake: logo em
   ../pics/ e cores do Snake Portal (frontend/tailwind.config.cjs).
   Estrutura herdada do tema "Órigo Energia" (theme-custom.css).
═══════════════════════════════════════════════════════════════════ */

/* ─── 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 SNAKE ───────────────────────────────────────────── */
:root {
    /* Navy: menu lateral e textos de marca sobre fundo claro */
    --navy-900: #0D1420;   /* fundo do favicon */
    --navy-700: #1C2434;   /* sidebar do portal (black) */
    --navy-600: #333A48;   /* item ativo no menu (graydark) */
    --navy-50:  #EFF4FB;   /* gray do portal */

    /* Azul: botões, links, foco, abas (primary do portal) */
    --blue-800: #2F3FB8;
    --blue-700: #3C50E0;
    --blue-600: #5A6CE8;
    --blue-200: #C4CBF6;
    --blue-50:  #EEF0FD;

    /* Destaque sobre o navy (secondary do portal) */
    --accent:   #80CAEE;

    --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
   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 Snake (horizontal, navy) no lugar do GLPI. SVG 2674×885 ≈ 3:1. */
body.helpdesk .navbar .glpi-logo,
body.helpdesk .navbar-brand .glpi-logo,
body.helpdesk .navbar-brand img,
body.helpdesk .glpi-logo {
    background-image: url('../pics/snake-logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    width: 79px !important;
    height: 26px !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 "CENTRAL DE ATENDIMENTO" navy ao lado do logo (SPEC-personalizacao-snake.md §9) */
body.helpdesk .navbar-brand::after {
    content: 'CENTRAL DE ATENDIMENTO';
    white-space: nowrap;
    font-family: var(--og-font);
    font-weight: 800;
    font-size: 13px;
    color: var(--navy-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;
}

/* Botão de menu no celular: o core o desenha branco (navbar-dark), invisível no cabeçalho branco */
body.helpdesk .navbar .navbar-toggler {
    color: var(--navy-700) !important;
}

body.helpdesk .navbar .navbar-toggler:focus-visible {
    outline: 3px solid var(--blue-700) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* 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(--blue-50) !important;
    color: var(--blue-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(--navy-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(--blue-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(--blue-50) !important;
    color: var(--blue-800) !important;
}

/* ─── 5. BOTÕES PRIMÁRIOS ───────────────────────────────────────── */
/* color explícita: em <a class="btn btn-primary"> a regra de links (§6) deixaria o texto azul */
body.helpdesk .btn-primary {
    background: var(--blue-700) !important;
    border-color: var(--blue-700) !important;
    color: #fff !important;
    font-family: var(--og-font) !important;
    font-weight: 600 !important;
}
body.helpdesk .btn-primary:hover {
    background: var(--blue-800) !important;
    border-color: var(--blue-800) !important;
    color: #fff !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(--blue-200) !important;
    background: var(--blue-50) !important;
    color: var(--blue-700) !important;
}

/* ─── 6. LINKS ─────────────────────────────────────────────────── */
body.helpdesk a {
    color: var(--blue-700);
}
body.helpdesk a:hover {
    color: var(--blue-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(--blue-700) !important;
    box-shadow: 0 0 0 3px rgba(60,80,224,.15) !important;
}

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

/* ─── 10. BADGES ─────────────────────────────────────────────────── */
body.helpdesk .badge.bg-primary { background: var(--blue-700) !important; }
body.helpdesk .badge.bg-info    { background: var(--blue-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(--blue-700) !important; }

/* ─── 12. FOOTER GLPI — padronizado em todas as páginas ─────────────
   Inclui o ícone Snake pequeno antes do texto e o crédito "· Uppy Code" (link, js/rodape.js)
   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;
}

/* Ícone Snake 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: 16px !important;
    height: 16px !important;
    background-image: url('../pics/snake-icon.svg') !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;
}

/* Crédito "· Uppy Code" (com link) depois do copyright do GLPI: inserido por js/rodape.js,
   porque pseudo-elemento (::after) não aceita link. */
/* Aviso do GLPI em texto cinza, sem link (js/rodape.js troca o <a> por <span>) */
.snake-copyright {
    color: var(--ink-500) !important;
}
a.snake-uppycode {
    color: var(--blue-700) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
a.snake-uppycode:hover { text-decoration: underline !important; }
a.snake-uppycode { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   15. SIDEBAR ADMIN (CENTRAL) — Menu lateral das páginas internas
   Aplica a identidade Snake 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(--navy-700) !important;
    border-right: 1px solid var(--navy-900) !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 Snake via ::before do .navbar-brand
   SVG horizontal navy (2674×885 ≈ 3:1); o filter deixa branco sobre o navy. */
aside.navbar-vertical .navbar-brand::before {
    content: '' !important;
    display: inline-block !important;
    width: 79px !important;
    height: 26px !important;
    background-image: url('../pics/snake-logo.svg') !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 "ATENDIMENTO" em destaque ao lado do logo (versão curta: cabe no menu lateral) */
aside.navbar-vertical .navbar-brand::after {
    content: 'ATENDIMENTO';
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    font-family: var(--og-font);
    font-weight: 800;
    font-size: 12px;
    color: var(--accent);
    letter-spacing: .1em;
    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(--accent) !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(--navy-600) !important;
    color: white !important;
}
/* Barra de destaque à esquerda do item ativo */
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(--accent) !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 — cor de destaque */
aside.navbar-vertical .dropdown-item.active,
aside.navbar-vertical .dropdown-item[aria-current="page"] {
    background: transparent !important;
    color: var(--accent) !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(--accent) !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 Snake */
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;
    background-image: url('../pics/snake-icon.svg') !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 navy-600 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(--navy-600) !important;
}

/* Barra de destaque 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(--accent) !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(--navy-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 */
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(--blue-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(--blue-50) !important;
    color: var(--blue-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(--blue-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(--blue-50) !important;
    color: var(--blue-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 ─── */
.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(--blue-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(--blue-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(--blue-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(--blue-50) !important;
    border-color: var(--blue-200) !important;
    color: var(--blue-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(--navy-50) !important;
    color: var(--navy-700) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* ─── Responsivo ─── */
/* Lockup longo some em telas estreitas para não empurrar o menu do usuário */
@media (max-width: 575.98px) {
    body.helpdesk .navbar-brand::after {
        display: none !important;
    }
}

@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;
    }
}

/* ════════════════════════════════════════════════════════════════════
   17. SNAKE — paleta e tela de login
   A paleta padrão do GLPI é a "teclib" (SPEC §14.5): botão primário
   verde-limão e links roxos. Aqui ela passa a usar as cores do portal.
   Quem escolher outra paleta nas preferências fica com a dela.
═══════════════════════════════════════════════════════════════════ */
:root[data-glpi-theme="teclib"] {
    --tblr-primary-rgb: 60, 80, 224;
    --tblr-primary-fg: #ffffff;
    --tblr-link-color-rgb: 60, 80, 224;
    --glpi-mainmenu-bg: #1C2434;
    --glpi-mainmenu-fg: #ffffff;
    --glpi-helpdesk-header: #EFF4FB;
    --glpi-palette-color-1: #5A6CE8;
    --glpi-palette-color-2: #1C2434;
    --glpi-palette-color-3: #f1f1f2;
    --glpi-palette-color-4: #3C50E0;
    --glpi-illustrations-gradient-1: #EEF0FD;
    --glpi-illustrations-gradient-2: #A9B3F2;
    --glpi-illustrations-gradient-3: #3C50E0;
}

/* Logo vertical (snake + SNAKE) no lugar do logo GLPI no login e nas
   demais páginas sem sessão. O core desenha esse logo com
   `content: var(--logo)`, por isso a troca é pelo content. SVG 1595×1219. */
body.welcome-anonymous .glpi-logo {
    content: url('../pics/snake-logo-vertical.svg') !important;
    width: 140px !important;
    height: 107px !important;
}

/* ════════════════════════════════════════════════════════════════════
   18. SNAKE — chamado enxuto e botão Buscar (pedido de 05/10/2026)
   Só apresentação: nenhuma regra de acesso depende disto (D10). O que
   cada perfil pode ver continua decidido pelos direitos no servidor.
═══════════════════════════════════════════════════════════════════ */

/* Abas do chamado: ficam Chamado, Aprovações, Tarefas do projeto,
   Problemas, Mudanças e Histórico. O core não tem opção para tirar as
   demais sem tirar também o módulo (ex.: a Base de Conhecimento). */
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=Ticket%244"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=KnowbaseItem_Item%241"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=Item_Ticket%241"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=TicketCost%241"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=Itil_Project%241"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel li.nav-item:has(> a[data-glpi-ajax-content*="_glpi_tab=Ticket_Contract%241"][data-glpi-ajax-content*="_itemtype=Ticket&"]),
#tabspanel:has(a[data-glpi-ajax-content*="_itemtype=Ticket&"][data-glpi-ajax-content*="_glpi_tab=Ticket%24main"]) li.nav-item:has(> a[data-show-all-tabs]) {
    display: none !important;
}

/* Painel lateral do chamado: sem o bloco "Itens" (Meus periféricos /
   Ou pesquisa completa). Equipamentos continuam vindo dos formulários. */
.itil-fields-panel section.accordion-item:has(> #items-heading),
section.accordion-item:has(> #items-heading) {
    display: none !important;
}

/* Botão "Buscar" do menu (busca de menus): lupa no lugar da seta */
.trigger-fuzzy .ti-arrow-big-right::before {
    content: "\eb1c";
}

/* ─── 18. LOGIN ÚNICO (lldap/SPEC-sso.md §5.3) ───────────────────── */
.snake-sso { margin-bottom: 1.25rem; }
.snake-sso #snake-sso-entrar { color: #fff !important; font-weight: 600; }
.snake-sso-ou { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; color: #737373; font-size: .8125rem; }
.snake-sso-ou::before, .snake-sso-ou::after { content: ''; flex: 1; border-top: 1px solid #e8e8e8; }

/* ─── 19. LOGIN NO PADRÃO ÚNICO SNAKE (06/11/2026) ──────────────────
   Só com html.snake-login (js/login-painel.js). Esquerda: formulário em fundo branco com
   "Faça seu login" + destino. Direita: painel azul com ilustração e atalhos Portal · GLPI ·
   Chat · Drive. Mesmo desenho do login único (lldap/authelia) e do Portal. O texto de login
   configurado (text_login) e o título nativo ficam no HTML, só escondidos. */
html.snake-login body.welcome-anonymous { background: #fff !important; display: flex; flex-direction: column; min-height: 100vh; }
html.snake-login main#page { order: 1; background: #fff !important; }
html.snake-login .snake-painel { order: 2; }
html.snake-login main#page .flex-fill { margin-top: 0 !important; justify-content: center !important; min-height: 100vh; }
html.snake-login main#page .container-tight { max-width: 472px !important; padding: 40px 16px 16px !important; }
html.snake-login main#page .glpi-logo { margin-bottom: 8px !important; }
html.snake-login .main-content-card { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html.snake-login .main-content-card .card-body { padding: 0 !important; }
html.snake-login .main-content-card .rich_text_container,
html.snake-login .main-content-card .card-header { display: none !important; }
html.snake-login .main-content-card .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }

.snake-login-titulo { text-align: center; margin: 4px 0 24px; }
.snake-login-titulo h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.25; color: #1C2434; }
.snake-login-titulo p { margin: 6px 0 0; font-size: 15px; color: #64748B; }

.snake-painel {
    background: var(--blue-700); color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px; box-sizing: border-box; font-family: var(--og-font);
}
.snake-painel-miolo { width: 100%; max-width: 520px; text-align: center; }
.snake-ilustracao { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 28px; }
.snake-frase { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35; color: #fff; }
.snake-frase-sub { margin: 8px 0 28px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.snake-sistemas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
a.snake-sistema {
    display: block; padding: 11px 6px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px;
    color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none !important; text-align: center;
    transition: background-color .15s;
}
a.snake-sistema:hover { background: rgba(255, 255, 255, .14); }
a.snake-sistema:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
a.snake-sistema.ativo { background: #fff; color: var(--blue-700) !important; border-color: #fff; }
a.snake-sistema[aria-disabled="true"] { cursor: default; user-select: none; }
a.snake-sistema[aria-disabled="true"]:not(.ativo):hover { background: transparent; }

@media (min-width: 1200px) {
    html.snake-login main#page { width: 50%; }
    html.snake-login .snake-painel { position: fixed; top: 0; right: 0; bottom: 0; width: 50%; }
}
@media (max-width: 1199.98px) {
    html.snake-login main#page .flex-fill { min-height: auto; }
    .snake-ilustracao { max-width: 260px; }
    .snake-sistemas { grid-template-columns: repeat(2, 1fr); }
}