/* ==========================================================================
   Paya Design System — Bootstrap 3 components
   --------------------------------------------------------------------------
   Perfex runs Bootstrap 3.4.0. The brand book's component specs are written
   for a modern component library, so each one is mapped onto the BS3 class
   that plays the same role.

   Two rules held throughout:

   1. Only var(--paya-*) values. No literal hex, px or ms.
   2. Never `overflow: hidden` on a container that can host a dropdown — a
      radius rule with overflow clipping is the classic way select2 and
      Bootstrap dropdowns get cut off inside a panel.

   The orange accent is deliberately NOT bound to any .btn-* class. The brand
   book allows it once per composition; a class Perfex renders thirty times a
   page cannot honour that. It is exposed as .paya-accent for deliberate use.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Surfaces — .panel_s is Perfex's own card and far more common than .panel
   -------------------------------------------------------------------------- */

body.app.admin .panel_s,
body.app.admin .panel,
body.customers .panel_s,
body.customers .panel {
  background-color: var(--paya-surface-raised);
  border: var(--paya-border-width) solid var(--paya-border-default);
  border-radius: var(--paya-radius-lg);
  box-shadow: var(--paya-shadow-sm);
  margin-bottom: var(--paya-space-6);
}

body.app.admin .panel_s > .panel-body,
body.app.admin .panel > .panel-body,
body.customers .panel_s > .panel-body,
body.customers .panel > .panel-body {
  padding: var(--paya-space-6);
}

body.app.admin .panel-heading,
body.customers .panel-heading {
  background-color: transparent;
  border-bottom: var(--paya-border-width) solid var(--paya-border-default);
  color: var(--paya-text-primary);
  font-weight: var(--paya-weight-body-medium);
  padding: var(--paya-space-4) var(--paya-space-6);
  border-top-left-radius: var(--paya-radius-lg);
  border-top-right-radius: var(--paya-radius-lg);
}

body.app.admin .panel-footer,
body.customers .panel-footer {
  background-color: var(--paya-surface-sunken);
  border-top: var(--paya-border-width) solid var(--paya-border-default);
  padding: var(--paya-space-4) var(--paya-space-6);
}

body.app.admin .panel_s .hr-panel-heading,
body.app.admin .panel_s .hr-panel-separator,
body.customers .panel_s .hr-panel-heading {
  border-color: var(--paya-border-default);
}

body.app.admin .well, body.customers .well {
  background-color: var(--paya-surface-sunken);
  border: var(--paya-border-width) solid var(--paya-border-default);
  border-radius: var(--paya-radius-md);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------------
   Perfex uses .btn-info as its de-facto primary action, so it maps to the
   brand primary alongside .btn-primary rather than to the info semantic.
   -------------------------------------------------------------------------- */

body.app.admin .btn, body.customers .btn {
  font-family: var(--paya-font-body);
  font-size: var(--paya-text-base);
  font-weight: var(--paya-weight-body-medium);
  line-height: 1;
  padding: 11px var(--paya-space-5);
  border-radius: var(--paya-radius-md);
  border: var(--paya-border-width) solid transparent;
  transition: background-color var(--paya-duration-fast) var(--paya-ease-standard),
              color var(--paya-duration-fast) var(--paya-ease-standard),
              border-color var(--paya-duration-fast) var(--paya-ease-standard);
  text-shadow: none;
  box-shadow: none;
}

body.app.admin .btn-sm, body.app.admin .btn-xs,
body.customers .btn-sm, body.customers .btn-xs {
  padding: 8px var(--paya-space-4);
  font-size: var(--paya-text-body-sm);
}

body.app.admin .btn-lg, body.customers .btn-lg {
  padding: 14px var(--paya-space-6);
  font-size: var(--paya-text-body-lg);
}

body.app.admin .btn:focus-visible, body.customers .btn:focus-visible {
  box-shadow: var(--paya-shadow-focus);
}

body.app.admin .btn-primary, body.app.admin .btn-info,
body.customers .btn-primary, body.customers .btn-info {
  background-color: var(--paya-accent-primary);
  border-color: var(--paya-accent-primary);
  color: var(--paya-text-on-accent);
}

body.app.admin .btn-primary:hover, body.app.admin .btn-primary:focus, body.app.admin .btn-primary:active,
body.app.admin .btn-info:hover, body.app.admin .btn-info:focus, body.app.admin .btn-info:active,
body.customers .btn-primary:hover, body.customers .btn-primary:focus,
body.customers .btn-info:hover, body.customers .btn-info:focus {
  background-color: var(--paya-accent-primary-hover);
  border-color: var(--paya-accent-primary-hover);
  color: var(--paya-text-on-accent);
}

/* .btn-default is the Bootstrap 3 workhorse; the brand book's outline variant. */
body.app.admin .btn-default, body.customers .btn-default {
  background-color: transparent;
  border-color: var(--paya-border-strong);
  color: var(--paya-text-primary);
}

body.app.admin .btn-default:hover, body.app.admin .btn-default:focus,
body.customers .btn-default:hover, body.customers .btn-default:focus {
  background-color: var(--paya-surface-sunken);
  border-color: var(--paya-border-strong);
  color: var(--paya-text-primary);
}

body.app.admin .btn-success, body.customers .btn-success {
  background-color: var(--paya-success);
  border-color: var(--paya-success);
  color: var(--paya-text-on-accent);
}

body.app.admin .btn-danger, body.customers .btn-danger {
  background-color: var(--paya-danger);
  border-color: var(--paya-danger);
  color: var(--paya-text-on-accent);
}

body.app.admin .btn-warning, body.customers .btn-warning {
  background-color: var(--paya-warning);
  border-color: var(--paya-warning);
  color: var(--paya-text-on-accent);
}

body.app.admin .btn-link, body.customers .btn-link {
  color: var(--paya-accent-primary-text);
  border-color: transparent;
}

body.app.admin .btn.disabled, body.app.admin .btn[disabled],
body.customers .btn.disabled, body.customers .btn[disabled] {
  opacity: 0.45;
  box-shadow: none;
}

/* The accent, for deliberate one-per-view use. */
body.app.admin .paya-accent, body.customers .paya-accent {
  background-color: var(--paya-accent-secondary);
  border-color: var(--paya-accent-secondary);
  color: var(--paya-text-on-accent);
}

body.app.admin .paya-accent:hover, body.customers .paya-accent:hover {
  background-color: var(--paya-accent-secondary-hover);
  border-color: var(--paya-accent-secondary-hover);
}

/* --------------------------------------------------------------------------
   3. Forms
   -------------------------------------------------------------------------- */

body.app.admin .form-control, body.customers .form-control {
  height: auto;
  padding: 10px var(--paya-space-4);
  font-size: var(--paya-text-base);
  font-family: var(--paya-font-body);
  color: var(--paya-text-primary);
  background-color: var(--paya-surface-raised);
  border: var(--paya-border-width) solid var(--paya-border-default);
  border-radius: var(--paya-radius-md);
  box-shadow: none;
  transition: border-color var(--paya-duration-fast) var(--paya-ease-standard),
              box-shadow var(--paya-duration-fast) var(--paya-ease-standard);
}

body.app.admin .form-control:focus, body.customers .form-control:focus {
  border-color: var(--paya-accent-primary);
  box-shadow: var(--paya-shadow-focus);
}

body.app.admin .form-control::placeholder, body.customers .form-control::placeholder {
  color: var(--paya-text-secondary);
  opacity: 0.75;
}

body.app.admin .form-control[disabled], body.app.admin .form-control[readonly],
body.customers .form-control[disabled], body.customers .form-control[readonly] {
  background-color: var(--paya-surface-sunken);
  color: var(--paya-text-secondary);
  opacity: 1;
}

body.app.admin label, body.app.admin .control-label,
body.customers label, body.customers .control-label {
  color: var(--paya-text-primary);
  font-size: var(--paya-text-body-sm);
  font-weight: var(--paya-weight-body-medium);
  margin-bottom: var(--paya-space-2);
}

body.app.admin .input-group-addon, body.customers .input-group-addon {
  background-color: var(--paya-surface-sunken);
  border: var(--paya-border-width) solid var(--paya-border-default);
  color: var(--paya-text-secondary);
  border-radius: var(--paya-radius-md);
}

body.app.admin .has-error .form-control, body.customers .has-error .form-control { border-color: var(--paya-danger); }
body.app.admin .has-error .control-label, body.customers .has-error .control-label { color: var(--paya-danger); }
body.app.admin .has-success .form-control { border-color: var(--paya-success); }
body.app.admin .has-warning .form-control { border-color: var(--paya-warning); }

/* --------------------------------------------------------------------------
   4. Tables
   --------------------------------------------------------------------------
   Highest-risk area: DataTables measures column widths at init, so anything
   that changes cell metrics after that leaves headers misaligned with bodies.
   Padding stays modest and the base font size is the compact density for
   exactly this reason.
   -------------------------------------------------------------------------- */

body.app.admin .table, body.customers .table {
  color: var(--paya-text-primary);
  border-color: var(--paya-border-default);
}

body.app.admin .table > thead > tr > th,
body.customers .table > thead > tr > th {
  padding: var(--paya-space-3) var(--paya-space-4);
  background-color: var(--paya-surface-sunken);
  color: var(--paya-text-primary);
  font-weight: var(--paya-weight-body-medium);
  font-size: var(--paya-text-caption);
  letter-spacing: var(--paya-tracking-wide);
  border-bottom: var(--paya-border-width) solid var(--paya-border-default);
  vertical-align: middle;
  white-space: nowrap;
}

body.app.admin .table > tbody > tr > td,
body.customers .table > tbody > tr > td {
  padding: var(--paya-space-3) var(--paya-space-4);
  border-top: var(--paya-border-width) solid var(--paya-border-default);
  color: var(--paya-text-secondary);
  vertical-align: middle;
}

body.app.admin .table > tbody > tr > td:first-child,
body.customers .table > tbody > tr > td:first-child {
  color: var(--paya-text-primary);
  font-weight: var(--paya-weight-body-medium);
}

body.app.admin .table-hover > tbody > tr:hover > td,
body.customers .table-hover > tbody > tr:hover > td {
  background-color: var(--paya-purple-50);
}

body.app.admin .table-striped > tbody > tr:nth-of-type(odd) > td,
body.customers .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--paya-surface-sunken);
}

body.app.admin .table-bordered,
body.app.admin .table-bordered > thead > tr > th,
body.app.admin .table-bordered > tbody > tr > td {
  border-color: var(--paya-border-default);
}

/* --------------------------------------------------------------------------
   5. Badges and labels
   --------------------------------------------------------------------------
   Brand book Badge: pill, tinted background with saturated text. Far more
   readable in a dense CRM table than a wall of solid colour.
   -------------------------------------------------------------------------- */

body.app.admin .label, body.app.admin .badge,
body.customers .label, body.customers .badge {
  display: inline-block;
  padding: 3px var(--paya-space-3);
  font-size: var(--paya-text-caption);
  font-weight: var(--paya-weight-body-medium);
  line-height: 1.4;
  border-radius: var(--paya-radius-pill);
  text-shadow: none;
}

body.app.admin .label-default, body.customers .label-default {
  background-color: var(--paya-surface-sunken); color: var(--paya-text-secondary);
}
body.app.admin .label-primary, body.app.admin .label-info,
body.customers .label-primary, body.customers .label-info {
  background-color: var(--paya-info-tint); color: var(--paya-accent-primary-text);
}
body.app.admin .label-success, body.customers .label-success {
  background-color: var(--paya-success-tint); color: var(--paya-success);
}
body.app.admin .label-warning, body.customers .label-warning {
  background-color: var(--paya-warning-tint); color: var(--paya-orange-700);
}
body.app.admin .label-danger, body.customers .label-danger {
  background-color: var(--paya-danger-tint); color: var(--paya-danger);
}

body.app.admin .badge, body.customers .badge {
  background-color: var(--paya-accent-primary);
  color: var(--paya-text-on-accent);
}

/* --------------------------------------------------------------------------
   6. Alerts
   -------------------------------------------------------------------------- */

body.app.admin .alert, body.customers .alert {
  border: var(--paya-border-width) solid transparent;
  border-radius: var(--paya-radius-md);
  padding: var(--paya-space-4);
  font-size: var(--paya-text-base);
}

body.app.admin .alert-info, body.customers .alert-info {
  background-color: var(--paya-info-tint); border-color: var(--paya-purple-200); color: var(--paya-purple-700);
}
body.app.admin .alert-success, body.customers .alert-success {
  background-color: var(--paya-success-tint); border-color: #BBF7D0; color: #166534;
}
body.app.admin .alert-warning, body.customers .alert-warning {
  background-color: var(--paya-warning-tint); border-color: var(--paya-orange-200); color: #7C3D02;
}
body.app.admin .alert-danger, body.customers .alert-danger {
  background-color: var(--paya-danger-tint); border-color: #FECACA; color: #991B1B;
}

/* --------------------------------------------------------------------------
   7. Tabs and pills
   -------------------------------------------------------------------------- */

body.app.admin .nav-tabs, body.customers .nav-tabs {
  border-bottom: var(--paya-border-width) solid var(--paya-border-default);
}

body.app.admin .nav-tabs > li > a, body.customers .nav-tabs > li > a {
  color: var(--paya-text-secondary);
  font-weight: var(--paya-weight-body);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-right: 0;
  padding: 10px var(--paya-space-5);
  transition: color var(--paya-duration-fast) var(--paya-ease-standard);
}

body.app.admin .nav-tabs > li > a:hover, body.customers .nav-tabs > li > a:hover {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--paya-border-strong);
  color: var(--paya-text-primary);
}

body.app.admin .nav-tabs > li.active > a,
body.app.admin .nav-tabs > li.active > a:hover,
body.app.admin .nav-tabs > li.active > a:focus,
body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li.active > a:hover {
  color: var(--paya-accent-primary-text);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--paya-accent-primary);
  font-weight: var(--paya-weight-body-medium);
}

body.app.admin .nav-pills > li.active > a,
body.app.admin .nav-pills > li.active > a:hover,
body.customers .nav-pills > li.active > a {
  background-color: var(--paya-accent-primary);
  color: var(--paya-text-on-accent);
  border-radius: var(--paya-radius-md);
}

/* --------------------------------------------------------------------------
   8. Modals
   -------------------------------------------------------------------------- */

body.app.admin .modal-content, body.customers .modal-content {
  background-color: var(--paya-surface-raised);
  border: 0;
  border-radius: var(--paya-radius-lg);
  box-shadow: var(--paya-shadow-lg);
}

body.app.admin .modal-header, body.customers .modal-header {
  border-bottom: var(--paya-border-width) solid var(--paya-border-default);
  padding: var(--paya-space-4) var(--paya-space-5);
}

body.app.admin .modal-header .modal-title, body.customers .modal-header .modal-title {
  font-family: var(--paya-font-heading);
  font-size: var(--paya-text-h4);
  font-weight: var(--paya-weight-heading);
  color: var(--paya-text-primary);
}

body.app.admin .modal-body, body.customers .modal-body { padding: var(--paya-space-5); }

body.app.admin .modal-footer, body.customers .modal-footer {
  border-top: var(--paya-border-width) solid var(--paya-border-default);
  padding: var(--paya-space-4) var(--paya-space-5);
}

body.app.admin .modal-backdrop.in, body.customers .modal-backdrop.in {
  background-color: var(--paya-brand-ink);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   9. Dropdowns, tooltips, popovers
   -------------------------------------------------------------------------- */

body.app.admin .dropdown-menu, body.customers .dropdown-menu {
  background-color: var(--paya-surface-raised);
  border: var(--paya-border-width) solid var(--paya-border-default);
  border-radius: var(--paya-radius-md);
  box-shadow: var(--paya-shadow-md);
  padding: var(--paya-space-2) 0;
  font-size: var(--paya-text-base);
}

body.app.admin .dropdown-menu > li > a, body.customers .dropdown-menu > li > a {
  color: var(--paya-text-primary);
  padding: var(--paya-space-2) var(--paya-space-4);
  transition: background-color var(--paya-duration-fast) var(--paya-ease-standard);
}

body.app.admin .dropdown-menu > li > a:hover,
body.app.admin .dropdown-menu > li > a:focus,
body.customers .dropdown-menu > li > a:hover {
  background-color: var(--paya-surface-sunken);
  color: var(--paya-text-primary);
}

body.app.admin .dropdown-menu > .active > a,
body.customers .dropdown-menu > .active > a {
  background-color: var(--paya-info-tint);
  color: var(--paya-accent-primary-text);
}

body.app.admin .dropdown-menu .divider, body.customers .dropdown-menu .divider {
  background-color: var(--paya-border-default);
}

body.app.admin .tooltip-inner, body.customers .tooltip-inner {
  background-color: var(--paya-brand-ink);
  color: var(--paya-text-on-inverse);
  border-radius: var(--paya-radius-sm);
  padding: 6px 10px;
  font-size: var(--paya-text-caption);
}

body.app.admin .tooltip.top .tooltip-arrow    { border-top-color: var(--paya-brand-ink); }
body.app.admin .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--paya-brand-ink); }
body.app.admin .tooltip.left .tooltip-arrow   { border-left-color: var(--paya-brand-ink); }
body.app.admin .tooltip.right .tooltip-arrow  { border-right-color: var(--paya-brand-ink); }

body.app.admin .popover, body.customers .popover {
  background-color: var(--paya-surface-raised);
  border: var(--paya-border-width) solid var(--paya-border-default);
  border-radius: var(--paya-radius-md);
  box-shadow: var(--paya-shadow-lg);
}

body.app.admin .popover-title, body.customers .popover-title {
  background-color: var(--paya-surface-sunken);
  border-bottom-color: var(--paya-border-default);
  color: var(--paya-text-primary);
  font-weight: var(--paya-weight-body-medium);
}

/* --------------------------------------------------------------------------
   10. Pagination
   -------------------------------------------------------------------------- */

body.app.admin .pagination > li > a, body.app.admin .pagination > li > span,
body.customers .pagination > li > a, body.customers .pagination > li > span {
  color: var(--paya-text-secondary);
  background-color: transparent;
  border: var(--paya-border-width) solid var(--paya-border-default);
  margin: 0 2px;
  border-radius: var(--paya-radius-sm);
}

body.app.admin .pagination > .active > a,
body.app.admin .pagination > .active > span,
body.customers .pagination > .active > a {
  background-color: var(--paya-accent-primary);
  border-color: var(--paya-accent-primary);
  color: var(--paya-text-on-accent);
}