/*
 * HostGrowth Design System: 02 WHMCS map
 */

html,
body {
  font-family: var(--hg-font-family-sans);
  color: var(--hg-color-text-primary);
  background: var(--hg-color-background-page);
  letter-spacing: var(--hg-letter-spacing);
}

body.primary-bg-color,
.main-content,
.clientarea,
#main-body,
.main-body {
  background: var(--hg-color-background-page);
}

a {
  color: var(--hg-color-link-default);
}

a:hover {
  color: var(--hg-color-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hg-color-text-primary);
  font-family: var(--hg-font-family-sans);
  font-weight: var(--hg-font-weight-semibold);
  letter-spacing: var(--hg-letter-spacing);
}

.main-content p,
.clientarea p,
.text-muted,
.small,
small {
  color: var(--hg-color-text-secondary);
}

.sidebar,
.main-sidebar,
.hg-app-sidebar {
  background: var(--hg-color-surface-primary);
}

.client-home-panels .panel,
.tiles .tile,
.tile,
.panel,
.list-group,
.invoice-container,
.ticket-reply,
.kb-article,
.announcement-single,
.hg-whmcs-card {
  border: 1px solid var(--hg-color-border-default);
  border-radius: var(--hg-radius-card);
  background: var(--hg-color-surface-primary);
  box-shadow: none;
}

.panel > .panel-heading,
.card > .card-header,
.list-group-item:first-child {
  border-top-left-radius: var(--hg-radius-card);
  border-top-right-radius: var(--hg-radius-card);
}

.panel > .panel-footer,
.card > .card-footer,
.list-group-item:last-child {
  border-bottom-right-radius: var(--hg-radius-card);
  border-bottom-left-radius: var(--hg-radius-card);
}

.panel-heading,
.panel-footer,
.card-header,
.card-footer,
.list-group-item {
  border-color: var(--hg-color-border-subtle);
  background: var(--hg-color-surface-primary);
}

.table,
table.table {
  color: var(--hg-color-text-primary);
}

.table thead th,
table.table thead th {
  height: 44px;
  border-bottom: 1px solid var(--hg-color-border-default);
  color: var(--hg-color-text-secondary);
  font-size: var(--hg-font-size-12);
  font-weight: var(--hg-font-weight-semibold);
  letter-spacing: var(--hg-letter-spacing);
}

.table td,
.table th,
table.table td,
table.table th {
  padding: var(--hg-space-3) var(--hg-space-4);
  border-top-color: var(--hg-color-border-subtle);
}

.table-hover tbody tr:hover {
  background-color: var(--hg-color-surface-hover);
}

.label-success,
.badge-success,
.status-active,
.status-paid {
  background: var(--hg-color-status-success-bg);
  color: var(--hg-color-status-success-text);
}

.label-warning,
.badge-warning,
.status-pending,
.status-unpaid {
  background: var(--hg-color-status-warning-bg);
  color: var(--hg-color-status-warning-text);
}

.label-danger,
.badge-danger,
.status-suspended,
.status-fraud,
.status-terminated {
  background: var(--hg-color-status-danger-bg);
  color: var(--hg-color-status-danger-text);
}

.label-default,
.badge-secondary,
.status-cancelled,
.status-closed {
  background: var(--hg-color-status-neutral-bg);
  color: var(--hg-color-status-neutral-text);
}

.alert-success {
  border-color: var(--hg-color-border-success);
  background: var(--hg-color-status-success-bg);
  color: var(--hg-color-status-success-text);
}

.alert-warning {
  border-color: var(--hg-color-border-warning);
  background: var(--hg-color-status-warning-bg);
  color: var(--hg-color-status-warning-text);
}

.alert-danger {
  border-color: var(--hg-color-border-danger);
  background: var(--hg-color-status-danger-bg);
  color: var(--hg-color-status-danger-text);
}

.alert-info {
  border-color: var(--hg-color-blue-200);
  background: var(--hg-color-status-info-bg);
  color: var(--hg-color-status-info-text);
}

.logincontainer,
.logincontainer .card,
.registration-form,
.password-reset-container {
  border-radius: var(--hg-radius-card);
}