:root{
  --help-bg: #081120;
  --help-bg-soft: #0f172a;
  --help-panel: #111c31;
  --help-panel-2: #16233d;
  --help-border: rgba(255,255,255,.08);
  --help-text: #e5eefc;
  --help-muted: #8fa6c9;
  --help-primary: #2563eb;
  --help-primary-2: #0ea5e9;
  --help-success: #22c55e;
  --help-warning: #f59e0b;
  --help-danger: #ef4444;
  --help-radius: 18px;
  --help-shadow: 0 18px 50px rgba(0,0,0,.35);
}

html, body {
  background: radial-gradient(circle at top, #0b162b 0%, #070f1f 50%, #050a16 100%) !important;
}

/* estrutura principal */
.page,
.layout-fluid,
.main,
.content-wrapper,
.content-main,
body .page-wrapper {
  background: transparent !important;
}

/* topo */
.navbar,
header.navbar,
.page-header {
  background: linear-gradient(180deg, #0b162b, #091426) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* sidebar */
.navbar-vertical,
aside,
.sidebar,
.page .navbar-vertical {
background: linear-gradient(180deg, #0b162b, #081222) !important;
backdrop-filter: none !important; 

  -webkit-backdrop-filter: blur(16px);
}

.navbar-vertical .nav-link,
.sidebar .nav-link,
.nav .nav-link {
  border-radius: 12px !important;
  color: var(--help-text) !important;
  margin: 4px 8px !important;
  transition: all .18s ease;
}

.navbar-vertical .nav-link:hover,
.sidebar .nav-link:hover,
.nav .nav-link:hover {
  background: rgba(37,99,235,.14) !important;
  color: #fff !important;
}

.navbar-vertical .nav-link.active,
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(14,165,233,.16)) !important;
  border: 1px solid rgba(59,130,246,.18);
  color: #fff !important;
}

/* cards */
.card,
.ticket-card,
.dashboard-card,
.central,
.tab_cadre_fixe,
.tab_cadre,
.main-card {
 background: linear-gradient(180deg, #111c31, #0c1628) !important;
  border: 1px solid var(--help-border) !important;
  border-radius: var(--help-radius) !important;
  box-shadow: var(--help-shadow) !important;
  color: var(--help-text) !important;
}

.card-header,
.card-footer {
  background: transparent !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* tabelas */
.table,
table {
  color: var(--help-text) !important;
}

.table thead th,
table thead th {
  background: rgba(255,255,255,.03) !important;
  color: #dbe7ff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.table td,
.table th,
table td,
table th {
  border-color: rgba(255,255,255,.06) !important;
}

/* formulários */
.form-control,
select,
textarea,
.dropdown-toggle,
.form-select {
  background: #0e1a2f !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--help-text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.form-control:focus,
select:focus,
textarea:focus,
.form-select:focus {
  border-color: rgba(59,130,246,.7) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* botões */
.btn-primary,
.btn-outline-primary,
.btn-info {
  background: linear-gradient(90deg, var(--help-primary), var(--help-primary-2)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.24);
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
  background: #0e1a2f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--help-text) !important;
  border-radius: 12px !important;
}

/* badges */
.badge,
.tag,
.status-badge {
  border-radius: 999px !important;
  padding: 6px 10px !important;
}

/* links */
a {
  color: #7cc3ff !important;
}
a:hover {
  color: #a5d8ff !important;
}

/* títulos */
h1, h2, h3, h4, h5, h6,
.page-title,
.card-title {
  color: #f3f8ff !important;
  font-weight: 700 !important;
}

/* textos secundários */
.text-muted,
small,
.text-secondary {
  color: var(--help-muted) !important;
}

/* widgets do dashboard */
.dashboard .card,
.dashboard-card,
.widget,
.plugin_dashboard_container .card {
  overflow: hidden;
  position: relative;
}

.dashboard .card::before,
.dashboard-card::before,
.widget::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  opacity: .9;
}

/* busca e filtros */
.search-input,
.search-form input,
input[type="search"] {
  background: rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
}

/* scroll suave visual */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 20px;
}
::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
}

/* topo mais nítido */
.navbar .form-control,
.page-header .form-control,
.navbar input,
.page-header input {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #eef4ff !important;
}

.navbar .form-control::placeholder,
.page-header .form-control::placeholder,
.navbar input::placeholder,
.page-header input::placeholder {
  color: #9fb3d9 !important;
}

.navbar .btn,
.page-header .btn,
.navbar .btn-ghost-secondary,
.page-header .btn-ghost-secondary {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #eef4ff !important;
  box-shadow: none !important;
}

.navbar .btn:hover,
.page-header .btn:hover,
.navbar .btn-ghost-secondary:hover,
.page-header .btn-ghost-secondary:hover {
  background: rgba(255,255,255,.09) !important;
}

.navbar .dropdown-toggle,
.page-header .dropdown-toggle,
.navbar .avatar,
.page-header .avatar {
  border-radius: 12px !important;
}

.navbar .navbar-brand,
.page-header .navbar-brand,
.navbar .nav-link,
.page-header .nav-link,
.navbar .dropdown-toggle,
.page-header .dropdown-toggle {
  color: #f3f8ff !important;
}

/* chips/abas superiores mais legíveis */
.nav-pills .nav-link,
.nav-tabs .nav-link,
.tab_cadre_central .nav-link,
.tab_cadre_central .nav-tabs .nav-link {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #dce8ff !important;
  border-radius: 14px !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.tab_cadre_central .nav-link.active,
.tab_cadre_central .nav-tabs .nav-link.active {
  background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(14,165,233,.18)) !important;
  border: 1px solid rgba(59,130,246,.24) !important;
  color: #ffffff !important;
}

/* topo fixo mais sólido visualmente */
.page-header-sticky,
.sticky-top {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* =========================
   TOPO PREMIUM HELP
========================= */

/* esconde a marca GLPI do topo */
.navbar-brand-image,
.navbar-brand-autodark,
.navbar-brand img,
.navbar-brand svg,
.navbar-brand {
  font-size: 0 !important;
}

/* injeta logo HELP no topo */
.navbar-brand::before,
header .navbar-brand::before {
  content: "";
  display: inline-block;
  width: 132px;
  height: 36px;
  background: url('/custom/help-topbar.png') center left / contain no-repeat;
  vertical-align: middle;
}

/* melhora área da marca */
.navbar-brand,
header .navbar-brand {
  min-width: 150px;
  min-height: 38px;
  display: flex !important;
  align-items: center;
}

/* avatar / usuário */
.avatar,
.user-avatar,
.navbar .avatar {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.dropdown-toggle .avatar,
.navbar .dropdown-toggle {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
}

/* dropdown do usuário */
.dropdown-menu {
  background: linear-gradient(180deg, rgba(16,26,46,.98), rgba(11,19,34,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.35) !important;
}

.dropdown-item {
  color: #eaf1ff !important;
  border-radius: 10px !important;
}

.dropdown-item:hover {
  background: rgba(37,99,235,.14) !important;
  color: #fff !important;
}

/* =========================
   ALERTAS MAIS BONITOS
========================= */

.alert {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.alert-warning,
.alert.alert-warning,
.alert-warning-important {
  background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(251,191,36,.12)) !important;
  color: #fff7e6 !important;
  border-left: 4px solid #f59e0b !important;
}

.alert-danger,
.alert.alert-danger {
  background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(248,113,113,.10)) !important;
  color: #ffe7e7 !important;
  border-left: 4px solid #ef4444 !important;
}

.alert-success,
.alert.alert-success {
  background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(74,222,128,.10)) !important;
  color: #eafff1 !important;
  border-left: 4px solid #22c55e !important;
}

.alert-info,
.alert.alert-info {
  background: linear-gradient(90deg, rgba(14,165,233,.16), rgba(56,189,248,.10)) !important;
  color: #e7f7ff !important;
  border-left: 4px solid #0ea5e9 !important;
}

/* ícone do alerta */
.alert .fas,
.alert .fa,
.alert i {
  opacity: .95;
}

/* =========================
   BOTÕES DE AÇÃO DO DASHBOARD
========================= */

.btn-icon,
.btn-ghost-secondary,
.btn-outline-secondary,
.btn-group .btn {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.05) !important;
  color: #eef4ff !important;
  box-shadow: none !important;
}

.btn-icon:hover,
.btn-ghost-secondary:hover,
.btn-outline-secondary:hover,
.btn-group .btn:hover {
  background: rgba(37,99,235,.16) !important;
  border-color: rgba(59,130,246,.20) !important;
  color: #fff !important;
}

/* =========================
   ÍCONES / BLOCOS DO DASHBOARD
========================= */

.dashboard .card .fa,
.dashboard .card .fas,
.dashboard .card .ti,
.dashboard .card .icon,
.card .fa,
.card .fas {
  color: #7cc3ff !important;
}

/* mini-cards do dashboard */
.dashboard .card,
.dashboard-card,
.central .card {
  transition: transform .16s ease, box-shadow .16s ease;
}

.dashboard .card:hover,
.dashboard-card:hover,
.central .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0,0,0,.36) !important;
}
/* =========================
   LOGO LATERAL HELP
========================= */

/* usa o mesmo container da logo do GLPI, mas troca a arte */
.navbar-vertical .glpi-logo,
aside .glpi-logo {
  display: block !important;
  width: 138px !important;
  height: 40px !important;
  margin: 10px auto 18px auto !important;
  background: url('/custom/help-sidebar.png') center center / contain no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* esconde apenas o desenho/texto original da classe */
.navbar-vertical .glpi-logo::before,
.navbar-vertical .glpi-logo::after,
aside .glpi-logo::before,
aside .glpi-logo::after {
  display: none !important;
  content: none !important;
}

/* evita texto interno visível */
.navbar-vertical .glpi-logo,
aside .glpi-logo {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
/* =========================
   RENOMEAR MENU LATERAL
========================= */

/* Ativos -> Clientes */
.navbar-vertical .nav-link span:has(+ .fa-caret-down),
.navbar-vertical .nav-link span {
  position: relative;
}

/* Assistência -> Chamados */
.navbar-vertical a[href*="helpdesk"] span,
.navbar-vertical a[href*="ticket"] span {
  font-size: 0 !important;
}
.navbar-vertical a[href*="helpdesk"] span::after,
.navbar-vertical a[href*="ticket"] span::after {
  content: "Chamados";
  font-size: 14px;
}

/* Gerência -> Relatórios */
.navbar-vertical a[href*="report"] span,
.navbar-vertical a[href*="stat"] span {
  font-size: 0 !important;
}
.navbar-vertical a[href*="report"] span::after,
.navbar-vertical a[href*="stat"] span::after {
  content: "Relatórios";
  font-size: 14px;
}

/* Administração -> Configurações */
.navbar-vertical a[href*="admin"] span,
.navbar-vertical a[href*="config"] span {
  font-size: 0 !important;
}
.navbar-vertical a[href*="admin"] span::after,
.navbar-vertical a[href*="config"] span::after {
  content: "Configurações";
  font-size: 14px;
}
/* esconder menus laterais indesejados */
.navbar-vertical li:has(a span:contains("Ativos")),
.navbar-vertical li:has(a span:contains("Gerência")),
.navbar-vertical li:has(a span:contains("Ferramentas")) {
  display: none !important;
}