/*
 * components.css — reusable UI components: buttons, cards, badges, alerts,
 * progress bars, tabs, breadcrumbs, pagination, forms, tables, modals,
 * third-party widget skins, and the handful of page-specific components
 * (profile banner, invoice summary, discount group, etc.) confirmed still
 * in use by grep across application/views before being ported here from
 * the old diagnostic-app.css / custom-style.css.
 */

/* ================= Buttons ================= */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 0.5rem 1rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-danger  { background: var(--color-danger);  border-color: var(--color-danger); }
.btn-info    { background: var(--color-info);    border-color: var(--color-info); }
.btn-lg { border-radius: var(--radius); }

.btn-circle, .btn-group-xs > .btn {
  padding: 5px 13px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  border-radius: var(--radius-pill);
  height: 29px;
  min-width: 29px;
  margin: 0 1.6px;
}
.btn-circle.icon { padding: 5px 6px !important; }

/* ================= Cards / Panels ================= */
.card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface-card);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--surface-border);
  font-weight: 600;
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.card:hover.card-hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-card .stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); }
.stat-card .stat-label { font-size: var(--fs-sm); color: var(--text-secondary); }
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.stat-icon-success { background: var(--color-success-soft); color: var(--color-success); }
.stat-icon-info { background: var(--color-info-soft); color: var(--color-info); }
.stat-icon-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.stat-icon-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.stat-icon-primary { background: var(--color-primary-soft); color: var(--color-primary); }

.panel-custom .table.b-less > tbody > tr > td {
  border: 0;
  padding: 6px;
}
#email_triggers .panel-footer,
#smsConfig .panel-footer {
  margin: 0;
  border-top: 0;
}

/* ================= Badges ================= */
.badge {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.35em 0.65em;
}
.badge.bg-primary { background: var(--color-primary) !important; }
.badge.bg-success { background: var(--color-success) !important; }
.badge.bg-warning { background: var(--color-warning) !important; }
.badge.bg-danger  { background: var(--color-danger) !important; }
.badge.bg-info    { background: var(--color-info) !important; }

/* ================= Alerts ================= */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.alert-success { background: var(--color-success-soft); border-color: var(--color-success); color: #166534; }
.alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: #92400e; }
.alert-danger  { background: var(--color-danger-soft);  border-color: var(--color-danger);  color: #991b1b; }
.alert-info    { background: var(--color-info-soft);    border-color: var(--color-info);    color: #155e75; }
.alert-custom  { color: var(--color-info); border-color: var(--surface-border); }

/* ================= Progress bars ================= */
.progress { border-radius: var(--radius-pill); background: var(--gray-100); height: 0.6rem; }
.progress-bar { background: var(--color-primary); }
.progress-bar.bg-success { background: var(--color-success) !important; }
.progress-bar.bg-warning { background: var(--color-warning) !important; }
.progress-bar.bg-danger  { background: var(--color-danger) !important; }

/* ================= Tabs / Pills ================= */
.nav-tabs { border-bottom: 1px solid var(--surface-border); }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: 0;
}
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}
.nav-pills .nav-link.active { background: var(--color-primary); }

/* Legacy Bootstrap-3 tab markup: <ul class="nav nav-tabs"><li class="active"><a>…</a></li>.
   These use <a> directly (no .nav-link class) with .active on the <li>, so the BS5 rules
   above never matched and the tabs rendered as plain unstyled links. Style them to match.
   Used across the admin: Frontend > Manage Page, SMS settings, billing invoice, support, etc. */
.nav-tabs > li > a {
  display: inline-block;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 0;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-tabs > li > a:hover { color: var(--text-primary); border-bottom-color: var(--surface-border); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}

/* .nav-stacked (Bootstrap 3, dropped in BS4/5) forced pills to stack
   vertically instead of BS5's flex-row default. Used by frontend/sidebar.php
   (Page Section CMS sub-tabs). */
.nav-pills.nav-stacked {
  display: block;
}
.nav-pills.nav-stacked > li {
  display: block;
  margin-bottom: var(--space-1);
}

.mailbox .nav-pills > li > a { color: var(--text-primary); }
.mailbox .nav-pills > li > a:hover, .mailbox .nav-pills > li > a:focus { background: var(--gray-100); }
.mailbox .nav-pills > li.active > a,
.mailbox .nav-pills > li.active > a:hover,
.mailbox .nav-pills > li.active > a:focus { background: var(--color-primary); color: var(--text-inverse); }
.mailbox .nav-pills a .label { float: right; }

/* ================= Breadcrumbs ================= */
.breadcrumb { background: transparent; padding: 0; font-size: var(--fs-sm); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-secondary); }

/* ================= Pagination (native + DataTables) ================= */
/* Phones: 'full_numbers' paging emits First / Previous / 1..5 / … / N / Next /
   Last — eleven controls that cannot fit 390px. First and Last are dropped
   because the same jumps are already available: full_numbers always shows page
   1 and the final page as numbers. What remains (Previous, the numbers, Next)
   wraps onto a second row instead of squeezing. */
@media (max-width: 640px) {
	.dataTables_wrapper .dataTables_paginate .paginate_button.first,
	.dataTables_wrapper .dataTables_paginate .paginate_button.last { display: none; }
	.dataTables_wrapper .dataTables_paginate .pagination {
		display: flex; flex-wrap: wrap; justify-content: center;
		gap: 5px; padding-left: 0; margin-bottom: 0;
	}
	.pagination .page-link,
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		padding: 7px 11px !important; margin: 0 !important;
	}
	/* The row above the table (length menu + export buttons) stacks too. */
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter { float: none; text-align: left; }
	.dataTables_wrapper .dataTables_info { text-align: center; }
}

.dataTables_wrapper .dataTables_paginate { margin-top: 12px; }
.pagination .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 6px 13px !important;
  margin: 0 2px !important;
  min-width: 36px;
  /* Never break the label. Without this, min-width:36px is narrower than the
     word "Previous", so on a phone it wrapped to one letter per line and the
     pager grew ~170px tall — a column of single characters. */
  white-space: nowrap;
  text-align: center;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-border) !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--text-inverse) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-primary-soft) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-secondary) !important;
  background: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
  opacity: 0.5;
  cursor: not-allowed;
}
.dataTables_wrapper .dataTables_info { color: var(--text-secondary); font-size: var(--fs-sm); padding-top: 14px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: var(--fs-sm); color: var(--text-secondary); }
.dataTables_wrapper .dataTables_length select { margin: 0 6px; }

/* ================= Dropdown menu (BS5-native) ================= */
.dropdown-menu {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.dropdown-item:active { background: var(--color-primary); }

/* ================= Forms ================= */
.form-control, .form-select {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  padding: 0.5rem 0.75rem;
  background-color: var(--surface-card);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:disabled, .form-control[readonly] { background-color: var(--gray-100); }
.input-group .form-control { border-radius: var(--radius-sm); }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--color-primary-soft); }
label { color: var(--text-primary); }
.has-error .form-control { border-color: var(--color-danger); }
.help-block, .error { color: var(--color-danger); font-size: var(--fs-xs); }

.discount-group { display: table; }
.discount-group .input-group { min-width: 150px; }
.discount-group .amount-div {
  min-width: 80px;
  width: 100%;
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
}

/* Material switch toggle (used on a few config pages) */
.material-switch > input[type="checkbox"] { display: none; }
.material-switch > label { cursor: pointer; height: 0; position: relative; width: 40px; }
.material-switch > label::before {
  background: var(--gray-900);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}
.material-switch > label::after {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; }
.material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; }
.material-switch > .label-primary { background-color: var(--color-primary) !important; }

/* ================= Tables ================= */
.table { color: var(--text-primary); }
.table thead th {
  border-bottom: 2px solid var(--surface-border);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.table td, .table th { border-color: var(--surface-border); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--gray-50); }
.table-hover > tbody > tr:hover > * { background-color: var(--color-primary-soft); }
.table-bordered, .table-bordered td, .table-bordered th { border: 1px solid var(--surface-border); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}
.dataTables_wrapper .dt-buttons .btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  color: var(--text-primary);
  margin-right: var(--space-1);
}
.dataTables_wrapper .dt-buttons .btn:hover { background: var(--gray-100); }
table.dataTable { border-collapse: separate !important; border-spacing: 0; }
.export_title { display: none; }

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--surface-card);
}

/* ================= Modals (native Bootstrap + Magnific Popup) ================= */
.zoom-anim-dialog {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  overflow: hidden;
}
.zoom-anim-dialog .panel { border: none; box-shadow: none; margin-bottom: 0; border-radius: 0; }
.mfp-bg { background: rgba(15, 23, 42, 0.55); }
.mfp-close { color: var(--text-inverse); }
.mfp-content .modal-block .panel-body { padding: 16px; }
.payroll-t-modal { max-width: 1100px !important; }

/* Magnific Popup INLINE modals (Add Payment, Deduct, etc. opened via mfp_modal()):
   `.mfp-inline-holder .mfp-content { width: 100% }` stretches the content full-width,
   so the max-width .modal-block inside it pins to the LEFT. Auto margins re-center it.
   Vertical centering is handled by Magnific Popup's own .mfp-container rules. */
.mfp-content .modal-block,
.mfp-content .zoom-anim-dialog {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Global modal centering ----
   In the Bootstrap-3-markup + Bootstrap-5 + Tailwind mix, some modals render pinned
   to the left (and full height) instead of centered. Force EVERY modal dialog to sit
   dead-center — horizontally and vertically — with graceful scrolling for tall
   content. This mirrors BS5's own .modal-dialog-centered but applies to all modals,
   so no markup needs the class. */
.modal .modal-dialog {
  margin: 1.75rem auto !important;
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  width: calc(100% - 1rem);
  max-width: 500px;
}
.modal .modal-dialog.modal-sm { max-width: 300px; }
.modal .modal-dialog.modal-lg { max-width: 800px; }
.modal .modal-dialog.modal-xl { max-width: 1140px; }
.modal .modal-dialog > .modal-content { width: 100%; max-height: calc(100vh - 3.5rem); overflow-y: auto; }
@media (max-width: 575.98px) { .modal .modal-dialog { width: calc(100% - 1rem); max-width: none; } }

/* Loading indicators — keep any spinner/overlay dead-center.
   Covers the DataTables server-side "Processing…" indicator (shown while the client
   list and other big tables load a page) and the legacy .loading-overlay if used. */
.dataTables_processing,
div.dataTables_processing {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 160px;
  text-align: center;
  padding: 14px 22px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1060;
}
.loading-overlay { display: flex; align-items: center; justify-content: center; }

.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background-color: var(--surface-card); }
.modal-header { border-bottom: 1px solid var(--surface-border); padding: var(--space-5); }
.modal-body { padding: var(--space-5); }
.modal-footer { border-top: 1px solid var(--surface-border); padding: var(--space-4) var(--space-5); }
.modal-backdrop.show { opacity: 0.55; }

/* Shared brand-gradient modal header, used by client/view.php's Reseller/Bill
   Cycle/Recharge modals in place of 3x repeated inline styles. */
.modal-header-brand {
  background: linear-gradient(135deg, #00c6ff, #ff7eb3, #7b2ff7);
  color: #fff;
}
.modal-header-brand .btn-close { filter: brightness(0) invert(1); }

/* Magnific Popup quick-action modals (Add/Deduce Payment, Package, Change
   Mikrotik) — same gradient header treatment, plus an explicit close (x)
   button since these panels previously only had a text "Close" button in
   the footer, easy to miss/mistake for a broken close control. */
.mfp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: linear-gradient(135deg, #00c6ff, #ff7eb3, #7b2ff7);
  color: #fff;
}
.mfp-modal-header .panel-title { color: #fff; margin: 0; }
.mfp-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.85;
}
.mfp-close-btn:hover { opacity: 1; }

/* ================= Third-party widget skins ================= */
/* Select2 — matched to the app's .form-control look (height, radius, focus ring). */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  min-height: 40px;
  background-color: var(--surface-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 0 2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding-left: 12px;
  padding-right: 28px;
  color: var(--text-primary);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-secondary); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 8px;
}
/* Focus / open state — teal ring like .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: none;
}
.select2-dropdown {
  border-color: var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.select2-container--default .select2-results__option { padding: 8px 12px; font-size: var(--fs-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-primary); color: var(--text-inverse); }
.select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: none;
}
/* Multi-select tags in brand colour */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.dropify-wrapper { border: 1px dashed var(--surface-border); border-radius: var(--radius); background: var(--gray-50); }
.dropify-wrapper:hover { border-color: var(--brand-400); }

.daterangepicker { border-radius: var(--radius); box-shadow: var(--shadow-lg); border-color: var(--surface-border); }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--color-primary); }
.daterangepicker .ranges li.active { background-color: var(--color-primary); }

.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active { background-color: var(--color-primary) !important; background-image: none !important; }

.swal2-popup, .sweet-alert { border-radius: var(--radius-lg) !important; }

.bi { vertical-align: -0.125em; }

/* ================= Page-specific components still in real use ================= */

/* Profile banner (client/employee profile headers) */
.profile-head {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  padding: 30px 0;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.profile-head h5 {
  width: 100%;
  padding: 5px 5px 0 5px;
  text-align: justify;
  font-weight: bold;
  color: #fff;
  font-size: 25px;
  text-transform: capitalize;
  margin-bottom: 0;
}
.profile-head p {
  width: 100%;
  text-align: justify;
  padding: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
}

/* Image preview boxes (upload previews, profile photo, etc.) */
.image-content-center {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 22px;
  border: 1px solid var(--surface-border);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}
.image-content-center .preview {
  position: absolute;
  z-index: 1;
  padding: 5px;
  width: 100%;
  height: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  text-align: center;
}
.image-content-center .preview img {
  top: 50%;
  transform: translate(0, -50%);
  position: relative;
  max-width: 100%;
}
.image-content-center.user-pro {
  height: 334px;
  max-width: 90%;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.image-content-center.user-pro img { max-height: 320px !important; }

/* ── Client profile hero ─────────────────────────────────────────────── */
/* ---------- App shell -----------------------------------------------------
   `position: relative` on the scrolling column is load-bearing, not decoration.

   Select2 hides each original <select> with `position: absolute`, and an
   absolutely-positioned element resolves against its nearest POSITIONED
   ancestor. `main` was static, so that ancestor was the viewport itself: the
   hidden selects sat outside the scroll container entirely, were not clipped by
   its overflow, and each one landed at whatever its static position happened to
   be — far down a long form. On Client Create that stretched the document to
   1507px against an 799px window. The page then scrolled ~700px past the shell
   into nothing but background (the empty band under the form) and dragged the
   sidebar, which is only one screen tall, up out of view with it.

   Making `main` a containing block puts those elements back inside the thing
   that scrolls. Deliberately NOT paired with `overflow: hidden` on the shell:
   that would also have hidden the symptom, but by clipping stray content out of
   reach rather than containing it — a gap you can see beats content you cannot.

   `min-height: 0` is separate and defensive: a flex child defaults to
   `min-height: auto` and refuses to shrink below its content, which would let
   the column outgrow the shell instead of letting `main` scroll. */
.app-main {
  position: relative;
  min-height: 0;
}
.app-shell > *,
.app-col { min-height: 0; }

.client-hero {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  border-radius: var(--radius);
  color: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
.client-hero__top {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.client-hero__avatar {
  position: relative;
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 3px solid rgba(255, 255, 255, 0.35);
}
.client-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.client-hero__social {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: 0; padding: 4px 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
}
.client-hero__social a { color: #fff; opacity: 0.9; font-size: 13px; }
.client-hero__social a:hover { opacity: 1; }

.client-hero__ident { flex: 1 1 320px; min-width: 260px; }
.client-hero__name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.client-hero__name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}
.client-hero__name small {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  text-transform: none;
}
.client-hero__role {
  margin: 4px 0 0;
  opacity: 0.85;
  font-size: 0.95rem;
  text-transform: capitalize;
}
.client-hero__live { margin-left: auto; }

.client-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.client-status-badge.is-active   { background: rgba(34, 197, 94, 0.9);  border-color: transparent; }
.client-status-badge.is-hold     { background: rgba(234, 179, 8, 0.9);  border-color: transparent; color: #1f2937; }
.client-status-badge.is-inactive { background: rgba(239, 68, 68, 0.9);  border-color: transparent; }

/* Quick stats — full-width KPI row of three equal icon cards */
.client-hero__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.client-stat {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px 18px;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.client-stat__ic {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
}
.client-stat__meta { display: flex; flex-direction: column; min-width: 0; }
.client-stat__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.client-stat__value { font-size: 1.15rem; font-weight: 700; margin-top: 2px; line-height: 1.2; }
.client-stat__sub { display: block; font-size: 0.72rem; font-weight: 400; margin-top: 1px; opacity: 0.9; }
.client-stat__sub.good, .client-stat__value.good { color: #bbf7d0; }
.client-stat__sub.warn { color: #fde68a; }
.client-stat__sub.bad,  .client-stat__value.bad  { color: #fecaca; }
.client-stat__sub.muted { opacity: 0.7; }

/* Wallet funding split — what the balance is made of, sat on the dark hero.
   Its own row because a source name ("Farid (sub-reseller)") does not fit in
   the Balance tile, and because the split answers a different question from
   the total: not how much is there, but whose money it is. */
.client-wallet-src {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.client-wallet-src__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.client-wallet-src__chip {
  font-size: 0.75rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}
.client-wallet-src__chip b { font-weight: 700; }
.client-wallet-src__chip em { font-style: normal; opacity: 0.72; }
/* Tinted per source so the mix reads at a glance without being counted. */
.client-wallet-src__chip.is-online   { border-color: rgba(147, 197, 253, 0.75); color: #dbeafe; }
.client-wallet-src__chip.is-reseller { border-color: rgba(253, 230, 138, 0.75); color: #fef3c7; }
.client-wallet-src__chip.is-company  { border-color: rgba(196, 181, 253, 0.75); color: #ede9fe; }
.client-wallet-src__chip.is-refund   { border-color: rgba(167, 243, 208, 0.75); color: #d1fae5; }
.client-wallet-src__chip.is-legacy   { opacity: 0.72; }
.client-wallet-src__note { font-size: 0.68rem; opacity: 0.55; font-style: italic; }

/* The same attribution on a past payment, inside the light Payment History
   table — so it needs the opposite treatment to the chips above. */
.pay-src {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #475569;
  border-left: 2px solid #cbd5e1;
  padding-left: 7px;
}
.pay-src i { opacity: 0.6; margin-right: 2px; }

/* Labelled detail grid — even 4-up rows (12 cells = 3 clean rows) */
.client-hero__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 1199px) { .client-hero__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .client-hero__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .client-hero__grid { grid-template-columns: 1fr; } }
.client-cell__sep { opacity: 0.5; margin: 0 2px; }
.client-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
}
.client-cell__icon {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
}
.client-cell__body { display: flex; flex-direction: column; min-width: 0; }
.client-cell__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}
.client-cell__value {
  font-size: 0.92rem;
  font-weight: 600;
  word-break: break-word;
}
.client-cell__reveal { color: #fff; opacity: 0.8; margin-left: 6px; font-size: 0.8rem; }
.client-cell__reveal:hover { opacity: 1; }

@media (max-width: 575px) {
  .client-hero__live { margin-left: 0; }
  .client-hero__name { font-size: 1.3rem; }
}

/* Section divider with a trailing rule (list/report headers) */
.headers-line {
  margin: 0;
  line-height: 27px;
  padding: 0;
  color: var(--color-primary);
  font-size: 18px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.headers-line:before, .headers-line:after {
  content: " ";
  position: absolute;
  top: 50%;
  height: 2px;
  border-top: 2px solid var(--surface-border);
}
.headers-line:after {
  left: auto;
  width: 999em;
  margin: 0 0 0 12px;
}

/* Invoice summary block */
.invoice .table-responsive { border: none !important; }
.invoice-summary ul.amounts li {
  background: var(--gray-50);
  margin-bottom: 5px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 300;
  list-style-type: none;
}
.invoice-summary.author { margin-top: 30px !important; position: relative; }
.invoice-summary .authorised { position: absolute; bottom: 0; }
.auth-signatory {
  float: right;
  width: 40%;
  text-align: center;
  border-top: 1px solid var(--surface-border);
  font-weight: bold;
}
.auth-signatory-sm {
  width: 220px;
  text-align: center;
  border-top: 1px solid var(--surface-border);
  font-weight: bold;
}
.auth-pan { float: right !important; margin-top: 8px; }

/* Accordion-style panel groups (config/FAQ pages + every "Select Grounds For
   Filter" panel). White heading (inherits the panel's transparent bg + bottom
   divider), bold dark title, teal leading icon. */
.panel-group .panel-accordion { margin-bottom: var(--space-2); }
.panel-group .panel-accordion .panel-heading a { display: block; color: var(--text-primary); font-weight: 700; }
.panel-group .panel-accordion .panel-heading a:hover,
.panel-group .panel-accordion .panel-heading a:focus { color: var(--text-primary); text-decoration: none; }
.panel-group .panel-accordion .panel-heading a i { color: var(--color-primary); margin-right: 8px; }

/* Magnific Popup modal size/color variants */
.modal-block-lg { max-width: 800px; }
.modal-block-primary .panel-heading {
  background: var(--color-primary);
  color: var(--text-inverse);
}
.modal-block-primary .panel-heading .panel-title { color: var(--text-inverse); }

/* Form input variants used alongside .input-group-addon */
.input-group-icon .input-group-addon,
.input-search .input-group-addon {
  background: var(--gray-50);
}
.input-group-icon .icon i,
.input-search .icon i {
  color: var(--color-primary);
}
.input-rounded { border-radius: var(--radius-pill) !important; }

/* Custom checkbox/radio replacements (native inputs, modern accent-color) */
.checkbox-replace input[type="checkbox"],
.radio-custom input[type="radio"],
.i-checks input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}

/* BS3 image utility (BS4/5 renamed to .rounded, which we intentionally do
   not override — see .rounded note below) */
.img-rounded { border-radius: var(--radius-sm); }

/* Text size scale used across older views (distinct from Bootstrap 5's own
   fs-* classes, which don't exist — this app never used those) */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: 1rem; }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-weight-light { font-weight: 300; }
.text-weight-normal { font-weight: 400; }
.text-weight-semibold { font-weight: 600; }
.text-weight-bold { font-weight: 700; }

/* Brand-consistent semantic text colors (Bootstrap 5 ships its own
   .text-primary/-success/... — overridden here to use the same variables
   as the rest of the design system instead of Bootstrap's default palette,
   and instead of the old template's unrelated color values) */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-info    { color: var(--color-info) !important; }
.text-tertiary { color: var(--brand-500) !important; }

.invoice .bill-data { padding: 15px 0; }
.invoice .bill-data .value { display: inline-block; margin-left: 10px; min-width: 90px; padding: 5px; }
.invoice table.table { table-layout: fixed; }
.invoice .invoice-items > tbody tr:last-child > td { border-bottom: 1px solid var(--surface-border); }
.invoice .invoice-items #cell-id { width: 10%; }
.invoice .invoice-items #cell-item { width: 20%; }
.invoice .invoice-items #cell-desc { width: 20%; }
.invoice .invoice-items #cell-price { width: 10%; }
.invoice .invoice-items #cell-qty { width: 10%; }
.invoice .invoice-items #cell-total { width: 10%; }

@media print {
  .invoice { font-size: 9pt !important; }
  .bill-info address { margin-bottom: 5px; }
  .invoice table { font-size: inherit; }
}

/* ================= Dark mode component overrides ================= */
html.dark .panel, html.dark .card, html.dark .stat-card, html.dark .well,
html.dark .modal-content, html.dark .zoom-anim-dialog, html.dark .dropdown-menu {
  background: var(--surface-card);
  border-color: var(--surface-border);
  color: var(--text-primary);
}
html.dark .form-control, html.dark .form-select, html.dark .input-group-addon {
  background-color: var(--surface-card);
  border-color: var(--surface-border);
  color: var(--text-primary);
}
html.dark .form-control:disabled, html.dark .form-control[readonly] { background-color: var(--gray-800); }
html.dark .table { color: var(--text-primary); }
html.dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); }
html.dark .table-hover > tbody > tr:hover > * { background-color: rgba(6, 182, 212, 0.08); }
html.dark .table td, html.dark .table th { border-color: var(--surface-border); }
html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dataTables_wrapper .dt-buttons .btn,
html.dark .pagination .page-link {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--surface-border);
}
html.dark .btn-default { background-color: var(--gray-800); border-color: var(--surface-border); color: var(--text-primary); }
html.dark ::placeholder { color: var(--gray-500); }
html.dark .breadcrumb-item.active, html.dark small, html.dark .text-muted { color: var(--text-secondary) !important; }
html.dark .alert-custom { color: var(--gray-100); border-color: var(--surface-border); }
html.dark .image-content-center { border-color: var(--surface-border); background-color: var(--surface-card); }
html.dark .headers-line { color: var(--brand-400); }
html.dark .headers-line:before, html.dark .headers-line:after { border-color: var(--surface-border); }
html.dark .invoice-summary ul.amounts li { background: var(--surface-card); }
html.dark .auth-signatory, html.dark .auth-signatory-sm { border-color: var(--surface-border); }

/* ================= Customer portal on a phone =================
 * The portal is used one-handed, often by people who are not comfortable with
 * a browser. Two things measured badly at 390px and are fixed here rather than
 * in the markup, so the desktop layout is untouched:
 *
 *  - the nav strip scrolled sideways and left "Profile" off-screen with nothing
 *    to suggest there was more. Six items fit on two rows; wrapping shows all
 *    of them without anyone having to discover a swipe.
 *  - links and buttons were 32-38px tall. Touch guidance is about 44px, and a
 *    missed tap on "Pay with bKash" is the one that matters.
 */
@media (max-width: 640px) {
	.portal header .overflow-x-auto {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 4px;
	}
	.portal header .overflow-x-auto > a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.portal .btn-v2,
	.portal .btn,
	.portal a.btn-v2,
	.portal button[type="submit"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}