:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --ink: #243247;
  --muted: #718096;
  --line: #e3eaf2;
  --strong-line: #cbd6e3;
  --panel: #ffffff;
  --accent: #3478b9;
  --accent-dark: #28669f;
  --indigo: #365f91;
  --danger: #b42318;
  --gold: #b7791f;
  --soft: #f1f6fb;
  --shadow: 0 8px 24px rgba(37, 59, 85, 0.055);
}

/* Professional operations-console refresh */
:root { --navy:#294765; --blue:#4b83b6; --cyan:#75b4c9; --mint:#f0f6f8; --ink:#26384c; --muted:#718096; --line:#e4ebf2; --shadow:0 8px 24px rgba(37,59,85,.055); }
body { background:linear-gradient(135deg,#fbfcfe 0%,#f4f7fa 100%); color:var(--ink); }
.topbar { background:linear-gradient(135deg,#ffffff,#f7fafc); box-shadow:0 5px 18px rgba(37,59,85,.07); }
.topbar h1 { color:#000; } .topbar p { color:var(--muted); } .brand-block p { opacity:.9; }
.logo-shell { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); box-shadow:none; }
.tabs { background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:16px; padding:7px; box-shadow:var(--shadow); }
.tab,.subtab { border-radius:11px; color:var(--muted); font-weight:700; letter-spacing:.02em; }
.tab.active,.subtab.active { background:#527da5; color:#fff; box-shadow:0 4px 12px rgba(60,100,140,.13); }
.panel,.metric { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.panel h2 { color:var(--navy); letter-spacing:-.02em; }
.tab,.subtab,button { border-color:var(--line); }
.tab,.subtab { min-height:31px; padding:6px 11px; border:2px solid #f97316 !important; }
input,select,textarea { border:1px solid #dce5ee; border-radius:9px; background:#fff; transition:border-color .2s,box-shadow .2s; }
input:focus,select:focus,textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(75,142,180,.12); outline:none; }
button.primary { background:linear-gradient(135deg,#4b83b6,#6ca7bd); border:0; border-radius:9px; box-shadow:0 4px 11px rgba(50,105,150,.14); }
button.secondary { border-radius:10px; border:1px solid var(--line); background:var(--mint); color:var(--navy); }
table thead { background:#f1f7fa; color:var(--navy); } table tbody tr:hover { background:#f7fbfc; }
.operations-heading { padding:22px 4px; } .operations-heading h2 { margin:4px 0; color:var(--navy); font-size:18.2px; }
.camera-preview { width:100%; max-width:320px; border-radius:14px; border:3px solid var(--cyan); background:#0c1724; }
.selection-summary { display:grid; gap:5px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#f4f8fb; }
.selection-summary strong { color:var(--navy); font-size:11px; }
.selection-summary span { color:var(--muted); }
.check-list { display:flex; flex-wrap:wrap; gap:8px 18px; padding:8px 0; }
.check-list .check { display:flex; align-items:center; gap:6px; }
#susuServiceOptions { flex-direction:column; align-items:stretch; gap:10px; }
#susuServiceOptions .check,
#savingsForm label.check {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:24px;
  font-size:18px;
  line-height:1.2;
}
#savingsForm label.check small { font-size:18px; }
#susuServiceOptions input[type="checkbox"],
#savingsForm input[name="smsAlertEnabled"] {
  flex:0 0 16px;
  width:16px;
  height:16px;
  min-height:16px;
  margin:0;
  padding:0;
}
#susuServiceOptions input[type="checkbox"]:focus,
#savingsForm input[name="smsAlertEnabled"]:focus { box-shadow:none; outline:2px solid var(--cyan); outline-offset:2px; }
fieldset { min-width:0; border:1px solid #d9e5ea; border-radius:12px; padding:12px; }
.action-buttons { display:flex; flex-wrap:wrap; gap:6px; } .mini { border-radius:8px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  background:
    linear-gradient(180deg, #f8fafc 0, #fbfcfd 320px, var(--bg) 100%);
  color: var(--ink);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: 22px 28px;
  background: #ffffff;
  border-bottom: 2px solid #c5ceda;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.logo-shell {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--strong-line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--indigo), var(--accent));
  color: #fff;
  font-size: 23px;
  font-weight: 900;
}

.logo-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1, h2 {
  margin: 0;
  letter-spacing: 0;
  color: var(--ink);
}

h1 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
}

h2 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 16px;
  font-weight: 850;
}

p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.api-key {
  min-width: 360px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-login {
  min-width: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.staff-login span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.mobile-link {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--strong-line);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 850;
}

input, select, button, textarea {
  font: inherit;
  min-height: 44px;
}

input, select, textarea {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 650;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
  background: #fbfffe;
}

textarea {
  resize: vertical;
  min-height: 124px;
}

main { padding: 22px 28px 40px; }

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tab, .subtab, button {
  border: 2px solid var(--strong-line);
  border-radius: 7px;
  padding: 10px 15px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 850;
}

.vault-panel { margin: 0 0 20px; }
.vault-panel .subtext { margin: -8px 0 12px; font-size: 12px; font-weight: 500; }
.vault-table td, .vault-table th { white-space: nowrap; }

.tab:hover, .subtab:hover, button:hover {
  transform: translateY(-1px);
}

.tab.active, .subtab.active {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.primary:hover { background: var(--accent-dark); }

.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.danger-outline {
  border-color: var(--danger);
  color: var(--danger);
}

.view { display: none; }
.view.active { display: block; }
.back-panel { display: none; }
.back-panel.active { display: block; }
.verification-backdrop { position: fixed; inset: 0; z-index: 1300; width: 100vw; height: 100vh; height: 100dvh; padding: 0; place-items: stretch; }
#approvalReviewModal { z-index: 1400; }
#pmwdlModal { z-index: 1800; }
.verification-modal { position: relative; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 24px; overflow: hidden; border: 0; border-radius: 0; display: flex; flex-direction: column; }
.verification-window-header { position: relative; min-height: 62px; padding-right: 150px; }
.verification-window-controls { position: absolute; top: 0; right: 0; display: flex; gap: 5px; }
.verification-window-controls button { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #f5f8fb; color: var(--navy); font-size: 20px; line-height: 1; }
.verification-window-controls button:last-child:hover { background: var(--danger); color: #fff; }
.verification-backdrop.is-windowed { padding: 4vh 2vw; place-items: center; background: rgba(9,24,42,.58); }
.verification-backdrop.is-windowed .verification-modal { width: 96vw; height: 92vh; height: 92dvh; max-width: 1600px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px rgba(4,18,35,.34); }
.verification-backdrop.is-minimized { inset: auto 16px 16px auto; display: block; width: min(460px, calc(100vw - 32px)); height: auto; background: transparent; backdrop-filter: none; pointer-events: none; }
.verification-backdrop.is-minimized .verification-modal { pointer-events: auto; width: 100%; height: auto; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(4,18,35,.24); }
.verification-backdrop.is-minimized .verification-window-header { min-height: 32px; margin: 0; padding: 0 145px 0 0; }
.verification-backdrop.is-minimized .verification-window-header .eyebrow { display: block; margin-top: 5px; }
.verification-backdrop.is-minimized .verification-window-header h2,
.verification-backdrop.is-minimized .verification-window-header p,
.verification-backdrop.is-minimized .verification-layout { display: none; }
.verification-backdrop.is-minimized .verification-window-controls { top: 0; right: 0; }
.verification-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
.verification-sidebar { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 16px; background: #f5f2ea; }
.verification-operation { text-align: left; border-radius: 10px; padding: 12px; background: #fff; }
.verification-operation.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.backoffice-work-category { text-align: left; border-radius: 10px; padding: 12px; background: #fff; }
.backoffice-work-category.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.backoffice-results { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
.backoffice-result-panel { flex: 1; min-height: 0; margin: 0; overflow: auto; }
.approved-request-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.approved-request-category { min-height: 32px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--ink); background: #fff; }
.approved-request-category.active { color: #fff; background: var(--accent); }
.backoffice-result-panel .table-wrap { max-height: calc(100dvh - 270px); overflow: auto; }
#backOfficeWorkModal[data-inbox-mode="approved"] .verification-layout { grid-template-columns: minmax(0, 1fr); }
#backOfficeWorkModal[data-inbox-mode="approved"] #backOfficeApprovedResults { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
#backOfficeWorkModal[data-inbox-mode="approved"] #backOfficeApprovedResults .table-wrap { flex: 1; height: 100%; min-height: 0; max-height: none; overflow: auto; }
.verification-summary { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; padding: 14px; border-radius: 14px; background: #fbf8f1; }
.verification-summary label { flex: 1 1 240px; }
.verification-summary input { display: block; width: 100%; }
.verification-summary strong:last-child { margin-left: auto; color: var(--brand-navy); font-size: 1.1em; }
.status-good { color: #16804a !important; }
.verification-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.verification-modal .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.verification-modal table { min-width: 790px; }
.verification-select { width: 16px; height: 16px; min-width: 16px; margin: 0; vertical-align: middle; }
.verification-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; background: #fff; }
.verification-footer .primary { margin-left: auto; }
.product-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) { .verification-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; } .verification-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .verification-summary strong:last-child { margin-left: 0; } .verification-modal { width: 100vw; height: 100vh; height: 100dvh; padding: 16px; } .verification-content { overflow: hidden; } }
@media (max-width: 760px) { .verification-window-header { padding-right: 122px; } .verification-window-controls { gap: 3px; } .verification-window-controls button { width: 34px; } .verification-backdrop.is-windowed { padding: 2vh 2vw; } .verification-backdrop.is-windowed .verification-modal { width: 96vw; height: 96vh; height: 96dvh; padding: 16px; } }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.status {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric, .panel {
  background: var(--panel);
  border: 2px solid #c7d0dd;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 18px;
  display: grid;
  gap: 6px;
  border-top: 5px solid var(--gold);
}

.metric span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
}

.metric strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.panel {
  padding: 20px;
  margin-bottom: 18px;
}

.split, .grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.fields.single {
  grid-template-columns: 1fr;
}

.compact-form .fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 7px;
  color: #415065;
  font-size: 14px;
  font-weight: 850;
}

.check {
  grid-template-columns: 20px 1fr;
  align-items: center;
  color: var(--ink);
}

.check input {
  width: auto;
  min-height: auto;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-heading input {
  max-width: 320px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.search-results {
  min-height: 92px;
}

.statement-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  min-width: 360px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.detail-tile {
  padding: 14px;
  border: 2px solid #c7d0dd;
  border-radius: 8px;
  background: #f8fafc;
}

.detail-tile span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.detail-tile strong {
  display: block;
  font-size: 18px;
  font-weight: 950;
}

.statement-view {
  min-height: 104px;
}

.action-target {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 2px solid #b7c2d0;
  border-radius: 7px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 850;
}

.action-form {
  margin-top: 14px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mini {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: #f8fafc;
}

.mini:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.subtext {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.settings-card {
  max-width: 760px;
}

.customer-create-card {
  width: 100%;
  margin: 0 auto 24px;
  padding: 30px clamp(22px, 5vw, 64px);
}

.customer-create-card h2,
.customer-create-card > .fields,
.customer-create-card > button {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.customer-create-card .fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.customer-create-card > button {
  display: block;
  width: min(100%, 320px);
  margin-top: 24px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(9, 24, 42, .58);
  backdrop-filter: blur(8px);
}

.modal-backdrop[hidden] { display: none; }
.modal-card {
  position: relative;
  width: min(100%, 650px);
  max-height: min(760px, 92vh);
  overflow: auto;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #f2f8fb);
  box-shadow: 0 28px 80px rgba(4, 18, 35, .34);
}
.modal-header { padding-right: 32px; margin-bottom: 22px; }
.modal-header h2 { margin: 5px 0; color: var(--navy); font-size: 18.2px; }
.modal-header p { margin: 0; color: var(--muted); }
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #e8f0f5;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
}
.modal-close:hover { background: #d7e5ed; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.customer-edit-open-savings { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.customer-edit-open-savings h3 { margin: 4px 0 8px; color: var(--navy); font-size: 16px; }
.sms-outbox-search { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 14px 0; }
.sms-outbox-search label { display: grid; gap: 5px; min-width: min(100%, 240px); }
.sms-outbox-search small { color: var(--muted); }
.user-log-toolbar { align-items: center; }
.user-log-toolbar h2,.user-log-toolbar p { margin-top: 0; margin-bottom: 5px; }
.field-span-two { grid-column: 1 / -1; }
body.modal-open { overflow: hidden; }
.approval-modal { width: min(100%, 820px); }
.zone-modal-backdrop { z-index: 1500; }
.zone-modal { width: min(100%, 760px); max-height: min(820px, 92vh); display: flex; flex-direction: column; }
.zone-modal .modal-header { margin-bottom: 16px; }
.zone-save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.zone-save-row .primary { margin-left: auto; }
.zone-list-section { min-height: 0; margin-top: 24px; }
.zone-list-section h3 { margin: 0 0 10px; color: var(--navy); font-size: 14px; }
.zone-list-section .table-wrap { max-height: 260px; overflow: auto; }
.approval-review-body { display: grid; gap: 18px; }
.approval-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.approval-field-grid .field-span-two { grid-column: 1 / -1; }
.approval-field-grid input[readonly],
.approval-field-grid textarea[readonly] { background: #eef4f7; color: var(--navy); }
.approval-attachment { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--cyan); font-weight: 700; }
.approval-summary { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.74); }
.approval-summary strong { color: var(--navy); }
#dashboard { font-size: .611rem; }
#dashboard .metric { padding: 16px; }
#dashboard .panel { padding: 20px; }
#dashboard .panel h2 { font-size: 13px; }
.dashboard-requests-panel { margin-top: 18px; }
.request-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: .507rem; font-weight: 850; }
.request-status.pending { background: #fff0d6; color: #9a5700; border: 1px solid #efb45f; }
.request-status.approved { background: #dcf8e9; color: #117044; border: 1px solid #69c88d; }
.approved-request-search { min-width: min(100%, 340px); }
.cash-request-group { margin: 14px 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); }
.cash-request-group-header { justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cash-request-group-header h3 { margin: 0; color: var(--navy); font-size: 1em; }
.cash-request-group .cash-approval-select { width: 16px; height: 16px; accent-color: var(--cyan); }
.bulk-approve-cash[hidden] { display: none; }

@media (max-width: 720px) {
  .customer-create-card .fields { grid-template-columns: 1fr; }
  .modal-card { padding: 24px 18px; }
  .approval-field-grid { grid-template-columns: 1fr; }
  .approval-field-grid .field-span-two { grid-column: auto; }
  .approved-request-search { width: 100%; }
}

.table-wrap {
  overflow: auto;
  border: 2px solid #b7c2d0;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th, td {
  padding: 12px 13px;
  border-bottom: 1px solid #cfd6e1;
  text-align: left;
  white-space: nowrap;
  font-weight: 650;
}

th {
  background: var(--soft);
  color: #163f3b;
  font-weight: 900;
}

tbody tr:hover {
  background: #f7fbfa;
}

.list {
  display: grid;
  gap: 10px;
}

.list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 2px solid #cfd6e1;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
}

.output {
  margin: 0;
  min-height: 200px;
  overflow: auto;
  padding: 14px;
  background: #111827;
  color: #e7edf7;
  border-radius: 8px;
  border: 2px solid #334155;
  font-size: 14px;
  font-weight: 650;
}

.empty {
  padding: 16px;
  color: var(--muted);
  font-weight: 750;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 460px;
  padding: 14px 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: 160ms ease;
  font-weight: 850;
  box-shadow: var(--shadow);
  z-index: 2147483647 !important;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error { background: var(--danger); }

/* Compact type scale: 65% of the previous sizes, with layouts and controls
   retained at their original dimensions for comfortable tapping. */
body { font-size: 10.4px; }
h1 { font-size: 22.1px; }
h2 { font-size: 14.3px; }
p { font-size: 10.4px; }
.logo-shell { font-size: 14.95px; }
.api-key,.staff-login span,.detail-tile span,.subtext,.empty { font-size: 8.45px; }
.mobile-link,.tab,.subtab,button,input,select,textarea { font-size: 10.4px; }
.status,.table-wrap table,.list-row { font-size: 9.75px; }
.metric span,label,.detail-tile strong,.output { font-size: 9.1px; }
.metric strong { font-size: 22.1px; }
.mini { font-size: 8.45px; }
.modal-header h2 { font-size: 18.2px; }
.modal-header p { font-size: 10.4px; }
#dashboard .metric span { font-size: 9.1px; }
#dashboard .metric strong { font-size: 22.1px; }
#dashboard .panel h2 { font-size: 13px; }
.request-status { font-size: 8.1px; }

@media (max-width: 980px) {
  .topbar, .split, .grid.two, .metrics, .fields, .compact-form .fields {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .api-key, .staff-login {
    min-width: 0;
  }

  .staff-login {
    grid-template-columns: 1fr;
  }

  .panel-heading, .search-row, .statement-filters, .details-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .panel-heading input {
    max-width: none;
  }

  h1 { font-size: 22.1px; }
}

/* Compact main/sub navigation while preserving readable labels and tap targets. */
.tab,.subtab { min-height:31px !important; padding:6px 11px !important; border:2px solid #f97316 !important; }
[hidden] { display: none !important; }

.account-subtabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.account-subtab { min-height:31px; padding:6px 12px; border:2px solid #f97316; border-radius:10px; background:#fff; color:var(--muted); font-weight:750; cursor:pointer; }
.account-subtab.active { color:#fff; background:#527da5; border-color:#f97316; box-shadow:0 4px 12px rgba(60,100,140,.13); }
.account-subview { display:none; }
.account-subview.active { display:block; }

.report-hub-panel { padding:18px; }
.report-nav-wrapper { position:relative; display:inline-flex; }
.report-menu-trigger span { margin-left:5px; font-size:9px; }
.report-menu { position:absolute; z-index:1200; top:calc(100% + 7px); left:0; min-width:225px; max-height:min(65vh,420px); overflow:auto; padding:6px; border:1px solid #d8e2ec; border-radius:12px; background:#fff; box-shadow:0 14px 32px rgba(20,42,64,.2); }
.report-menu-option { display:flex; width:100%; min-height:48px; align-items:center; justify-content:flex-start; gap:10px; padding:8px; border:0 !important; border-radius:8px; background:#fff; color:#20384f; text-align:left; }
.report-menu-option:hover,.report-menu-option:focus-visible { background:#f1f6fb; outline:2px solid #f97316; }
.report-menu-option .report-tile-icon { flex:none; }
.report-menu-option strong,.report-menu-option small { display:block; }
.report-menu-option strong { font-size:11px; }
.report-menu-option small { margin-top:2px; color:#77879a; font-size:9px; }
.report-menu-empty { padding:10px; color:#77879a; font-size:10px; }
.report-tile-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.report-tile { min-width:0; min-height:128px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px; border:1px solid #e1e8f0; border-radius:15px; background:linear-gradient(150deg,#fff 0%,#f7faff 100%); color:#233a52; text-align:left; box-shadow:0 5px 16px rgba(28,55,82,.06); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.report-tile-ready { cursor:pointer; border-color:#b6cce0; }
.report-tile-ready:hover,.report-tile-ready:focus-visible { transform:translateY(-2px); border-color:#f97316; box-shadow:0 10px 22px rgba(28,55,82,.12); outline:none; }
.report-tile-planned { cursor:not-allowed; opacity:.62; }
.report-tile-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:#2f6899; background:#eaf3fb; }
.report-tile-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.report-tile strong { font-size:11px; }
.report-tile small { color:#77879a; font-size:9px; }
.day-work-report { margin-top:16px; }
.day-work-report-controls { display:flex; align-items:end; gap:12px; margin:10px 0 16px; }
.day-work-report-controls label { min-width:220px; }
.report-result-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:6px 0 12px; }
.report-balance-status { border-radius:999px; padding:6px 10px; font-size:9px; font-weight:800; }
.report-balance-status.is-balanced { color:#166534; background:#dcfce7; }
.report-balance-status.is-unbalanced { color:#991b1b; background:#fee2e2; }
.report-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
.report-summary-card { padding:12px; border:1px solid #e2eaf2; border-radius:11px; background:#f8fafc; }
.report-summary-card span { display:block; color:var(--muted); font-size:9px; }
.report-summary-card strong { display:block; margin-top:5px; color:#20384f; font-size:18px; }
.day-work-report h3 { margin:18px 0 8px; color:var(--navy); font-size:12px; }
.report-generated-at { margin-top:12px; }
@media (max-width:1150px) { .report-tile-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) {
  .report-tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .report-menu { position:fixed; top:auto; left:10px; right:10px; min-width:0; }
  .report-tile { min-height:112px; padding:11px; }
  .day-work-report-controls { align-items:stretch; flex-direction:column; }
  .day-work-report-controls label { min-width:0; }
  .report-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .report-result-heading { align-items:flex-start; flex-direction:column; }
}

.member-directory-heading { align-items: center; }
.member-directory-heading > div { min-width: 250px; }
.member-directory-heading input { max-width: 360px; }
.member-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.member-card { display: flex; align-items: stretch; gap: 11px; min-width: 0; padding: 10px; border: 1px solid #dbe3ed; border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(24,49,83,.05); }
.member-card:hover,.member-card:focus-visible { border-color: #f97316; box-shadow: 0 8px 20px rgba(24,49,83,.1); outline: none; }
.member-card-photo { flex: 0 0 76px; width: 76px; height: 96px; object-fit: cover; border-radius: 9px; background: #eef2f7; }
.member-card-placeholder { display: grid; place-items: center; color: #183153; font-size: 20px; font-weight: 850; background: linear-gradient(145deg,#fff1d6,#dce8f5); }
.member-card-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.member-card-copy > strong { color: #14253d; font-size: 11px; }
.member-card-copy > span { color: #526176; font-size: 9px; }
.member-card-copy b { color: #243951; }
.member-import-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.member-import-panel h2,.member-import-panel p { margin: 0 0 5px; }
.member-import-form { display:flex; align-items:end; gap:12px; }
.member-import-form label { min-width: 240px; }
.member-profile-modal { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow-y: auto; }
.member-profile-header { display:flex; align-items:center; gap:18px; margin-bottom:20px; padding-right:28px; }
.member-profile-photo { width:100px; height:125px; flex:0 0 100px; object-fit:cover; border-radius:12px; background:#eef2f7; }
.member-profile-header h2 { margin:4px 0; color:#14253d; }
.member-profile-header p { margin:0; color:var(--muted); }
.member-profile-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.member-profile-details > div { padding:11px 13px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.member-profile-details > div > span { display:block; margin-bottom:4px; color:#65748a; font-size:9px; }
.member-profile-details > div > strong { color:#1e3048; overflow-wrap:anywhere; }
.member-profile-wide { grid-column:1 / -1; }
.member-profile-details ul { margin:0; padding-left:18px; }
.member-import-panel { flex-wrap:wrap; }
@media (max-width: 1200px) { .member-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .member-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-card { gap:8px; padding:8px; }
  .member-card-photo { flex-basis:58px; width:58px; height:76px; }
  .member-card-copy > span { font-size:8px; }
  .member-import-form { align-items:stretch; flex-direction:column; width:100%; }
  .member-import-form label { min-width:0; }
  .member-profile-details { grid-template-columns:1fr; }
  .member-profile-wide { grid-column:auto; }
}

/* B-PLUS SUSU identity: logo navy, warm gold, red, and ivory. */
:root {
  --brand-navy: #243587;
  --brand-red: #a91e1b;
  --brand-gold: #cdad66;
  --brand-ivory: #fbf7e8;
  --navy: var(--brand-navy);
  --accent: var(--brand-navy);
  --accent-dark: #1b2868;
  --indigo: #33469a;
  --ink: #202a43;
  --muted: #606b80;
  --line: #e5dcc6;
  --strong-line: #c9b77f;
  --panel: #fffefa;
  --soft: #f5f0e2;
  --mint: #f4efdf;
  --danger: var(--brand-red);
  --gold: #85651f;
  --shadow: 0 8px 24px rgba(36, 53, 135, .08);
}
body { background: linear-gradient(140deg, #fffdf6 0%, var(--brand-ivory) 58%, #f2eedf 100%); color: var(--ink); }
.topbar { background: linear-gradient(115deg, #fffefa, #f8f2df); border-bottom: 3px solid var(--brand-gold); }
.topbar h1,.panel h2,.operations-heading h2,.day-work-report h3 { color: var(--brand-navy); }
.panel,.metric { border-color: #e7dfcc; background: var(--panel); box-shadow: var(--shadow); }
.tabs { border-color: #e1d5b5; background: rgba(255,254,250,.96); }
.tab,.subtab,.account-subtab { border-color: var(--brand-gold) !important; color: var(--brand-navy); }
.tab.active,.subtab.active,.account-subtab.active { background: var(--brand-navy); color: #fff; border-color: var(--brand-gold) !important; }
button.primary { background: linear-gradient(135deg, #243587, #3549a0); color: #fff; border: 1px solid #1b2868; }
button.secondary { background: #f6f0df; color: var(--brand-navy); border: 1px solid var(--brand-gold); }
button.danger-outline,.danger-outline { color: var(--brand-red); border-color: #d9a5a1; }
button:hover,.tab:hover,.subtab:hover { filter: brightness(.97); }
input,select,textarea { color: var(--ink); border-color: #cbbd98; background: #fffefa; }
input:focus,select:focus,textarea:focus { border-color: var(--brand-navy); box-shadow: 0 0 0 3px rgba(205,173,102,.28); }
table thead { background: #f3ecd8; color: var(--brand-navy); }
table tbody tr:hover { background: #fcf8ed; }
.metric { border-top: 3px solid var(--brand-gold); }
#ledgerIntegrityMetric.integrity-valid { border-top: 4px solid #16834a; }
#ledgerIntegrityMetric.integrity-invalid { border-top: 4px solid var(--brand-red); }
#ledgerIntegrityMetric.integrity-pending { border-top: 4px solid var(--brand-gold); }
.sms-outbox-controls { display: grid; gap: 12px; margin: 14px 0; padding: 14px; border-color: #dfd2ae; background: #fffdf7; }
.sms-outbox-search { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0; }
.sms-outbox-search label { display: grid; gap: 5px; min-width: min(100%, 240px); color: var(--brand-navy); }
.sms-outbox-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sms-outbox-toolbar .toolbar { margin: 0; }
.sms-outbox-controls > small { color: var(--muted); }
.action-buttons .mini { border-color: #d5c69f; color: var(--brand-navy); background: #fffefa; }
.action-buttons .mini.danger-outline { color: var(--brand-red); border-color: #d9a5a1; }
.report-tile-ready:hover,.report-tile-ready:focus-visible,.member-card:hover,.member-card:focus-visible { border-color: var(--brand-gold); }
.member-card-placeholder { color: var(--brand-navy); background: linear-gradient(145deg, #fff6d9, #e7e8f5); }
@media (max-width: 760px) {
  .sms-outbox-toolbar { align-items: stretch; }
  .sms-outbox-toolbar .toolbar { flex-wrap: wrap; }
}

.special-access-panel { overflow: hidden; }
.special-access-table { min-width: 1160px; }
.special-access-table th { white-space: nowrap; text-align: center; }
.special-access-table td:first-child strong,.special-access-table td:first-child small { display:block; }
.special-access-table td:first-child small { color:var(--muted); margin-top:3px; }
.special-access-cell { min-width:112px; text-align:center; vertical-align:middle; }
.special-access-check { display:inline-flex; align-items:center; justify-content:center; min-height:28px; }
.special-access-check input { width:17px; height:17px; accent-color:var(--brand-navy); }
.grant-expiry { display:grid; justify-items:center; gap:5px; color:var(--muted); font-size:9px; }
.grant-expiry .mini { padding:3px 7px; font-size:9px; }
.special-access-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:15px; }
.special-access-modal { width:min(460px,calc(100vw - 28px)); }
@media (max-width:700px) { .special-access-footer { align-items:stretch; flex-direction:column; } .special-access-footer button { width:100%; } }
tr.pmwdl-target-highlight { outline:3px solid #ed9b28; outline-offset:-3px; background:#fff8e8 !important; animation:pmwdl-row-pulse 1.2s ease-in-out 3; }
@keyframes pmwdl-row-pulse { 50% { background:#ffe6b5; } }
.special-charge-fields { min-width:0; margin:8px 0; padding:12px; border:1px solid #ed9b28; border-radius:10px; background:#fffaf0; }
.special-charge-fields legend { padding:0 6px; color:#183153; font-weight:800; }
.special-charge-fields .special-charge-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.special-charge-fields .special-charge-details[hidden], .special-charge-fields[hidden] { display:none !important; }
@media (max-width:620px) { .special-charge-fields .special-charge-details { grid-template-columns:1fr; } }
input[type="checkbox"] { box-sizing:border-box; width:14px !important; height:14px !important; min-width:14px !important; min-height:14px !important; flex:0 0 14px !important; margin:0; padding:0; vertical-align:middle; accent-color:var(--brand-navy); }
tr.pmwdl-target-highlight { outline:3px solid #ed9b28; outline-offset:-3px; background:#fff8e8 !important; animation:pmwdl-row-pulse 1.2s ease-in-out 3; }
@keyframes pmwdl-row-pulse { 50% { background:#ffe6b5; } }