/* ==========================================================================
   MoniepointPro Web — Shared Styles
   Fonts and colors pulled directly from the Sketchware Pro project.
   ========================================================================== */

@font-face {
  font-family: 'MPFont';
  src: url('../assets/fonts/light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'MPFont';
  src: url('../assets/fonts/regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'MPFont';
  src: url('../assets/fonts/medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'MPFont';
  src: url('../assets/fonts/semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'MPFont';
  src: url('../assets/fonts/bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Real hex values decoded from the app's Android color ints */
  --mp-bg-navy: #0E1A32;      /* main dark background */
  --mp-card-navy: #01203D;    /* card / balance panel background */
  --mp-tile-navy: #1A263E;    /* tile / dot-inactive / button background */
  --mp-pill-navy: #013252;    /* pill button background */
  --mp-gold: #FFD75B;         /* primary accent */
  --mp-white: #FFFFFF;
  --mp-black: #000000;
  --mp-grey-text: #757575;    /* footer / secondary text */
  --mp-muted-blue: #607D8B;   /* hint text */
  --mp-danger: #FF5252;
  --mp-success: #4CAF50;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--mp-bg-navy);
  color-scheme: dark;
}

body {
  font-family: 'MPFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--mp-white);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
}

/* App-like fixed layout, used by pages built as "fixed header + scrolling
   middle + fixed bottom nav" (Dashboard, Transfer amount/confirm, Enter
   PIN, Transaction History/Viewers, Add Money, Payment, Transfer Result).

   WHY position:fixed rather than just height:100dvh on the inner shell:
   body is a normal scrolling document by default, and the shared rule above
   gives it min-height:100dvh. So even with the shell sized to the viewport,
   the DOCUMENT itself could still scroll independently - which is exactly
   what pushed the bottom nav below the fold and made it need a scroll to
   reveal. Sizing the inner shell can never fix that, because the overflow
   was happening one level up, on body.

   Pinning body to the visual viewport edges removes the possibility
   entirely: bottom:0 is always the real bottom of the visible area, no
   viewport-unit maths involved, so nothing can push past it regardless of
   how the browser's address bar behaves. */
body.mp-fixed-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
}

body.mp-fixed-layout .shell {
  height: 100%;
}

/* .mp-app-scroll used to pin body with position:fixed here, mirroring
   .mp-fixed-layout. That was wrong: position:fixed on body, combined with
   these pages' own layout quirks, broke native scrolling outright on
   several pages (Select Bank, Transfer) rather than just fixing the
   original bottom-clipping issue. These 16 pages never needed viewport
   pinning in the first place - they're normal documents that should just
   scroll the ordinary way, which is the one thing that can never break it.
   The class is kept as a no-op marker (still present in the HTML) so nothing
   needs re-tagging, but it no longer does anything. */
body.mp-app-scroll {
  /* intentionally empty */
}

/* No scrollbars anywhere - this should read as an app, not a web page.
   Scrolling itself is completely unaffected, only the visible bar is gone. */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge/IE */
}
*::-webkit-scrollbar {            /* Chrome, Safari, Edge, Android WebView */
  width: 0;
  height: 0;
  display: none;
}

/* This is meant to feel like an app, not a website - tapping or long-
   pressing text anywhere shouldn't bring up the browser's native text
   selection handles or the Copy/Share/Web search context menu. Nothing in
   this app relies on manual text selection: every place a user might want
   to copy something (account number, transaction reference, etc.) already
   has its own explicit copy button, so disabling selection globally loses
   no real functionality.
   -webkit-touch-callout additionally suppresses iOS Safari's press-and-hold
   callout menu, which -webkit-user-select alone doesn't cover. */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Real text inputs are the one deliberate exception - normal text editing
   (cursor placement, selecting to correct a typo, etc.) still needs to
   work exactly as expected. */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img { -webkit-user-select: none; user-select: none; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Font weight helpers, matching the app's SetXOn(textview) block functions */
.font-light     { font-weight: 300; }
.font-regular   { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

/* Shared loading dialog (spinner + text, blurred backdrop) - mirrors the
   app's Create Custom Dialog + Blur background pattern used for network waits. */
.mp-loading-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-loading-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.mp-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
}
.mp-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--mp-gold);
  animation: mp-spin 0.8s linear infinite;
}
@keyframes mp-spin {
  to { transform: rotate(360deg); }
}
.mp-loading-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-white);
  text-align: center;
}
/* Shared toast component */
.mp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--mp-tile-navy);
  color: var(--mp-white);
  padding: 10px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: normal;
  word-wrap: break-word;
  max-width: min(320px, 85vw);
  width: max-content;
  text-align: center;
  line-height: 1.4;
  z-index: 999;
}
.mp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Full-bleed centered app shell, used by splash / maintenance / banned style pages */
.mp-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 8px;
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 8px;
}

/* Inside a pinned body, fill the real viewport rather than re-introducing
   viewport-unit maths that can drift as the address bar shows/hides. */
body.mp-fixed-layout .mp-shell { height: 100%; min-height: 0; }

/* ===== Pull to refresh indicator (js/pull-refresh.js) ===== */
.mp-ptr {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mp-tile-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.mp-ptr-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 91, 0.25);
  border-top-color: var(--mp-gold);
}
.mp-ptr.spinning .mp-ptr-spinner {
  animation: mp-ptr-spin 0.7s linear infinite;
}
@keyframes mp-ptr-spin {
  to { transform: rotate(360deg); }
}

/* ===== In-app notification banner (js/banner.js) =====
   Slides down from the top, clears the status bar via safe-area inset,
   taps through to the relevant page.

   Positioning REWRITTEN to match js/toast.js's proven technique exactly
   (left: 50% + transform: translateX(-50%)), rather than the
   left:0/right:0/margin:0 auto approach this used originally. That
   original approach was never actually confirmed to render correctly on
   the real device - toast's technique has been, visibly, throughout this
   entire build. Also now toggles opacity together with transform on show/
   hide, matching toast's pattern exactly rather than using transform
   alone. */
.mp-banner {
  position: fixed;
  top: 0;
  left: 50%;
  /* Stops the browser applying its own default touch behaviour (like page
     scroll) to a gesture that starts on the banner - without this, dragging
     to swipe-dismiss could fight with the page scrolling underneath it at
     the same time. */
  touch-action: none;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--mp-tile-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border-radius: 0 0 18px 18px;
  opacity: 0;
  transform: translateX(-50%) translateY(-100%);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  z-index: 2500;
  -webkit-user-select: none;
  user-select: none;
}
.mp-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mp-banner-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
}
.mp-banner-text {
  flex: 1;
  min-width: 0;
}
.mp-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-white);
  line-height: 1.3;
}
.mp-banner-body {
  font-size: 13px;
  font-weight: 500;
  color: #A9B4C4;
  line-height: 1.4;
  margin-top: 2px;
}