/* ============================================================================
 * dashapp_mobile.css — phone / tablet responsive layer for the SFDapp
 * ----------------------------------------------------------------------------
 * Primary target: iPhone 15 (393 x 852 logical px).
 *
 * Breakpoints
 *   xs  (phone) : max-width 767px   — iPhone 15, iPhone 14, SE3, Pixel …
 *   md  (tablet) : 768px – 999px    — iPad mini portrait
 *   lg+ (desktop): min-width 1000px (already handled by dash_patch.css)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. Generic safety nets
 * -------------------------------------------------------------------------- */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.styled-swap-container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ----------------------------------------------------------------------------
 * 2. PHONE  (max-width 767px)
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* ---- 2.1 Navbar ------------------------------------------------------ */
  /* The desktop navbar-customized is a CSS grid with hard-coded
   * column fractions that leave dead space on a 393px viewport.
   * Switch to a flex row that fills the viewport. */
  .navbar-customized {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    padding: 8px 10px !important;
    gap: 6px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-customized > .nav-brand-styled,
  .navbar-customized > a[href="/"] {
    flex: 0 0 auto;
  }

  /* Hide wordmark on phones — favicon square only. */
  #navbar-hide-name {
    display: none !important;
  }

  .nav-brand-styled img {
    height: 40px !important;
    width: 40px !important;
  }

  /* Hide desktop-only clusters on phones — hamburger shows them instead. */
  #navbar-navlinks-desktop,
  #navbar-info-desktop,
  #connect-metamask-button {
    display: none !important;
  }

  #navbar-hamburger {
    display: inline-flex !important;
    margin-left: auto !important;
  }

  /* Mobile collapsed menu */
  #navbar-mobile-collapse {
    display: none;
    flex-basis: 100%;
    background: #141414;
    border-radius: 10px;
    padding: 6px;
    margin-top: 4px;
    max-height: 70vh;
    overflow-y: auto;
  }

  #navbar-mobile-collapse.show,
  #navbar-mobile-collapse.is-open {
    display: block !important;
  }

  #navbar-mobile-collapse .mobile-group-title {
    color: #fb8b1e;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 8px 4px;
  }

  #navbar-mobile-collapse .mobile-group-item {
    display: block;
    color: #f4f4f4;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1rem;
  }

  #navbar-mobile-collapse .mobile-group-item:hover,
  #navbar-mobile-collapse .mobile-group-item:focus {
    background: #252525;
    color: #fff;
  }

  #navbar-mobile-collapse .mobile-group-item.disabled {
    color: #6b6b6b;
    pointer-events: none;
  }

  /* ---- 2.2 Index / hero ------------------------------------------------ */
  #index-page {
    padding: 12px !important;
  }

  .index-hero-card {
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 14px !important;
  }

  .stochastic-bg {
    padding: 0 !important;
  }

  #arrowCanvas {
    opacity: 0.4;
  }

  /* ---- 2.3 Trader / liquidity pages ----------------------------------- */
  /* The page-level `dbc.Col` is the outer container; force it and its
   * descendants to fit within the viewport. */
  .styled-swap-container > .row,
  .styled-swap-container > [class*="col-"],
  .styled-swap-container > .col,
  .styled-swap-container .col,
  .styled-swap-container [class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 100% !important;
  }

  .styled-swap-row {
    width: 100% !important;
    min-width: 0;
  }

  /* Mantine Buy/Sell switch — Mantine 2.x renders a label with
   * `--switch-width` *and* a `width: var(--switch-width)` rule on the
   * root label. Some Mantine versions also use `--switch-track-size`
   * and `--switch-thumb-size`. Force all of them. */
  #swap-switch,
  .mantine-Switch-root {
    --switch-width: 4.4rem !important;
    --switch-height: 2.2rem !important;
    --switch-thumb-size: 1.65rem !important;
    --switch-track-size: var(--switch-width) !important;
    width: var(--switch-width) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Token / currency buttons (USDC, option token label). The button
   * itself has `min-width: 200px` from `dash_patch.css` — kill that on
   * phones so it shares the row with the input. */
  .styled-token-button,
  button.styled-token-button {
    min-width: 0 !important;
    width: auto !important;
    max-width: 38% !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto !important;
  }

  /* The flex rows that contain [input | token-button]. Allow wrap so
   * long token names flow to a second line on small screens. */
  .styled-swap-row .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    row-gap: 6px;
  }

  /* Trade input box — flex 1 1 60% so it takes most of the row. */
  .styled-input-form {
    font-size: 1.05rem !important;
    min-width: 0 !important;
    flex: 1 1 60% !important;
  }

  /* The "Current price / pair info" row uses two flex children with
   * `flex: 1` each — already covered by .justify-content-between wrap. */

  /* The action buttons (Enter an amount / Provide liquidity / Remove
   * liquidity / Issue Option) sit inside `.justify-content-center`
   * rows. The Mantine-styled button (`.styled-swap-button` plus
   * `mantine-Button-root`/`mantine-UnstyledButton-root`) renders as
   * `display: inline-block` by default, with `width: 100%` from
   * Bootstrap's `.w-100`. Combined with `justify-content: center` on
   * the parent flex row, that causes the button to overflow on
   * narrow screens.
   *
   * Fix: force the button itself to `display: block; width: 100%` and
   * override the Mantine `min-width` if any. Do NOT collapse the row's
   * display, otherwise the inner columns lose their flex behavior and
   * shrink-wrap to their content (which is the bug we hit). */
  .styled-swap-button,
  button.styled-swap-button,
  button.mantine-Button-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: block;
    box-sizing: border-box;
  }

  /* Neutralize Bootstrap row negative margins so content respects the
   * container's padding. Keep display:flex — don't break the layout. */
  .styled-swap-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The immediate wrapper of these action buttons (a `dbc.Col` with
   * class `justify-content-center`) was inheriting the row's flex
   * shrink behavior and collapsing to its content's natural width
   * (~157px), leaving the button text clipped. Force its flex basis
   * to 100% and disable shrink so it spans the row. */
  .styled-swap-container .justify-content-center:has(> .styled-swap-button),
  .styled-swap-container .justify-content-center > .col,
  .styled-swap-container [class*="col-"]:has(> .styled-swap-button) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* The issue-options page uses dbc.Col width=6 inside rows; stack
   * them on phones. */
  .styled-swap-container .row > [class*="col-6"],
  .styled-swap-container .row > [class*="col-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Mantine pair-search dropdown width — let it shrink. */
  .dmcSelectInput {
    height: 3rem !important;
    font-size: 1rem !important;
  }

  /* Mantine LoadingOverlay parents — wrap their content. */
  .mantine-Box-root {
    min-width: 0;
  }

  /* Modals */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .modal-body {
    padding: 12px !important;
    overflow-x: auto;
  }

  /* Toasts */
  .toast {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    top: 70px !important;
    font-size: 0.9rem;
  }

  /* ---- 2.4 Tables / data results ------------------------------------- */
  /* The options-balance page renders a `dbc.Table(responsive=True)` with
   * 10 columns (Token ID, Pair, Balance, Maturity, Strike, Option Type,
   * Expired, Last Price, Payoff, Action). Bootstrap wraps it in
   * `.table-responsive` (overflow-x: auto) — but on phones, the row
   * gutters and the col wrapper still let the inner table extend past
   * the viewport. Force every result region to clip horizontally and
   * let the table scroll inside its own card. */
  #options-balance-result,
  #holders-result,
  .balance-table,
  .holder-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive,
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dash data-table container — keep it scrollable, never wider than
   * its parent. Some 10-column tables are > 800px wide; on iPhone 15
   * (~369px content width) we MUST allow horizontal scroll inside the
   * container instead of breaking out of the viewport. */
  .dash-spreadsheet-container,
  .dash-spreadsheet-inner table,
  .dash-table-container {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* The page itself has `padding: 20px 60px 60px` (desktop). On phones,
   * drop it to a tiny padding so the table area gets every pixel. */
  .styled-swap-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* dbc.Table renders a fixed-width <table> by default. Make its cells
   * wrap so the table at least tries to fit, and only scrolls if the
   * combined min-content width exceeds the viewport. */
  .table {
    table-layout: auto;
    word-break: break-word;
    font-size: 0.85rem;
  }

  .table th,
  .table td {
    white-space: nowrap;
    padding: 0.4rem 0.5rem;
  }

  /* The options-balance result wraps the table in `.balance-table-scroll`
   * so phones get their own horizontal-scroll card. The card has a
   * visible scrollbar cue, rounded corners, and a max-height with
   * vertical scroll for long balance lists. */
  .balance-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.02);
    max-height: 60vh;
  }

  .balance-table-scroll .table-responsive {
    margin-bottom: 0;
    border: 0;
  }

  /* The result renders two views: `.balance-table-view` (the desktop
   * table) and `.balance-cards-view` (the mobile card list). The CSS
   * below shows the table only ≥1000px and the cards otherwise. */
  .balance-table-view {
    display: none !important;
  }
  .balance-cards-view {
    display: block !important;
  }

  /* Each balance is one card. Inside the card, each field is a flex
   * row: label on the left, value on the right, separated by a thin
   * line. Long values (token IDs, pair names) wrap. */
  .balance-card {
    background: #1c1c1c;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .balance-card--expired-zero {
    border-color: #f0ad4e;
    background: rgba(240, 173, 78, 0.06);
  }

  .balance-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed #2a2a2a;
    word-break: break-all;
  }

  .balance-card-row:last-child {
    border-bottom: 0;
  }

  .balance-card-label {
    color: #fb8b1e;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
    min-width: 96px;
  }

  .balance-card-value {
    color: #f4f4f4;
    font-size: 0.95rem;
    text-align: right;
    word-break: break-all;
    flex: 1 1 auto;
  }

  .balance-card-value--accent {
    color: #4af6c3;
    font-weight: 600;
  }

  /* ---- 2.5 Headings / type ------------------------------------------- */
  h1 { font-size: 1.85rem !important; }
  h2 { font-size: 1.55rem !important; }
  h3 { font-size: 1.3rem !important; }
  h4 { font-size: 1.1rem !important; }

  p { font-size: 0.95rem; line-height: 1.5; }

  /* ---- 2.6 Action buttons in row centers ----------------------------- */
  /* Buttons inside `.justify-content-center` rows sometimes overflow the
   * available width. Make them flex-fill the row. */
  .styled-swap-row .justify-content-center > .btn,
  .styled-swap-row .justify-content-center button {
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ----------------------------------------------------------------------------
 * 3. TABLET  (768px – 999px)
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 999px) {
  .navbar-customized {
    grid-template-columns: 1fr 4fr 1fr 0.6fr !important;
    padding: 8px 12px !important;
  }

  .styled-swap-container .row [class*="col-"] {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .styled-swap-row {
    width: 70% !important;
  }

  #navbar-hamburger { display: none !important; }
  #navbar-navlinks-desktop { display: flex !important; }
}

/* ----------------------------------------------------------------------------
 * 4. DESKTOP (≥1000px) — preserve previous behavior
 * -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  #navbar-hamburger { display: none !important; }
  #navbar-mobile-collapse { display: none !important; }
  #navbar-info-desktop { display: flex !important; }

  /* On desktops, the options-balance result shows the table and hides
   * the card layout. */
  .balance-table-view {
    display: block !important;
  }
  .balance-cards-view {
    display: none !important;
  }
}