/* ComercialHost v4 — ajustes finais auditados e isolados
 * 26/10/2026 | CSS adicional — não sobrescreve estilos base
 */
:root{--ch4-green:#16a34a;--ch4-green-hi:#4ade80;--ch4-panel:#151f34;--ch4-border:#30415d;--ch4-text:#f0f6ff;--ch4-muted:#b4c4df;--ch4-blue:#2563eb}

/* 01 | Indicador "Aberto" da informação do ticket */
#main-body #Primary_Sidebar-Ticket_Information-Subject .label[style*="#779500"],
#main-body #Primary_Sidebar-Ticket_Information-Subject .label[style*="#779500;"]{
 background:var(--ch4-green)!important;color:#fff!important;
 border:0!important;border-radius:5px!important;padding:4px 9px!important;
 display:inline-block!important;vertical-align:middle!important;
 font-size:11.5px!important;line-height:1.3!important;font-weight:700!important;
 margin-left:7px!important
}
/* Sempre preserve os status dos outros estados */
#main-body #Primary_Sidebar-Ticket_Information-Subject .label[style*="#000000"]{
 background:#2563eb!important;color:#fff!important;border-radius:5px!important
}
#main-body #Primary_Sidebar-Ticket_Information-Subject .label[style*="#888888"]{
 background:#586982!important;color:#fff!important;border-radius:5px!important
}

/* 02 | Tickets recentes do menu lateral. Aberto: texto verde + badge verde com letra branca */
#main-body .sidebar a[id^="Secondary_Sidebar-Recent_Tickets-Ticket_"]:has(span[style*="#779500"]){
 color:var(--ch4-green-hi)!important;font-weight:600!important
}
#main-body .sidebar a[id^="Secondary_Sidebar-Recent_Tickets-Ticket_"] span[style*="#779500"]{
 color:white!important;background:var(--ch4-green)!important;
 border-radius:5px!important;padding:3px 8px!important;font-weight:700!important;
 margin-left:6px!important;display:inline-block!important;white-space:nowrap!important
}
#main-body .sidebar a[id^="Secondary_Sidebar-Recent_Tickets-Ticket_"] span[style*="#000000"]{
 background:#274f95!important;color:#c6ddff!important;
 border-radius:5px!important;font-weight:700!important;margin-left:5px!important
}
#main-body .sidebar a[id^="Secondary_Sidebar-Recent_Tickets-Ticket_"] span[style*="#888888"]{
 background:#344156!important;color:#d3deef!important;
 border-radius:5px!important
}
/* Status no resumo inicial (um único padrão de cantos) */
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"] .list-group-item label[style*="#779500"]{
 background:var(--ch4-green)!important;color:white!important;
 border-radius:5px!important;padding:4px 9px!important;
 margin-left:10px!important;vertical-align:middle!important
}

/* 03 | Painel Tickets recentes: scrollbar oculta porém rolável, sem faixa direita */
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]{
 background:var(--ch4-panel)!important;overflow:hidden!important
}
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group{
 scrollbar-width:none!important;-ms-overflow-style:none!important;
 width:100%!important;max-width:none!important;
 box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;
 background:var(--ch4-panel)!important;padding:0!important;
 border:0!important;margin:0!important
}
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group::-webkit-scrollbar{
 display:none!important;width:0!important;height:0!important
}
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group>.list-group-item{
 box-sizing:border-box!important;width:100%!important;max-width:100%!important;
 background:var(--ch4-panel)!important;padding:11px 14px!important;margin:0!important;
 border:0!important;box-shadow:none!important
}
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group>.list-group-item:hover{
 background:#223653!important
}
/* Contorno discreto ao navegar por teclado; não desativa acessibilidade */
#main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group>.list-group-item:focus-visible{
 outline:2px solid #5a93f5!important;outline-offset:-2px!important
}

/* 04 | Lista de faturas: centralização e chamada clara para pagamento */
#main-body #tableInvoicesList :is(th,td){
 text-align:center!important;vertical-align:middle!important
}
#main-body #tableInvoicesList thead th{white-space:normal!important}
#main-body #tableInvoicesList tbody td :is(.label.status-unpaid,.label.status-paid){
 display:inline-flex!important;justify-content:center!important;align-items:center!important;
 min-width:121px!important;width:auto!important;max-width:100%!important;
 padding:9px 11px!important;font-weight:700!important;
 border-radius:5px!important;line-height:1.25!important
}
#main-body #tableInvoicesList tbody td .status-unpaid{
 background:#2563eb!important;color:#fff!important;cursor:pointer!important
}
#main-body #tableInvoicesList tbody td .status-unpaid :is(.textred,.ch4-payment-label){
 color:white!important;font-weight:700!important
}
#main-body #tableInvoicesList tbody td .status-paid{
 background:#168d45!important;color:#fff!important
}
#main-body #tableInvoicesList tbody td .status-paid .textgreen{color:#fff!important}
#main-body #tableInvoicesList tbody td .status-unpaid:hover{background:#1d4ed8!important}
#main-body #tableInvoicesList tbody td .status-unpaid:focus-visible{
 outline:2px solid #7cb6ff!important;outline-offset:2px!important
}
/* Controles de expansão responsive — mantidos sem alterar a funcionalidade */
#main-body #tableInvoicesList tbody td.responsive-edit-button{text-align:center!important}

/* 05 | Notificações: gatilho verde quando houver alertas, sem moldura feia */
#accountNotifications{
 display:inline-flex!important;align-items:center!important;gap:5px!important;
 border-radius:5px!important;color:#e7f0ff!important;
 text-decoration:none!important;outline:none!important;
 box-shadow:none!important
}
#accountNotifications.ch4-has-notices,
#accountNotifications.ch4-has-notices .ch4-notify-label {
 color:var(--ch4-green-hi)!important;font-weight:700!important
}
#accountNotifications:focus,
#accountNotifications:active {outline:none!important;box-shadow:none!important}
#accountNotifications:focus-visible{
 outline:2px solid #4779c9!important;outline-offset:3px!important;
 box-shadow:none!important
}
.popover.popover-user-notifications{
 width:min(355px,calc(100vw - 26px))!important;max-width:calc(100vw - 26px)!important;
 background:var(--ch4-panel)!important;color:var(--ch4-text)!important;
 border:1px solid #314360!important;border-radius:7px!important;
 box-shadow:0 12px 28px rgba(0,0,0,.26)!important
}
.popover.popover-user-notifications .popover-title{
 background:#101b30!important;color:white!important;
 padding:13px 16px!important;border:0!important;
 font-weight:700!important;font-size:16px!important
}
.popover.popover-user-notifications .popover-content{
 padding:0!important;background:var(--ch4-panel)!important;color:white!important;
 border:0!important;border-radius:0 0 7px 7px!important;overflow:hidden!important
}
.popover.popover-user-notifications .popover-content>.clientalert{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 background:var(--ch4-panel)!important;color:#eff6ff!important;
 border:0!important;border-bottom:1px solid #30415a!important;
 margin:0!important;padding:13px 16px!important;
 font-size:13px!important;font-weight:500!important;line-height:1.6!important;
 white-space:normal!important
}
.popover.popover-user-notifications .popover-content>.clientalert:last-child{
 border-bottom:0!important
}
.popover.popover-user-notifications .popover-content>.clientalert:hover{
 background:#21334e!important;color:#fff!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn{
 align-self:flex-end!important;display:inline-flex!important;align-items:center!important;
 justify-content:center!important;margin:12px 0 0!important;
 background:var(--ch4-green)!important;color:#fff!important;
 border:1px solid var(--ch4-green)!important;border-radius:5px!important;
 min-height:32px!important;padding:6px 14px!important;
 font-weight:650!important;font-size:12px!important;box-shadow:none!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn:hover,
.popover.popover-user-notifications .popover-content .clientalert>a.btn:focus{
 background:#11803c!important;color:white!important;border-color:#11803c!important
}
.popover.popover-user-notifications .popover-content .clientalert>a.btn:focus-visible{
 outline:2px solid #8edab1!important;outline-offset:2px!important
}
.popover.popover-user-notifications .arrow:after{
 border-bottom-color:#101b30!important
}
/* Outra fonte de contraste branco no estado hover herdado do WHMCS */
.popover.popover-user-notifications :is(.clientalert:hover,.clientalert:focus-within) {
 color:#f0f7ff!important;background:#21334e!important
}

/* 06 | Responsivo: estados de faturas e notificações continuam legíveis */
@media(max-width:767px){
 #main-body #tableInvoicesList tbody td :is(.label.status-unpaid,.label.status-paid){
  min-width:98px!important;padding:8px 6px!important;font-size:11px!important
 }
 #main-body .client-home-panels .panel[menuitemname="Recent Support Tickets"]>.list-group{max-height:170px!important}
 .popover.popover-user-notifications{max-width:calc(100vw - 20px)!important}
}