/*
 * Easy Remit back-office theme.
 * Loaded after the NiceAdmin template (style.css) and overrides it:
 * design tokens, app shell (sidebar, header), shared Bootstrap components,
 * then the dashboard / transactions / create-transaction screens.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                             */
/* ------------------------------------------------------------------ */
:root {
  --er-ink: #16201C;
  --er-ink-2: #3F4A45;
  --er-muted: #5F6B66;
  --er-ground: #F5F4EF;
  --er-surface: #FFFFFF;
  --er-subtle: #F8F7F3;
  --er-line: #E4E2DA;
  --er-line-soft: #EEECE6;
  --er-input-line: #DAD7CD;

  --er-accent: #0F6B4F;
  --er-accent-hover: #0A5A42;
  --er-accent-soft: #EEF5F1;
  --er-accent-ring: rgba(15, 107, 79, 0.18);
  --er-on-accent-muted: #E2EEE8;

  --er-sidebar: #12201A;
  --er-sidebar-2: #1B2C25;
  --er-sidebar-hover: #1E3129;
  --er-sidebar-text: #C9D3CE;
  --er-sidebar-muted: #8E9C96;
  --er-sidebar-heading: #7F8F88;

  --er-pending-bg: #FCEFD9;  --er-pending-fg: #8A4B06;  --er-pending-dot: #D98E1E;
  --er-paid-bg: #DDF1E7;     --er-paid-fg: #0B5A40;     --er-paid-dot: #1E9E6A;
  --er-rejected-bg: #FBE3E1; --er-rejected-fg: #A1281E;
  --er-info-bg: #E3EAF4;     --er-info-fg: #2F4A75;
  --er-neutral-bg: #ECEAE3;  --er-neutral-fg: #3F4A45;

  --er-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --er-font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --er-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --er-radius-sm: 10px;
  --er-radius: 12px;
  --er-radius-lg: 16px;
  --er-radius-xl: 20px;

  --er-sidebar-w: 264px;
  --er-header-h: 72px;

  /* Bootstrap 5.3 variables */
  --bs-body-font-family: var(--er-font-body);
  --bs-body-color: var(--er-ink);
  --bs-body-bg: var(--er-ground);
  --bs-primary: #0F6B4F;
  --bs-primary-rgb: 15, 107, 79;
  --bs-link-color: #0F6B4F;
  --bs-link-color-rgb: 15, 107, 79;
  --bs-link-hover-color: #0A5A42;
  --bs-link-hover-color-rgb: 10, 90, 66;
  --bs-border-color: #E4E2DA;
  --bs-secondary-color: #5F6B66;
  --bs-focus-ring-color: rgba(15, 107, 79, 0.18);
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--er-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--er-ink);
  background: var(--er-ground);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--er-font-display);
  color: var(--er-ink);
  letter-spacing: -0.01em;
}

a { color: var(--er-accent); }
a:hover { color: var(--er-accent-hover); }

.er-mono { font-family: var(--er-font-mono); }
.er-num { font-variant-numeric: tabular-nums; }
.er-muted { color: var(--er-muted); }
.er-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* App shell: header                                                  */
/* ------------------------------------------------------------------ */
.header {
  left: var(--er-sidebar-w);
  height: var(--er-header-h);
  padding: 0 40px;
  gap: 16px;
  background: var(--er-ground);
  box-shadow: none;
  border-bottom: 1px solid var(--er-line);
}

.header .toggle-sidebar-btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--er-ink);
  border: 1px solid var(--er-input-line); border-radius: var(--er-radius);
  background: var(--er-surface);
}

.er-header-brand {
  font-family: var(--er-font-display); font-weight: 700; font-size: 18px;
  color: var(--er-ink); text-decoration: none;
}
.er-header-brand:hover { color: var(--er-ink); }

.er-search { position: relative; display: flex; align-items: center; }
.er-search i {
  position: absolute; left: 14px; color: var(--er-muted); font-size: 16px; pointer-events: none;
}
.er-search input {
  width: 320px; max-width: 100%; height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--er-input-line); border-radius: var(--er-radius);
  background: var(--er-surface); color: var(--er-ink); font-size: 14px;
}
.er-search input:focus { outline: none; border-color: var(--er-accent); box-shadow: 0 0 0 4px var(--er-accent-ring); }

.er-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Language toggle (Google Translate based, see header.blade.php) */
.language-toggle { position: relative; }
.language-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px;
  border: 1px solid var(--er-input-line); border-radius: var(--er-radius);
  background: var(--er-surface); color: var(--er-ink); cursor: pointer;
}
.language-toggle-btn:hover { border-color: var(--er-muted); }
.language-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; }
.language-text { font-size: 14px; font-weight: 500; }
.language-toggle-dropdown {
  position: absolute; right: 0; top: 100%; margin-top: 8px; width: 160px;
  background: var(--er-surface); border: 1px solid var(--er-line); border-radius: var(--er-radius);
  box-shadow: 0 12px 32px rgba(18, 32, 26, 0.12); z-index: 1000; overflow: hidden;
}
.language-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--er-ink); cursor: pointer;
}
.language-option:hover { background: var(--er-subtle); }

/* ------------------------------------------------------------------ */
/* App shell: sidebar                                                 */
/* ------------------------------------------------------------------ */
.sidebar {
  top: 0;
  width: var(--er-sidebar-w);
  padding: 22px 14px 16px;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--er-sidebar);
  box-shadow: none;
  scrollbar-color: #2E4A3E transparent;
  z-index: 998;
}
.sidebar::-webkit-scrollbar { background-color: var(--er-sidebar); }
.sidebar::-webkit-scrollbar-thumb { background-color: #2E4A3E; }

.er-brand {
  display: flex; align-items: center; gap: 12px; padding: 0 8px;
  text-decoration: none;
}
.er-brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--er-accent); color: #FFFFFF;
  font-family: var(--er-font-display); font-weight: 700; font-size: 15px;
}
.er-brand-text { display: flex; flex-direction: column; gap: 1px; }
.er-brand-name { font-family: var(--er-font-display); font-weight: 700; font-size: 18px; color: #FFFFFF; }
.er-brand-sub { font-size: 12px; color: var(--er-sidebar-muted); }

.sidebar-nav { flex: 1 1 auto; }
.sidebar-nav .nav-item { margin-bottom: 2px; }
.sidebar-nav .nav-heading {
  margin: 18px 0 6px; padding: 0 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--er-sidebar-heading);
}
.sidebar-nav .nav-item:first-child.nav-heading,
.sidebar-nav .nav-heading:first-child { margin-top: 0; }

.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px;
  border-radius: var(--er-radius-sm);
  background: transparent; color: var(--er-sidebar-text);
  font-size: 14px; font-weight: 500;
}
.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i { margin: 0; font-size: 18px; color: inherit; }
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover { background: var(--er-sidebar-hover); color: #FFFFFF; }
.sidebar-nav .nav-link:hover i { color: #FFFFFF; }

/* Active top-level link, or an open group that contains the current page */
.sidebar-nav .nav-link.er-active,
.sidebar-nav .nav-link.er-active:hover {
  background: var(--er-accent); color: #FFFFFF; font-weight: 600;
}
.sidebar-nav .nav-link.er-open { color: #FFFFFF; font-weight: 600; }

.sidebar-nav .nav-link .bi-chevron-down { margin-left: auto; font-size: 14px; opacity: 0.8; }
.sidebar-nav .nav-link .er-nav-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: #F2C46D; color: #3A2604; font-size: 12px; font-weight: 600;
}
.sidebar-nav .nav-link .er-nav-badge + .bi-chevron-down { margin-left: 8px; }

.sidebar-nav .nav-content { padding: 4px 0 6px; }
.sidebar-nav .nav-content a {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 12px 0 42px;
  border-radius: var(--er-radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--er-sidebar-muted);
}
.sidebar-nav .nav-content a i { display: none; }
.sidebar-nav .nav-content a:hover { color: #FFFFFF; background: var(--er-sidebar-hover); }
.sidebar-nav .nav-content a.active {
  color: #FFFFFF; background: var(--er-sidebar-2); font-weight: 600;
}
.sidebar-nav .nav-content a.active::before {
  content: ''; width: 6px; height: 6px; margin-left: -16px; margin-right: 4px;
  border-radius: 50%; background: #6FD3A8;
}

.er-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--er-radius);
  background: var(--er-sidebar-2);
}
.er-user-avatar {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #2E4A3E; color: #FFFFFF; font-weight: 600; font-size: 13px;
}
.er-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.er-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.er-user-name {
  color: #FFFFFF; font-weight: 600; font-size: 14px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.er-user-name:hover { color: #FFFFFF; text-decoration: underline; }
.er-user-role { font-size: 12px; color: var(--er-sidebar-muted); }
.er-user-logout {
  width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: var(--er-radius-sm);
  background: transparent; color: var(--er-sidebar-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.er-user-logout:hover { background: var(--er-sidebar-hover); color: #FFFFFF; }

/* ------------------------------------------------------------------ */
/* App shell: layout + responsive                                     */
/* ------------------------------------------------------------------ */
#main {
  margin-top: var(--er-header-h);
  padding: 28px 40px 40px;
}

@media (min-width: 1200px) {
  #main, #footer { margin-left: var(--er-sidebar-w); }
  .toggle-sidebar .sidebar { left: calc(-1 * var(--er-sidebar-w)); }
  .toggle-sidebar #header { left: 0; }
}

@media (max-width: 1199px) {
  .header { left: 0; padding: 0 20px; }
  .sidebar { left: calc(-1 * var(--er-sidebar-w)); }
  .toggle-sidebar .sidebar { left: 0; box-shadow: 0 0 0 100vmax rgba(18, 32, 26, 0.35); }
  #main { padding: 24px 20px 32px; }
}

@media (max-width: 575px) {
  .er-header-actions .er-new-btn span { display: none; }
}

.footer {
  padding: 20px 40px;
  border-top: 1px solid var(--er-line);
  font-size: 13px;
}
.footer .copyright { color: var(--er-muted); }
.footer .copyright a { color: var(--er-ink-2); }

.back-to-top {
  background: var(--er-accent);
  border-radius: var(--er-radius-sm);
}
.back-to-top:hover { background: var(--er-accent-hover); }

/* ------------------------------------------------------------------ */
/* Page title                                                         */
/* ------------------------------------------------------------------ */
.pagetitle { margin: 0 0 24px; }
.pagetitle h1 {
  font-family: var(--er-font-display);
  font-size: 28px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--er-ink);
}
.pagetitle .breadcrumb { margin: 4px 0 0; font-size: 13px; }
.pagetitle .breadcrumb a, .breadcrumb-item + .breadcrumb-item::before { color: var(--er-muted); }
.pagetitle .breadcrumb .active { color: var(--er-ink-2); }

.er-page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 0 0 24px;
}
.er-page-head h1 {
  margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.015em;
}
.er-page-sub { display: block; margin-top: 4px; color: var(--er-muted); font-size: 14px; }
.er-page-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ */
/* Cards                                                              */
/* ------------------------------------------------------------------ */
.card {
  margin-bottom: 20px;
  border: 1px solid var(--er-line);
  border-radius: var(--er-radius-lg);
  box-shadow: none;
  background: var(--er-surface);
}
.card-header, .card-footer {
  background: var(--er-surface); border-color: var(--er-line-soft); color: var(--er-muted);
}
.card-header:first-child { border-radius: var(--er-radius-lg) var(--er-radius-lg) 0 0; }
.card-title {
  padding: 20px 0 14px;
  font-family: var(--er-font-display);
  font-size: 18px; font-weight: 600;
  color: var(--er-ink);
}
.card-title span { color: var(--er-muted); }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn {
  --bs-btn-border-radius: var(--er-radius);
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: 0 0 0 4px var(--er-accent-ring);
  font-family: var(--er-font-body);
}
.btn-sm { --bs-btn-border-radius: var(--er-radius-sm); }

.btn-primary, .btn-success {
  --bs-btn-bg: var(--er-accent); --bs-btn-border-color: var(--er-accent); --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--er-accent-hover); --bs-btn-hover-border-color: var(--er-accent-hover); --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--er-accent-hover); --bs-btn-active-border-color: var(--er-accent-hover);
  --bs-btn-disabled-bg: var(--er-accent); --bs-btn-disabled-border-color: var(--er-accent);
}
.btn-outline-primary, .btn-outline-info, .btn-outline-secondary {
  --bs-btn-color: var(--er-ink); --bs-btn-border-color: var(--er-input-line); --bs-btn-bg: var(--er-surface);
  --bs-btn-hover-color: var(--er-ink); --bs-btn-hover-bg: var(--er-subtle); --bs-btn-hover-border-color: var(--er-muted);
  --bs-btn-active-color: var(--er-ink); --bs-btn-active-bg: var(--er-line-soft); --bs-btn-active-border-color: var(--er-muted);
}
.btn-secondary, .btn-light {
  --bs-btn-color: var(--er-ink); --bs-btn-bg: var(--er-line-soft); --bs-btn-border-color: var(--er-line-soft);
  --bs-btn-hover-color: var(--er-ink); --bs-btn-hover-bg: var(--er-line); --bs-btn-hover-border-color: var(--er-line);
}
.btn-warning {
  --bs-btn-color: var(--er-pending-fg); --bs-btn-bg: var(--er-pending-bg); --bs-btn-border-color: var(--er-pending-bg);
  --bs-btn-hover-color: var(--er-pending-fg); --bs-btn-hover-bg: #F8E2BC; --bs-btn-hover-border-color: #F8E2BC;
}
.btn-danger {
  --bs-btn-bg: #A1281E; --bs-btn-border-color: #A1281E;
  --bs-btn-hover-bg: #87211A; --bs-btn-hover-border-color: #87211A;
}
.btn-outline-danger {
  --bs-btn-color: #A1281E; --bs-btn-border-color: #E8B4AF;
  --bs-btn-hover-bg: var(--er-rejected-bg); --bs-btn-hover-color: #A1281E; --bs-btn-hover-border-color: #A1281E;
}

.er-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; font-size: 14px;
}
.er-btn i { font-size: 16px; }
.er-link-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--er-accent);
}

/* ------------------------------------------------------------------ */
/* Forms                                                              */
/* ------------------------------------------------------------------ */
.form-label, label { color: var(--er-ink-2); }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.form-control, .form-select {
  background-color: var(--er-surface);
  border-color: var(--er-input-line);
  border-radius: var(--er-radius);
  color: var(--er-ink);
  font-size: 14px;
}
.form-control:not(textarea):not(.form-control-sm):not([type="file"]),
.form-select:not(.form-select-sm):not([multiple]) { min-height: 44px; }
.form-floating > .form-control, .form-floating > .form-select { min-height: calc(3.5rem + 2px); }
.form-control:focus, .form-select:focus {
  border-color: var(--er-accent);
  box-shadow: 0 0 0 4px var(--er-accent-ring);
}
.form-control::placeholder { color: #8A938F; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--er-subtle); }
.form-check-input:checked { background-color: var(--er-accent); border-color: var(--er-accent); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--er-accent-ring); border-color: var(--er-accent); }
.input-group-text { border-color: var(--er-input-line); background: var(--er-subtle); border-radius: var(--er-radius); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 44px; border-color: var(--er-input-line); border-radius: var(--er-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-dropdown { border-color: var(--er-line); border-radius: var(--er-radius); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--er-accent);
}

/* ------------------------------------------------------------------ */
/* Tables + DataTables                                                */
/* ------------------------------------------------------------------ */
.table {
  --bs-table-color: var(--er-ink);
  --bs-table-border-color: var(--er-line-soft);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--er-subtle);
  font-size: 14px;
}
.table > :not(caption) > * > * { padding: 12px 14px; }
.table thead th, .table > thead > tr > th {
  background: var(--er-subtle);
  color: var(--er-muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom-color: var(--er-line);
  white-space: nowrap;
}
.table tbody td { vertical-align: middle; }
.table-bordered > :not(caption) > * > * { border-color: var(--er-line-soft); }

table.dataTable.table-striped > tbody > tr:nth-of-type(n).selected > *,
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--er-accent-soft);
  color: var(--er-ink);
}
table.dataTable.table-striped > tbody > tr:nth-of-type(n).selected td i { color: inherit; }
table.dataTable.table-striped > tbody > tr:nth-of-type(n).selected td .btn { border: 1px solid var(--er-input-line); }

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  min-height: 40px; border-radius: var(--er-radius-sm); border-color: var(--er-input-line);
}
div.dataTables_wrapper div.dataTables_filter input { width: 260px; max-width: 100%; }
div.dataTables_wrapper div.dataTables_info { color: var(--er-muted); font-size: 13px; }
div.dataTables_wrapper div.dataTables_processing {
  border: 1px solid var(--er-line); border-radius: var(--er-radius); box-shadow: 0 12px 32px rgba(18, 32, 26, 0.12);
}

.pagination { --bs-pagination-border-radius: var(--er-radius-sm); gap: 4px; }
.page-link {
  min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--er-radius-sm) !important; border-color: var(--er-input-line);
  color: var(--er-ink);
}
.page-item.active .page-link { background: var(--er-accent); border-color: var(--er-accent); color: #FFFFFF; }
.page-item.disabled .page-link { color: #A9AFAC; }

div.dt-buttons .btn, div.dt-buttons .dt-button { border-radius: var(--er-radius-sm) !important; }

/* ------------------------------------------------------------------ */
/* Badges: status pills                                               */
/* ------------------------------------------------------------------ */
.badge {
  border-radius: 999px; padding: 5px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.badge.bg-warning { background: var(--er-pending-bg) !important; color: var(--er-pending-fg) !important; }
.badge.bg-success { background: var(--er-paid-bg) !important; color: var(--er-paid-fg) !important; }
.badge.bg-danger { background: var(--er-rejected-bg) !important; color: var(--er-rejected-fg) !important; }
.badge.bg-info, .badge.bg-primary { background: var(--er-info-bg) !important; color: var(--er-info-fg) !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-light { background: var(--er-neutral-bg) !important; color: var(--er-neutral-fg) !important; }

.er-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.er-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.er-pill--pending { background: var(--er-pending-bg); color: var(--er-pending-fg); }
.er-pill--paid { background: var(--er-paid-bg); color: var(--er-paid-fg); }
.er-pill--rejected { background: var(--er-rejected-bg); color: var(--er-rejected-fg); }
.er-pill--refund { background: var(--er-info-bg); color: var(--er-info-fg); }
.er-pill--neutral { background: var(--er-neutral-bg); color: var(--er-neutral-fg); }
.er-pill--blocked { background: var(--er-rejected-bg); color: var(--er-rejected-fg); }
.er-pill--blocked::before { display: none; }

/* ------------------------------------------------------------------ */
/* Modals, dropdowns, alerts, tabs                                    */
/* ------------------------------------------------------------------ */
.modal-content { border: 1px solid var(--er-line); border-radius: var(--er-radius-lg); }
.modal-header { border-bottom-color: var(--er-line-soft); padding: 18px 24px; }
.modal-title { font-family: var(--er-font-display); font-weight: 600; }
.modal-body { padding: 20px 24px; }
.modal-footer { border-top-color: var(--er-line-soft); padding: 14px 24px; }

.dropdown-menu {
  border: 1px solid var(--er-line); border-radius: var(--er-radius);
  box-shadow: 0 12px 32px rgba(18, 32, 26, 0.12); padding: 6px;
}
.dropdown-item { border-radius: var(--er-radius-sm); min-height: 40px; display: flex; align-items: center; gap: 8px; }
.dropdown-item:active { background: var(--er-accent); }

.alert { border-radius: var(--er-radius); border-width: 1px; }
.alert-success { background: var(--er-paid-bg); border-color: #BFE3CF; color: var(--er-paid-fg); }
.alert-danger { background: var(--er-rejected-bg); border-color: #F1C3BE; color: var(--er-rejected-fg); }
.alert-warning { background: var(--er-pending-bg); border-color: #F2D7A6; color: var(--er-pending-fg); }
.alert-info { background: var(--er-info-bg); border-color: #C6D3E7; color: var(--er-info-fg); }

.nav-tabs { border-bottom-color: var(--er-line); gap: 4px; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--er-muted); font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--er-ink); border-bottom-color: var(--er-line); }
.nav-tabs .nav-link.active { color: var(--er-ink); font-weight: 600; background: transparent; border-bottom-color: var(--er-accent); }

/* ------------------------------------------------------------------ */
/* Shared panels (dashboard + screens)                                */
/* ------------------------------------------------------------------ */
.er-panel {
  background: var(--er-surface);
  border: 1px solid var(--er-line);
  border-radius: var(--er-radius-lg);
  overflow: hidden;
}
.er-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 24px;
}
.er-panel-title { margin: 0; font-size: 19px; font-weight: 600; }
.er-panel-body { padding: 20px 24px; }

.er-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.er-stack { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------------ */
/* Dashboard                                                          */
/* ------------------------------------------------------------------ */
.er-dashboard { display: flex; flex-direction: column; gap: 24px; }

.er-kpis { display: flex; flex-wrap: wrap; gap: 16px; }
.er-hero {
  flex: 1 1 360px; min-height: 256px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 28px; border-radius: var(--er-radius-xl);
  background: var(--er-accent); color: #FFFFFF;
}
.er-hero-label, .er-hero-sub { font-size: 14px; color: var(--er-on-accent-muted); }
.er-hero-value {
  display: block; margin: 10px 0;
  font-family: var(--er-font-display); font-size: 44px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.er-hero-value small { font-size: 22px; font-weight: 500; }
.er-hero .er-hero-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--er-radius);
  background: #FFFFFF; color: var(--er-accent); font-weight: 600; text-decoration: none;
}
.er-hero .er-hero-cta:hover { background: var(--er-accent-soft); color: var(--er-accent-hover); }

.er-kpi-grid {
  flex: 2 1 480px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.er-kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: var(--er-surface); border: 1px solid var(--er-line); border-radius: var(--er-radius-lg);
}
.er-kpi-label { font-size: 13px; color: var(--er-muted); }
.er-kpi-value {
  font-family: var(--er-font-display); font-size: 30px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.er-kpi-value small { font-size: 16px; font-weight: 500; }
@media (max-width: 575px) { .er-kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.er-kpi-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--er-muted); }
.er-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.er-dot--pending { background: var(--er-pending-dot); }
.er-dot--paid { background: var(--er-paid-dot); }
.er-dot--rejected { background: #C2410C; }

.er-recent { flex: 2 1 600px; min-width: 0; }
.er-side { flex: 1 1 300px; min-width: 0; }

.er-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.er-table th {
  padding: 10px 12px; background: var(--er-subtle); color: var(--er-muted); text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.er-table td { padding: 14px 12px; border-top: 1px solid var(--er-line-soft); vertical-align: middle; }
.er-table th:first-child, .er-table td:first-child { padding-left: 24px; }
.er-table th:last-child, .er-table td:last-child { padding-right: 24px; }
.er-table .er-right { text-align: right; }
.er-cell { display: flex; flex-direction: column; gap: 2px; }
.er-cell-sub { font-size: 12px; color: var(--er-muted); }
.er-ref { font-family: var(--er-font-mono); font-size: 13px; font-weight: 500; }
.er-empty { padding: 40px 24px; text-align: center; color: var(--er-muted); }

.er-todo { display: flex; flex-direction: column; }
.er-todo a {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 24px;
  border-top: 1px solid var(--er-line-soft); color: var(--er-ink); text-decoration: none;
}
.er-todo a:hover { background: var(--er-subtle); color: var(--er-ink); }
.er-todo-count {
  min-width: 36px; height: 28px; padding: 0 8px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--er-neutral-bg); color: var(--er-ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.er-todo-count--hot { background: var(--er-pending-bg); color: var(--er-pending-fg); }
.er-todo-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }

/* Wide screens: the dashboard fills the width, so scale its content up */
@media (min-width: 1600px) {
  .er-dashboard { gap: 28px; }
  .er-kpis, .er-kpi-grid, .er-dashboard .er-row { gap: 20px; }
  .er-hero { flex-basis: 440px; min-height: 300px; padding: 36px; }
  .er-hero-label, .er-hero-sub { font-size: 16px; }
  .er-hero-value { font-size: 56px; }
  .er-hero-value small { font-size: 26px; }
  .er-kpi { padding: 26px; gap: 8px; }
  .er-kpi-label, .er-kpi-sub { font-size: 15px; }
  .er-kpi-value { font-size: 38px; }
  .er-kpi-value small { font-size: 18px; }
  .er-dashboard .er-panel-head h2, .er-dashboard .er-panel-title { font-size: 22px; }
  .er-dashboard .er-table { font-size: 15px; }
  .er-dashboard .er-table th { font-size: 13px; }
  .er-dashboard .er-table td { padding: 18px 14px; }
  .er-dashboard .er-ref { font-size: 14px; }
  .er-dashboard .er-cell-sub { font-size: 13px; }
  .er-todo a { min-height: 76px; font-size: 15px; }
}
.er-todo-title { font-weight: 600; font-size: 14px; }
.er-todo-sub { font-size: 12px; color: var(--er-muted); }
.er-todo i.bi-chevron-right { color: var(--er-muted); }

.er-rate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.er-rate-row + .er-rate-row { margin-top: 8px; }
.er-rate-value { font-family: var(--er-font-display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.er-rate-value small { font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Transactions list                                                  */
/* ------------------------------------------------------------------ */
.er-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--er-line);
}
.er-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--er-muted); font-weight: 500; text-decoration: none;
}
.er-tab:hover { color: var(--er-ink); border-bottom-color: var(--er-line); }
.er-tab.is-active { color: var(--er-ink); font-weight: 600; border-bottom-color: var(--er-accent); }

.er-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.er-field { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.er-field--wide { flex: 2 1 260px; }
.er-field .form-label { margin-bottom: 6px; }
.er-field .select2-container { width: 100% !important; }
.er-btn-ghost { color: var(--er-accent); background: transparent; border: 0; }
.er-btn-ghost:hover { color: var(--er-accent-hover); background: var(--er-accent-soft); }

.er-dt-buttons { display: flex; gap: 8px; }
.er-dt-buttons .dt-buttons { display: flex; gap: 8px; }
.er-dt-buttons .btn {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--er-input-line) !important;
  background: var(--er-surface) !important; color: var(--er-ink) !important; font-weight: 600;
}
.er-dt-buttons .btn:hover { background: var(--er-subtle) !important; }

.er-list-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.er-list-main { min-width: 0; }
.er-dt-table-wrap { overflow-x: auto; }
.er-list-main table.dataTable { margin: 0 !important; min-width: 860px; border-collapse: collapse !important; }
.er-list-main table.dataTable > thead > tr > th {
  padding: 10px 12px; border-bottom: 1px solid var(--er-line);
}
.er-list-main table.dataTable > thead > tr > th:first-child,
.er-list-main table.dataTable > tbody > tr > td:first-child { padding-left: 24px; }
.er-list-main table.dataTable > tbody > tr > td { padding: 14px 12px; border-top: 1px solid var(--er-line-soft); vertical-align: middle; }
.er-list-main table.dataTable > tbody > tr { cursor: pointer; }
.er-list-main table.dataTable > tbody > tr:hover > * { background: var(--er-subtle); }
.er-list-main table.dataTable > tbody > tr.er-row-active > * { background: var(--er-accent-soft); box-shadow: none; }
.er-list-main table.dataTable > tbody > tr.selected > * { box-shadow: none; }
.er-list-main table.dataTable > tbody > tr > td.dataTables_empty { cursor: default; padding: 40px 24px; color: var(--er-muted); text-align: center; }

.er-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.er-actions .btn { white-space: nowrap; }

.er-dt-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; border-top: 1px solid var(--er-line-soft);
}
.er-dt-info { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--er-muted); font-size: 13px; }
.er-dt-info .dataTables_length label, .er-dt-info .dataTables_info { margin: 0; padding: 0; color: var(--er-muted); }
.er-dt-footer .pagination { margin: 0; }

.er-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(18, 32, 26, 0.35); opacity: 0; transition: opacity 0.2s;
}
.er-drawer-backdrop.is-open { opacity: 1; }
.er-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1041;
  width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--er-surface); border-left: 1px solid var(--er-line);
  box-shadow: -24px 0 48px rgba(18, 32, 26, 0.16);
  transform: translateX(100%); transition: transform 0.2s ease-out;
}
.er-drawer.is-open { transform: translateX(0); }
.er-drawer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--er-line-soft);
}
.er-drawer-title { font-family: var(--er-font-display); font-size: 16px; font-weight: 600; }
.er-drawer-close {
  width: 44px; height: 44px; border: 0; border-radius: var(--er-radius-sm);
  background: transparent; color: var(--er-ink); font-size: 18px; cursor: pointer;
}
.er-drawer-close:hover { background: var(--er-subtle); }
.er-detail {
  flex: 1 1 auto; overflow-y: auto; box-sizing: border-box;
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
  transition: opacity 0.15s;
}
.er-detail.is-loading { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .er-drawer, .er-drawer-backdrop { transition: none; }
}
.er-detail-empty { padding: 32px 8px; text-align: center; color: var(--er-muted); }
.er-detail-empty i { font-size: 28px; display: block; margin-bottom: 8px; }
.er-detail-empty p { margin: 0; }
.er-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.er-detail-ref { margin: 0; font-family: var(--er-font-mono); font-size: 18px; font-weight: 500; letter-spacing: 0; }
.er-detail-meta { margin: -12px 0 0; font-size: 13px; color: var(--er-muted); }
.er-detail-amount { padding: 16px; border-radius: var(--er-radius); background: var(--er-subtle); }
.er-detail-label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--er-muted);
}
.er-detail-big {
  display: block; font-family: var(--er-font-display); font-size: 28px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.er-detail-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 0;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.er-detail-grid dt { font-weight: 400; color: var(--er-muted); }
.er-detail-grid dd { margin: 0; text-align: right; }
.er-strong { font-weight: 600; color: var(--er-ink); }
.er-detail-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.er-detail-block { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--er-ink-2); }

.er-timeline { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.er-timeline li { position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 24px; }
.er-timeline li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid #B8B4A8; background: var(--er-surface);
}
.er-timeline li.is-done::before { border-color: var(--er-accent); background: var(--er-accent); }
.er-timeline li + li::after {
  content: ''; position: absolute; left: 5px; top: -12px; width: 2px; height: 14px; background: var(--er-line);
}
.er-timeline-title { font-weight: 600; font-size: 14px; color: var(--er-ink); }
.er-timeline-meta { font-size: 12px; color: var(--er-muted); }

.er-detail-actions { display: flex; flex-direction: column; gap: 10px; }
.er-detail-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.er-detail-actions-row .btn { flex: 1 1 140px; }
.er-block-banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--er-radius);
  background: var(--er-rejected-bg); color: var(--er-rejected-fg);
}
.er-block-banner > div { display: flex; flex-direction: column; gap: 2px; }
.er-block-banner .er-detail-meta { margin: 0; color: inherit; opacity: .8; }
.er-block-form { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--er-line-soft); }

/* Flat rows: neutralise DataTables / Bootstrap stripes and selection shadows */
.er-list-main table.dataTable > tbody > tr > * {
  box-shadow: none !important;
  background-color: var(--er-surface);
}
.er-list-main table.dataTable > tbody > tr:hover > * { background-color: var(--er-subtle); }
.er-list-main table.dataTable > tbody > tr.er-row-active > * { background-color: var(--er-accent-soft); }
.er-list-main table.dataTable > tbody > tr:focus-visible { outline: 2px solid var(--er-accent); outline-offset: -2px; }

.er-icon-btn {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--er-input-line); border-radius: var(--er-radius-sm);
  background: var(--er-surface); color: var(--er-ink); font-size: 18px; cursor: pointer;
}
.er-icon-btn:hover, .er-icon-btn[aria-expanded="true"] { background: var(--er-subtle); border-color: var(--er-muted); }
.er-row-menu .dropdown-menu { min-width: 220px; }

/* ------------------------------------------------------------------ */
/* New transaction                                                    */
/* ------------------------------------------------------------------ */
.er-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; color: var(--er-muted); }
.er-breadcrumb a { color: var(--er-muted); }
.er-breadcrumb a:hover { color: var(--er-ink); }

.er-tx-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; max-width: 1240px; }
.er-tx-steps { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.er-step {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--er-surface); border: 1px solid var(--er-line); border-radius: var(--er-radius-lg);
}
.er-step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.er-step-title { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; }
.er-step-num {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--er-ink); color: #FFFFFF; font-family: var(--er-font-body); font-size: 13px; font-weight: 700;
}
.er-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.er-step-grid--route { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
@media (max-width: 640px) {
  .er-step-grid--route { grid-template-columns: minmax(0, 1fr); }
  .er-route-arrow { display: none !important; }
}
.er-route-arrow { height: 44px; display: flex; align-items: center; color: var(--er-muted); font-size: 20px; }
.er-span-2 { grid-column: 1 / -1; }
.er-inline-field { display: flex; align-items: center; gap: 8px; }
.er-inline-field > select, .er-inline-field > .select2-container { flex: 1 1 auto; min-width: 0; }
.er-hint { margin: 6px 0 0; font-size: 13px; color: var(--er-muted); }
.er-tx-form .select2-container { width: 100% !important; }
.er-inline-field .select2-container { width: auto !important; flex: 1 1 auto; }

/* Delivery method: cards drive the (visually hidden) select */
.er-method-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.er-method-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 88px; padding: 16px; text-align: left;
  border: 1px solid var(--er-input-line); border-radius: var(--er-radius);
  background: var(--er-surface); color: var(--er-ink); font-weight: 600; cursor: pointer;
}
.er-method-card i { font-size: 22px; color: var(--er-ink-2); }
.er-method-card:hover { border-color: var(--er-muted); }
.er-method-card[aria-checked="true"] { border: 2px solid var(--er-accent); background: #F3F8F5; padding: 15px; }
.er-method-card[aria-checked="true"] i { color: var(--er-accent); }
.er-method-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--er-accent-ring); }
.er-method-select,
.er-method-select + .select2-container {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.er-amount-input.form-control {
  min-height: 56px; font-family: var(--er-font-display); font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Summary */
.er-summary {
  flex: 1 1 320px; min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; padding: 24px;
  background: var(--er-surface); border: 1px solid var(--er-line); border-radius: var(--er-radius-lg);
}
@media (min-width: 1200px) { .er-summary { position: sticky; top: calc(var(--er-header-h) + 16px); } }
.er-summary-list {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.er-summary-list dt { font-weight: 400; color: var(--er-muted); }
.er-summary-list dd { margin: 0; text-align: right; }
.er-summary-list .er-summary-total { padding-top: 10px; border-top: 1px solid var(--er-line-soft); font-weight: 700; color: var(--er-ink); }
.er-summary-receive {
  display: flex; flex-direction: column; gap: 4px; padding: 18px;
  border-radius: 14px; background: var(--er-accent); color: #FFFFFF;
}
.er-summary-receive-label { font-size: 13px; color: var(--er-on-accent-muted); }
.er-summary-receive-value {
  font-family: var(--er-font-display); font-size: 30px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
}
.er-summary-alert {
  margin: 0; padding: 12px 14px; border-radius: var(--er-radius);
  background: var(--er-rejected-bg); color: var(--er-rejected-fg); font-size: 13px; font-weight: 600;
}
.er-summary-actions { display: flex; flex-direction: column; gap: 8px; }
.er-summary-actions .btn-primary { min-height: 48px; font-size: 15px; }

/* All DataTables: flat rows (no stripes), soft hover, accent-tinted selection */
table.dataTable > tbody > tr > * {
  box-shadow: none !important;
  background-color: var(--er-surface);
}
table.dataTable > tbody > tr:hover > * { background-color: var(--er-subtle); }
table.dataTable > tbody > tr.selected > *,
table.dataTable.table-striped > tbody > tr.selected > * {
  background-color: var(--er-accent-soft) !important;
  color: var(--er-ink) !important;
}
table.dataTable > tbody > tr.selected a { color: var(--er-accent); }

/* Outlined "success" buttons are the forms' Save actions: keep them accented */
.btn-outline-success {
  --bs-btn-color: var(--er-accent); --bs-btn-border-color: var(--er-accent); --bs-btn-bg: var(--er-surface);
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--er-accent); --bs-btn-hover-border-color: var(--er-accent);
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--er-accent-hover); --bs-btn-active-border-color: var(--er-accent-hover);
}

/* ------------------------------------------------------------------ */
/* Other back-office lists (backend.partials.list_filters)            */
/* ------------------------------------------------------------------ */
.er-list-static table.dataTable > tbody > tr { cursor: default; }
.er-list-static table.dataTable > tbody > tr > td { white-space: normal; }
.er-list-static .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.er-list-static .badge.bg-success { background: var(--er-paid-bg) !important; color: var(--er-paid-fg) !important; }
.er-list-static .badge.bg-warning { background: var(--er-pending-bg) !important; color: var(--er-pending-fg) !important; }
.er-list-static .badge.bg-danger { background: var(--er-rejected-bg) !important; color: var(--er-rejected-fg) !important; }
.er-list-static .badge.bg-info,
.er-list-static .badge.bg-primary { background: var(--er-info-bg) !important; color: var(--er-info-fg) !important; }
.er-list-static .badge.bg-secondary { background: var(--er-neutral-bg) !important; color: var(--er-neutral-fg) !important; }
.er-list-static td .btn-sm { margin: 2px 0; border-radius: 8px; font-size: 12px; }
.er-list-static td .btn-sm strong { font-weight: 600; }
.er-filters .er-field { max-width: 300px; }
.er-filters .er-field--wide { max-width: 420px; }
.er-filters .select2-container .select2-selection--single { height: 44px !important; min-height: 44px; display: flex; align-items: center; }
.er-filters .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.er-filters .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.er-list-static table.dataTable > tbody > tr > td:last-child { white-space: nowrap; }
.er-list-main table.dataTable > tbody > tr.er-total-row > td { font-weight: 700; background: var(--er-subtle); border-top: 2px solid var(--er-line); }
.er-log-details summary { cursor: pointer; color: var(--er-accent); font-weight: 600; font-size: 13px; }
.er-log-details dl { margin: 8px 0 0; max-width: 520px; white-space: normal; }
.er-log-details dt { font-size: 12px; color: var(--er-muted); font-weight: 600; margin-top: 6px; }
.er-log-details dd { margin: 0; font-size: 12px; word-break: break-all; }
.er-log-details pre { margin: 4px 0 0; padding: 8px 10px; max-height: 240px; overflow: auto; background: var(--er-subtle); border-radius: 8px; font-size: 12px; white-space: pre-wrap; }

/* Revenue summary */
.er-revenue { display: flex; flex-direction: column; gap: 24px; transition: opacity .15s; }
.er-revenue.is-loading { opacity: .5; }
.er-revenue-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.er-revenue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.er-kpi--accent { border-color: var(--er-accent); box-shadow: inset 0 0 0 1px var(--er-accent); }

/* Top-up / UV return form */
.er-topup-form { padding: 24px; max-width: 900px; }
.er-topup-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; border: 0; }
.er-topup-types legend { margin-bottom: 8px; }
.er-topup-type { display: block; cursor: pointer; }
.er-topup-type input { position: absolute; opacity: 0; }
.er-topup-type-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--er-line); border-radius: var(--er-radius); background: var(--er-surface); }
.er-topup-type-body i { font-size: 22px; color: var(--er-accent); }
.er-topup-type-body small { color: var(--er-muted); }
.er-topup-type input:checked + .er-topup-type-body { border-color: var(--er-accent); box-shadow: inset 0 0 0 1px var(--er-accent); background: var(--er-accent-soft); }
.er-topup-type input:focus-visible + .er-topup-type-body { outline: 3px solid var(--er-accent-ring); }
.er-topup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 20px; }
.er-topup-warning { color: var(--er-rejected-fg); font-weight: 600; }
.er-topup-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.er-pill--return { background: var(--er-pending-bg); color: var(--er-pending-fg); }
.er-pill--topup { background: var(--er-info-bg); color: var(--er-info-fg); }
.er-topup-summary { padding: 10px 14px; border-radius: var(--er-radius-sm); font-weight: 600; }
.er-topup-summary.is-topup { background: var(--er-info-bg); color: var(--er-info-fg); }
.er-topup-summary.is-return { background: var(--er-pending-bg); color: var(--er-pending-fg); }

/* Table loader: spinner card over a dimmed table */
div.dataTables_wrapper { position: relative; }
div.dataTables_wrapper div.dataTables_processing {
  top: 96px; left: 50%; width: auto; min-width: 0; margin: 0; transform: translateX(-50%);
  padding: 12px 18px; z-index: 5; background: var(--er-surface);
}
div.dataTables_wrapper div.dataTables_processing > div:last-child { display: none; } /* DataTables' own dots */
.er-loader { display: inline-flex; align-items: center; gap: 10px; color: var(--er-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.er-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--er-accent-soft); border-top-color: var(--er-accent);
  animation: er-spin .7s linear infinite;
}
@keyframes er-spin { to { transform: rotate(360deg); } }
div.dataTables_wrapper:has(div.dataTables_processing[style*="block"]) table.dataTable tbody { opacity: .45; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .er-spinner { animation-duration: 2s; } }

/* ------------------------------------------------------------------ */
/* Create / edit forms (NiceAdmin cards): one consistent look          */
/* ------------------------------------------------------------------ */
.er-page-head--form { margin-bottom: 20px; }
.er-breadcrumb-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 14px; color: var(--er-muted); }
.er-breadcrumb-list li + li::before { content: "/"; margin-right: 8px; color: var(--er-line); }
.er-breadcrumb-list a { color: var(--er-muted); text-decoration: none; }
.er-breadcrumb-list a:hover { color: var(--er-accent); }

.section .card { overflow: hidden; }
.section .card > form > .card-body,
.section .card > .card-body { padding: 24px; }
.section .card .card-title { font-size: 18px; font-weight: 600; color: var(--er-ink); padding: 0 0 12px; }
.section .card hr { border-color: var(--er-line); opacity: 1; }

/* Fields */
.section .form-floating > .form-control,
.section .form-floating > .form-select { height: 56px; min-height: 56px; border-radius: var(--er-radius-sm); border-color: var(--er-input-line); }
.section .form-floating > textarea.form-control { height: auto; min-height: 96px; }
.section .form-floating > label { color: var(--er-muted); }
.section .form-control:focus, .section .form-select:focus { border-color: var(--er-accent); box-shadow: 0 0 0 4px var(--er-accent-ring); }
.section .col-form-label, .section .form-label { font-weight: 600; color: var(--er-ink); }
.section .form-control:not(.form-floating > .form-control), .section .form-select:not(.form-floating > .form-select) { min-height: 44px; border-radius: var(--er-radius-sm); border-color: var(--er-input-line); }
.section .row.mb-3, .section .row.g-3 { row-gap: 12px; }

/* Footer: actions on the right, the save action as the main button */
.section .card-footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 16px 24px; background: var(--er-subtle); border-top: 1px solid var(--er-line);
}
.section .card-footer.text-center { text-align: inherit; }
.section .card-footer .btn {
  min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--er-radius); font-size: 15px; font-weight: 600;
}
.section .card-footer .btn-outline-success,
.section .card-footer .btn-success,
.section .card-footer .btn-primary,
.section .card-footer .btn-outline-primary[type="submit"] {
  order: 3; background: var(--er-accent); border-color: var(--er-accent); color: #FFFFFF;
}
.section .card-footer .btn-outline-success:hover,
.section .card-footer .btn-success:hover,
.section .card-footer .btn-primary:hover { background: var(--er-accent-hover); border-color: var(--er-accent-hover); color: #FFFFFF; }
.section .card-footer .btn-outline-secondary,
.section .card-footer .btn-secondary { order: 1; margin-right: auto; background: transparent; border-color: transparent; color: var(--er-accent); }
.section .card-footer .btn-outline-secondary:hover { background: var(--er-accent-soft); color: var(--er-accent-hover); }
.section .card-footer .btn-outline-danger[type="reset"],
.section .card-footer .btn-outline-warning[type="reset"] { order: 2; background: transparent; border-color: var(--er-line); color: var(--er-muted); }
.section .card-footer .btn-outline-danger[type="reset"]:hover { border-color: var(--er-rejected-fg); color: var(--er-rejected-fg); }
@media (max-width: 575px) {
  .section .card-footer .btn { flex: 1 1 100%; justify-content: center; }
  .section .card-footer .btn-outline-secondary { margin-right: 0; }
}
.section .select2-container .select2-selection--single { height: 56px !important; display: flex; align-items: center; border-radius: var(--er-radius-sm); border-color: var(--er-input-line); }
.section .select2-container .select2-selection--single .select2-selection__rendered { line-height: 54px; padding-left: 12px; }
.section .select2-container .select2-selection--single .select2-selection__arrow { height: 54px; }

/* ------------------------------------------------------------------ */
/* Network detail pages (agent, sub-agent, partner)                   */
/* ------------------------------------------------------------------ */
.er-profile { display: flex; flex-direction: column; gap: 24px; }
.er-profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.er-profile-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.er-profile-avatar {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--er-radius-lg); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--er-accent); color: #FFFFFF; font-family: var(--er-font-display); font-size: 24px; font-weight: 600;
}
.er-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.er-profile-avatar--soft { background: var(--er-paid-bg); color: var(--er-paid-fg); }
.er-profile-avatar--dark { background: var(--er-sidebar); }
.er-profile-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.er-profile-title h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.015em; }
.er-profile-meta { margin-top: 4px; color: var(--er-muted); font-size: 14px; }
.er-profile-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.er-profile-kpis .er-kpi--hero { background: var(--er-accent); border-color: var(--er-accent); color: #FFFFFF; }
.er-profile-kpis .er-kpi--hero .er-kpi-label, .er-profile-kpis .er-kpi--hero .er-kpi-sub { color: var(--er-on-accent-muted); }
.er-kpi-value--sm { font-size: 22px; }
.er-profile-kpis .er-kpi-value { font-size: 26px; overflow-wrap: anywhere; }
.er-profile-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.er-profile-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.er-profile-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.er-profile .er-tabs { margin-bottom: 0; }
.er-profile .er-tabs .er-tab { background: none; border-top: 0; border-left: 0; border-right: 0; }
.er-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; font-size: 14px; }
.er-dl dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--er-muted); }
.er-dl dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.er-amount-in { color: var(--er-paid-fg); font-weight: 600; }
.er-amount-out { color: var(--er-rejected-fg); font-weight: 600; }
.er-tree { display: flex; flex-direction: column; gap: 6px; padding: 0 24px 20px; }
.er-tree-node {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px; border-radius: var(--er-radius-sm); font-size: 14px;
}
.er-tree-node--root { background: var(--er-sidebar); color: #FFFFFF; }
.er-tree-node--agent { margin-left: 20px; background: var(--er-accent-soft); }
.er-tree-node--sub { margin-left: 44px; background: var(--er-subtle); border-left: 2px solid var(--er-line); border-radius: 0 var(--er-radius-sm) var(--er-radius-sm) 0; }
.er-tree-node--self { outline: 2px solid var(--er-accent); }
.er-tree-amount { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.er-request { padding: 12px 24px; border-top: 1px solid var(--er-line-soft); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.er-request-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.er-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.er-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--er-input-line); color: var(--er-ink); font-size: 13px; font-weight: 500; text-decoration: none; background: var(--er-surface);
}
.er-chip:hover { border-color: var(--er-accent); color: var(--er-accent); }
.er-chip.is-active { background: var(--er-paid-bg); border-color: var(--er-paid-bg); color: var(--er-paid-fg); font-weight: 600; }
@media (max-width: 575px) { .er-dl { grid-template-columns: minmax(0, 1fr); } .er-tree-node--agent { margin-left: 8px; } .er-tree-node--sub { margin-left: 20px; } }
.er-profile .er-tab.active { color: var(--er-ink); font-weight: 600; border-bottom-color: var(--er-accent); }
.er-profile-kpis .er-kpi-value.er-kpi-value--sm { font-size: 20px; }