/**
 * AfriPay Platform UI — unified typography, buttons, forms, and dropdowns.
 * Loaded after legacy style.css to normalize all portal areas.
 */

/* ------------------------------------------------------------------ typography */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title,
.section-title,
.banner-title,
.widget-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--text-primary);
}

/* Widget / card section headers — smaller than page titles */
.dashboard-header-wrapper .title,
.chart-wrapper .title,
.merchant-panel-header h5,
.card-modern-header h5,
.custom-card .card-header .title {
  font-size: var(--text-section-title);
  font-weight: var(--font-weight-heading);
}

/* Page-level titles */
.merchant-page-header .title,
.dashboard-title-part .title {
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-heading);
}

h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); }
h4 { font-size: var(--heading-4); }
h5 { font-size: var(--heading-5); }
h6 { font-size: var(--heading-6); }

label,
.form-label,
.live-rate-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

/* List row titles — emphasis without default <strong> heaviness */
.dashboard-action-item-copy strong,
.action-item-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-widget-label);
  color: var(--text-primary);
}

code, kbd, pre, samp,
.merchant-dashboard .mono,
.merchant-dashboard code {
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------------ buttons */
.btn--base,
button.btn--base,
a.btn--base,
input.btn--base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.25;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: none;
  background: var(--primary-color, #000);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible {
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.btn--base.btn-sm,
.btn--base.btn--sm,
.btn--sm {
  padding: 6px 14px;
  font-size: var(--font-size-sm);
}

.btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--btn-radius);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-soft);
}

.btn--danger,
.btn.btn--danger {
  background: #ea5455;
  color: #fff;
}

.btn--success,
.btn.btn--success {
  background: #28c76f;
  color: #fff;
}

.btn--warning,
.btn.btn--warning {
  background: #ff9f43;
  color: #fff;
}

.btn--info,
.btn.btn--info {
  background: #1e9ff2;
  color: #fff;
}

/* Bootstrap primary → match platform primary */
.btn-primary {
  font-family: var(--font-heading);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  background: var(--primary-color, #000);
  border-color: var(--primary-color, #000);
}

.btn-primary:hover,
.btn-primary:focus {
  background: color-mix(in srgb, var(--primary-color, #000) 85%, black);
  border-color: color-mix(in srgb, var(--primary-color, #000) 85%, black);
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--btn-radius);
}

/* ------------------------------------------------------------------ form controls */
.form--control,
.form-control,
.form-select,
select.form--control,
select.form-control,
textarea.form--control,
textarea.form-control {
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  font-weight: var(--font-weight-body);
  color: var(--text-primary);
  background-color: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  min-height: var(--control-height);
  padding: 0 var(--control-padding-x);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.form--control,
textarea.form-control {
  min-height: auto;
  padding: 10px var(--control-padding-x);
}

.form--control:focus,
.form-control:focus,
.form-select:focus,
select.form--control:focus,
select.form-control:focus,
textarea.form--control:focus,
textarea.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form--control::placeholder,
.form-control::placeholder {
  color: var(--text-subtle);
}

.form-control-sm,
.form--control.form-control-sm {
  min-height: 36px;
  font-size: var(--font-size-md);
  padding: 0 12px;
}

/* ------------------------------------------------------------------ Select2 */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-selection--single {
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  font-weight: var(--font-weight-body);
  min-height: var(--control-height);
  height: var(--control-height) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm);
  background: var(--surface) !important;
  display: flex;
  align-items: center;
  padding: 0;
  box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-selection--single span,
.select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--control-height) - 2px);
  padding-left: var(--control-padding-x);
  padding-right: 28px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  font-weight: var(--font-weight-body) !important;
  width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 10px !important;
  width: 20px;
  height: 20px !important;
  transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  top: 50%;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  border-width: 5px 4px 0 4px;
  border-color: var(--text-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-muted) transparent;
  margin-top: -4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary-color);
  box-shadow: var(--focus-ring);
}

.select2-dropdown {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary-color);
}

.select2-container--default .select2-results__option {
  font-size: var(--control-font-size);
  font-weight: var(--font-weight-body);
  padding: 8px var(--control-padding-x);
}

.select2-container--default .select2-results__option--selected {
  background: var(--primary-soft);
  color: var(--primary-color);
  font-weight: var(--font-weight-medium);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* ------------------------------------------------------------------ Nice Select */
.nice-select,
.nice-select.wide,
.form--control.nice-select {
  float: none;
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  font-weight: var(--font-weight-body);
  height: var(--control-height);
  line-height: calc(var(--control-height) - 2px);
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary) !important;
  padding-left: var(--control-padding-x);
  padding-right: 34px;
}

.nice-select:after {
  right: 14px;
  top: 50%;
  margin-top: -3px;
  border-color: var(--text-muted);
  border-width: 0 2px 2px 0;
  height: 7px;
  width: 7px;
}

.nice-select.open,
.nice-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: var(--focus-ring);
}

.nice-select .list {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  margin-top: 4px;
}

.nice-select .option {
  font-weight: var(--font-weight-body);
  line-height: 38px;
  min-height: 38px;
  padding-left: var(--control-padding-x);
}

.nice-select .option.selected {
  font-weight: var(--font-weight-medium);
}

.nice-select .option.selected.focus,
.nice-select .option:hover,
.nice-select .option.focus {
  background: var(--primary-soft);
  color: var(--primary-color);
}

/* ------------------------------------------------------------------ badges */
.badge {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ modals */
.modal-content {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
}

.modal-footer .btn--base,
.modal-footer .btn.btn--base {
  min-width: 100px;
}

/* ------------------------------------------------------------------ dashboard legacy typography normalization */

/* Stat cards — merchant, user, agent, admin */
.dashbord-item .sub-title,
.dashbord-item .dashboard-content .sub-title {
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dashbord-item .title,
.dashbord-item .dashboard-content .title,
.dashbord-item h6.title {
  font-size: var(--text-stat);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.dashbord-item .chart span {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
}

/* Admin / shared card headers */
.custom-card .card-header .title,
.custom-inner-card .card-inner-header .title,
.table-header .title,
.gateway-content .title,
.dashboard-content .left .title,
.account-header .title {
  font-size: var(--text-section-title);
  font-weight: var(--font-weight-heading);
}

/* Admin page banner title (white bar) — keep readable, not oversized */
.navbar-wrapper .dashboard-title-part .title {
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-heading);
}

/* QR & payment display surfaces */
.qr-merchant-name,
.qr-modal-merchant-name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
}

.qr-amount-display,
.qr-modal-amount {
  font-size: var(--text-display);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
}

.qr-footer .afripay-brand,
.qr-modal-afripay-brand,
.afripay-brand {
  font-weight: var(--font-weight-semibold);
}

.meta-chip .chip-value,
.qr-pay-label,
.item-suggestion .sg-price {
  font-weight: var(--font-weight-semibold);
}

.section-header h3 {
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-heading);
}

/* Tables */
.custom-table thead th,
.qr-table thead th {
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.amount-text,
.token-text {
  font-weight: var(--font-weight-semibold);
}

/* Confirmation / custom modals */
.confirmation-modal-title,
.modal-confirm-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
}

/* Developer docs */
.api-docs .docs-sidebar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
}

.api-docs h2,
.api-docs h3,
.api-docs h4 {
  font-weight: var(--font-weight-heading);
}

/* Soften Bootstrap bold utility inside app shells (not marketing pages) */
.page-wrapper .font-weight-bold,
.merchant-dashboard .font-weight-bold {
  font-weight: var(--font-weight-medium) !important;
}

/* Profile avatars / large initials */
.profile-avatar-initials,
.avatar-initials-lg {
  font-size: var(--text-stat);
  font-weight: var(--font-weight-heading);
}