/* ============================================================================
   EIS — MOBILE DESIGN SYSTEM
   A dedicated component library for phones (≤820px). This is NOT responsive
   desktop CSS: these classes are only produced by js/ui/mobile.js renderers.
   Desktop styles are untouched. Everything respects safe areas, 48px touch
   targets, and one-handed reach.
   ========================================================================== */

/* Mobile-only elements are invisible on desktop */
.m-only{ display:none !important; }

@media (max-width: 820px) {

/* ---- App chrome ---------------------------------------------------------- */
.topbar{
  height:calc(52px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--border);
}
.topbar .search{ display:none; }           /* replaced by the search icon */
.topbar #menuBtn, .topbar #themeBtn{ display:none; }
.topbar .m-title-bar.m-only{ display:block !important; }
.topbar #mSearchBtn.m-only{ display:inline-flex !important; }
.topbar .m-title-bar{
  flex:1; min-width:0; font-size:17px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .icon-btn{ width:44px; height:44px; }
.page{ padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }

/* Page-level transition: content slides up softly on every route change */
.m-page{ animation:m-pagein .26s var(--ease) both; }
@keyframes m-pagein{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- Typography ---------------------------------------------------------- */
.m-h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.m-sub{ color:var(--muted); font-size:13.5px; margin-top:3px; }
.m-section{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:22px 2px 10px;
}
.m-section .spacer{ flex:1; }
.m-section a{ font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--accent); }
.m-money{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---- Hero balance card (Apple Wallet / Stripe style) --------------------- */
.m-hero{
  position:relative; overflow:hidden; border-radius:22px; padding:20px 20px 18px;
  background:
    radial-gradient(120% 160% at 15% 0%, #16305f 0%, #0a1c40 45%, #071228 100%);
  color:#fff; box-shadow:0 14px 34px rgba(4,12,32,.35);
}
.m-hero .label{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.62); letter-spacing:.04em; }
.m-hero .value{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.m-hero .split{ display:flex; gap:22px; margin-top:16px; }
.m-hero .split .label{ font-size:11px; }
.m-hero .split b{ font-size:15px; font-variant-numeric:tabular-nums; }
.m-hero .mark{
  position:absolute; inset-inline-end:-26px; top:-26px; width:130px; height:130px;
  opacity:.14; pointer-events:none;
}

/* ---- KPI tiles ------------------------------------------------------------ */
.m-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.m-kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px 15px; box-shadow:var(--shadow-sm); min-height:76px;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.m-kpi .label{ font-size:12px; font-weight:600; color:var(--muted); }
.m-kpi .value{ font-size:19px; font-weight:750; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.m-kpi .value.pos{ color:var(--success); } .m-kpi .value.neg{ color:var(--danger); }
.m-kpi .value.warn{ color:var(--warning); }

/* ---- Quick actions (horizontal, thumb-reach) ------------------------------ */
.m-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.m-quick button{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:13px 4px 11px; min-height:74px; cursor:pointer;
  font-size:11.5px; font-weight:600; color:var(--text-2);
  transition:transform .12s var(--ease), background .12s;
}
.m-quick button:active{ transform:scale(.94); background:var(--surface-2); }
.m-quick .qa-ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-weak); color:var(--accent);
}

/* ---- Transaction / record card -------------------------------------------- */
.m-txn{
  display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:13px 15px; min-height:64px; box-shadow:var(--shadow-sm);
  margin-bottom:9px; cursor:pointer;
  transition:transform .1s var(--ease), background .12s;
}
.m-txn:active{ transform:scale(.985); background:var(--surface-2); }
.m-txn .tx-ic{
  flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--accent-weak); color:var(--accent);
}
.m-txn .tx-ic.in{ background:var(--success-weak); color:var(--success); }
.m-txn .tx-ic.out{ background:var(--danger-weak); color:var(--danger); }
.m-txn .tx-main{ flex:1; min-width:0; }
.m-txn .tx-title{ font-size:14.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-txn .tx-sub{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-txn .tx-end{ text-align:end; flex:none; }
.m-txn .tx-amt{ font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.m-txn .tx-amt.in{ color:var(--success); }
.m-txn .tx-amt.out{ color:var(--danger); }
.m-txn .badge{ margin-top:3px; }
/* swipe hosting */
.m-txn.swipe-row{ padding:0; overflow:hidden; }
.m-txn.swipe-row .swipe-surface{ display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--surface); width:100%; }

/* ---- Bank / account card (premium) ---------------------------------------- */
.m-acct{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:17px; box-shadow:var(--shadow-sm); margin-bottom:12px;
}
.m-acct .top{ display:flex; align-items:center; gap:12px; }
.m-acct .avatar-sq{
  flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-size:15px; font-weight:800; letter-spacing:.01em; color:#fff;
  background:linear-gradient(135deg,#16305f,#071228);
}
.m-acct .who{ flex:1; min-width:0; }
.m-acct .name{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-acct .meta{ font-size:12px; color:var(--muted); margin-top:1px; }
.m-acct .balance{ font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:13px; font-variant-numeric:tabular-nums; }
.m-acct .balance .cur{ font-size:14px; font-weight:650; color:var(--muted); margin-inline-end:5px; }
.m-acct .foot{ display:flex; gap:8px; margin-top:14px; }
.m-acct .foot .btn{ flex:1; min-height:44px; border-radius:12px; font-weight:650; }
.m-acct .foot .btn.more{ flex:0 0 48px; }

/* ---- Segmented control ----------------------------------------------------- */
.m-seg{
  display:flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:13px; padding:3px; gap:2px; margin-bottom:14px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.m-seg::-webkit-scrollbar{ display:none; }
.m-seg button{
  flex:1 0 auto; min-height:38px; padding:0 14px; border:none; background:transparent;
  border-radius:10px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s;
}
.m-seg button.on{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }

/* ---- List rows (settings / nav style) -------------------------------------- */
.m-list{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.m-list .m-row{
  display:flex; align-items:center; gap:13px; min-height:52px; padding:10px 15px;
  border-bottom:1px solid var(--border); cursor:pointer; font-size:14.5px; font-weight:550;
}
.m-list .m-row:last-child{ border-bottom:none; }
.m-list .m-row:active{ background:var(--surface-2); }
.m-list .m-row .ic-wrap{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--accent-weak); color:var(--accent); }
.m-list .m-row .chev{ margin-inline-start:auto; color:var(--faint); flex:none; }
.m-list .m-row .rsub{ display:block; font-size:12px; color:var(--muted); font-weight:450; margin-top:1px; }

/* ---- Full-screen sheets (forms, search, nav) -------------------------------- */
.m-fs{
  position:fixed; inset:0; z-index:95; background:var(--bg);
  display:flex; flex-direction:column;
  animation:m-fsin .28s var(--ease) both;
  padding-top:env(safe-area-inset-top);
}
@keyframes m-fsin{ from{ transform:translateY(100%); } to{ transform:none; } }
.m-fs.closing{ animation:m-fsout .22s var(--ease) both; }
@keyframes m-fsout{ from{ transform:none; } to{ transform:translateY(100%); } }
.m-fs-head{
  display:flex; align-items:center; gap:6px; padding:10px 10px 10px 16px;
  background:var(--surface); border-bottom:1px solid var(--border); flex:none;
}
.m-fs-head h2{ flex:1; font-size:17px; font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-fs-head .btn{ min-height:44px; }
.m-fs-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; }
.m-fs-foot{
  flex:none; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--border);
}
.m-fs-foot .btn{ flex:1; min-height:50px; font-size:15.5px; font-weight:700; border-radius:14px; }
.m-fs-foot .btn.ghost, .m-fs-foot .btn:not(.accent){ flex:0 0 auto; padding:0 22px; }

/* ---- Search sheet ------------------------------------------------------------ */
.m-search-in{
  display:flex; align-items:center; gap:10px; flex:1;
  background:var(--surface-2); border:1px solid var(--border); border-radius:13px;
  padding:0 13px; min-height:46px;
}
.m-search-in input{ flex:1; border:none; background:transparent; font-size:15.5px; min-width:0; color:var(--text); outline:none; }
.m-chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.m-chip{
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  min-height:38px; padding:0 15px; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.m-chip:active{ background:var(--surface-2); }

/* ---- Report primitives -------------------------------------------------------- */
.m-rep-sum{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
details.m-fold{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  margin-bottom:10px; box-shadow:var(--shadow-sm); overflow:hidden;
}
details.m-fold summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  min-height:54px; padding:10px 16px; cursor:pointer; font-weight:650; font-size:14.5px;
}
details.m-fold summary::-webkit-details-marker{ display:none; }
details.m-fold summary .amt{ margin-inline-start:auto; font-weight:750; font-variant-numeric:tabular-nums; }
details.m-fold summary .car{ transition:transform .18s var(--ease); color:var(--faint); }
details.m-fold[open] summary .car{ transform:rotate(90deg); }
details.m-fold .fold-body{ border-top:1px solid var(--border); }
details.m-fold .fold-row{
  display:flex; justify-content:space-between; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--border); font-size:13.5px;
}
details.m-fold .fold-row:last-child{ border-bottom:none; }
details.m-fold .fold-row .n{ color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
details.m-fold .fold-row .v{ font-variant-numeric:tabular-nums; font-weight:600; }
.m-sticky-total{
  position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:5;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--primary); color:var(--primary-contrast);
  border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg); margin-top:14px;
  font-weight:700;
}
.m-sticky-total .v{ font-size:18px; font-variant-numeric:tabular-nums; }

/* ---- Forms: touch-first inputs ------------------------------------------------ */
.m-fs .input, .modal .input, .overlay .input{
  min-height:48px; font-size:16px; border-radius:13px;  /* 16px kills iOS zoom-on-focus */
}
.m-fs textarea.input{ min-height:88px; }
.m-fs .field label, .modal .field label{ font-size:13px; font-weight:600; margin-bottom:6px; }
.m-group{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px; margin-bottom:14px;
}
.m-group > .g-label{
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.modal .m-foot .btn.accent, .m-foot .btn.accent{ min-height:50px; font-size:15.5px; font-weight:700; }

/* Bottom-sheet modals: bigger buttons, comfy padding (desktop dialogs reuse) */
.overlay .modal .m-foot{ gap:10px; }
.overlay .modal .m-foot .btn{ min-height:48px; border-radius:13px; flex:1; font-weight:650; }
.overlay .modal .m-foot .btn:not(.accent){ flex:0 0 auto; padding:0 20px; }

/* ---- Bottom nav: elevation + active pill + badges ---------------------------- */
.bottom-nav{ padding-bottom:max(5px, env(safe-area-inset-bottom)); }
.bottom-nav a{ position:relative; }
.bottom-nav a.active::before{
  content:''; position:absolute; top:2px; width:34px; height:3px; border-radius:99px;
  background:var(--accent); inset-inline-start:calc(50% - 17px);
}
.bn-badge{
  position:absolute; top:3px; inset-inline-end:calc(50% - 20px);
  min-width:16px; height:16px; border-radius:99px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px;
}
.fab{ inset-block-end:calc(84px + env(safe-area-inset-bottom)); }

/* ---- Action sheet destructive tone ------------------------------------------- */
.sheet .sheet-item.destructive{ color:var(--danger); }
.sheet .sheet-item.destructive .ic-wrap{ background:var(--danger-weak); color:var(--danger); }
.sheet .sheet-cancel{
  margin-top:8px; min-height:50px; width:100%; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:15px; font-weight:700; color:var(--text); cursor:pointer;
}

/* ---- Global search: full-screen overlay on phones ------------------------------- */
.overlay:has(.cmdk){ padding:0; align-items:stretch; }
.cmdk{
  width:100% !important; max-width:none !important; height:100%;
  border-radius:0 !important; margin:0 !important; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top);
}
.cmdk input{
  min-height:54px !important; font-size:16px !important; border-radius:0 !important;
  border:none !important; border-bottom:1px solid var(--border) !important;
  padding:0 18px !important;
}
.cmdk .results{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:none !important; }
.cmdk .res{ min-height:52px; display:flex; align-items:center; padding:0 18px !important; font-size:15px; }

/* ---- Skeletons / empty ---------------------------------------------------------- */
.m-skel{ border-radius:16px; margin-bottom:9px; }
.m-empty{
  text-align:center; padding:44px 20px; color:var(--muted);
}
.m-empty .ill{ font-size:40px; margin-bottom:10px; }
.m-empty h3{ font-size:16px; color:var(--text); margin-bottom:4px; }
.m-empty .btn{ margin-top:16px; min-height:46px; }

} /* end @media */

/* Very small phones (iPhone SE / Mini): tighter numerals so KPIs never wrap */
@media (max-width: 360px) {
  .m-kpi .value{ font-size:15.5px; }
  .m-hero .value{ font-size:28px; }
  .m-acct .balance{ font-size:23px; }
  .m-quick button{ font-size:10.5px; }
}