/* ComercialHost — Revisão de navegação/idioma v5, 26/10/2026.
 * Adição independente, compatível com WHMCS Six. Respeita foco por teclado.
 */
:root{--ch5-blue:#2563eb;--ch5-ink:#101a2f;--ch5-surface:#17243b;--ch5-border:#314666;--ch5-text:#eef5ff;--ch5-muted:#b7c9e4;--ch5-green:#4ade80;--ch5-green-solid:#16a34a}

/* 01. Evita o contorno branco temporário no CLIQUE do menu superior;
       navegação via TAB mantém indicador de foco visível. */
#header .quick-nav:focus:not(:focus-visible),
#header .quick-nav:active,
#header a.quick-nav:focus:not(:focus-visible),
header .quick-nav:focus:not(:focus-visible),
nav#nav.navbar-main .navbar-nav>li>a:focus:not(:focus-visible),
nav#nav.navbar-main .navbar-nav>li>a:active,
#main-menu .navbar-nav>li>a:focus:not(:focus-visible),
.navbar-main .dropdown-toggle:focus:not(:focus-visible){
 outline:0!important;box-shadow:none!important;text-shadow:none!important
}
#accountNotifications:focus:not(:focus-visible),
#languageChooser:focus:not(:focus-visible){outline:0!important;box-shadow:none!important}
#header .quick-nav:focus-visible,header .quick-nav:focus-visible,
nav#nav.navbar-main .navbar-nav>li>a:focus-visible{
 outline:2px solid #5b91e4!important;outline-offset:3px!important;
 box-shadow:none!important;border-radius:5px!important
}
nav#nav.navbar-main .navbar-nav>li.open>a,
nav#nav.navbar-main .navbar-nav>li.dropdown:hover>a{box-shadow:none!important}

/* 02. Notificações: alvo próprio, visual limpo, alinhamento via JS */
#accountNotifications{
 cursor:pointer!important;gap:5px!important;white-space:nowrap!important;
 outline:none!important;box-shadow:none!important;text-decoration:none!important
}
#accountNotifications.ch5-empty{display:none!important}
#accountNotifications.ch5-has-notifications,
#accountNotifications.ch5-has-notifications .ch4-notify-label,
#accountNotifications.ch5-has-notifications .ch5-label{
 color:var(--ch5-green)!important;font-weight:600!important
}
#accountNotifications.ch5-has-notifications:hover{
 color:#8df2b4!important
}
.popover.popover-user-notifications{
 width:326px!important;max-width:calc(100vw - 20px)!important;
 background:var(--ch5-surface)!important;color:var(--ch5-text)!important;
 border:1px solid var(--ch5-border)!important;border-radius:8px!important;
 padding:0!important;box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
 overflow:visible!important
}
.popover.popover-user-notifications .popover-inner,
.popover.popover-user-notifications .popover-content{
 background:var(--ch5-surface)!important;border:0!important;
 border-radius:0 0 7px 7px!important
}
.popover.popover-user-notifications .popover-title{
 background:#111d33!important;color:#f4f8ff!important;
 border:0!important;border-radius:7px 7px 0 0!important;
 font-size:15px!important;line-height:1.35!important;
 font-weight:650!important;padding:13px 16px!important
}
.popover.popover-user-notifications .popover-content>.clientalert{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 gap:0!important;box-sizing:border-box!important;
 background:var(--ch5-surface)!important;color:#ebf2ff!important;
 border:0!important;border-top:1px solid #293c58!important;
 margin:0!important;padding:14px 16px 15px!important;
 text-align:left!important;font-size:13px!important;
 font-weight:400!important;line-height:1.52!important;
 box-shadow:none!important;white-space:normal!important
}
.popover.popover-user-notifications .popover-content>.clientalert:first-child{border-top:0!important}
.popover.popover-user-notifications .popover-content>.clientalert:last-child{border-radius:0 0 7px 7px!important}
.popover.popover-user-notifications .popover-content>.clientalert:hover,
.popover.popover-user-notifications .popover-content>.clientalert:focus-within{
 background:#20334f!important;color:#fff!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn{
 display:inline-flex!important;align-self:flex-end!important;
 justify-content:center!important;align-items:center!important;
 width:auto!important;min-width:0!important;height:auto!important;
 padding:7px 12px!important;min-height:32px!important;
 margin:11px 0 0!important;
 border-radius:5px!important;background:var(--ch5-green-solid)!important;
 border:1px solid var(--ch5-green-solid)!important;color:#fff!important;
 font-size:12px!important;font-weight:500!important;line-height:1.25!important;
 letter-spacing:0!important;box-shadow:none!important;outline:0!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn:hover{
 background:#11833e!important;border-color:#11833e!important;color:#fff!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn:focus-visible{
 outline:2px solid #8fe1af!important;outline-offset:2px!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn:focus:not(:focus-visible){
 outline:none!important;box-shadow:none!important
}
.popover.popover-user-notifications .arrow:after{border-bottom-color:#111d33!important}
.popover.popover-user-notifications .arrow{pointer-events:none!important}

/* 03. Ajustes finos de tipografia na página inicial em idiomas pt-BR / pt-PT */
#main-body .client-home-panels .panel[menuitemname="Overdue Invoices"] .panel-title{
 color:#f1f6ff!important;font-weight:650!important
}
#main-body .sidebar .panel-title{letter-spacing:-.01em!important}
#main-body .client-home-panels .panel-heading .panel-title{line-height:1.45!important}
#main-body .client-home-panels .panel[menuitemname="Overdue Invoices"] .panel-body p{
 font-size:13.5px!important;line-height:1.65!important;color:#e6edf9!important
}
/* Indicadores e rótulos do idioma, não campos editáveis */
.language-popover a.ch5-lang-br{color:#d7eaff!important;font-weight:650!important}
.language-popover a.ch5-lang-br:hover{color:white!important;background:#1e3d68!important}

/* Responsividade — não desloca menus em smartphones */
@media(max-width:767px){
 .popover.popover-user-notifications{width:min(326px,calc(100vw - 20px))!important}
 .popover.popover-user-notifications .popover-content>.clientalert{font-size:12.5px!important}
 #accountNotifications{max-width:100%!important}
}