/* JPT design system. Sole application stylesheet; do not load legacy theme files.
   Order: tokens → foundation → shell → components → page layouts → responsive.
   Branding assets are unchanged. */
:root {
  color-scheme: light;
  --bg:#f3f2ee; --surface:#fff; --surface-soft:#f7f7f4; --navy:#11263e;
  --ink:#172b43; --muted:#526176; --line:#d9dfdf; --gold:#d5b36b;
  --gold-soft:#f7eedb; --gold-ink:#77551a; --success:#176344; --danger:#a52b3b;
  --blue:#245a91; --radius:14px; --sidebar-width:252px;
  --shadow:0 3px 14px rgba(23,43,67,.04);
}
* {box-sizing:border-box}
html {min-height:100%}
body {margin:0;min-width:0;background:var(--bg);color:var(--ink);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif}
button,input,select,textarea {font:inherit;min-width:0;max-width:100%}
button,a,input,select,textarea,summary {touch-action:manipulation}
a {color:var(--blue);text-decoration:none}
a:hover {text-decoration:underline}
button,summary {cursor:pointer}
img,svg,canvas {max-width:100%}
h1,h2,h3,h4,p {overflow-wrap:anywhere}
h1 {font-size:28px;line-height:1.3;letter-spacing:-.025em;font-weight:750;margin:0}
h2 {font-size:18px;font-weight:700;margin:0 0 5px}
h3 {font-size:16px;font-weight:700;margin:0 0 5px}
p {color:var(--muted);margin:5px 0 14px}
small {font-size:12px}
strong {font-weight:700}
[hidden],.hidden {display:none !important}
:focus-visible {outline:3px solid #9b731f;outline-offset:3px}
.skip-link {position:fixed;top:8px;left:8px;z-index:20000;background:white;padding:10px;transform:translateY(-150%)}
.skip-link:focus {transform:none}
.main {min-height:100vh;margin-left:var(--sidebar-width);padding:26px 28px 38px;min-width:0}
.main > * {min-width:0}
.sidebar {position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100dvh;padding:22px 14px 14px;background:var(--navy);color:#e0e7ee;display:flex;flex-direction:column;z-index:1100;overflow-y:auto}
.sidebar-brand {display:flex;gap:12px;align-items:center;padding:12px 8px 22px;border-bottom:1px solid #33465a;margin-bottom:18px}
.brand-logo-wrap {width:58px;height:58px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#fff}
.brand-logo-image {width:100%;height:100%;object-fit:contain}
.brand-name {font-size:17px;font-weight:750;color:#fff}
.brand-subtitle {font-size:12px;color:#ddbf80;margin-top:4px}
.sidebar-toggle {align-self:flex-end;min-height:32px;width:32px;padding:0;border:1px solid #536478;border-radius:8px;background:#20374e;color:#f0d89e}
.menu-label {font-size:12px;color:#b4c1cf;margin:0 12px 8px}
.menu {display:grid;gap:4px}
.menu a {display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:9px;color:#d8e2ed;font-size:13px}
.menu a i {width:20px;flex-shrink:0;text-align:center;font-size:17px}
.menu a:hover {background:#233c54;text-decoration:none;color:#fff}
.menu a.active {background:#344350;box-shadow:inset 3px 0 var(--gold);color:#fff}
.menu a.active i {color:#e6c780}
.language-switch {display:flex;gap:6px;margin:18px 4px;padding:4px;background:#1d334b;border-radius:8px}
.language-option {flex:1;text-align:center;color:#d1dbe7;padding:6px;border-radius:6px;font-size:12px}
.language-option.active {background:var(--gold);color:var(--navy);font-weight:750}
.sidebar-bottom {margin-top:auto;padding:14px 4px 0;border-top:1px solid #33465a}
.sidebar-user {display:flex;gap:10px;align-items:center}
.user-avatar {display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;background:#344a61;border-radius:10px;color:#f4d698;font-weight:750}
.user-information {min-width:0}
.user-name {color:#fff;font-weight:650;overflow-wrap:anywhere}
.user-role {font-size:11px;color:#b6c4d3}
.logout-button {display:flex;gap:10px;align-items:center;min-height:42px;padding:8px;color:#d8e2ed;margin-top:12px}
.sidebar-collapsed {--sidebar-width:78px}
.sidebar-collapsed .sidebar {padding-inline:10px}
.sidebar-collapsed .sidebar-brand {padding:12px 0;justify-content:center}
.sidebar-collapsed .brand-logo-wrap {width:46px;height:46px}
.sidebar-collapsed .sidebar-brand>div:last-child,.sidebar-collapsed .menu-label,.sidebar-collapsed .menu span,.sidebar-collapsed .user-information,.sidebar-collapsed .logout-button span {display:none}
.sidebar-collapsed .menu a,.sidebar-collapsed .sidebar-user,.sidebar-collapsed .logout-button {justify-content:center}
.sidebar-collapsed .menu a {padding:10px}
.sidebar-collapsed .language-switch {flex-direction:column;margin-inline:0}
.sidebar-collapsed .sidebar-toggle i {transform:rotate(180deg)}
.mobile-close,.jpt-mobile-nav,.nav-backdrop {display:none}
/* Shared heading, panel and form components */
.page-heading,.bank-page-heading,.customer-header,.customer-form-head,.page-header,.ops-page-head,.jpt-page-header {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-heading p,.bank-page-heading p,.customer-title p,.customer-form-title p,.page-header p,.ops-page-head p,.jpt-page-header p {font-size:13px;margin:6px 0 0}
.jpt-kicker,.bank-page-kicker,.ops-eyebrow,.eyebrow {font-size:11px;font-weight:750;letter-spacing:.09em;color:var(--gold-ink);margin-bottom:6px}
.jpt-header-actions,.ops-head-actions,.bank-heading-actions,.customer-header-actions,.detail-heading-actions,.form-actions,.history-filter-actions,.footer-actions,.form-footer-right,.modal-actions,.action-group,.table-actions,.cash-chand-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-actions,.history-filter-actions,.footer-actions {justify-content:flex-end;margin-top:16px}
.form-card,.calculation-card,.management-card,.master-card,.customer-form-card,.detail-card,.summary-card,.report-card,.report-filter-card,.table-card,.ops-toolbar,.ops-table-card,.jpt-panel,.transaction-history-section,.bank-account-card,.bank-toolbar {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.form-card,.management-card,.master-card,.report-card,.report-filter-card,.detail-card {padding:20px}
.form-card {margin-bottom:16px}
.management-card>p,.master-card>p,.report-card>p {font-size:13px;margin-bottom:18px}
label,.form-label {display:block;font-size:13px;font-weight:650;color:#34475b;margin:0 0 6px}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea,.form-control-custom {width:100%;min-height:42px;padding:9px 12px;border:1px solid #aebbc6;border-radius:8px;background:#fff;color:var(--ink);line-height:1.4}
input::placeholder,textarea::placeholder {color:#788697}
input:focus,select:focus,textarea:focus {border-color:#9b731f;outline:2px solid #e6d6ae;outline-offset:1px}
textarea {min-height:90px;resize:vertical}
input[readonly],.readonly-input {background:var(--surface-soft);color:var(--muted)}
button {min-height:40px;padding:8px 13px;border:1px solid #b9c4cd;border-radius:8px;background:#fff;color:var(--ink);font-weight:650;line-height:1.4}
button:hover {background:var(--surface-soft)}
button:disabled,.disabled {opacity:.5;cursor:not-allowed;pointer-events:none}
.save-button,.primary-button,.bank-primary-btn,.add-customer-button,.credit-button,.search-button,.form-save,.jpt-btn-gold,.ops-button-primary,.login-button,.login-btn,.cash-deposit-btn {background:var(--gold);color:#16283b;border:1px solid #ba944b}
.save-button:hover,.primary-button:hover,.bank-primary-btn:hover,.form-save:hover,.jpt-btn-gold:hover,.ops-button-primary:hover {background:#cba557;color:#16283b}
.secondary-button,.back-button,.customer-back,.cancel-button,.form-cancel,.clear-button,.jpt-btn-ghost,.ops-button-secondary,.bank-secondary-btn {background:var(--surface);border:1px solid #b9c4cd;color:var(--ink)}
.save-button,.primary-button,.secondary-button,.back-button,.customer-back,.cancel-button,.form-cancel,.form-save,.form-delete,.clear-button,.search-button,.jpt-btn,.ops-button,.add-customer-button,.row-button,.action-button,.page-link {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;border-radius:8px;font-size:13px;font-weight:650;line-height:1.4;text-decoration:none}
.danger-action,.form-delete {color:var(--danger);background:#fff3f3;border-color:#dfb7bf}
.success-action,[data-tone=success] {color:var(--success);background:#ecf6ef;border-color:#acd0b9}
.back-link {display:inline-flex;gap:6px;font-size:13px;margin-bottom:8px}
.field-help,.table-subtext,.customer-subtext {display:block;color:var(--muted);font-size:12px;margin-top:4px;overflow-wrap:anywhere}
.required-note,.required-star {color:var(--danger);font-size:12px}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-group {min-width:0}
.full,.full-width,.form-group-full {grid-column:1/-1}
.form-section,.detail-section {padding:20px;border-bottom:1px solid var(--line)}
.form-card .form-section {padding:0 0 20px;margin-bottom:20px}
.form-section:last-child,.detail-section:last-child {border:0}
.section-heading,.form-section-title,.form-section-header,.detail-section-title {display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-heading-content {display:flex;align-items:center;gap:12px}
.section-heading p,.form-section-title p,.form-section-header p,.detail-section-title p {font-size:12px;margin:3px 0 0}
.section-icon,.form-section-icon,.detail-section-title>i,.ops-title-icon {width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border-radius:10px;background:var(--gold-soft);color:var(--gold-ink)}
.detail-section-title {justify-content:flex-start}
.input-with-unit,.ops-input-icon {position:relative}
.input-with-unit input {padding-right:62px}
.input-unit {position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted)}
.ops-input-icon i {position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.ops-input-icon input {padding-left:34px}
.alert,.form-alert,.login-error,.error {padding:12px 14px;margin-bottom:16px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px}
.alert-success,.form-alert.success {background:#eaf5ee;color:var(--success);border-color:#b8d9c5}
.alert-danger,.form-alert.error,.login-error,.error {background:#fff0f2;color:var(--danger);border-color:#e6b9c2}
.form-footer {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;background:var(--surface-soft);border-radius:0 0 var(--radius) var(--radius)}
.danger-zone {border-top:1px solid #e4c6cb;margin-top:22px;padding-top:16px}
.danger-zone p {font-size:12px}
.delete-confirm summary {display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid #dfb7bf;border-radius:8px;cursor:pointer;font-weight:650}
.delete-confirm[open] summary {margin-bottom:12px}
/* Tables use real header labels for responsive records, not nth-child labels. */
.table-responsive,.history-scroll,.ops-table-scroll,.user-table-wrap,.master-table-wrap,.customer-table-wrap,.report-table-wrap,.jpt-table-wrap,.transfer-history-table-wrap {width:100%;max-width:100%;min-width:0;overflow:auto;border-radius:10px}
table {width:100%;border-collapse:collapse;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
th,td {padding:11px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid #e1e5e5}
th {background:#eaf0f1;color:#34475b;font-size:12px;font-weight:700;white-space:nowrap}
td {background:#fff}
tbody tr:nth-child(even)>td {background:#f8f9f7}
tbody tr:hover>td {background:#fcf4e4}
th[data-jpt-sortable] {cursor:pointer;user-select:none}
th[data-jpt-sortable]::after {content:" ↕";color:var(--muted)}
th[aria-sort=ascending]::after {content:" ↑"}
th[aria-sort=descending]::after {content:" ↓"}
.cell-label,.record-toggle {display:none}
.sort-note {font-size:12px;color:var(--muted);margin:8px 12px}
.customer-table,.history-table,.transaction-table {white-space:nowrap}
.history-scroll {max-height:65vh}
.history-table th {position:sticky;top:0;z-index:2}
.history-note-cell {max-width:280px;white-space:normal;min-width:150px}
.history-total-row td {background:#e8f4ed;font-weight:700;border-top:1px solid #bad5c4}
.history-total-row.withdraw-total td {background:#fff1ed}
.history-total-value {color:var(--success);text-align:right}
.withdraw-total .history-total-value {color:var(--danger)}
.history-total-label {text-align:right}
.history-total-count {font-size:12px;font-weight:500;margin-left:8px}
.credit-after-table-value {color:var(--blue);font-weight:750}
.table-actions,.customer-table .action-group {flex-wrap:nowrap}
.table-action-button,.ops-icon-button {display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:7px;color:var(--ink);border:1px solid #bdc9d2;border-radius:8px;background:#fff}
.copied {background:#e0f2e6;color:var(--success)}
.status-badge,.status-pill,.jpt-status,.role-pill,.bank-state,.account-type-pill {display:inline-flex;align-items:center;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;background:#edf0f3;color:#35475d}
.status-success,.status-active,.jpt-status-success,.bank-state.active {background:#e4f3e9;color:#165b3d}
.status-pending,.jpt-status-pending {background:#fff0cc;color:#795000}
.status-cancelled,.jpt-status-cancelled,.status-inactive {background:#fbe9ec;color:#9f293d}
.role-owner {background:#eee9fa;color:#573681}
.role-lead {background:#e6eff8;color:#265681}
.role-sup {background:#e2f1eb;color:#185c47}
.role-admin {background:#fbf0d8;color:#795000}
.criminal-normal {color:var(--success)}
.criminal-warning {color:var(--danger);font-weight:700}
.empty-state,.empty-report,.empty-master,.jpt-empty,.bank-empty-state,.transfer-empty {padding:28px 16px;text-align:center;color:var(--muted)}
.empty-icon {font-size:24px;margin-bottom:8px}
.pagination {display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:20px 0 0}
.page-link {border:1px solid #bdc7ce;background:#fff;color:var(--ink);min-width:40px}
.page-link.active {background:var(--navy);color:#fff}
.text-right,.money-cell {text-align:right}
.inline-form {display:inline-flex}
/* Dashboard */
.jpt-kpi-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.jpt-kpi {border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;background:white;padding:14px;min-width:0}
.jpt-kpi-top {display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
.jpt-kpi-top i {color:var(--gold-ink)}
.jpt-kpi strong {display:block;font-size:clamp(20px,1.65vw,28px);line-height:1.3;margin:8px 0 5px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.jpt-kpi small {display:block;color:var(--muted);font-size:11px}
.jpt-kpi small b {color:var(--success)}
.jpt-dashboard-grid {display:grid;gap:16px;margin-top:16px}
.jpt-dashboard-grid-main {grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}
.jpt-dashboard-grid-bottom {grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}
.jpt-panel-header,.ops-table-head,.panel-header,.recent-header {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.jpt-panel-header h2,.ops-table-head h2,.recent-header h2 {font-size:15px;margin:0}
.jpt-panel-header p,.ops-table-head p,.recent-header p {font-size:12px;margin:4px 0 0}
.jpt-panel-link {font-size:12px;font-weight:650;flex-shrink:0}
.jpt-live-dot {font-size:11px;color:var(--gold-ink);background:var(--gold-soft);padding:4px 8px;border-radius:6px}
.jpt-chart-list {height:190px;padding:16px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}
.jpt-chart-column {height:100%;display:grid;grid-template-rows:1fr auto auto;align-items:end;gap:4px;text-align:center;min-width:0}
.jpt-chart-bar-area {height:100%;display:flex;align-items:flex-end;justify-content:center}
.jpt-chart-bar {width:30px;max-width:70%;min-height:2px;background:var(--gold);border-radius:5px 5px 0 0}
.jpt-chart-column strong {font-size:12px;overflow-wrap:anywhere}
.jpt-chart-column span {font-size:11px;color:var(--muted)}
.jpt-ranking-list {padding:0 16px}
.jpt-ranking-row {display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.jpt-ranking-row:last-child {border:0}
.jpt-ranking-no {display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--gold-soft);color:var(--gold-ink);font-size:12px}
.jpt-ranking-copy strong,.jpt-ranking-copy span {display:block;overflow-wrap:anywhere}
.jpt-ranking-copy span {font-size:12px;color:var(--muted)}
.jpt-ranking-value {font-weight:700;font-variant-numeric:tabular-nums}
/* Transactions and customers */
.transaction-layout {display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
.form-column {min-width:0}
.calculation-card {position:sticky;top:18px}
.calculation-header {padding:16px;background:var(--gold-soft);border-radius:14px 14px 0 0;border-bottom:1px solid #dfd4b9}
.calculation-header p {font-size:12px;margin:4px 0 0}
.calculation-body {padding:14px;display:grid;gap:10px}
.calculation-item {padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px}
.calculation-label {display:flex;gap:8px;justify-content:space-between;font-size:12px;color:var(--muted);flex-wrap:wrap}
.calculation-label span:first-child {font-weight:700;color:var(--ink)}
.calculation-value {font-size:25px;font-weight:750;margin-top:5px;overflow-wrap:anywhere}
.calculation-unit {font-size:12px;color:var(--muted)}
.credit-after-item,.primary-highlight-card {background:#edf3f9;border-color:#bdd0e1}
.credit-after-item .calculation-value {color:var(--blue)}
.copy-button {width:100%;margin-top:10px;background:var(--navy);color:white;border-color:var(--navy)}
.rate-information {display:flex;gap:8px;background:var(--gold-soft);color:var(--gold-ink);border-radius:8px;padding:10px;font-size:12px}
.slip-header,.slip-scan-section,.slip-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slip-scan-section {background:var(--surface-soft);border:1px dashed #bac4c9;border-radius:10px;padding:10px;margin:8px 0 16px}
.slip-upload-btn {display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;background:#fff;border:1px solid #b9c4cd;border-radius:8px;margin:0;cursor:pointer}
.slip-preview:empty {display:none}
.slip-preview img {width:64px;height:64px;object-fit:contain;border-radius:8px}
.transaction-history-section {margin-top:20px}
.ops-toolbar {padding:16px;margin-bottom:16px}
.ops-title-wrap {display:flex;align-items:center;gap:12px}
.ops-quick-row {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.ops-segment-group {display:flex;gap:4px;padding:4px;border:1px solid var(--line);background:var(--surface-soft);border-radius:9px}
.ops-segment {padding:8px 18px;color:var(--muted);border-radius:6px;font-size:13px}
.ops-segment.active {background:var(--navy);color:white}
.ops-toolbar-note {font-size:12px;color:var(--muted)}
.ops-filter-row,.customer-filter,.report-filter-form {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.ops-filter-actions {display:flex;gap:8px}
.per-page-control {padding:10px 16px;color:var(--muted);font-size:12px}
.customer-filter {padding:16px;border:1px solid var(--line);border-radius:14px;background:white;margin-bottom:16px}
.customer-count {display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--gold-soft);border-radius:10px}
.customer-count strong {font-size:20px}
.customer-count span {font-size:12px;color:var(--muted)}
.customer-main-name {font-weight:750;display:block}
.row-button {font-size:12px;border:1px solid #b9c4cd;background:#fff;color:var(--blue);padding:7px 10px}
.row-button.credit-button {background:var(--gold);color:var(--navy);border-color:#ba944b}
.detail-button,.edit-button {background:var(--surface-soft)}
.detail-grid,.calculation-detail-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.detail-item,.calculation-detail-card,.summary-box,.modal-field {background:var(--surface-soft);padding:14px;border:1px solid var(--line);border-radius:10px;min-width:0}
.detail-item span,.calculation-detail-card>span,.summary-label,.modal-field span {display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.detail-item strong,.modal-field strong {display:block;overflow-wrap:anywhere}
.calculation-detail-card>strong {display:block;font-size:24px;overflow-wrap:anywhere}
.inline-copy-button {margin-top:10px;color:var(--blue)}
.transaction-detail-card {padding:0}
.detail-card-header {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px;background:var(--surface-soft);border-radius:14px 14px 0 0}
.detail-label {color:var(--muted);font-size:12px}
.note-detail-box,.note-box {white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-soft);padding:14px;border-radius:10px}
.customer-detail-page .summary-card {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px;margin-bottom:16px}
.detail-row {display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.detail-value {overflow-wrap:anywhere;font-size:13px;font-weight:650}
/* User and website management */
.user-management-grid,.master-layout {display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.management-form,.master-form-grid {display:grid;gap:14px}
.user-filter-form,.master-filter-form {display:grid;grid-template-columns: minmax(140px,1.4fr) repeat(2,minmax(100px,1fr)) auto auto;gap:8px;margin-bottom:16px;align-items:end}
.master-filter-form {grid-template-columns:minmax(140px,1fr) minmax(110px,1fr) auto auto}
.user-name-cell strong,.user-name-cell small {display:block}
.user-name-cell small,.self-label {color:var(--muted);font-size:12px}
.user-table td {min-width:90px}
.row-editor {min-width:120px}
.row-editor summary {color:var(--blue);font-size:13px;padding:9px 10px;border:1px solid #b9c4cd;border-radius:8px;background:#fff;white-space:normal}
.row-editor[open] {min-width:230px}
.row-editor[open] summary {margin-bottom:12px;background:#edf3f9}
.edit-user-form,.inline-edit-form,.password-form {display:grid;gap:10px}
.edit-user-form input,.password-form input {width:100%}
.row-editor .form-control-custom {font-size:14px}
.row-editor label {margin-bottom:0}
.report-summary-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0}
.report-stat {padding:15px;background:white;border:1px solid var(--line);border-radius:12px;min-width:0}
.report-stat-label {color:var(--muted);font-size:12px}
.report-stat-value {font-size:23px;font-weight:750;overflow-wrap:anywhere;margin-top:6px}
.report-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
/* Bank accounts and dialogs */
.bank-summary-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.bank-summary-card {display:flex;gap:12px;align-items:center;padding:14px;background:white;border:1px solid var(--line);border-radius:12px}
.bank-summary-card span,.bank-summary-card small {display:block;color:var(--muted);font-size:12px}
.bank-summary-card strong {display:block;font-size:24px}
.bank-summary-icon,.cash-chand-icon {display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--gold-soft);color:var(--gold-ink)}
.bank-toolbar {padding:14px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.bank-tabs {display:flex;gap:6px;flex-wrap:wrap}
.bank-tab {display:flex;gap:6px;align-items:center}
.bank-tab.active {background:var(--navy);color:#fff;border-color:var(--navy)}
.bank-tab span {font-size:12px;padding:1px 6px;background:#e7edf2;color:var(--ink);border-radius:5px}
.bank-search-form {flex:1;min-width:230px;max-width:420px}
.bank-search-form label {font-size:12px}
#accountSearchStatus {font-size:12px;color:var(--muted)}
.bank-section-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.bank-section-heading p {font-size:12px;margin:4px 0 0}
.bank-section-count {font-size:12px;color:var(--muted)}
.bank-account-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:14px}
.bank-account-card {padding:16px;position:relative;border-top:3px solid var(--gold)}
.bank-color-bar {display:none}
.bank-account-top {display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.bank-account-identity {display:flex;gap:10px;align-items:center;min-width:0}
.bank-account-card h3 {font-size:16px}
.bank-mini-logo {width:42px;height:42px;flex-shrink:0;border:1px solid var(--line);border-radius:10px;background:#fff;padding:5px}
.bank-logo {width:100%;height:100%;object-fit:contain}
.bank-code-badge {font-size:11px;font-weight:700;color:var(--muted)}
.bank-account-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 0}
.bank-account-details span,.bank-account-details strong {display:block;overflow-wrap:anywhere}
.bank-account-details span {font-size:12px;color:var(--muted)}
.bank-account-details strong {font-size:13px}
.bank-amount-panel {background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:12px}
.bank-amount-panel span,.bank-amount-panel small {display:block;color:var(--muted);font-size:12px}
.bank-amount-panel strong {display:block;font-size:26px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.bank-card-actions {display:flex;gap:8px;margin-top:12px}
.bank-card-actions>* {flex:1;min-width:0}
.bank-card-btn {width:100%;font-size:12px}
.bank-card-btn.reset {color:var(--gold-ink)}
.bank-empty-state {grid-column:1/-1;border:1px dashed #aebbc6;border-radius:12px}
.bank-modal,.customer-modal {position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(13,28,45,.55);padding:20px;z-index:4000}
.customer-modal.open {display:flex}
.bank-modal-box,.modal-card,.transfer-history-box {width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:white;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 80px #10273d30}
.bank-modal-box label {margin-top:12px}
.bank-modal-box .modal-actions {margin-top:18px;justify-content:flex-end}
.modal-card {width:min(820px,100%);padding:0}
.modal-head,.modal-footer,.transfer-history-top,.transfer-history-footer {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head p,.transfer-history-top p {font-size:12px;margin:4px 0 0}
.modal-body {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}
.modal-footer {border-top:1px solid var(--line);border-bottom:0;justify-content:flex-end;flex-wrap:wrap}
.modal-footer a {padding:9px 12px;border-radius:8px;background:var(--gold-soft);color:var(--gold-ink)}
.modal-close {font-size:22px;line-height:1;min-width:40px}
body.modal-open {overflow:hidden}
.transfer-history-box {width:min(1100px,100%);padding:0}
.transfer-history-kicker {font-size:11px;color:var(--gold-ink)}
.transfer-account {display:flex;gap:8px;align-items:center;min-width:190px}
.transfer-account small,.transfer-date span {display:block;font-size:12px;color:var(--muted)}
.transfer-bank-badge {padding:4px 6px;background:#e9f0f6;color:var(--blue);font-size:11px;border-radius:5px;white-space:nowrap}
.transfer-amount {font-weight:750}
#editTransferModal {z-index:4100}
/* Account selector: layout only; selection/calculation logic remains in templates. */
.account-select {position:relative;width:100%;min-width:0}
.account-select-native {position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;pointer-events:none}
.account-select-trigger {width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;text-align:left}
.account-select-main,.account-option-left {display:flex;gap:8px;align-items:center;min-width:0;flex:1}
.account-select-owner,.account-option-copy {overflow-wrap:anywhere;min-width:0}
.account-select-side,.account-option-right {display:flex;gap:6px;align-items:center;font-size:12px}
.account-option-copy strong,.account-option-copy small {display:block}
.account-option-copy small {font-size:11px;color:var(--muted)}
.account-select-panel {display:none;position:absolute;top:calc(100% + 6px);inset-inline:0;background:white;border:1px solid #aebbc6;border-radius:10px;padding:8px;box-shadow:0 10px 30px #172b4326;z-index:5000}
.account-select.is-open .account-select-panel {display:block}
.account-select-search {margin-bottom:6px}
.account-select-list {max-height:230px;overflow:auto}
.account-select-option {display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;border:0;text-align:left;padding:10px 8px;flex-wrap:wrap}
.account-select-option.is-selected {background:var(--gold-soft)}
.account-select-empty {padding:16px;text-align:center;color:var(--muted)}
.account-bank-badge {background:#344b60;color:white;border-radius:5px;padding:4px 6px;font-size:10px;flex-shrink:0}
.bank-aba {background:#a82a43}.bank-acleda {background:#205283}.bank-wing {background:#246440}.bank-true-money {background:#9a4b13}
/* Authentication */
.auth-page {background:radial-gradient(ellipse at 15% 15%,#eee3cb,transparent 52%),var(--bg)}
.login-page,.login-wrapper {min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card {width:min(430px,100%);padding:30px;background:white;border:1px solid #d5d9d5;border-top:4px solid var(--gold);border-radius:18px;box-shadow:0 18px 55px #172b4312}
.brand {display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:20px}
.brand img,.login-card .logo {width:68px;height:68px;object-fit:contain}
.brand strong {display:block;font-size:21px}
.brand span {display:block;font-size:12px;color:var(--muted);margin-top:3px}
.heading {padding:22px 0 18px}
.heading h1 {font-size:26px}
.heading p {font-size:13px;margin-bottom:0}
.input-wrap,.input-box {display:flex;align-items:center;gap:10px;border:1px solid #aebbc6;border-radius:8px;padding:0 12px;margin-bottom:18px;min-height:48px;background:var(--surface-soft)}
.input-wrap:focus-within,.input-box:focus-within {outline:2px solid #d6bd84;outline-offset:1px}
.input-wrap input,.input-box input {border:0!important;outline:0!important;box-shadow:none;background:transparent!important;flex:1;width:0;min-width:0;font-size:16px;padding-inline:0}
.input-wrap>i,.input-box>i {color:var(--muted)}
.eye {border:0;padding:6px;background:transparent;min-width:40px;color:var(--muted)}
.login-button,.login-btn {width:100%;min-height:48px}
.footer,.privacy-note {font-size:12px;color:var(--muted);text-align:center;margin:20px 0 0}
.password-note {padding:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:13px;border-radius:8px;margin-bottom:16px}
/* Layout breakpoints: expanded desktop >= 992; mobile drawer below 992;
   data records <= 768; compact phone <= 480. No global overflow hiding. */
@media (max-width:1250px) {
 .main {padding:22px 20px 32px}
 .jpt-kpi-grid,.report-summary-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
 .jpt-dashboard-grid-main,.jpt-dashboard-grid-bottom {grid-template-columns:1fr}
 .user-management-grid,.master-layout {grid-template-columns:1fr}
 .user-create-card .management-form {grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
 .transaction-layout {grid-template-columns:1fr}
 .calculation-card {position:static}
 .calculation-body {grid-template-columns:repeat(2,minmax(0,1fr))}
 .rate-information {grid-column:1/-1}
 .detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px) {
 body {--sidebar-width:0px;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 .main {margin-left:0;padding:20px 18px 30px}
 .sidebar {display:none;width:min(320px,90vw);height:100dvh;z-index:3200;padding:18px}
 body.mobile-menu-open {overflow:hidden}
 .mobile-menu-open .sidebar {display:flex}
 .sidebar-toggle {display:none}
 .mobile-close {display:block;align-self:flex-end;background:#20374e;color:white;border-color:#536478;font-size:23px;padding:2px 12px}
 .nav-backdrop {display:block;position:fixed;inset:0;width:100%;height:100%;z-index:3100;background:#10273d80;border:0;border-radius:0}
 .jpt-mobile-nav {display:flex;position:fixed;bottom:0;inset-inline:0;z-index:3000;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));min-height:66px;background:var(--navy);border-top:1px solid #46566a;box-shadow:0 -2px 14px #172b4320}
 .jpt-mobile-nav a,.jpt-mobile-nav button {display:flex;flex:1;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:5px 2px;color:#e0e7ee;border:0;background:transparent;font-size:11px;line-height:1.3;text-decoration:none;border-radius:8px;text-align:center}
 .jpt-mobile-nav i {font-size:19px}
 .jpt-mobile-nav .active,.jpt-mobile-nav button[aria-expanded=true] {color:#f1d493;background:#263c51}
 .ops-filter-row,.customer-filter,.report-filter-form {grid-template-columns:repeat(3,minmax(0,1fr))}
 .bank-summary-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .bank-account-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px) {
 .jpt-kpi-grid,.report-summary-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .jpt-kpi:last-child,.report-stat:last-child {grid-column:1/-1}
 .jpt-kpi {padding:12px}
 .jpt-kpi strong {font-size:24px;margin:5px 0 3px}
 .jpt-kpi:last-child {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px}
 .jpt-kpi:last-child small {grid-column:1/-1}
 .jpt-dashboard-grid {margin-top:12px;gap:12px}
 .jpt-chart-list {height:145px;padding:12px 10px;gap:5px}
 .jpt-chart-column strong {font-size:11px}
 .jpt-chart-column span {font-size:11px}
 .report-grid {grid-template-columns:1fr}
 .ops-filter-row,.customer-filter,.report-filter-form,.user-filter-form,.master-filter-form {grid-template-columns:repeat(2,minmax(0,1fr))}
 .ops-field-search,.customer-filter>.filter-field:first-child,.user-filter-form>.filter-field:first-child,.master-filter-form>.filter-field:first-child {grid-column:1/-1}
 .ops-quick-row {align-items:flex-start;flex-direction:column}
 .ops-toolbar-note {margin:0}
 .form-card,.management-card,.master-card,.report-card,.report-filter-card,.detail-card {padding:16px}
 .transaction-detail-card {padding:0}
 .user-create-card .management-form {grid-template-columns:repeat(2,minmax(0,1fr))}
 input:not([type=hidden]),select,textarea {font-size:16px!important;min-height:44px}
 .row-editor .form-control-custom {font-size:16px}
 .detail-grid,.calculation-detail-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .customer-detail-page .summary-card {grid-template-columns:repeat(2,minmax(0,1fr))}
 .modal-body {grid-template-columns:repeat(2,minmax(0,1fr))}
 .bank-toolbar {align-items:stretch}
 .bank-search-form {max-width:none;min-width:0;flex-basis:100%}
 .bank-tabs {width:100%}.bank-tab {flex:1;padding:8px;font-size:12px}
 .bank-modal,.customer-modal {padding:12px}
 .bank-modal-box,.modal-card,.transfer-history-box {max-height:calc(100dvh - 24px)}
 .account-select-panel {position:relative;top:auto;margin-top:8px;box-shadow:none}
 /* Reflow the same data and action controls; no cloned forms or hidden key fields. */
 table.adaptive-table,table.adaptive-table tbody {display:block;width:100%;white-space:normal}
 table.adaptive-table thead {display:none}
 table.adaptive-table tbody {padding:10px;background:var(--surface-soft)}
 table.adaptive-table tbody tr {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:6px}
 table.adaptive-table tbody tr:last-child {margin-bottom:0}
 table.adaptive-table tbody td {display:block;min-width:0;max-width:none;width:auto;background:transparent;text-align:left;white-space:normal;overflow-wrap:anywhere;padding:8px;border:0;font-size:13px}
 table.adaptive-table .cell-label {display:block;font-size:11px;font-weight:650;color:var(--muted);margin-bottom:3px}
 table.adaptive-table td.record-primary {font-weight:700;background:#f4f6f5;border-radius:6px}
 table.adaptive-table td.record-wide,table.adaptive-table td[colspan] {grid-column:1/-1}
 table.adaptive-table .record-secondary {display:none}
 table.adaptive-table tr.record-expanded .record-secondary {display:block}
 table.adaptive-table td.record-toggle {display:block;grid-column:1/-1;padding:4px 8px}
 .record-toggle button {min-height:36px;border:0;color:var(--blue);background:transparent;padding:5px 0;font-size:12px}
 table.adaptive-table tfoot {display:block;padding:12px;background:var(--gold-soft)}
 table.adaptive-table tfoot tr {display:flex;align-items:center;justify-content:space-between;gap:8px}
 table.adaptive-table tfoot td {display:block;padding:6px 0;border:0;background:transparent;white-space:normal}
 table.adaptive-table tfoot td:empty {display:none}
 .history-scroll {max-height:none;overflow:visible}
 .table-actions,.customer-table .action-group {flex-wrap:wrap}
 .table-action-button {min-height:40px;min-width:40px}
 .row-editor[open] {min-width:0}
 .transfer-account {min-width:0;flex-wrap:wrap}
 .sort-mobile {display:flex;gap:8px;align-items:center;margin:10px 12px;font-size:12px}
 .sort-mobile select {width:auto;flex:1}
}
@media (min-width:769px) {.sort-mobile {display:none}}
@media (max-width:480px) {
 .main {padding:16px 12px 24px}
 h1 {font-size:23px}
 .page-heading,.bank-page-heading,.customer-header,.customer-form-head,.page-header,.ops-page-head,.jpt-page-header {gap:12px;margin-bottom:16px;align-items:flex-start}
 .jpt-page-header p {font-size:12px}
 .jpt-header-actions {width:100%}.jpt-header-actions>* {flex:1}
 .jpt-kpi-grid {gap:8px}
 .jpt-kpi-top {font-size:12px}
 .jpt-kpi strong {font-size:22px}
 .jpt-kpi small {font-size:11px}
 .form-grid,.user-create-card .management-form,.detail-grid {grid-template-columns:1fr}
 .calculation-label {flex-direction:column;gap:2px}
 .calculation-value,.calculation-detail-card>strong {font-size:22px}
 .form-section,.detail-section {padding:16px}
 .section-heading {align-items:flex-start;flex-wrap:wrap}
 .section-heading-content {gap:8px}
 .section-icon {display:none}
 .form-footer {flex-wrap:wrap;padding:14px}
 .form-footer-right {margin-left:auto}
 .bank-account-grid {grid-template-columns:1fr}
 .bank-summary-card {padding:12px;gap:8px}
 .bank-summary-icon {display:none}
 .bank-tabs {gap:4px}.bank-tab {font-size:11px;padding:8px 6px}.bank-tab i {display:none}
 .modal-body {grid-template-columns:1fr}
 .modal-head,.modal-footer,.transfer-history-top,.transfer-history-footer {padding:14px}
 .bank-modal-box {padding:18px}
 .customer-header-actions {width:100%;justify-content:space-between}
 .customer-count {padding:8px 10px}
 .customer-count strong {font-size:18px}
 .customer-count span {font-size:11px}
 .row-editor summary {padding:8px;font-size:12px}
 .login-page,.login-wrapper {padding:18px}
 .login-card {padding:24px}
 .ops-title-icon {display:none}
 .report-stat {padding:12px}
 .report-stat-value {font-size:21px}
 .history-filter-actions {justify-content:space-between;font-size:12px;gap:6px;padding:10px}
 .history-filter-actions button {padding:8px;font-size:12px}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important}}