/* ==========================================================================
   Xpeazy — Material 3 (Android) design layer
   --------------------------------------------------------------------------
   Loaded AFTER styles.css and deliberately re-defines the same class names,
   so all ~65 screens inherit a real Android look without rewriting markup.

   Why this exists: the prototype read as an iOS wireframe (notch, home
   indicator, hairline navy frame, flat cards). Field staff are on Android,
   and a pitch film that shows an iPhone-shaped wireframe undercuts the claim
   that this ships to drivers. This is Material 3: tonal surfaces instead of
   borders, state layers, 20dp pill buttons, and Android system chrome.

   Colour is a real M3 tonal palette seeded from Xpeazy green #1F8B4C —
   NOT the flat three-colour deck palette. Console navy never appears here;
   the field worker sees one brand.
   ========================================================================== */

:root {
  /* ---- M3 colour roles (light) ---------------------------------------- */
  --m3-primary:              #0F6B3F;
  --m3-on-primary:           #FFFFFF;
  --m3-primary-container:    #A8F5C4;
  --m3-on-primary-container: #00210F;

  --m3-secondary:            #4E6355;
  --m3-on-secondary:         #FFFFFF;
  --m3-secondary-container:  #D1E8D6;
  --m3-on-secondary-container:#0C1F14;

  --m3-tertiary:             #1D5C8B;
  --m3-on-tertiary:          #FFFFFF;
  --m3-tertiary-container:   #CBE6FF;
  --m3-on-tertiary-container:#001E31;

  --m3-error:                #BA1A1A;
  --m3-on-error:             #FFFFFF;
  --m3-error-container:      #FFDAD6;
  --m3-on-error-container:   #410002;

  --m3-warn:                 #7A5900;
  --m3-warn-container:       #FFE08A;
  --m3-on-warn-container:    #261A00;

  --m3-surface:              #F7FBF4;
  --m3-surface-dim:          #D7DBD4;
  --m3-surface-bright:       #F7FBF4;
  --m3-s-lowest:             #FFFFFF;
  --m3-s-low:                #F1F5EE;
  --m3-s-container:          #EBEFE8;
  --m3-s-high:               #E5EAE3;
  --m3-s-highest:            #E0E4DD;

  --m3-on-surface:           #191D18;
  --m3-on-surface-var:       #414941;
  --m3-outline:              #717971;
  --m3-outline-var:          #C1C9BF;
  --m3-inverse-surface:      #2E322D;
  --m3-inverse-on-surface:   #EFF2EB;

  /* ---- shape ----------------------------------------------------------- */
  --m3-xs: 4px; --m3-sm: 8px; --m3-md: 12px; --m3-lg: 16px; --m3-xl: 28px; --m3-full: 999px;

  /* ---- elevation: M3 leans on tone, with a soft shadow only when raised - */
  --m3-e1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --m3-e2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --m3-e3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  --m3-font: Roboto, "Helvetica Neue", -apple-system, "Segoe UI", sans-serif;

  /* map the legacy tokens so untouched screens pick the new palette up */
  --white: var(--m3-s-lowest);
  --surface: var(--m3-surface);
  --ink: var(--m3-on-surface);
  --ink-soft: var(--m3-on-surface-var);
  --gray: var(--m3-on-surface-var);
  --gray-light: var(--m3-outline);
  --border: var(--m3-outline-var);
  --green: var(--m3-primary);
  --green-pale: var(--m3-primary-container);
  --blue: var(--m3-tertiary);
  --blue-pale: var(--m3-tertiary-container);
  --red: var(--m3-error);
  --red-pale: var(--m3-error-container);
  --amber: var(--m3-warn);
  --amber-pale: var(--m3-warn-container);
  /* Console navy must never render inside the Xpeazy app (owner rule).
     Remapping the legacy navy tokens makes that structural rather than a
     thing someone has to remember on every new screen. */
  --navy: var(--m3-primary);
  --navy-deep: var(--m3-on-primary-container);
  --navy-soft: var(--m3-secondary);
  --blue-soft: var(--m3-tertiary);
  --radius: var(--m3-md);
  --radius-sm: var(--m3-sm);
  --radius-lg: var(--m3-lg);
}

body { font-family: var(--m3-font); background: #0E120D; color: var(--m3-on-surface); }

/* ==========================================================================
   Android device
   ========================================================================== */
.phone {
  width: 392px; max-width: 100vw;
  height: min(806px, calc(100vh - 84px));
  min-height: 560px;
  background: var(--m3-surface);
  border: 10px solid #0B0F0A;
  border-radius: 38px;
  box-shadow: 0 0 0 2px #2A302A, 0 26px 60px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
/* punch-hole camera, not a notch */
.phone .notch {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #050704; box-shadow: inset 0 0 0 1.5px #1C231C; z-index: 6;
}

/* Android status bar: time left, system icons right */
.statusbar {
  flex: none; height: 34px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px 0 20px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--m3-on-surface);
  background: transparent;
  position: relative; z-index: 4;
}
.statusbar .status-icons { display: flex; align-items: center; gap: 6px; }
/* signal triangle */
.statusbar .status-icons::before {
  content: ""; width: 0; height: 0;
  border-left: 11px solid transparent; border-bottom: 11px solid var(--m3-on-surface);
  border-radius: 1px; opacity: .92;
}
.statusbar .icon-battery {
  display: inline-flex; align-items: center; width: 21px; height: 11px;
  border: 1.5px solid var(--m3-on-surface); border-radius: 3px; padding: 1.5px; position: relative;
}
.statusbar .icon-battery::after {
  content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 5px;
  background: var(--m3-on-surface); border-radius: 0 1.5px 1.5px 0;
}
.statusbar .icon-battery i { display: block; height: 100%; width: 82%; background: var(--m3-on-surface); border-radius: 1px; }

/* gesture navigation pill */
.home-indicator {
  flex: none; height: 24px; display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.home-indicator span { width: 132px; height: 4px; border-radius: 99px; background: var(--m3-on-surface); opacity: .45; }

.viewport { flex: 1; overflow-y: auto; position: relative; background: var(--m3-surface); }
.viewport::-webkit-scrollbar { width: 0; }
.screen-pad { padding: 8px 16px 20px; gap: 12px; }

/* ==========================================================================
   Top app bar
   ========================================================================== */
.app-head {
  padding: 8px 8px 8px 18px; min-height: 60px;
  border-bottom: none;
  background: var(--m3-surface);
  align-items: center;
}
.brand {
  font-size: 21px; font-weight: 600; letter-spacing: 0;
  color: var(--m3-on-surface);
}
.app-head .brand-mark, .brand-mark {
  width: 32px; height: 32px; border-radius: var(--m3-sm);
  background: var(--m3-primary); color: var(--m3-on-primary);
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
}

/* ==========================================================================
   Buttons — M3 pill shape, 40dp/56dp, state layer on press
   ========================================================================== */
.btn {
  border-radius: var(--m3-full);
  font-family: var(--m3-font);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  padding: 10px 24px; min-height: 40px;
  border: none; position: relative; overflow: hidden;
  transition: box-shadow .18s, background .18s;
}
.btn-primary { background: var(--m3-primary); color: var(--m3-on-primary); box-shadow: none; }
.btn-primary:hover { box-shadow: var(--m3-e1); }
.btn-primary:active { box-shadow: none; }
.btn-secondary, .btn-tonal {
  background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); border: none;
}
.btn-outline {
  background: transparent; color: var(--m3-primary);
  border: 1px solid var(--m3-outline);
}
.btn-danger-outline { background: transparent; color: var(--m3-error); border: 1px solid var(--m3-error); }
.btn-lg { min-height: 56px; font-size: 16px; padding: 16px 28px; border-radius: var(--m3-full); }
.btn-block { width: 100%; }
.btn-sm { min-height: 32px; font-size: 13px; padding: 6px 16px; }
.btn:disabled { background: rgba(25,29,24,.12); color: rgba(25,29,24,.38); box-shadow: none; }

/* ==========================================================================
   Cards & list items — tonal containers, no hairline boxes
   ========================================================================== */
.card {
  background: var(--m3-s-low);
  border: none; border-radius: var(--m3-lg);
  padding: 16px;
}
.card.outlined { background: var(--m3-s-lowest); border: 1px solid var(--m3-outline-var); }

.txn {
  background: transparent; border: none; border-radius: var(--m3-md);
  padding: 12px 8px; min-height: 72px; align-items: center; gap: 16px;
}
.txn:hover { background: var(--m3-s-container); }
.txn .ic, .txn .avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--m3-secondary-container); color: var(--m3-on-secondary-container);
  display: grid; place-items: center; font-size: 15px; font-weight: 500;
}
.txn .amt { font-family: var(--m3-font); font-weight: 500; font-size: 16px; color: var(--m3-on-surface); }

/* divider */
.hr, hr { border: none; border-top: 1px solid var(--m3-outline-var); }

/* ==========================================================================
   The money surface — the one place with a deliberate, branded gradient
   ========================================================================== */
.balance-card, .money-surface {

  background: linear-gradient(152deg, #17A45A 0%, #0F6B3F 42%, #084C2B 100%);
  border: none; border-radius: var(--m3-xl);
  color: #FFFFFF; padding: 22px;
  box-shadow: var(--m3-e2);
}
.balance-card .amt, .money-surface .amt {
  font-size: 40px; font-weight: 500; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.balance-card .bar { background: rgba(255,255,255,.16); border: none; border-radius: var(--m3-full); }

/* ==========================================================================
   Bottom navigation — M3 pill indicator
   ========================================================================== */
.bottomnav {
  background: var(--m3-s-container);
  border-top: none; height: 80px; padding: 12px 8px 16px;
  display: flex; justify-content: space-around; align-items: flex-start;
}
.bottomnav button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; flex: 1;
  font-size: 12px; font-weight: 500; color: var(--m3-on-surface-var);
  letter-spacing: .01em;
}
.bottomnav .nav-ic {
  width: 64px; height: 32px; border-radius: var(--m3-full);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transition: background .2s;
}
.bottomnav button.on { color: var(--m3-on-surface); font-weight: 600; }
.bottomnav button.on .nav-ic { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }

/* ==========================================================================
   Chips, pills, badges
   ========================================================================== */
.pill, .chip {
  border-radius: var(--m3-sm); padding: 5px 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; border: none;
}
.pill.green  { background: var(--m3-primary-container);  color: var(--m3-on-primary-container); }
.pill.red    { background: var(--m3-error-container);    color: var(--m3-on-error-container); }
.pill.amber  { background: var(--m3-warn-container);     color: var(--m3-on-warn-container); }
.pill.blue   { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); }
.pill.gray   { background: var(--m3-s-high);             color: var(--m3-on-surface-var); }

/* ==========================================================================
   Inputs — M3 filled text field
   ========================================================================== */
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], select, textarea {
  background: var(--m3-s-high);
  border: none; border-bottom: 1px solid var(--m3-on-surface-var);
  border-radius: var(--m3-xs) var(--m3-xs) 0 0;
  padding: 16px; font-size: 16px; font-family: var(--m3-font);
  color: var(--m3-on-surface); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-bottom: 2px solid var(--m3-primary); background: var(--m3-s-highest);
}

/* PIN dots */
.pin-dots i { width: 15px; height: 15px; border: 2px solid var(--m3-outline); background: transparent; }
.pin-dots i.fill { background: var(--m3-primary); border-color: var(--m3-primary); }

/* ==========================================================================
   Sheets, dialogs, snackbars
   ========================================================================== */
.sheet {
  background: var(--m3-s-low);
  border-radius: var(--m3-xl) var(--m3-xl) 0 0;
  box-shadow: var(--m3-e3); padding: 20px 20px 28px;
}
.sheet::before {
  content: ""; display: block; width: 32px; height: 4px; border-radius: 99px;
  background: var(--m3-outline-var); margin: 0 auto 18px;
}
.phone .toast, .toast {
  background: var(--m3-inverse-surface); color: var(--m3-inverse-on-surface);
  border-radius: var(--m3-xs); padding: 14px 16px; font-size: 14px;
  box-shadow: var(--m3-e3); bottom: 96px;
}

/* ==========================================================================
   Typography roles
   ========================================================================== */
h1 { font-size: 32px; font-weight: 400; line-height: 40px; letter-spacing: 0; color: var(--m3-on-surface); }
h2 { font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: 0; color: var(--m3-on-surface); }
h3 { font-size: 22px; font-weight: 500; line-height: 28px; color: var(--m3-on-surface); }
h4 { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: .009em; color: var(--m3-on-surface); }
.muted { color: var(--m3-on-surface-var); font-size: 14px; line-height: 20px; }
.kicker {
  font-size: 11px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--m3-on-surface-var);
}
.amount { font-family: var(--m3-font); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ref, .vpa, .mcc { font-family: var(--mono); font-size: 12.5px; color: var(--m3-on-surface-var); }

/* --- on the money surface, secondary text must be white-alpha, not palette blue */
.balance-card .kicker, .money-surface .kicker { color: rgba(255,255,255,.86); letter-spacing: .08em; }
.balance-card .muted,  .money-surface .muted  { color: rgba(255,255,255,.80); }
.balance-card .pill, .money-surface .pill { background: rgba(255,255,255,.18); color: #fff; }
.balance-card a, .money-surface a { color: #fff; }

/* --- M3 uses a filled tonal "assist" affordance for secondary actions */
.back-link { color: var(--m3-primary); font-weight: 500; }

/* --- section headers inside cards read as overline, not as a blue kicker */
.card > .kicker:first-child { display:block; margin-bottom: 10px; }

/* --- FAB-height primary action on money screens */
.btn-lg { letter-spacing: .01em; font-weight: 500; }

/* --- the inline <style> targets these with higher specificity, so the money
       surface needs an equally specific rule or the eyebrow stays palette-blue */
.phone .balance-card .kicker, .phone .money-surface .kicker,
#root .balance-card .kicker { color: rgba(255,255,255,.88) !important; }
.phone .balance-card .muted, .phone .balance-card p { color: rgba(255,255,255,.82) !important; }
.phone .balance-card .pill { background: rgba(255,255,255,.20) !important; color:#fff !important; border:none !important; }

/* --- bottom nav is fixed chrome: content must scroll above it, never under it */
.screen.has-nav .screen-pad, .screen:has(.bottomnav) .screen-pad { padding-bottom: 8px; }
.bottomnav { flex: none; margin-top: auto; }
.viewport { padding-bottom: 0; }