/*
 * ComercialHost | Refinamento visual 2026 — Módulos do cliente
 * 26/10/2026 | Versão 1.0.0
 * Arquivo ADITIVO e isolado. Não substituir custom.css, all.min.css ou CSS de terceiros.
 * Escopo: WHMCS Six / tabelas #table{Invoices,Tickets,Domains,Services}List
 *         e formulário #inputMessage. Sem alteração de faturas ou lógica de negócio.
 */
:root {
  --ch26-navy: #101a30;
  --ch26-surface: #151f35;
  --ch26-surface-alt: #1a2943;
  --ch26-line: #293955;
  --ch26-text: #edf2fa;
  --ch26-muted: #b7c5dc;
  --ch26-blue: #2563eb;
  --ch26-blue-light: #4d91ff;
  --ch26-green: #16a34a;
  --ch26-red: #ef4444;
  --ch26-radius: 6px;
}

/* 01 — QUATRO LISTAS: somente os IDs reais auditados no WHMCS. */
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) {
  background: var(--ch26-surface) !important;
  color: var(--ch26-text) !important;
  border: 1px solid var(--ch26-line) !important;
  border-radius: var(--ch26-radius) !important;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
  font-size: 14px !important;
}

/* 02 — Barra de registros/pesquisa: mesmo azul-marinho do restante do layout. */
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .listtable {
  background: var(--ch26-surface-alt) !important;
  border-color: var(--ch26-line) !important;
  color: var(--ch26-text) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  min-height: 49px;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .dataTables_filter {
  background: transparent !important;
  color: var(--ch26-muted) !important;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .dataTables_filter input[type="search"] {
  background: #10192b !important;
  color: var(--ch26-text) !important;
  border: 1px solid #334866 !important;
  border-radius: var(--ch26-radius) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  height: 37px;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .dataTables_filter input::placeholder {
  color: #9aaecb !important;
  opacity: 1;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper) table,
#main-body #tableServicesList_wrapper table {
  margin: 0 !important;
  background: var(--ch26-surface) !important;
  color: var(--ch26-text) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 03 — Cabeçalhos uniformes; remover apenas as cores dissonantes dessas listas. */
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) thead,
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) thead tr,
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) thead th {
  background: #111b2e !important;
  color: #f2f6fe !important;
  border-color: var(--ch26-line) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 14px 12px !important;
  line-height: 1.45 !important;
  vertical-align: middle;
}

/* 04 — Linhas legíveis, contraste real e hover discreto (não brilhos). */
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody tr,
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td {
  background: var(--ch26-surface) !important;
  color: var(--ch26-text) !important;
  border-color: var(--ch26-line) !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody tr:nth-child(even),
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody tr:nth-child(even) td {
  background: #18243c !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody tr:hover td {
  background: #1c2d4b !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td {
  padding: 12px 12px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  vertical-align: middle !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td strong,
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td span:not(.label):not(.status) {
  color: inherit;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td a:not(.btn) {
  color: #65a7ff !important;
  font-weight: 600;
  text-decoration: none !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td a:not(.btn):hover {
  color: #9fc7ff !important;
  text-decoration: underline !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td .text-muted,
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) tbody td small {
  color: var(--ch26-muted) !important;
  font-size: 12.5px;
}

/* 05 — Status retangulares, raio de 5px, fiel ao modelo das faturas PDF. */
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) .label.status {
  display: inline-block !important;
  min-width: 98px;
  width: auto !important;
  max-width: 100%;
  border-radius: 5px !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  background: #52617a !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: none !important;
}
#main-body :is(#tableInvoicesList, #tableTicketsList, #tableDomainsList, #tableServicesList) .label.status :is(span, a, strong) {
  color: #fff !important;
  font-size: inherit !important;
}
#main-body #tableInvoicesList .label.status-paid,
#main-body #tableInvoicesList .label.status-Paid,
#main-body :is(#tableTicketsList, #tableServicesList, #tableDomainsList) .label.status-active,
#main-body #tableTicketsList .label.status-open {
  background: #168f45 !important;
}
#main-body #tableInvoicesList .label.status-unpaid,
#main-body #tableInvoicesList .label.status-Unpaid,
#main-body #tableTicketsList .label.status-answered,
#main-body #tableTicketsList .label.status-customer-reply {
  background: #2563eb !important;
}
#main-body #tableInvoicesList .label.status-overdue,
#main-body #tableInvoicesList .label.status-Overdue,
#main-body #tableInvoicesList .label.status-cancelled {
  background: #dc3d44 !important;
}
#main-body :is(#tableTicketsList, #tableServicesList, #tableDomainsList) .label:is(.status-closed,.status-terminated,.status-cancelled,.status-suspended) {
  background: #59657b !important;
}

/* 06 — Paginação e quantidade de registros sem caixa branca/quadrada. */
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) :is(.dataTables_info,.dataTables_length,.dataTables_paginate) {
  color: var(--ch26-muted) !important;
  font-size: 13px !important;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .dataTables_length select {
  background: #10192b !important;
  color: var(--ch26-text) !important;
  border: 1px solid var(--ch26-line) !important;
  border-radius: 5px !important;
  padding: 5px 8px;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .pagination > li > a,
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .pagination > li > span {
  background: #17243b !important;
  color: #e9f0fc !important;
  border: 1px solid var(--ch26-line) !important;
  border-radius: 5px !important;
  margin: 0 2px !important;
  min-width: 32px;
  text-align: center;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .pagination > .active > a,
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .pagination > .active > span {
  background: var(--ch26-blue) !important;
  border-color: var(--ch26-blue) !important;
  color: #fff !important;
}
#main-body :is(#tableInvoicesList_wrapper, #tableTicketsList_wrapper, #tableDomainsList_wrapper, #tableServicesList_wrapper) .pagination > li:not(.active) > a:hover {
  background: #253d61 !important;
}

/* 07 — Estados vazios das tabelas, inclusive Meus Domínios. */
#main-body :is(#tableDomainsList,#tableInvoicesList,#tableTicketsList,#tableServicesList) td.dataTables_empty {
  color: var(--ch26-muted) !important;
  text-align: center;
  padding: 34px 16px !important;
  font-size: 14px !important;
}

/* 08 — Breadcrumb e cabeçalhos apenas das páginas com listas. */
#main-body:has(:is(#tableInvoicesList,#tableTicketsList,#tableDomainsList,#tableServicesList)) .header-lined .breadcrumb {
  background: #171f33 !important;
  border: 1px solid var(--ch26-line) !important;
  border-radius: var(--ch26-radius) !important;
  color: var(--ch26-muted) !important;
  font-size: 12px !important;
  padding: 11px 14px !important;
}
#main-body:has(:is(#tableInvoicesList,#tableTicketsList,#tableDomainsList,#tableServicesList)) .header-lined > h1 > small {
  color: var(--ch26-muted) !important;
}
#main-body:has(:is(#tableInvoicesList,#tableTicketsList,#tableDomainsList,#tableServicesList)) .sidebar .panel {
  border: 1px solid var(--ch26-line) !important;
  border-radius: var(--ch26-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* 09 — Limita botões auxiliares às tabelas, mantém Pagar Tudo intacto. */
#main-body :is(#tableInvoicesList_wrapper,#tableTicketsList_wrapper,#tableDomainsList_wrapper,#tableServicesList_wrapper) .btn {
  border-radius: var(--ch26-radius) !important;
  font-size: 12.5px !important;
  padding: 7px 11px !important;
  box-shadow: none !important;
}
#main-body :is(#tableInvoicesList_wrapper,#tableTicketsList_wrapper,#tableDomainsList_wrapper,#tableServicesList_wrapper) .btn-info {
  background: var(--ch26-blue) !important;
  border-color: var(--ch26-blue) !important;
  color: white !important;
}

/* 10 — Formulário Enviar Ticket, isolado pela presença de #inputMessage. */
#main-body:has(#inputMessage) .header-lined .breadcrumb {
  background: #171f33 !important;
  color: var(--ch26-muted) !important;
  border: 1px solid var(--ch26-line) !important;
  border-radius: var(--ch26-radius) !important;
  padding: 11px 14px !important;
}
#main-body form:has(#inputMessage) .row:has(#inputName),
#main-body form:has(#inputMessage) .row:has(#inputDepartment) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 0 14px !important;
}
#main-body form:has(#inputMessage) .row:has(#inputDepartment) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#main-body form:has(#inputMessage) .row:has(#inputSubject) {
  display: block !important;
  margin-bottom: 14px !important;
}
#main-body form:has(#inputMessage) :is(.row:has(#inputName),.row:has(#inputSubject),.row:has(#inputDepartment)) > .form-group {
  width: 100% !important;
  float: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
#main-body form:has(#inputMessage) label {
  color: var(--ch26-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
}
#main-body form:has(#inputMessage) :is(input.form-control,select.form-control,textarea.form-control) {
  color: var(--ch26-text) !important;
  background: #161f32 !important;
  border: 1px solid #34435c !important;
  border-radius: var(--ch26-radius) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  min-height: 43px;
}
#main-body form:has(#inputMessage) :is(input,select,textarea).form-control:focus {
  border-color: #488fff !important;
  outline: 2px solid rgba(72,143,255,.16) !important;
  outline-offset: 0;
}
#main-body form:has(#inputMessage) :is(input,select).form-control:disabled {
  color: #c8d3e7 !important;
  opacity: 1;
}
#main-body form:has(#inputMessage) .md-editor {
  background: #161f32 !important;
  color: var(--ch26-text) !important;
  border: 1px solid #34435c !important;
  border-radius: var(--ch26-radius) !important;
  overflow: hidden;
}
#main-body form:has(#inputMessage) .md-editor > .md-header {
  background: #1a263d !important;
  border: 0 !important;
  border-bottom: 1px solid #34435c !important;
  padding: 10px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#main-body form:has(#inputMessage) .md-header .btn {
  color: #dce8fa !important;
  background: #223550 !important;
  border: 1px solid #344968 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
}
#main-body form:has(#inputMessage) .md-header .btn:hover,
#main-body form:has(#inputMessage) .md-header .btn:focus {
  background: #31527e !important;
  color: #fff !important;
}
#main-body form:has(#inputMessage) .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] {
  background: #214b8d !important;
  border-color: #3a69aa !important;
}
#main-body form:has(#inputMessage) .md-editor #inputMessage {
  min-height: 170px;
  background: #121d31 !important;
  color: var(--ch26-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px !important;
  line-height: 1.6;
  resize: vertical;
}
#main-body form:has(#inputMessage) .md-editor .md-footer {
  color: var(--ch26-muted) !important;
  background: #1a263d !important;
  padding: 5px 10px !important;
  border-top: 1px solid #34435c !important;
}
#main-body form:has(#inputMessage) .md-footer * {
  color: var(--ch26-muted) !important;
}
#main-body form:has(#inputMessage) #inputAttachments {
  background: #18243b !important;
  padding: 8px 10px !important;
}
#main-body form:has(#inputMessage) #openTicketSubmit {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #2563eb !important;
  border-radius: var(--ch26-radius) !important;
  padding: 11px 22px !important;
}
#main-body form:has(#inputMessage) a[href="supporttickets.php"].btn {
  background: #1a263d !important;
  color: #edf2fa !important;
  border: 1px solid #34435c !important;
  border-radius: var(--ch26-radius) !important;
  padding: 11px 17px !important;
}

/* 11 — Dropdown principal do cliente. Não altera menus de módulos externos. */
nav#nav.navbar-main .dropdown-menu {
  background: #17233a !important;
  color: var(--ch26-text) !important;
  border: 1px solid #31445f !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-shadow: 0 13px 30px rgba(0,0,0,.24) !important;
}
nav#nav.navbar-main .dropdown-menu > li > a {
  color: #dde8f8 !important;
  background: transparent !important;
  padding: 11px 14px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.35;
}
nav#nav.navbar-main .dropdown-menu > li > a:hover,
nav#nav.navbar-main .dropdown-menu > li > a:focus {
  color: #fff !important;
  background: #24406a !important;
}
nav#nav.navbar-main .dropdown-menu .divider {
  background-color: #31445f !important;
}

/* 12 — Larguras menores: prioridade à leitura e ao teclado. */
@media (max-width: 767px) {
  #main-body form:has(#inputMessage) .row:has(#inputName),
  #main-body form:has(#inputMessage) .row:has(#inputDepartment) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  #main-body :is(#tableInvoicesList_wrapper,#tableTicketsList_wrapper,#tableDomainsList_wrapper,#tableServicesList_wrapper) .listtable {
    padding: 10px 12px !important;
  }
  #main-body :is(#tableInvoicesList,#tableTicketsList,#tableDomainsList,#tableServicesList) tbody td {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
}