/**
 * NexTrade — Layout Styles
 *
 * Architecture: Pure flexbox column. No position:fixed on body or wrapper.
 * position:fixed on body/wrapper creates a containing block on Android WebView,
 * breaking fixed-positioned descendants (orbital nav). Flexbox + min-height:100dvh
 * fills the viewport without that side-effect.
 *
 * Footer is fully ghosted — zero layout footprint, cannot paint, cannot stack.
 */

/* ============================================
   RESET & VIEWPORT ENGINE
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overscroll-behavior: none;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;    /* fallback: iOS < 15.4, older Android */
  height: 100dvh;   /* preferred: shrinks with virtual keyboard */
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);

  /* Prevent body scroll — only .app-main scrolls */
  overflow: hidden;

  /* NO position:fixed — that creates a containing block on Android WebView
     which breaks any position:fixed child (e.g. the orbital nav orb).
     overflow:hidden alone is sufficient to lock body scroll. */
}

/* ============================================
   APP SHELL
   ============================================ */

.app-wrapper {
  width: 100%;
  height: 100vh;    /* fallback */
  height: 100dvh;

  display: flex;
  flex-direction: column;

  /* overflow:hidden prevents wrapper from growing past viewport */
  overflow: hidden;

  /* NO position:fixed, NO inset.
     height:100dvh gives flex children a fixed reference height so
     app-main { flex:1; overflow-y:auto } can actually scroll. */
}

/* 1. HEADER (Rigid Top) */
.app-header {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 60px;
  z-index: 2000;

  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);

  padding-top: env(safe-area-inset-top);
  padding-left: var(--space-4);
  padding-right: var(--space-4);

  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Two-layer shadow: close contact + ambient */
  box-shadow: 0 1px 0 var(--color-border),
              0 4px 12px rgba(0,0,0,0.25);
}

/* 2. MAIN CONTENT (Scrollable Middle) */
.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  padding: var(--space-4);
  /* Enough room for floating orb (58px) + bottom gap (28px) + safe area + breathing */
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));

  position: relative;
  z-index: 1;
}

/* 3. FOOTER — FULLY GHOSTED
   Stays in DOM for JS queries (Bootstraps.getFooter()).
   Has absolute zero layout footprint and cannot paint. */
.app-footer {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

.grid { display: grid; gap: var(--space-4); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ============================================
   UTILITIES
   ============================================ */

.m-0 { margin: 0; } .m-2 { margin: var(--space-2); } .m-4 { margin: var(--space-4); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.p-0 { padding: 0; } .p-2 { padding: var(--space-2); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.hidden { display: none !important; }
.block { display: block; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* ============================================
   COMPONENT VISUALS
   ============================================ */

.hero-card {
  position: sticky !important;
  top: 0;
  z-index: 100;

  margin-left: calc(var(--space-4) * -1) !important;
  margin-right: calc(var(--space-4) * -1) !important;
  margin-top: calc(var(--space-4) * -1) !important;

  width: calc(100% + (var(--space-4) * 2)) !important;
  border-radius: 0 0 24px 24px !important;

  /* Background intentionally omitted — components.css defines the premium
     mesh gradient. layout.css loads after components.css, so any background
     rule here would silently override it. */
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + 10px);
  margin-bottom: var(--space-6);
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.4);

  color: white;
  will-change: transform;
  overflow: hidden;
}

.hero-value {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  margin: var(--space-2) 0;
  letter-spacing: -0.05em;
}

.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.balance-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform 0.2s ease;
}

.balance-card:active {
  transform: scale(0.98);
}

.list { display: flex; flex-direction: column; gap: var(--space-3); }

.list-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}