/*!
 * Pocket Money — Bootstrap 5.3 theme (precompiled)
 *
 * This file is the COMPILED output of scss/theme.scss
 * For development use the Sass source: `npm install && npm run watch`
 *
 * Loads Bootstrap 5.3 from CDN, then layers Pocket Money tokens and
 * components on top using CSS custom properties.
 */

/* Bootstrap 5.3 — base framework (local copy for offline use; in production
   you can swap this for the CDN URL or compile from the Sass source) */
@import url("./bootstrap-vendor.css");
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ─────────────────────────────────────────────
   Pocket Money tokens — exposed as CSS variables
   so devs can also override them at runtime.
   ───────────────────────────────────────────── */

:root {
  --pm-teal-900: #062c2e;
  --pm-teal-800: #0d3b3e;
  --pm-teal-700: #114a4d;
  --pm-teal-500: #2a8086;
  --pm-teal-50:  #ecf6f6;

  --pm-navy-900: #0a2540;
  --pm-navy-300: #88a0bf;

  --pm-ink-900: #0b1320;
  --pm-ink-600: #4a5563;
  --pm-ink-500: #6b7682;
  --pm-ink-400: #98a1ad;

  --pm-bg:           #fafaf7;
  --pm-surface:      #ffffff;
  --pm-surface-2:    #f4f4f0;
  --pm-surface-3:    #ebebe5;
  --pm-border:       #e6e6df;
  --pm-border-strong:#d4d4cb;
  --pm-hairline:     #efefe9;

  --pm-fg:        var(--pm-ink-900);
  --pm-fg-muted:  var(--pm-ink-600);
  --pm-fg-subtle: var(--pm-ink-500);

  --pm-accent:       var(--pm-teal-800);
  --pm-accent-hover: var(--pm-teal-700);
  --pm-accent-soft:  var(--pm-teal-50);

  --pm-success:      #0e7c5a;
  --pm-success-soft: #e3f3eb;
  --pm-warning:      #b1670c;
  --pm-warning-soft: #fdf1dc;
  --pm-danger:       #b3261e;
  --pm-danger-soft:  #fbe6e3;

  --pm-rail-w:     232px;
  --pm-topbar-h:   60px;

  /* Bootstrap variable overrides via :root --bs-* custom properties */
  --bs-primary: #0d3b3e;
  --bs-primary-rgb: 13, 59, 62;
  --bs-success: #0e7c5a;
  --bs-success-rgb: 14, 124, 90;
  --bs-warning: #b1670c;
  --bs-warning-rgb: 177, 103, 12;
  --bs-danger:  #b3261e;
  --bs-danger-rgb: 179, 38, 30;
  --bs-info:    #114a4d;
  --bs-info-rgb: 17, 74, 77;

  --bs-body-bg: #fafaf7;
  --bs-body-color: #0b1320;
  --bs-body-color-rgb: 11, 19, 32;
  --bs-secondary-color: rgba(11, 19, 32, 0.65);
  --bs-tertiary-color: rgba(11, 19, 32, 0.5);
  --bs-secondary-bg: #f4f4f0;
  --bs-tertiary-bg:  #fafaf7;

  --bs-border-color: #e6e6df;
  --bs-border-color-translucent: rgba(11, 19, 32, 0.1);

  --bs-font-sans-serif: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace:  "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5;

  --bs-border-radius:    0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-pill: 999px;
}

/* ─── Body / typography polish ─── */

body {
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Bootstrap's primary button hover (Bootstrap doesn't pick the
   right shade automatically when CSS variables are used) */
.btn-primary {
  --bs-btn-bg: var(--pm-accent);
  --bs-btn-border-color: var(--pm-accent);
  --bs-btn-hover-bg: var(--pm-accent-hover);
  --bs-btn-hover-border-color: var(--pm-accent-hover);
  --bs-btn-active-bg: var(--pm-accent-hover);
  --bs-btn-active-border-color: var(--pm-accent-hover);
  --bs-btn-disabled-bg: var(--pm-accent);
  --bs-btn-disabled-border-color: var(--pm-accent);
  font-weight: 500;
  font-size: 0.84375rem;
}
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.1875rem var(--pm-accent-soft);
}

.btn-outline-secondary {
  --bs-btn-color: var(--pm-fg);
  --bs-btn-border-color: var(--pm-border-strong);
  --bs-btn-hover-bg: var(--pm-surface-2);
  --bs-btn-hover-border-color: var(--pm-border-strong);
  --bs-btn-hover-color: var(--pm-fg);
  --bs-btn-active-bg: var(--pm-surface-3);
  --bs-btn-active-border-color: var(--pm-border-strong);
  --bs-btn-active-color: var(--pm-fg);
  background: var(--pm-surface);
  font-weight: 500;
  font-size: 0.84375rem;
}

.btn-link, .btn-light {
  color: var(--pm-fg-muted);
  text-decoration: none;
  font-weight: 500;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 0.1875rem var(--pm-accent-soft);
}

.form-control, .form-select {
  border-color: var(--pm-border-strong);
  font-size: 0.875rem;
}

.form-label {
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--pm-fg-muted);
  margin-bottom: 0.375rem;
}

/* ─────────────────────────────────────────────
   Type helpers
   ───────────────────────────────────────────── */

.num, .pm-num, td.num {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.num-display {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.t-h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}
.t-h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
}
.t-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-fg-subtle);
  font-weight: 600;
}
.subhead {
  color: var(--pm-fg-muted);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────
   App shell
   ───────────────────────────────────────────── */

.pm-app {
  display: grid;
  grid-template-columns: var(--pm-rail-w) 1fr;
  min-height: 100vh;
  background: var(--pm-bg);
}
@media (max-width: 991.98px) {
  .pm-app { grid-template-columns: 64px 1fr; }
}
@media (max-width: 767.98px) {
  .pm-app { grid-template-columns: 1fr; }
}

/* Sidebar */
.pm-rail {
  background: var(--pm-surface);
  border-right: 1px solid var(--pm-border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 4px;
  overflow: hidden;
}
.pm-rail.offcanvas { width: 232px; }

.pm-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 16px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--pm-fg);
}
.pm-rail__brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.pm-rail__brand .pm-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-accent);
  margin: 0 4px 2px;
}

.pm-rail__section {
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-fg-subtle);
  font-weight: 600;
  padding: 14px 10px 6px;
}

.pm-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 0.5rem;
  color: var(--pm-fg-muted);
  cursor: pointer;
  font-size: 0.84375rem;
  font-weight: 500;
  transition: background 120ms, color 120ms;
  text-decoration: none;
  position: relative;
}
.pm-rail__item:hover {
  background: var(--pm-surface-2);
  color: var(--pm-fg);
  text-decoration: none;
}
.pm-rail__item.active {
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
}
.pm-rail__item.active::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--pm-accent);
  border-radius: 2px;
}
.pm-rail__item .badge {
  margin-left: auto;
  background: var(--pm-surface-3);
  color: var(--pm-fg-muted);
  font-weight: 500;
  font-size: 0.6875rem;
}
.pm-rail__item.active .badge {
  background: rgba(255,255,255,0.5);
  color: var(--pm-accent);
}

/* Below lg: collapse to icons */
@media (max-width: 991.98px) {
  .pm-rail { padding: 14px 8px; }
  .pm-rail__brand { padding: 6px 0 16px; justify-content: center; }
  .pm-rail__brand-text { display: none; }
  .pm-rail__section { display: none; }
  .pm-rail__item { justify-content: center; padding: 0 8px; }
  .pm-rail__label { display: none; }
  .pm-rail__item > .badge { display: none; }
  .pm-rail__user-meta { display: none !important; }
  .pm-rail__user { justify-content: center !important; padding: 8px 0 !important; }
}
/* Inside open offcanvas drawer: restore the expanded look */
.offcanvas-md.show .pm-rail__brand { padding: 6px 8px 16px; justify-content: flex-start; }
.offcanvas-md.show .pm-rail__brand-text { display: inline-flex !important; }
.offcanvas-md.show .pm-rail__section { display: block !important; }
.offcanvas-md.show .pm-rail__item { justify-content: flex-start; padding: 0 10px; }
.offcanvas-md.show .pm-rail__label { display: inline !important; }
.offcanvas-md.show .pm-rail__item > .badge { display: inline-flex !important; }
.offcanvas-md.show .pm-rail__user-meta { display: flex !important; }
.offcanvas-md.show .pm-rail__user { justify-content: flex-start !important; padding: 12px !important; }

.pm-rail__user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--pm-hairline);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-rail__user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* Workspace */
.pm-workspace {
  display: grid;
  grid-template-rows: var(--pm-topbar-h) 1fr;
  min-width: 0;
}

.pm-topbar {
  height: var(--pm-topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-surface);
}
@media (max-width: 767.98px) {
  .pm-topbar { padding: 0 12px; gap: 8px; }
}

.pm-page {
  padding: 28px 32px 64px;
  overflow: auto;
  min-width: 0;
}
@media (max-width: 767.98px) {
  .pm-page { padding: 16px 16px 48px; }
}

/* Search */
.pm-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--pm-border-strong);
  border-radius: 0.5rem;
  background: var(--pm-surface);
  width: 320px;
  color: var(--pm-fg-muted);
  transition: all 120ms;
}
.pm-search:focus-within {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px var(--pm-accent-soft);
}
.pm-search input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-size: 0.84375rem;
  color: var(--pm-fg);
  min-width: 0;
}
.pm-search .pm-kbd {
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
  background: var(--pm-surface-2);
  border: 1px solid var(--pm-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--pm-fg-subtle);
}
@media (max-width: 1199.98px) { .pm-search { width: 220px; } }
@media (max-width: 767.98px) { .pm-search { display: none; } }

/* KPI card */
.pm-kpi {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.375rem;
  display: flex; flex-direction: column; gap: 0.375rem;
  transition: border-color 120ms;
  height: 100%;
}
.pm-kpi:hover { border-color: var(--pm-border-strong); }
.pm-kpi__label {
  font-size: 0.78125rem;
  color: var(--pm-fg-muted);
  font-weight: 500;
}
.pm-kpi__value {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pm-fg);
  margin-top: 0.25rem;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .pm-kpi__value { font-size: 1.625rem; }
}
.pm-kpi__delta {
  font-size: 0.75rem;
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.pm-kpi__delta--up   { color: var(--pm-success); }
.pm-kpi__delta--down { color: var(--pm-danger); }
.pm-kpi__delta--flat { color: var(--pm-fg-subtle); }

/* Status pills */
.pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 500;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface-2);
  color: var(--pm-fg-muted);
  white-space: nowrap;
}
.pm-pill .pm-dot-status {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-fg-subtle);
  flex: none;
}
.pm-pill--success { background: var(--pm-success-soft); color: var(--pm-success); border-color: transparent; }
.pm-pill--success .pm-dot-status { background: var(--pm-success); }
.pm-pill--warning { background: var(--pm-warning-soft); color: var(--pm-warning); border-color: transparent; }
.pm-pill--warning .pm-dot-status { background: var(--pm-warning); }
.pm-pill--danger  { background: var(--pm-danger-soft);  color: var(--pm-danger); border-color: transparent; }
.pm-pill--danger .pm-dot-status { background: var(--pm-danger); }
.pm-pill--info    { background: var(--pm-accent-soft);  color: var(--pm-accent); border-color: transparent; }
.pm-pill--info .pm-dot-status { background: var(--pm-accent); }
.pm-pill--neutral { background: var(--pm-surface-2); color: var(--pm-fg-muted); }

/* Transaction-type pill */
.pm-txn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--pm-surface-2);
  color: var(--pm-fg-muted);
}
.pm-txn-pill--deposit  { background: var(--pm-accent-soft);  color: var(--pm-accent); }
.pm-txn-pill--withdraw { background: var(--pm-danger-soft);  color: var(--pm-danger); }
.pm-txn-pill--interest { background: var(--pm-success-soft); color: var(--pm-success); }
.pm-txn-pill--closure  { background: var(--pm-surface-2);    color: var(--pm-fg-muted); }

/* Avatar */
.pm-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}
.pm-avatar--sm { width: 24px; height: 24px; font-size: 0.625rem; }
.pm-avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; }
.pm-avatar--navy { background: #eaeef5; color: var(--pm-navy-900); }

/* Tabs (segmented control) */
.pm-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--pm-surface-2);
  border-radius: 0.5rem;
  padding: 3px;
  border: 1px solid var(--pm-border);
  gap: 2px;
}
.pm-tab {
  height: 28px; padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--pm-fg-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: transparent;
}
.pm-tab.active {
  background: var(--pm-surface);
  color: var(--pm-fg);
  box-shadow: 0 1px 2px rgba(11, 19, 32, 0.08);
}

/* Sparkline / chart helpers */
.pm-spark { display: block; height: 20px; }

/* Phone mockup */
.pm-phone {
  width: 380px;
  height: 780px;
  background: var(--pm-bg);
  border-radius: 36px;
  border: 1px solid var(--pm-border);
  box-shadow: 0 8px 24px rgba(11, 19, 32, 0.08), 0 2px 6px rgba(11, 19, 32, 0.05);
  overflow: hidden;
  position: relative;
}
@media (max-width: 767.98px) {
  .pm-phone { width: 100%; max-width: 360px; height: auto; min-height: 720px; }
}
.pm-phone__status {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pm-fg);
}
.pm-phone__content {
  height: calc(100% - 44px);
  overflow: auto;
}

/* Auth pages */
.pm-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 767.98px) {
  .pm-auth { grid-template-columns: 1fr; }
}

.pm-auth__brand {
  background: linear-gradient(155deg, var(--pm-accent) 0%, var(--pm-navy-900) 100%);
  color: #fff;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) { .pm-auth__brand { display: none; } }

.pm-auth__decor {
  position: absolute;
  right: -90px;
  top: 60px;
  opacity: 0.08;
  pointer-events: none;
}

.pm-auth__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
@media (max-width: 575.98px) { .pm-auth__form-wrap { padding: 24px 16px; } }

.pm-auth__form-card {
  width: 380px;
  max-width: 100%;
}

.pm-auth__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: #fff;
}
.pm-auth__brand-logo .mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.pm-auth__title {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-top: 14px;
  color: #fff;
}
.pm-auth__sub {
  font-size: 0.875rem;
  opacity: 0.78;
  margin-top: 14px;
  line-height: 1.6;
}
.pm-auth__eyebrow {
  font-size: 0.75rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.pm-auth__stat-row {
  display: flex; gap: 22px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pm-auth__stat-row .stat-n {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.pm-auth__stat-row .stat-l {
  font-size: 0.71875rem;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* "Reassure" list on forgot-password brand panel */
.pm-reassure {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pm-reassure__item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}
.pm-reassure__icon {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
}
.pm-reassure__strong {
  color: #fff; font-weight: 500;
  display: block;
  margin-bottom: 1px;
}

/* OTP boxes */
.pm-otp-row { display: flex; gap: 8px; }
.pm-otp-box {
  width: 50px; height: 56px;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 500;
  border: 1px solid var(--pm-border-strong);
  border-radius: 0.5rem;
  background: var(--pm-surface);
  color: var(--pm-fg);
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.pm-otp-box:focus {
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px var(--pm-accent-soft);
}
.pm-otp-box.filled { border-color: var(--pm-accent); }

/* Stepper */
.pm-stepper {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.71875rem;
  color: var(--pm-fg-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.pm-stepper .pip {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.65625rem;
  font-weight: 600;
  background: var(--pm-surface-2);
  color: var(--pm-fg-subtle);
  border: 1px solid var(--pm-border);
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.pm-stepper .pip.active { background: var(--pm-accent); color: #fff; border-color: var(--pm-accent); }
.pm-stepper .pip.done   { background: var(--pm-success); color: #fff; border-color: var(--pm-success); }
.pm-stepper .bar {
  flex: 1; height: 1.5px;
  background: var(--pm-border);
  min-width: 14px;
}
.pm-stepper .bar.done { background: var(--pm-success); }

/* Steps */
.pm-step { display: none; }
.pm-step.active {
  display: flex; flex-direction: column; gap: 16px;
  animation: pm-fade 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes pm-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Banner */
.pm-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 0.5rem;
  font-size: 0.78125rem;
  line-height: 1.5;
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
  border: 1px solid rgba(13, 59, 62, 0.18);
}
.pm-banner svg { flex: none; margin-top: 1px; }
.pm-banner--success { background: var(--pm-success-soft); color: var(--pm-success); border-color: rgba(14, 124, 90, 0.18); }
.pm-banner--warning { background: var(--pm-warning-soft); color: var(--pm-warning); border-color: rgba(177, 103, 12, 0.22); }

/* Email card on forgot-password OTP step */
.pm-email-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 0.5rem;
  background: var(--pm-surface-2);
  border: 1px solid var(--pm-border);
}
.pm-email-card .ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex: none;
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
  display: inline-flex;
  align-items: center; justify-content: center;
}
.pm-email-card .meta { line-height: 1.3; min-width: 0; flex: 1; }
.pm-email-card .meta b {
  display: block; font-weight: 500;
  color: var(--pm-fg);
  font-size: 0.84375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-email-card .meta span { font-size: 0.75rem; color: var(--pm-fg-subtle); }

/* Password strength */
.pm-strength {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.pm-strength__bars { display: flex; gap: 4px; }
.pm-strength__bar {
  flex: 1; height: 4px;
  border-radius: 2px;
  background: var(--pm-surface-3);
  transition: background 120ms;
}
.pm-strength__bar.on-1 { background: var(--pm-danger); }
.pm-strength__bar.on-2 { background: var(--pm-warning); }
.pm-strength__bar.on-3 { background: var(--pm-accent); }
.pm-strength__bar.on-4 { background: var(--pm-success); }
.pm-strength__meta {
  display: flex; justify-content: space-between;
  font-size: 0.71875rem;
  color: var(--pm-fg-subtle);
}
.pm-strength__meta strong { color: var(--pm-fg-muted); font-weight: 500; }
.pm-strength__meta strong.s-1 { color: var(--pm-danger); }
.pm-strength__meta strong.s-2 { color: var(--pm-warning); }
.pm-strength__meta strong.s-3 { color: var(--pm-accent); }
.pm-strength__meta strong.s-4 { color: var(--pm-success); }

.pm-rules { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pm-rule {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78125rem;
  color: var(--pm-fg-subtle);
  transition: color 120ms;
}
.pm-rule .check {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--pm-surface-3);
  color: var(--pm-fg-subtle);
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: all 120ms;
}
.pm-rule.met { color: var(--pm-success); }
.pm-rule.met .check { background: var(--pm-success); color: #fff; }

/* Done step "success" circle */
.pm-done-illus {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--pm-success-soft);
  color: var(--pm-success);
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 6px;
}

/* Toast */
.pm-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--pm-fg);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(11, 19, 32, 0.16);
  font-size: 0.84375rem;
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms, transform 240ms;
  z-index: 1080;
}
.pm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Hairline divider */
.pm-hr {
  height: 1px;
  background: var(--pm-hairline);
  border: none;
}

/* Pocket Money table look on Bootstrap tables */
.table.pm-table {
  --bs-table-bg: var(--pm-surface);
  --bs-table-hover-bg: var(--pm-surface-2);
  --bs-table-border-color: var(--pm-hairline);
  margin: 0;
}
.table.pm-table > :not(caption) > * > * { padding: 14px; }
.table.pm-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--pm-fg-subtle);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-surface);
  white-space: nowrap;
}
.table.pm-table tbody td {
  border-bottom: 1px solid var(--pm-hairline);
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84375rem;
}
.table.pm-table tbody tr:last-child td { border-bottom: none; }

/* Card adjustments to match Pocket Money look */
.card { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), 0 1px 1px rgba(11, 19, 32, 0.03); }

/* Input with icon prefix (Bootstrap input-group polish) */
.input-group-text {
  background: var(--pm-surface-2);
  color: var(--pm-fg-muted);
  border-color: var(--pm-border-strong);
}

/* Subtle scrollbar */
.pm-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pm-border-strong) transparent;
}
.pm-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pm-scroll::-webkit-scrollbar-thumb { background: var(--pm-border-strong); border-radius: 4px; }
.pm-scroll::-webkit-scrollbar-track { background: transparent; }

/* Hide the offcanvas drawer above md (we use a permanent sidebar there) */
@media (min-width: 768px) {
  .pm-rail.offcanvas-md {
    position: relative;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ─────────────────────────────────────────────
   Form switch (toggle pill) — restored because the
   stripped bootstrap-vendor.css omits .form-switch
   ───────────────────────────────────────────── */
.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d3b3e'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: var(--pm-accent);
  border-color: var(--pm-accent);
}

/* ─────────────────────────────────────────────
   Phone-width tweaks — keep currency values from
   wrapping their lakhs/crores suffix onto a new line.
   The .pm-keep-nowrap class can be used on any cell.
   ───────────────────────────────────────────── */
.pm-keep-nowrap {
  white-space: nowrap !important;
}
@media (max-width: 575.98px) {
  /* On dashboard "upcoming maturities" cards the principal numeric
     value is reasonably small; force it to stay on one line. */
  .pm-maturity-row .num-display,
  .pm-maturity-row .num {
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────
   Slide-over panels (Bootstrap offcanvas-end)
   styled to match the prototype's right-side drawer
   ───────────────────────────────────────────── */
.pm-panel {
  --bs-offcanvas-padding-y: 0;
  --bs-offcanvas-padding-x: 0;
  background: var(--pm-surface);
}
.pm-panel .offcanvas-header.pm-panel__header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--pm-hairline);
  align-items: flex-start;
}
.pm-panel__body {
  padding: 18px 22px 22px !important;
  overflow-y: auto;
}
.pm-panel__footer {
  padding: 12px 22px;
  border-top: 1px solid var(--pm-hairline);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--pm-surface);
}
@media (max-width: 575.98px) {
  .pm-panel { width: 100% !important; }
}

/* ─────────────────────────────────────────────
   Form fields used inside slide-overs
   (label + control + optional hint)
   ───────────────────────────────────────────── */
.pm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-field__label {
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--pm-fg-muted);
  margin: 0;
  letter-spacing: -0.005em;
}
.pm-field__hint {
  font-size: 0.71875rem;
  color: var(--pm-fg-subtle);
  line-height: 1.5;
}
.pm-req {
  color: var(--pm-danger);
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   Segmented buttons used inside slide-overs
   (Cheque / Cash, Simple / Compound, 12m / 18m / …)
   ───────────────────────────────────────────── */
.pm-seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-seg__btn {
  padding: 6px 12px;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  color: var(--pm-fg-muted);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pm-seg__btn:hover {
  border-color: var(--pm-fg-muted);
  color: var(--pm-fg);
}
.pm-seg__btn.active {
  background: var(--pm-accent);
  border-color: var(--pm-accent);
  color: #fff;
}
.pm-seg__btn--sm {
  padding: 4px 10px;
  font-size: 0.78125rem;
}

/* Maturity preview card inside New deposit panel */
.pm-maturity-preview {
  border-radius: 12px;
  background: var(--pm-accent-soft);
  border: 1px solid var(--pm-accent);
  padding: 18px;
}

/* ─────────────────────────────────────────────
   Detail page bits — used on client-detail.html
   and deposit-detail.html
   ───────────────────────────────────────────── */

/* Larger avatar shown in the header card */
.pm-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
  flex: none;
}

/* Underlined Bootstrap nav-tabs styled to match the prototype */
.pm-tabs-underline {
  border-bottom: 1px solid var(--pm-border);
  gap: 4px;
}
.pm-tabs-underline .nav-link {
  padding: 12px 4px;
  margin-right: 16px;
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--pm-fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-tabs-underline .nav-link:hover {
  color: var(--pm-fg);
}
.pm-tabs-underline .nav-link.active {
  color: var(--pm-fg);
  border-bottom-color: var(--pm-accent);
  background: none;
}
.pm-tab-count {
  font-size: 0.6875rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pm-surface-2);
  color: var(--pm-fg-muted);
  font-weight: 500;
}
.pm-tabs-underline .nav-link.active .pm-tab-count {
  background: var(--pm-accent-soft);
  color: var(--pm-accent);
}

/* Big stat used on deposit detail */
.pm-bigstat__label {
  font-size: 0.6875rem;
  color: var(--pm-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.pm-bigstat__value {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 4px;
}
.pm-bigstat__value--accent {
  color: var(--pm-accent);
}
.pm-bigstat__sub {
  font-size: 0.75rem;
  color: var(--pm-fg-subtle);
  margin-top: 4px;
}

/* Info row used in the detail "Account details" card */
.pm-info-row__label {
  font-size: 0.71875rem;
  color: var(--pm-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.pm-info-row__value {
  font-size: 0.84375rem;
  margin-top: 3px;
}

/* Restore stripped row-cols utilities (md-4, lg-4) */
@media (min-width: 768px) {
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
}
@media (min-width: 992px) {
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
}

/* ── Topbar user/profile dropdown trigger ── */
.pm-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--pm-fg);
  transition: background 120ms ease, border-color 120ms ease;
}
.pm-user-btn:hover,
.pm-user-btn.show {
  background: var(--pm-surface-2);
  border-color: var(--pm-border-strong);
}

/* ── Modal: offset left padding so dialog centres within the workspace, not the full viewport ── */
/* lg+ — full 232px sidebar */
@media (min-width: 992px) {
  .modal {
    padding-left: var(--pm-rail-w) !important;
  }
}
/* md — icon-only 64px sidebar */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal {
    padding-left: 64px !important;
  }
}

/* ── Pagination ── */
.pm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--pm-hairline);
  background: var(--pm-surface);
  flex-wrap: wrap;
  gap: 8px;
}
.pm-pagination__info { font-size: 0.78125rem; color: var(--pm-fg-subtle); }
.pm-pagination__controls { display: flex; align-items: center; gap: 3px; }
.pm-pagination__btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  background: var(--pm-surface);
  color: var(--pm-fg-muted);
  font-size: 0.78125rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms, border-color 120ms;
  line-height: 1;
}
.pm-pagination__btn:hover:not(:disabled) {
  background: var(--pm-surface-2);
  color: var(--pm-fg);
  border-color: var(--pm-border-strong);
}
.pm-pagination__btn--active {
  background: var(--pm-accent) !important;
  color: #fff !important;
  border-color: var(--pm-accent) !important;
  font-weight: 500;
}
.pm-pagination__btn:disabled { opacity: 0.35; cursor: default; }
.pm-pagination__dots { font-size: 0.78125rem; color: var(--pm-fg-subtle); padding: 0 4px; user-select: none; }

/* ── Dropdown menu — theme-compliant appearance ── */
.dropdown-menu {
  --bs-dropdown-bg:                var(--pm-surface);
  --bs-dropdown-border-color:      var(--pm-border);
  --bs-dropdown-border-radius:     0.5rem;
  --bs-dropdown-link-color:        var(--pm-fg);
  --bs-dropdown-link-hover-color:  var(--pm-fg);
  --bs-dropdown-link-hover-bg:     var(--pm-surface-2);
  --bs-dropdown-link-active-bg:    var(--pm-accent-soft);
  --bs-dropdown-link-active-color: var(--pm-accent);
  --bs-dropdown-divider-bg:        var(--pm-hairline);
  --bs-dropdown-box-shadow:        0 4px 16px rgba(11,19,32,0.08), 0 1px 4px rgba(11,19,32,0.05);
  font-size: 0.84375rem;
}

/* ── Dropdown item hover — ensure consistent hover across all uses ── */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--pm-surface-2);
  color: var(--pm-fg);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--pm-accent-soft);
  color: var(--pm-accent);
}
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
  background-color: var(--pm-danger-soft);
  color: var(--pm-danger);
}