/* ComercialHost WHMCS 2026 — segurança da usabilidade mobile (camada v6).
   Aplica apenas às tabelas afetadas e legendas extensas em telas pequenas.
   Mantém HTML original e tabelas DataTables funcionais. */
@media(max-width:767px){
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper,#tableDomainsList_wrapper,#tableQuotesList_wrapper,#tableEmailsList_wrapper) .listtable{
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:#5478ae #192943!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper,#tableDomainsList_wrapper,#tableQuotesList_wrapper,#tableEmailsList_wrapper) .listtable>table.table-list{
    width:max-content!important;min-width:100%!important;max-width:none!important;
  }
  #main-body .checkbox.clearfix .col-sm-6 label>span{
    overflow-wrap:anywhere!important;word-wrap:break-word!important;
  }
  #main-body .ch6-mobile-table-hint{
    display:flex!important;align-items:center!important;gap:7px!important;
    padding:9px 13px!important;margin:0!important;
    background:#182943!important;color:#bcd6f8!important;
    font-size:12px!important;font-weight:500!important;
    border-bottom:1px solid #304665!important;
    line-height:1.4!important;
  }
  #main-body .ch6-mobile-table-hint::before{
    content:"↔"!important;font-size:15px!important;color:#85b5f1!important;
  }
}
@media(min-width:768px){#main-body .ch6-mobile-table-hint{display:none!important}}
@media(max-width:1199px){
 #main-body .header-lined h1 small{
   white-space:normal!important;display:block!important;
   max-width:100%!important;width:auto!important;
   overflow:visible!important;overflow-wrap:break-word!important;
   line-height:1.45!important;
 }
}
/* O assunto do histórico de e-mails não deve criar uma tabela de 1.000px no celular. */
@media(max-width:767px){
 #main-body #tableEmailsList_wrapper .listtable>table.table-list{
   width:400px!important;min-width:400px!important;max-width:400px!important;
   table-layout:fixed!important;
 }
 #main-body #tableEmailsList_wrapper .listtable>table.table-list td:nth-child(2){
   overflow-wrap:anywhere!important;word-break:normal!important
 }
}
@media(max-width:767px){
  #main-body #tableEmailsList_wrapper .listtable{
    overflow-x:visible!important;overflow-y:visible!important;
  }
  #main-body #tableEmailsList_wrapper .listtable>table.table-list{
    width:100%!important;min-width:0!important;max-width:100%!important;
    display:block!important;table-layout:auto!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList thead {
    position:absolute!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;overflow:hidden!important;
    clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody{
    display:block!important;width:100%!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    width:100%!important;max-width:100%!important;
    gap:0!important;padding:9px 11px 13px!important;
    border-bottom:1px solid #2f4260!important;
    background:#15213a!important;box-sizing:border-box!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr:nth-child(even){
    background:#1b2a44!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr td{
    display:block!important;min-width:0!important;
    border:0!important;background:transparent!important;
    padding:7px 4px!important;margin:0!important;
    height:auto!important;font-size:13px!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr td:first-child {
    order:1!important;flex:1 1 40%!important;width:auto!important;
    text-align:left!important;font-size:12px!important;white-space:normal!important;
    color:#bbcce4!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr td:last-child {
    order:2!important;flex:0 0 auto!important;width:auto!important;
    margin-left:auto!important;text-align:right!important;
    padding:5px 0!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr td:nth-child(2){
    order:3!important;flex:1 1 100%!important;width:100%!important;
    text-align:left!important;padding:7px 4px!important;
    font-size:13.5px!important;line-height:1.5!important;
    overflow-wrap:anywhere!important;white-space:normal!important;
  }
  #main-body #tableEmailsList_wrapper #tableEmailsList tbody tr td.dataTables_empty{
    flex:1 1 100%!important;order:1!important;width:100%!important;text-align:center!important;
  }
  #main-body #tableEmailsList_wrapper .ch6-mobile-table-hint{display:none!important}
}
@media(max-width:767px){
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable{
    overflow-x:visible!important;overflow-y:visible!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list{
    width:100%!important;min-width:0!important;max-width:100%!important;
    display:block!important;table-layout:auto!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list thead{
    position:absolute!important;width:1px!important;height:1px!important;
    overflow:hidden!important;clip-path:inset(50%)!important;
    white-space:nowrap!important;margin:-1px!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list tbody{
    display:block!important;width:100%!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list tbody tr{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:5px 12px!important;align-items:start!important;
    width:100%!important;max-width:100%!important;
    border-bottom:1px solid #32425f!important;
    padding:13px 14px!important;
    box-sizing:border-box!important;
    background:#16243c!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list tbody tr:nth-child(even){
    background:#1c2a43!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list tbody tr>td{
    display:block!important;width:auto!important;min-width:0!important;
    border:0!important;background:transparent!important;
    padding:4px 0!important;color:#eef4ff!important;text-align:left!important;
    overflow-wrap:anywhere!important;line-height:1.5!important;font-size:13px!important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .listtable>table.table-list tbody tr>td::before{
    display:block!important;font-size:11px!important;line-height:1.4!important;
    color:#a7bdda!important;font-weight:500!important;margin-bottom:3px!important;
  }
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:first-child{
    font-weight:700!important;font-size:15px!important
  }
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:first-child::before{content:"Fatura nº"!important}
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(2)::before{content:"Emissão"!important}
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(3)::before{content:"Vencimento"!important}
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(4)::before{content:"Valor"!important}
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(5){
    grid-column:1/-1!important;display:flex!important;justify-content:flex-end!important;
    align-items:center!important;margin-top:3px!important;border:0!important;
  }
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(5)::before{content:none!important}
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td:nth-child(5) .label.status{
    width:100%!important;min-width:0!important;min-height:36px!important;
    border-radius:5px!important;font-size:12.5px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important
  }
  #main-body #tableInvoicesList_wrapper #tableInvoicesList tbody tr>td.responsive-edit-button{
    display:none!important;
  }
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:first-child{
    grid-column:1/-1!important;font-size:14px!important;font-weight:600!important;
    padding-bottom:8px!important
  }
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:first-child::before{content:"Serviço contratado"!important}
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:nth-child(2)::before{content:"Valor recorrente"!important}
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:nth-child(3)::before{content:"Próximo vencimento"!important}
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:nth-child(4){
    grid-column:1/-1!important;text-align:right!important;display:flex!important;
    align-items:center!important;justify-content:flex-end!important;margin-top:3px!important
  }
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:nth-child(4)::before{content:none!important}
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td:nth-child(4) .label{
    width:100%!important;min-width:0!important;border-radius:5px!important
  }
  #main-body #tableServicesList_wrapper #tableServicesList tbody tr>td.responsive-edit-button{
    display:none!important
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableServicesList_wrapper) .ch6-mobile-table-hint{display:none!important}
}