/*
 * BillFlow Mobile Web Hardening
 * Scope: responsive web layout + safe-area presentation only.
 *
 * Deferred to the native/Xcode phase:
 * - Face ID / LocalAuthentication
 * - APNs push notifications
 * - native Google OAuth lifecycle
 * - Keychain session storage
 * - native app launch routing
 */

:root {
  --bf-safe-top: env(safe-area-inset-top, 0px);
  --bf-safe-right: env(safe-area-inset-right, 0px);
  --bf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bf-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  max-width: 100%;
}

@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden;
  }

  #app-screen,
  .mn,
  .sc,
  #main-content,
  #main-content > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * Safe-area presentation.
   * This is web/CSS-only and works where the browser/WebView exposes the
   * env(safe-area-inset-*) values. Native navigation/auth is intentionally
   * outside this change.
   */
  .mob-topbar {
    box-sizing: border-box !important;
    padding-top: var(--bf-safe-top) !important;
    min-height: calc(54px + var(--bf-safe-top)) !important;
    background: var(--bg, #fff) !important;
  }

  #mobile-nav-bar {
    box-sizing: border-box !important;
    height: calc(60px + var(--bf-safe-bottom)) !important;
    min-height: calc(60px + var(--bf-safe-bottom)) !important;
    padding-bottom: var(--bf-safe-bottom) !important;
    background: var(--bg, #fff) !important;
  }

  #mobile-more-menu {
    box-sizing: border-box !important;
    padding-bottom: var(--bf-safe-bottom) !important;
    background: var(--bg, #fff) !important;
  }

  #alert-panel {
    top: calc(56px + var(--bf-safe-top)) !important;
    max-height: calc(100dvh - 76px - var(--bf-safe-top) - var(--bf-safe-bottom)) !important;
  }

  .sc {
    padding-bottom: calc(88px + var(--bf-safe-bottom)) !important;
  }

  /*
   * Generic financial-row text contract.
   * Long names stay on one line and truncate instead of wrapping into
   * unreadable word/letter stacks.
   */
  #main-content[data-view="business"] .bi-nm,
  #main-content[data-view="medical"] .bi-nm,
  #main-content[data-view="creditcards"] .bi-nm,
  #main-content[data-view="taxreturn"] .bi-nm,
  #main-content[data-view="investments"] .bi-nm,
  #main-content[data-view="loans"] .bi-nm,
  #main-content[data-view="goals"] .bi-nm {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #main-content[data-view="business"] .bi-row,
  #main-content[data-view="medical"] .bi-row,
  #main-content[data-view="creditcards"] .bi-row,
  #main-content[data-view="taxreturn"] .bi-row,
  #main-content[data-view="investments"] .bi-row,
  #main-content[data-view="loans"] .bi-row,
  #main-content[data-view="goals"] .bi-row {
    min-width: 0 !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
  }

  #main-content[data-view="business"] .bi-bd,
  #main-content[data-view="business"] .bi-rt,
  #main-content[data-view="loans"] .bi-bd,
  #main-content[data-view="loans"] .bi-rt {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /*
   * Banking.
   * The renderer receives semantic classes from the companion patch so the
   * mobile behavior is targeted rather than applying a catch-all flex-wrap.
   */
  #main-content[data-view="banking"] .bf-bank-account-row {
    gap: 10px !important;
    padding: 12px !important;
    min-width: 0 !important;
  }

  #main-content[data-view="banking"] .bf-bank-account-info {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #main-content[data-view="banking"] .bf-bank-account-name {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #main-content[data-view="banking"] .bf-bank-account-meta {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-wrap: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main-content[data-view="banking"] .bf-bank-account-meta > span {
    min-width: 0;
    white-space: nowrap;
  }

  #main-content[data-view="banking"] .bf-bank-account-balance {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #main-content[data-view="banking"] .bf-bank-section-header {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  #main-content[data-view="banking"] .bf-bank-section-title {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #main-content[data-view="banking"] .bf-bank-section-title > span:first-of-type {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #main-content[data-view="banking"] .bf-bank-section-total {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #main-content[data-view="banking"] .bf-bank-summary {
    grid-template-columns: 1fr !important;
  }

  #main-content[data-view="banking"] .bf-bank-summary > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--bd) !important;
    padding: 12px 14px !important;
    min-width: 0 !important;
  }

  #main-content[data-view="banking"] .bf-bank-summary > div:last-child {
    border-bottom: 0 !important;
  }

  /*
   * Neutralize the older phone rule that enabled wrapping on every Banking
   * inline "justify-content:space-between" row.
   */
  #main-content[data-view="banking"] [style*="justify-content:space-between"] {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /*
   * Dense data tables.
   * Headers remain readable and horizontal overflow belongs to the nearest
   * scroll container rather than wrapping header words character-by-character.
   */
  #main-content th,
  #main-content td {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main-content th {
    white-space: nowrap !important;
  }

  #main-content table {
    max-width: none;
  }

  /*
   * Action controls should not become multi-line text blocks.
   */
  #main-content .ib,
  #main-content .btn-add,
  #main-content .btn-ok,
  #main-content .btn-cancel {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #main-content .ib {
    white-space: nowrap;
  }

  @media (orientation: landscape) {
    .sc {
      padding-left: max(10px, var(--bf-safe-left)) !important;
      padding-right: max(10px, var(--bf-safe-right)) !important;
    }
  }
}

/* iOS owns no automatic content inset: CSS accounts for each safe area once. */
html.bf-native-ios #login-screen {
  padding: max(24px, var(--bf-safe-top)) max(12px, var(--bf-safe-right))
    max(24px, var(--bf-safe-bottom)) max(12px, var(--bf-safe-left)) !important;
  box-sizing: border-box;
}
@media (min-width: 641px) {
  html.bf-native-ios .mn {
    padding-top: var(--bf-safe-top);
    padding-bottom: var(--bf-safe-bottom);
  }
}
/* Persistent white strip below the dark bottom tab bar in the native iOS app
   (reported bug): #mobile-nav-bar is a FIXED sibling of .mn, not nested
   inside it (see billflow.html) -- it already carries its own
   height:calc(60px + var(--bf-safe-bottom)) and padding-bottom:
   var(--bf-safe-bottom) unconditionally in the @media (max-width:640px)
   block below, and .mn is never the nav bar's parent, so widening the
   min-width:641px rule above to phone widths would not touch anything
   under the nav bar -- verified against the actual DOM nesting, not
   assumed; this is not the strip's source.
   The remaining candidate that *is* consistent with the report is
   WKWebView's own rubber-band bounce past the document's top/bottom edges,
   which briefly reveals the *native* WKScrollView backgroundColor beneath
   the page (mobile-app/capacitor.config.json already sets ios.backgroundColor
   to the app's dark color, but that only takes effect once the Mac-side
   Xcode project is `npx cap sync`'d and rebuilt -- see IOS-REVISION.md,
   outside this repo's control and not verifiable here). This rule is the
   CSS-side half of that: it removes the page's own ability to rubber-band
   scroll at all in the Capacitor shell, so there is nothing here for that
   native background to ever show through, in addition to whichever native
   color ends up configured. */
html.bf-native-ios,
html.bf-native-ios body {
  overscroll-behavior-y: none;
}
@media (max-width: 640px) {
  /* The legacy responsive rule must not reveal the app before auth resolves. */
  #app-screen:not(.visible) { display: none !important; }

  /* Match Loans: identity above figures/actions, progress underneath. */
  #main-content .bf-biz-loan-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 12px 10px !important;
    align-items: start !important;
  }
  #main-content .bf-biz-loan-info {
    min-width: 0;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  #main-content .bf-biz-loan-info > div {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  #main-content .bf-biz-loan-amount {
    grid-column: 2;
    text-align: left !important;
    min-width: 0;
  }
  #main-content .bf-biz-loan-actions {
    grid-column: 2;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #main-content .bf-biz-loan-actions button { min-width: 44px; min-height: 44px; }
  #main-content .bf-biz-loan-progress > div:first-child { flex-wrap: wrap; gap: 4px 12px; }
  #main-content .bf-biz-loans > div:first-child > div { min-width: 0; }
  #main-content .bf-biz-loans [data-action="biz-loan-add"] {
    max-width: 100%; height: auto !important; min-height: 44px;
    white-space: normal !important;
  }

  /* Pin the composer to the visible area without shrinking the app shell. */
  .bf-chat-panel, .bf-chat-panel.is-expanded {
    bottom: max(calc(var(--bf-mobile-nav-h) + var(--bf-safe-bottom) + 10px), calc(var(--bf-keyboard-inset, 0px) + 10px)) !important;
    max-height: calc(var(--bf-visible-h, 100dvh) - var(--bf-safe-top) - var(--bf-mobile-nav-h) - var(--bf-safe-bottom) - 20px) !important;
  }
  .bf-chat-panel.is-expanded {
    top: calc(var(--bf-visible-top, 0px) + var(--bf-safe-top) + 8px) !important;
  }
  #chat-input { font-size: 16px !important; }
}

@media (max-width: 640px) {
  #main-content[data-view="investments"] .ph {
    flex-wrap: wrap !important; gap: 10px !important; min-width: 0;
  }
  #main-content[data-view="investments"] .ph > div {
    flex-wrap: wrap !important; min-width: 0; max-width: 100%;
  }
  #main-content .bf-invest-account-row {
    display: grid !important; grid-template-columns: 36px minmax(0, 1fr);
    align-items: start !important; gap: 8px 12px !important;
  }
  #main-content .bf-invest-account-row > div:nth-child(2) {
    min-width: 0; white-space: normal; word-break: normal !important; overflow-wrap: break-word;
  }
  #main-content .bf-invest-account-row > div:last-child {
    grid-column: 2; text-align: left !important; white-space: nowrap;
  }
  #main-content .bf-invest-allocation-row { flex-wrap: wrap; gap: 4px 12px; }
  #main-content .bf-invest-allocation-row > div { min-width: 0; flex-wrap: wrap; }
  #main-content .bf-invest-positions-scroll { max-width: 100%; min-width: 0; }
  #main-content .bf-invest-positions-table { min-width: 900px !important; }
  #main-content .bf-invest-positions-table th,
  #main-content .bf-invest-positions-table td { white-space: nowrap; }
  #main-content .bf-invest-positions-table th:first-child { min-width: 220px; }
  #main-content .bf-invest-positions-table td:first-child { white-space: normal; }
  #main-content .bf-invest-positions-table td:first-child > div > div:last-child {
    min-width: 160px; max-width: 280px; overflow-wrap: break-word; word-break: normal;
  }
}

/* User-supplied launch composition: one full-screen appearance, no demo frame. */
#bf-launch-animation {
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center; background: #fff;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  --launch-blue: #4366b0; --launch-green: #56c09d;
}
html[data-theme="dark"] #bf-launch-animation {
  background: #000; --launch-blue: #5C86D4; --launch-green: #6BD1AC;
}
#bf-launch-animation > svg { width: min(57.6vw, 250px, 45vh); height: auto; overflow: visible; }
#bf-launch-animation .bf-launch-blue { stop-color: var(--launch-blue); }
#bf-launch-animation .bf-launch-green { stop-color: var(--launch-green); }
#bf-launch-animation .bf-launch-body,
#bf-launch-animation .bf-launch-shimmer { transform-origin: 50% 50%; transform-box: fill-box; }