/* ==========================================================================
   Paya Design System — client portal
   --------------------------------------------------------------------------
   The portal shares ds-base and ds-bootstrap with the admin panel; this file
   covers only what is specific to the customer-facing theme.

   The portal runs at the 'comfortable' density rather than the admin's
   'compact', because it has none of the dense DataTables the admin panel is
   built around — it is closer to the brochure scale the brand book assumes.
   ========================================================================== */

body.customers #wrapper,
body.customers .content {
  background-color: var(--paya-surface-page);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

body.customers .navbar,
body.customers .navbar-default {
  background-color: var(--paya-surface-raised);
  border: 0;
  border-bottom: var(--paya-border-width) solid var(--paya-border-default);
  box-shadow: none;
}

body.customers .navbar-default .navbar-nav > li > a {
  color: var(--paya-text-secondary);
  font-weight: var(--paya-weight-body-medium);
  font-size: var(--paya-text-body-sm);
  border-radius: var(--paya-radius-md);
  transition: background-color var(--paya-duration-fast) var(--paya-ease-standard),
              color var(--paya-duration-fast) var(--paya-ease-standard);
}

body.customers .navbar-default .navbar-nav > li > a:hover,
body.customers .navbar-default .navbar-nav > li > a:focus {
  background-color: var(--paya-surface-sunken);
  color: var(--paya-text-primary);
}

body.customers .navbar-default .navbar-nav > .active > a,
body.customers .navbar-default .navbar-nav > .active > a:hover {
  background-color: var(--paya-info-tint);
  color: var(--paya-accent-primary-text);
}

body.customers .navbar-brand,
body.customers .navbar-brand.logo {
  padding-top: var(--paya-space-3);
  padding-bottom: var(--paya-space-3);
}

/* --------------------------------------------------------------------------
   Customer-facing documents
   --------------------------------------------------------------------------
   Invoice, estimate, proposal and contract previews. These get printed, so
   the print block in ds-base.css matters here more than anywhere.
   -------------------------------------------------------------------------- */

body.customers .invoice-html,
body.customers .estimate-html,
body.customers .proposal-html,
body.customers .contract-html {
  background-color: var(--paya-surface-raised);
  border-radius: var(--paya-radius-lg);
  color: var(--paya-text-primary);
}

body.customers .invoice-html .table > thead > tr > th,
body.customers .estimate-html .table > thead > tr > th {
  background-color: var(--paya-surface-sunken);
  color: var(--paya-text-primary);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

body.customers footer,
body.customers .footer {
  background-color: var(--paya-surface-inverse);
  color: var(--paya-text-on-inverse);
  border-top: 0;
}

body.customers footer a,
body.customers .footer a {
  color: var(--paya-gray-300);
}

body.customers footer a:hover,
body.customers .footer a:hover {
  color: var(--paya-brand-white);
}