/* HotelShift RentLens — mobile (phone) refinements.
   Loaded AFTER styles.css. Almost everything is inside @media (max-width:600px),
   so desktop (>600px) renders byte-for-byte as before.

   NOTE: the Detailed-Underwriting layout rules in styles.css are scoped under
   the id #input-detailed-pane (id-level specificity), so the overrides below
   must be scoped the same way + !important to win. */

/* The phone-only Unit Mix view (#du-um-mobile, built by js/mobile_unitmix.js)
   is hidden on desktop; the @media block below reveals it on phones. */
#du-um-mobile { display: none; }

@media (max-width: 600px) {

  /* ============ Screening · Overview ============ */

  /* Stack the score above the MSA / market-tier badge (badge stops overflowing). */
  .prescreen-score-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .prescreen-market-tier { align-items: flex-start; text-align: left; }

  /* Score breakdown: one factor per row (the 11rem name min-width ran off-screen). */
  .prescreen-factor-summary {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    column-gap: 0 !important;
  }
  .prescreen-factor-summary li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
  }
  .prescreen-factor-name { min-width: 0 !important; }

  /* Risk / Opportunity-Zone cards: one per row. */
  .hazard-grid { grid-template-columns: 1fr !important; }

  /* Horizontal tab bars scroll instead of overflowing the screen edge. */
  .input-tabs,
  #input-detailed-pane .du-sheettabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  /* ============ Detailed Underwriting ============ */

  /* Collapse EVERY multi-column section to one column. All the variant
     containers (--3up / --cap / --lu-top / --ret3 / base 4-col) also carry the
     base .du-cols class, so this one rule reaches them all. */
  #input-detailed-pane .du-cols {
    grid-template-columns: 1fr !important;
    gap: 0.55rem 0 !important;
  }

  /* The lease-up OPEX row is flexbox on desktop — make it stack, and let its
     groups take full width. */
  #input-detailed-pane .du-cols--lu-opex { display: block !important; }
  #input-detailed-pane .du-cols--lu-opex > .du-group {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }
  #input-detailed-pane .du-cols--lu-opex > .du-group + .du-group { margin-top: 0.9rem; }

  /* The 3-up / lu-top / ret3 children carry explicit grid-column/grid-row
     placements — reset so they simply stack in source order. */
  #input-detailed-pane .du-cols > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    margin-top: 0 !important;
  }
  #input-detailed-pane .du-cols > * + * { margin-top: 0.9rem !important; }

  /* Fields: stack the label ABOVE the input, input full-width (kills the
     label/input overlap seen across the whole tab). */
  #input-detailed-pane .du-cols .du-fields label:not(.du-check) {
    grid-template-columns: 1fr !important;
    gap: 0.15rem 0 !important;
  }
  #input-detailed-pane .du-cols .du-fields label:not(.du-check) > input,
  #input-detailed-pane .du-cols .du-fields label:not(.du-check) > select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Unit Mix: hide the wide real table on phones; the mobile view (built by
     js/mobile_unitmix.js, which mirrors the real inputs) is shown instead. */
  #input-detailed-pane .du-um-scroll { display: none !important; }
  #input-detailed-pane #du-um-mobile { display: block; }

  /* One self-contained block per scenario: Floor plan | Units | Rent. */
  #du-um-mobile .umm-block {
    border: 1px solid rgba(31, 48, 80, 0.18);
    border-radius: 12px;
    padding: 0.7rem 0.8rem 0.8rem;
    margin: 0 0 0.9rem;
    background: #fff;
  }
  #du-um-mobile .umm-block--active {
    border-color: var(--accent, #0f2d5a);
    box-shadow: 0 0 0 1px var(--accent, #0f2d5a) inset;
  }
  #du-um-mobile .umm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 0 0 0.55rem; margin: 0 0 0.55rem;
    border-bottom: 1px solid rgba(31, 48, 80, 0.12);
    font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.05rem;
    color: var(--accent, #0f2d5a);
  }
  #du-um-mobile .umm-head-tag {
    font-family: var(--font-sans, inherit); font-weight: 600; font-size: 0.72rem;
    padding: 0.18rem 0.55rem; border-radius: 999px; color: #5b6b85;
    background: rgba(31, 48, 80, 0.06); border: 1px solid rgba(31, 48, 80, 0.12);
  }
  #du-um-mobile .umm-block--active .umm-head-tag {
    color: #0a7d46; background: rgba(94, 200, 140, 0.14); border-color: rgba(94, 200, 140, 0.4);
  }
  #du-um-mobile .umm-grid {
    display: grid;
    grid-template-columns: 1fr 4.5rem 6rem;
    align-items: center;
    gap: 0.4rem 0.5rem;
  }
  #du-um-mobile .umm-h {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    color: #8090a8;
  }
  #du-um-mobile .umm-name {
    font-weight: 600; color: #1f3050; font-size: 0.95rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #du-um-mobile .umm-n { text-align: right; }
  #du-um-mobile .umm-in {
    width: 100%; box-sizing: border-box; text-align: right;
    padding: 0.4rem 0.5rem; border: 1px solid rgba(31, 48, 80, 0.2); border-radius: 7px;
    font-size: 0.95rem; background: #fff; color: #15336b;
  }
  #du-um-mobile .umm-total {
    display: flex; justify-content: space-between; gap: 0.5rem;
    margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid rgba(31, 48, 80, 0.12);
    font-weight: 800; color: #1f3050; font-size: 0.95rem;
  }
  #du-um-mobile .umm-add {
    width: 100%; padding: 0.6rem; border-radius: 9px;
    border: 1px dashed rgba(31, 48, 80, 0.35); background: #fff;
    color: var(--accent, #0f2d5a); font-weight: 700; cursor: pointer;
  }

  /* Operating-expense grids (Stabilized & Lease-up tables): keep the grid but
     let it scroll sideways instead of being clipped. */
  #input-detailed-pane .du-opex-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #input-detailed-pane .du-cols--lu-opex > .du-group:first-child .du-opex-grid {
    width: auto !important;
  }

  /* ============ Single Asset Run · Quick Underwriting scenarios ============ */
  /* The scenario cards have no phone rules in styles.css: the input grid's 220px
     min track + the wide value inputs run past a narrow viewport. Collapse the
     input groups to one column, keep every field inside the card, and lay the
     output figures out as a tidy 2-up grid instead of a cramped flex-wrap. */
  .uw-scenario-inputs { grid-template-columns: 1fr !important; }
  .uw-scenarios,
  .uw-scenario-card,
  .uw-scenario-inputs,
  .uw-scenario-inputs .uw-input-group { min-width: 0; }
  .uw-scenario-inputs input[type="number"] {
    width: 100%;
    box-sizing: border-box;
  }
  .uw-scenario-output {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.85rem;
  }
  .uw-scenario-output .uw-out-cell { min-width: 0; }
  .uw-scenario-output .uw-out-cell strong { overflow-wrap: anywhere; }
  .uw-scenario-output .uw-oi-dollar {
    width: 100%;
    box-sizing: border-box;
  }
}