/* ============================================================================
   oiPay — Material Design 3 override layer  (Admin + User panel)
   Load order: app.min.css -> style.css -> components.css -> material-tokens.css
   -> material.css  (this file, last).
   Restyles the shared "blithe" class vocabulary so every panel view picks up
   the new look with no markup change. Behaviour untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Base / typography
   ------------------------------------------------------------------------- */
body,
body.light,
body.dark {
  background: var(--md-background) !important;
  color: var(--md-on-surface);
  font-family: var(--md-font-sans);
  font-size: var(--md-type-body-size);
  line-height: var(--md-type-body-lh);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .002em;
}

.main-content { background: transparent; }

h1, h2, h3, h4, h5, h6,
.section-header h1 { font-family: var(--md-font-display); color: var(--md-on-surface); letter-spacing: -.01em; }

a { color: var(--md-primary); }
a:hover { color: var(--md-primary-hover); }

.text-muted { color: var(--md-on-surface-muted) !important; }

::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--md-outline) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--md-outline); border-radius: var(--md-radius-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-muted); }

/* ---------------------------------------------------------------------------
   2. App shell — sidebar
   ------------------------------------------------------------------------- */
.main-sidebar,
.main-sidebar .sidebar-brand {
  background: var(--md-surface) !important;
  border-right: 1px solid var(--md-outline-variant);
  box-shadow: none !important;
  width: var(--md-sidebar-w);
}
.main-sidebar { transition: left var(--md-dur-med) var(--md-ease-standard); }

.sidebar-brand { height: var(--md-appbar-h); display: flex; align-items: center; }
.sidebar-brand a img.header-logo { max-height: 34px; width: auto; }

.sidebar-user {
  margin: var(--md-space-3) var(--md-space-4);
  padding: var(--md-space-4);
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
}
.sidebar-user .sidebar-user-picture img { border-radius: var(--md-radius-pill); border: 2px solid var(--md-surface); box-shadow: var(--md-elev-1); }
.sidebar-user .user-name { color: var(--md-on-surface); font-weight: 700; }
.sidebar-user .user-role { color: var(--md-on-surface-muted); font-size: .75rem; }
.sidebar-user .sidebar-userpic-btn a {
  background: var(--md-surface-3); color: var(--md-on-surface-medium);
  border-radius: var(--md-radius-pill); transition: background var(--md-dur-short), color var(--md-dur-short);
}
.sidebar-user .sidebar-userpic-btn a:hover { background: var(--md-primary); color: var(--md-on-primary); }

.sidebar-menu { padding: 0 var(--md-space-3); }
.sidebar-menu li.menu-header {
  color: var(--md-on-surface-muted); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: var(--md-space-5) var(--md-space-4) var(--md-space-2);
}
.sidebar-menu li a {
  color: var(--md-on-surface-medium);
  border-radius: var(--md-radius-pill);
  padding: 11px 16px; margin-bottom: 2px;
  font-weight: 500; font-size: .9rem;
  display: flex; align-items: center; gap: 14px;
  transition: background var(--md-dur-short) var(--md-ease-standard),
              color var(--md-dur-short) var(--md-ease-standard);
}
.sidebar-menu li a .fas, .sidebar-menu li a .fa,
.sidebar-menu li a i[data-feather],
.sidebar-menu li a svg { width: 20px; height: 20px; margin: 0; flex: none; stroke-width: 2; }
.sidebar-menu li a:hover {
  background: color-mix(in srgb, var(--md-primary) calc(var(--md-state-hover) * 100%), transparent);
  color: var(--md-primary);
}
.sidebar-menu li.active > a,
.sidebar-menu li a.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 700;
  box-shadow: none;
}
body.dark .sidebar-menu li.active > a,
body.dark .sidebar-menu li a.active { background: var(--md-primary-container); color: var(--md-on-primary-container); }

.sidebar-menu li a.has-dropdown:after { color: currentColor; opacity: .6; }
.sidebar-menu .dropdown-menu {
  background: transparent; box-shadow: none; border: 0; padding: 2px 0 4px;
}
.sidebar-menu .dropdown-menu li a { padding: 9px 16px 9px 52px; font-size: .86rem; border-radius: var(--md-radius-pill); }

/* Sidebar-mini (collapsed) active pill */
.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
  background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--md-elev-2);
}

/* ---------------------------------------------------------------------------
   3. App shell — top app bar
   ------------------------------------------------------------------------- */
.navbar-bg { display: none; }
.main-navbar,
.navbar.main-navbar {
  background: color-mix(in srgb, var(--md-surface) 88%, transparent) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--md-outline-variant);
  box-shadow: none;
  min-height: var(--md-appbar-h);
  padding: 0 var(--md-space-5);
}
.main-navbar .nav-link {
  color: var(--md-on-surface-medium);
  border-radius: var(--md-radius-pill);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--md-dur-short);
}
.main-navbar .nav-link:hover { background: var(--md-surface-3); color: var(--md-on-surface); }
.main-navbar .nav-link-user { width: auto; padding: 4px 6px; }
.main-navbar .user-img-radious-style { border-radius: var(--md-radius-pill); width: 34px; height: 34px; object-fit: cover; }
.main-navbar .headerBadge1 { background: var(--md-error); color: #fff; box-shadow: 0 0 0 2px var(--md-surface); }

/* ---------------------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------------------- */
.card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1);
  transition: box-shadow var(--md-dur-med) var(--md-ease-standard);
}
.card:hover { box-shadow: var(--md-elev-2); }
.card .card-header {
  border-bottom: 1px solid var(--md-outline-variant);
  background: transparent;
  padding: var(--md-space-5) var(--md-space-6);
}
.card .card-header h4, .card .card-header .card-title, .card .card-title {
  font-size: var(--md-type-title-size); font-weight: 700; color: var(--md-on-surface); margin: 0;
}
.card .card-body { padding: var(--md-space-6); color: var(--md-on-surface-medium); }
.card .card-footer { background: var(--md-surface-1); border-top: 1px solid var(--md-outline-variant); border-radius: 0 0 var(--md-radius-lg) var(--md-radius-lg); }

/* Stat cards (dashboard) — clean tonal Material, readable, consistent size */
.card-statistic-3 { border-radius: var(--md-radius-lg); overflow: hidden; padding: 22px 22px 20px; min-height: 148px; }
.card[class*="l-bg-"],
.card.l-bg-style1, .card.l-bg-style2, .card.l-bg-style3, .card.l-bg-style4,
.card.l-bg-orange, .card.l-bg-green, .card.l-bg-cyan, .card.l-bg-purple {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
}
/* left accent bar per card colour */
.card[class*="l-bg-"] { position: relative; }
.card[class*="l-bg-"]::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px;
  border-radius: 0 var(--md-radius-pill) var(--md-radius-pill) 0; background: var(--md-primary);
}
.card.l-bg-style2::before { background: var(--md-secondary); }
.card.l-bg-style3::before { background: var(--md-warning); }
.card.l-bg-style4::before { background: var(--md-success); }

.card[class*="l-bg-"] .card-statistic-3::after,
.card[class*="l-bg-"] .card-statistic-3::before { display: none !important; }
.card[class*="l-bg-"] .card-title,
.card[class*="l-bg-"] .card-content .card-title {
  color: var(--md-on-surface-muted) !important;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 6px;
}
.card[class*="l-bg-"] .card-content > span,
.card[class*="l-bg-"] .card-content > span.balance {
  font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); font-weight: 800;
  color: var(--md-on-surface) !important; font-family: var(--md-font-display);
  display: block; line-height: 1.15;
}
.card[class*="l-bg-"] .card-content p,
.card[class*="l-bg-"] .card-content .text-sm { color: var(--md-on-surface-muted) !important; font-size: .78rem; }
.card[class*="l-bg-"] .card-content p .fa { color: var(--md-success); }

.card[class*="l-bg-"] .card-icon.card-icon-large,
.card[class*="l-bg-"] .card-icon {
  font-size: 1.15rem !important; opacity: 1 !important; color: #fff !important;
  background: var(--md-primary) !important; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  top: 20px; right: 20px; box-shadow: var(--md-elev-2);
}
.card.l-bg-style2 .card-icon, .card.l-bg-style2 .card-icon-large { background: var(--md-secondary) !important; }
.card.l-bg-style3 .card-icon, .card.l-bg-style3 .card-icon-large { background: var(--md-warning) !important; }
.card.l-bg-style4 .card-icon, .card.l-bg-style4 .card-icon-large { background: var(--md-success) !important; }
.card[class*="l-bg-"] .progress { background: var(--md-surface-variant); height: 6px !important; }

/* ---------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--md-radius-pill);
  font-weight: 600; font-size: .875rem; letter-spacing: .01em;
  padding: 9px 20px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background var(--md-dur-short) var(--md-ease-standard),
              box-shadow var(--md-dur-short), transform var(--md-dur-short);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.btn-primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--md-primary-hover); color: var(--md-on-primary); box-shadow: var(--md-elev-2); }
.btn-primary:active { background: var(--md-primary-press); }

.btn-secondary { background: var(--md-secondary); color: var(--md-on-secondary); }
.btn-secondary:hover { background: color-mix(in srgb, var(--md-secondary) 88%, #000); color: var(--md-on-secondary); }

.btn-success { background: var(--md-success); color: #fff; }
.btn-info    { background: var(--md-info); color: #fff; }
.btn-warning { background: var(--md-warning); color: #fff; }
.btn-danger  { background: var(--md-error); color: #fff; }
.btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover { box-shadow: var(--md-elev-2); filter: brightness(.96); }

.btn-outline-primary { border-color: var(--md-outline); color: var(--md-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }

.btn-light, .btn-white, .btn-default {
  background: var(--md-surface-3); color: var(--md-on-surface-medium); border-color: transparent;
}
.btn-light:hover { background: var(--md-surface-variant); color: var(--md-on-surface); }

.btn-link { color: var(--md-primary); box-shadow: none; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-lg { padding: 12px 26px; font-size: .95rem; }
.btn-icon, .btn.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--md-radius-pill) 0 0 var(--md-radius-pill); }
.btn-group > .btn:last-child { border-radius: 0 var(--md-radius-pill) var(--md-radius-pill) 0; }

/* Inline action button in tables */
td .btn.btn-sm { border-radius: var(--md-radius-sm); padding: 4px 9px; }

/* ---------------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------------- */
.form-label, label { color: var(--md-on-surface-medium); font-weight: 600; font-size: .82rem; margin-bottom: 6px; }

.form-control, .form-select, .custom-select,
input.form-control, textarea.form-control, select.form-control {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface);
  min-height: 44px;
  padding: 10px 14px;
  font-size: .9rem;
  transition: border-color var(--md-dur-short), box-shadow var(--md-dur-short);
}
.form-control::placeholder { color: var(--md-on-surface-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent);
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.form-control:disabled, .form-control[readonly] { background: var(--md-surface-2); color: var(--md-on-surface-muted); }

.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--md-error); }
.form-control.is-valid { border-color: var(--md-success); }
.invalid-feedback { color: var(--md-error); }

.input-group-text {
  background: var(--md-surface-2); border: 1px solid var(--md-outline);
  color: var(--md-on-surface-muted); border-radius: var(--md-radius-sm);
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.form-switch .form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--md-surface); border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm) !important; min-height: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--md-on-surface); line-height: 42px; padding-left: 14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent);
}
.select2-dropdown {
  background: var(--md-surface); border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-md); box-shadow: var(--md-elev-3); overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--md-primary); color: var(--md-on-primary); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--md-outline); border-radius: var(--md-radius-xs); background: var(--md-surface); color: var(--md-on-surface); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--md-primary-container); color: var(--md-on-primary-container); border: 0; border-radius: var(--md-radius-pill); }

/* ---------------------------------------------------------------------------
   7. Tables + DataTables
   ------------------------------------------------------------------------- */
.table { color: var(--md-on-surface-medium); border-color: var(--md-outline-variant); }
.table thead th, .table th {
  background: var(--md-surface-2);
  color: var(--md-on-surface-muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  border-top: 0;
  padding: 14px 16px;
}
.table td { border-top: 1px solid var(--md-outline-variant); padding: 14px 16px; vertical-align: middle; color: var(--md-on-surface); }
.table.table-bordered, .table.table-bordered td, .table.table-bordered th { border-color: var(--md-outline-variant); }
.table-hover tbody tr { transition: background var(--md-dur-short); }
.table-hover tbody tr:hover { background: var(--md-surface-2); }
.table-responsive { border-radius: var(--md-radius-md); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--md-surface); border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-sm); min-height: 40px; padding: 6px 12px; color: var(--md-on-surface);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--md-radius-sm) !important; border: 0 !important; color: var(--md-on-surface-medium) !important;
  padding: 6px 12px; margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--md-primary) !important; color: var(--md-on-primary) !important; box-shadow: none !important; border: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--md-surface-3) !important; color: var(--md-on-surface) !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--md-on-surface-muted); }

/* ---------------------------------------------------------------------------
   8. Badges / chips / status pills
   ------------------------------------------------------------------------- */
.badge {
  border-radius: var(--md-radius-pill);
  font-weight: 600; font-size: .72rem; letter-spacing: .02em;
  padding: 5px 11px;
}
.badge-primary, .bg-primary { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.badge-success, .bg-success { background: var(--md-success-container) !important; color: var(--md-success) !important; }
.badge-warning, .bg-warning { background: var(--md-warning-container) !important; color: var(--md-warning) !important; }
.badge-danger,  .bg-danger  { background: var(--md-error-container) !important;   color: var(--md-error) !important; }
.badge-info,    .bg-info    { background: var(--md-info-container) !important;    color: var(--md-info) !important; }
.badge-secondary { background: var(--md-surface-variant) !important; color: var(--md-on-surface-medium) !important; }

/* ---------------------------------------------------------------------------
   9. Progress
   ------------------------------------------------------------------------- */
.progress { background: var(--md-surface-variant); border-radius: var(--md-radius-pill); overflow: hidden; }
.progress-bar { background: var(--md-primary); border-radius: var(--md-radius-pill); }
.progress-bar.l-bg-purple { background: var(--md-primary); }
.progress-bar.l-bg-orange { background: var(--md-warning); }
.progress-bar.l-bg-cyan   { background: var(--md-info); }
.progress-bar.l-bg-green  { background: var(--md-success); }

/* ---------------------------------------------------------------------------
   10. Modals / dialogs
   ------------------------------------------------------------------------- */
.modal-content {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-xl);
  box-shadow: var(--md-elev-5);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--md-outline-variant); padding: var(--md-space-5) var(--md-space-6); }
.modal-header .modal-title { font-size: var(--md-type-title-size); font-weight: 700; color: var(--md-on-surface); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: var(--md-space-6); color: var(--md-on-surface-medium); }
.modal-footer { border-top: 1px solid var(--md-outline-variant); padding: var(--md-space-4) var(--md-space-6); }
.modal-backdrop.show { background: rgba(12, 12, 24, .55); backdrop-filter: blur(2px); }
.btn-close {
  border-radius: var(--md-radius-pill); opacity: .6; transition: background var(--md-dur-short), opacity var(--md-dur-short);
  padding: 10px;
}
.btn-close:hover { background: var(--md-surface-3); opacity: 1; }

/* ---------------------------------------------------------------------------
   11. Dropdown menus
   ------------------------------------------------------------------------- */
.dropdown-menu {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elev-3);
  padding: 6px;
}
.dropdown-menu .dropdown-item {
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface-medium); font-size: .875rem; padding: 9px 12px;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item.active {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.dropdown-menu .dropdown-item.text-danger:hover { background: var(--md-error-container); color: var(--md-error); }
.dropdown-divider { border-color: var(--md-outline-variant); }
.dropdown-title, .dropdown-header { color: var(--md-on-surface-muted); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.dropdown-list .dropdown-item { border-bottom: 1px solid var(--md-outline-variant); border-radius: 0; }

/* ---------------------------------------------------------------------------
   12. Alerts / toasts
   ------------------------------------------------------------------------- */
.alert { border: 0; border-radius: var(--md-radius-md); border-left: 4px solid; padding: var(--md-space-4) var(--md-space-5); }
.alert-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: var(--md-primary); }
.alert-success { background: var(--md-success-container); color: var(--md-success); border-color: var(--md-success); }
.alert-warning { background: var(--md-warning-container); color: var(--md-warning); border-color: var(--md-warning); }
.alert-danger  { background: var(--md-error-container);   color: var(--md-error);   border-color: var(--md-error); }
.alert-info    { background: var(--md-info-container);    color: var(--md-info);    border-color: var(--md-info); }

.jq-toast-single, .toast {
  border-radius: var(--md-radius-md) !important;
  box-shadow: var(--md-elev-4) !important;
  font-family: var(--md-font-sans) !important;
  padding: 14px 18px !important;
}

/* ---------------------------------------------------------------------------
   13. Tabs / nav pills / breadcrumb / pagination
   ------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--md-outline-variant); gap: 4px; }
.nav-tabs .nav-link {
  border: 0; border-radius: 0; color: var(--md-on-surface-muted); font-weight: 600;
  padding: 12px 16px; border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { color: var(--md-on-surface); border-bottom-color: var(--md-outline); }
.nav-tabs .nav-link.active {
  color: var(--md-primary); background: transparent; border-bottom-color: var(--md-primary);
}
.nav-pills .nav-link { border-radius: var(--md-radius-pill); color: var(--md-on-surface-medium); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--md-primary); color: var(--md-on-primary); }

.breadcrumb { background: transparent; padding: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--md-on-surface-muted); }
.breadcrumb-item.active { color: var(--md-on-surface); }

.page-item .page-link {
  color: var(--md-on-surface-medium); border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-sm) !important; margin: 0 3px; min-width: 38px; text-align: center;
}
.page-item.active .page-link { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
.page-item .page-link:hover { background: var(--md-surface-3); color: var(--md-on-surface); }

/* ---------------------------------------------------------------------------
   14. Section headers / misc blithe pieces
   ------------------------------------------------------------------------- */
.section-header h1 { font-size: var(--md-type-headline-size); font-weight: 700; }
.section-header .section-header-breadcrumb .breadcrumb-item { color: var(--md-on-surface-muted); }

.list-unstyled-border li, .list-unstyled-border .media { border-bottom: 1px solid var(--md-outline-variant); }

hr { border-color: var(--md-outline-variant); }

.text-primary { color: var(--md-primary) !important; }
.text-success { color: var(--md-success) !important; }
.text-warning { color: var(--md-warning) !important; }
.text-danger  { color: var(--md-error) !important; }
.text-info    { color: var(--md-info) !important; }

/* ---------------------------------------------------------------------------
   15. Loaders
   ------------------------------------------------------------------------- */
#loader, #page-overlay { background: var(--md-background); }
.lds-double-ring > div { border-color: var(--md-primary) transparent var(--md-primary) transparent; }

/* ---------------------------------------------------------------------------
   16. Auth pages (layouts/auth.php)
   ------------------------------------------------------------------------- */
body:not(#app) .card.card-primary { border-top: 0; }
.login-brand img { max-height: 44px; }
#app .main-wrapper.container, .simple-auth-wrap { background: var(--md-background); }

/* ---------------------------------------------------------------------------
   17. Tactile depth — soft neumorphic / glass accents (premium white)
   ------------------------------------------------------------------------- */
.card { box-shadow: var(--md-elev-1), inset 0 1px 0 rgba(255,255,255,.6); }
.main-navbar, .navbar.main-navbar {
  background: color-mix(in srgb, var(--md-surface) 82%, transparent) !important;
}
.sidebar-user { box-shadow: inset 2px 2px 6px rgba(20,22,60,.04), inset -2px -2px 6px rgba(255,255,255,.7); }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-warning:hover {
  box-shadow: var(--md-elev-2), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.modal-content { box-shadow: var(--md-elev-5); border-color: color-mix(in srgb, var(--md-outline-variant) 60%, transparent); }
.dropdown-menu { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--md-surface) 94%, transparent); }

/* ---------------------------------------------------------------------------
   18. RESPONSIVE — mobile / tablet / laptop / desktop, no overflow, touch-first
   ------------------------------------------------------------------------- */
*, *::before, *::after { max-width: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
.main-content, .section, .section-body { min-width: 0; overflow-wrap: break-word; }
.section .section-header h1 { font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem); }

/* fluid card padding */
@media (max-width: 575.98px) {
  .card .card-body   { padding: var(--md-space-4); }
  .card .card-header { padding: var(--md-space-4); }
  .main-content { padding: 12px !important; }
  .section { padding: 0 !important; }
}

/* ---- Sidebar drawer: polish + backdrop (backdrop driven by oipay-responsive.js) */
@media (max-width: 1024px) {
  .main-sidebar { box-shadow: var(--md-elev-4) !important; z-index: 1045; }
}
body.oip-drawer-open::after {
  content: ""; position: fixed; inset: 0; z-index: 1044;
  background: rgba(12, 12, 24, .42);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  animation: oip-fade .2s var(--md-ease-standard);
}
@keyframes oip-fade { from { opacity: 0 } to { opacity: 1 } }

/* ---- Tables: horizontal scroll always, card-stack on phones ---------- */
.table-responsive, .dataTables_wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; }
.table-responsive > .table { min-width: 520px; }

@media (max-width: 640px) {
  table.table.responsive-stack,
  .table-stack table.table { min-width: 0; }
  table.table.responsive-stack thead,
  .table-stack table.table thead { position: absolute; left: -9999px; }
  table.table.responsive-stack tr,
  .table-stack table.table tr {
    display: block; margin-bottom: 12px;
    border: 1px solid var(--md-outline-variant); border-radius: var(--md-radius-md);
    background: var(--md-surface); box-shadow: var(--md-elev-1); padding: 6px 4px;
  }
  table.table.responsive-stack td,
  .table-stack table.table td {
    display: flex; justify-content: space-between; gap: 16px;
    border: 0; border-bottom: 1px solid var(--md-outline-variant);
    text-align: right; padding: 10px 14px;
  }
  table.table.responsive-stack td:last-child,
  .table-stack table.table td:last-child { border-bottom: 0; }
  table.table.responsive-stack td::before,
  .table-stack table.table td::before {
    content: attr(data-label); font-weight: 700; color: var(--md-on-surface-muted);
    text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; text-align: left;
  }
}

/* DataTables controls stack on small screens */
@media (max-width: 640px) {
  .dataTables_wrapper .row > div { width: 100%; text-align: left !important; margin-bottom: 8px; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; }
  .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; }
}

/* ---- Forms & grids on small screens -------------------------------- */
@media (max-width: 767.98px) {
  .row { --bs-gutter-x: 1rem; }
  [class*="col-"] { margin-bottom: 4px; }
  .form-control, .form-select, .select2-container { width: 100% !important; }
  .btn { padding: 10px 16px; }
  .btn-group { flex-wrap: wrap; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header .card-header-action { width: 100%; }
  .modal-dialog { margin: 12px; }
  .modal-body { padding: var(--md-space-4); }
}

/* ---- Touch targets ------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .sidebar-menu li a { padding-top: 13px; padding-bottom: 13px; }
  .dropdown-menu .dropdown-item { padding: 12px; }
  .btn, .page-link, .nav-link { min-height: 42px; }
  a, button { touch-action: manipulation; }
}

/* ---- Stat-card grid: 2-up on phones, never cramped ---------------- */
@media (max-width: 575.98px) {
  .card-statistic-3 { padding: var(--md-space-4); }
  .card[class*="l-bg-"] .card-content > span { font-size: 1.5rem; }
  .card[class*="l-bg-"] .card-icon.card-icon-large { width: 42px; height: 42px; font-size: 1.1rem; top: 16px; right: 16px; }
}

/* invoice / print views */
@media print {
  .main-sidebar, .main-navbar, .navbar-bg, #loader, #page-overlay,
  .card-header-action, .btn, .no-print { display: none !important; }
  .main-content { margin: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ---------------------------------------------------------------------------
   19. UI/UX polish + perceived performance
   ------------------------------------------------------------------------- */

/* page-ready fade — content eases in once JS marks the doc ready.
   No-JS safe: without .oip-ready the content simply shows normally. */
html.oip-ready .main-content > .section,
html.oip-ready .main-content > section {
  animation: oip-rise .34s var(--md-ease-standard) both;
}
@keyframes oip-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the blithe full-screen loader — calmer, faster out */
#loader, #page-overlay {
  transition: opacity .3s var(--md-ease-standard), visibility .3s;
}
#page-overlay:not(.visible) { opacity: 0; visibility: hidden; }
.lds-double-ring > div { border-width: 3px; }

/* buttons: crisp tactile press + consistent focus ring */
.btn { will-change: transform; }
.btn:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-radius-xs);
}

/* cards: gentle hover lift (desktop pointer only) */
@media (hover: hover) and (pointer: fine) {
  .card { transition: box-shadow var(--md-dur-med) var(--md-ease-standard),
                      transform var(--md-dur-med) var(--md-ease-standard); }
  .card:hover { transform: translateY(-2px); }
}

/* skeleton shimmer utility (use class="oip-skeleton" on placeholders) */
.oip-skeleton {
  background: linear-gradient(100deg, var(--md-surface-2) 30%, var(--md-surface-variant) 50%, var(--md-surface-2) 70%);
  background-size: 200% 100%;
  animation: oip-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--md-radius-sm); color: transparent !important;
}
@keyframes oip-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* smoother scrolling + link taps */
html { scroll-behavior: smooth; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------------
   20. Shared partials + spacing consistency (touches every list/form page)
   ------------------------------------------------------------------------- */

/* consistent vertical rhythm between rows/cards */
.section > .row { margin-bottom: 0; }
.main-content .row + .row { margin-top: 4px; }
.card.mb-1, .card.m-2, .mb-1 > .card { margin-bottom: 18px !important; }
.main-content { padding: clamp(14px, 1vw + 10px, 26px); }

/* page header (show_page_header) */
.section-header, .page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.section-header h1, .page-header h1, .section-title {
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem); font-weight: 800; margin: 0;
}
.section-header .btn-outline-primary, .page-header .btn {
  border-radius: var(--md-radius-pill);
}

/* filter card (show_page_header_filter) — quieter, tidier */
.card .card-header .card-title.text-info { color: var(--md-on-surface-muted) !important; }
.card .card-header .card-options a,
.card .card-header .card-header-action > a {
  width: 34px; height: 34px; border-radius: var(--md-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-muted); background: var(--md-surface-3);
  transition: background var(--md-dur-short), color var(--md-dur-short), transform var(--md-dur-short);
}
.card .card-header .card-options a:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.card .card-header .card-options a[aria-expanded="false"] i { transform: rotate(180deg); }

/* status-filter pills row */
.btn-group .btn.btn-light, .filter-status .btn,
.card-body .btn-group > .btn {
  border-radius: var(--md-radius-pill) !important; margin: 3px;
}

/* empty state (show_empty_item / .data-empty) — centred, calm, premium */
.data-empty {
  padding: 48px 20px !important;
}
.data-empty .my-content {
  max-width: 360px; margin: 0 auto;
  background: var(--md-surface); border: 1px dashed var(--md-outline);
  border-radius: var(--md-radius-lg); padding: 34px 28px;
}
.data-empty .my-content .img {
  height: 96px !important; width: auto !important;
  opacity: .9; margin-bottom: 14px !important;
}
.data-empty .my-content .title {
  color: var(--md-on-surface-medium); font-weight: 600; font-size: .95rem;
}

/* pagination wrapper alignment */
.col-md-12 > .float-end .pagination { margin: 12px 0 0; flex-wrap: wrap; }

/* timeline / activity lists */
.activities .activity, .timeline .timeline-item {
  border-left: 2px solid var(--md-outline-variant);
}
.activities .activity .activity-icon,
.timeline .timeline-item .timeline-icon {
  background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important;
  box-shadow: 0 0 0 4px var(--md-surface);
}

/* invoice view inside panel */
.invoice, .invoice-title h2 { color: var(--md-on-surface); }
.invoice .table td, .invoice .table th { border-color: var(--md-outline-variant); }

/* tooltips */
.tooltip .tooltip-inner {
  background: var(--md-on-surface); color: var(--md-surface);
  border-radius: var(--md-radius-sm); font-weight: 600; padding: 6px 10px;
}

/* keep number columns aligned */
td .badge, .table td, .currency, .amount { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   21. Component completion — gateway/settings forms, toggles, pricing cards
   (covers merchant/settings/elements/*.php — ~30 payment-gateway forms — plus
   plan/index.php, add_funds, and every other view built from the same
   render_elements_form() / modal_buttons() / custom-switch vocabulary.
   Zero markup changes: these classes are already emitted by the PHP helpers.)
   ------------------------------------------------------------------------- */

/* Material pill toggle (replaces the Tabler "custom-switch") */
.custom-switch-indicator {
  background: var(--md-surface-variant) !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-pill) !important;
  box-shadow: none !important;
  transition: background var(--md-dur-med) var(--md-ease-standard), border-color var(--md-dur-med) var(--md-ease-standard);
}
.custom-switch-indicator::before {
  background: #fff !important;
  box-shadow: var(--md-elev-1) !important;
  transition: transform var(--md-dur-med) var(--md-ease-standard);
}
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}
.custom-switch-input:focus ~ .custom-switch-indicator {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent) !important;
}
.custom-switch-description { color: var(--md-on-surface-medium); font-weight: 500; }
.custom-switch-input:checked ~ .custom-switch-description { color: var(--md-on-surface); font-weight: 600; }

/* checkbox groups (custom-controls-stacked / form-check) */
.custom-controls-stacked .form-check { margin-bottom: 8px; }
.custom-control-label { color: var(--md-on-surface-medium); }
.form-check-input { border-color: var(--md-outline); }

/* AJAX loading overlay (.dimmer / .dimmer.active / .loader) */
.dimmer { position: relative; }
.dimmer .dimmer-content { transition: opacity var(--md-dur-med) var(--md-ease-standard); }
.dimmer.active .dimmer-content { opacity: .35; pointer-events: none; }
.dimmer .loader {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px;
  border-radius: 50%; border: 3px solid color-mix(in srgb, var(--md-primary) 20%, transparent);
  border-top-color: var(--md-primary); display: none; animation: oip-spin .8s linear infinite;
}
.dimmer.active .loader { display: block; }
@keyframes oip-spin { to { transform: rotate(360deg); } }

/* section divider used between form blocks */
.ln_solid { border: 0; border-top: 1px solid var(--md-outline-variant); margin: var(--md-space-5) 0; }

/* standalone page titles (roles, staff, coupon list headers not wrapped in .section-header) */
.page-title {
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem); font-weight: 800; margin: 0 0 var(--md-space-4);
  color: var(--md-on-surface);
}

/* settings file-upload icon-button (website logo / favicon / email templates etc.) */
.input-group.settings .btn {
  border: 1px solid var(--md-outline); border-left: 0;
  background: var(--md-surface-2); color: var(--md-on-surface-muted);
  border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
  position: relative; overflow: hidden;
}
.input-group.settings .btn:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.input-group.settings .btn i { font-size: 1rem; position: relative; }
.input-group.settings .btn input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* gateway-settings toggle sections (methods/*.php's #personal/#agent/#merchant blocks) */
.type-class {
  padding: var(--md-space-4) var(--md-space-5);
  margin: var(--md-space-3) 0;
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
}
.type-class label { display: block; margin-bottom: 6px; }
.row.bg-light, .bg-light {
  background: var(--md-surface-2) !important;
  border-radius: var(--md-radius-md);
  padding: var(--md-space-2) 0;
}

/* gateway form card header — small brand icon chip */
.card-header h3.card-title i,
.card-header h4 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--md-radius-sm);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font-size: .85em; margin-right: 4px;
}

/* pricing cards (plan/index.php) */
.card.active-plan, .card.border-success.border-4 {
  border: 2px solid var(--md-success) !important;
  box-shadow: var(--md-elev-3) !important;
}
.card .price-toggle { font-family: var(--md-font-display); font-weight: 800; color: var(--md-on-surface); }
.card .pricing-currency, .card .pricing-duration { color: var(--md-on-surface-muted); }
.shadow-primary { box-shadow: var(--md-elev-3) !important; }
.badge.bg-label-primary { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.badge.bg-label-success { background: var(--md-success-container) !important; color: var(--md-success) !important; }
.badge.bg-label-warning { background: var(--md-warning-container) !important; color: var(--md-warning) !important; }
.badge.bg-label-danger  { background: var(--md-error-container) !important;   color: var(--md-error) !important; }
.badge.bg-label-info    { background: var(--md-info-container) !important;    color: var(--md-info) !important; }
.badge-center { display: inline-flex; align-items: center; justify-content: center; }

/* icon-library normalisation — fa / bx / feather / bootstrap-icons all read as one system */
.card-title i, .btn i, td i, li i, .form-check-label i,
[class*="fa-"], [class*="bx-"], [class^="bi-"], [data-feather] {
  vertical-align: -1px;
}
li i.bx, li i.fa, li i.fa-solid, li i.fa-regular { color: var(--md-success); }

/* btn-dark aligned to the ink token instead of a flat vendor grey */
.btn-dark { background: var(--md-on-surface); border-color: var(--md-on-surface); color: var(--md-surface); }
.btn-dark:hover, .btn-dark:focus { background: var(--md-on-surface-medium); border-color: var(--md-on-surface-medium); }
.btn-min-width { min-width: 130px; }

/* key/value detail tables inside modals (transaction/invoice "view" popups) */
.modal-body > table.table td:first-child,
.modal-body > .table td:first-child {
  color: var(--md-on-surface-muted); font-weight: 600; width: 38%; white-space: nowrap;
}
.modal-body > table.table td:last-child { color: var(--md-on-surface); }

/* profile card avatar */
.user-avatar-section img, .info-container ~ * img.rounded-circle,
img.rounded-circle.b-1 {
  border-radius: var(--md-radius-pill) !important;
  box-shadow: var(--md-elev-2); border: 3px solid var(--md-surface);
  background: var(--md-surface-2);
}
.info-container .list-unstyled li { padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); }
.info-container .list-unstyled li:last-child { border-bottom: 0; }
.info-container .fw-medium { color: var(--md-on-surface-muted); font-weight: 600 !important; }

/* ---------------------------------------------------------------------------
   22. Reduced-motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html.oip-ready .main-content > .section,
  html.oip-ready .main-content > section { animation: none; }
}