/* ===================================================================
   LOG TRADE MODAL — ONE SCREEN, NO SCROLLING                (v135)
   -------------------------------------------------------------------
   The live journal and the backtest journal share this one modal
   (#tradeModal, switched by currentJournalMode), so everything here
   applies to both.

   Before: a single 680px column of twelve stacked blocks. The bottom
   third — Strategy Name, Strategy Setup, Playbook, screenshots, Lesson
   Learned and the Save button — sat below the fold and had to be
   scrolled to.

   After: the SAME blocks in two columns inside a wider panel. Each
   existing .form-grid-2 / .form-grid-3 is kept intact as one grid cell,
   so Entry / SL / TP still read as a single row and no field is
   regrouped or reordered. Twelve stacked rows become six.

   Placed last on purpose so it wins the cascade over the base .modal
   rules, and scoped to #tradeModal so every other modal in the app is
   untouched.
   =================================================================== */
#tradeModal.modal-backdrop{
  align-items:center;
  padding:14px 0;
}
#tradeModal .modal{
  max-width:min(1060px, calc(100vw - 28px));
  padding:20px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:22px;
  row-gap:10px;
  align-content:start;
  /* Safety net only. On a normal window there is nothing to scroll; on a
     very short one the panel scrolls instead of running off the screen.
     The custom select / date / time panels reparent themselves to <body>
     when they open, so this can never clip an open dropdown. */
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Blocks that run the full width of the panel. */
#tradeModal .modal > .tm-wide,
#tradeModal .modal > #modalWarning,
#tradeModal .modal > #autoCalcBar{ grid-column:1 / -1; }

/* The grid gap owns the vertical rhythm now, so the per-block margins go. */
#tradeModal .modal > .form-group,
#tradeModal .modal > .form-grid-2,
#tradeModal .modal > .form-grid-3,
#tradeModal .form-group{ margin-bottom:0; }
#tradeModal .form-grid-2,
#tradeModal .form-grid-3{ gap:12px; }
#tradeModal .modal > .tm-head{ margin-bottom:0; }
#tradeModal .modal > #modalWarning{ margin-bottom:0; }
#tradeModal .modal > #autoCalcBar{ margin-bottom:0; }

/* A slightly tighter field, which is what buys the last two rows.
   .cs-display is the custom dropdown face that replaces every <select>,
   so it has to be trimmed alongside the real inputs or the selects would
   stay a size larger than the text fields. */
#tradeModal .form-label{ margin-bottom:4px; font-size:10px; }
#tradeModal .form-input,
#tradeModal .form-select,
#tradeModal .cs-display{ padding:9px 12px; font-size:13px; }

/* Lesson Learned was the tallest single element in the form. Still
   resizable by drag, still the same 15-character rule. */
#tradeModal #f_lesson{ min-height:58px; }
#tradeModal .tm-actions{ margin-top:2px; }

/* Narrow screens keep the original single column and scroll as before —
   two columns of form fields on a phone would be worse, not better. */
@media (max-width:900px){
  #tradeModal.modal-backdrop{ align-items:flex-start; padding:16px 0; }
  #tradeModal .modal{
    grid-template-columns:1fr;
    max-height:none;
    overflow-y:visible;
    padding:22px 20px;
  }
}


/* ===================================================================
   MODAL SIZING — BIGGER PANEL, STILL ONE SCREEN            (v136)
   -------------------------------------------------------------------
   Three modals, one goal: everything visible at once, at a size that
   is comfortable to read rather than merely small enough to fit.

   The sizes below are clamp(min, vh-based, max) rather than fixed
   pixels. That is deliberate: the same stylesheet then grows the type
   and the padding on a tall monitor and shrinks them on a short laptop,
   instead of picking one size that is too big for one and too small for
   the other. Every value still has a hard floor, so nothing can shrink
   into illegibility.

   Placed after tc-trade-modal-one-screen so these values win.
   =================================================================== */

/* ---------- 1. LOG TRADE (live + backtest share this one modal) ---------- */
#tradeModal .modal{
  max-width:min(1240px, calc(100vw - 24px));
  padding:clamp(16px,2.4vh,26px) clamp(18px,2vw,30px);
  row-gap:clamp(8px,1.35vh,15px);
  column-gap:clamp(16px,1.8vw,28px);
}
#tradeModal #modalTitle{ font-size:clamp(16px,2.2vh,21px); }
#tradeModal .form-label{
  font-size:clamp(9.5px,1.25vh,11.5px);
  margin-bottom:clamp(3px,0.5vh,6px);
}
/* .cs-display is the custom dropdown face that stands in for every
   <select>, so it has to grow with the real inputs or the selects end up
   a size larger than the text fields sitting beside them. */
#tradeModal .form-input,
#tradeModal .form-select,
#tradeModal .cs-display{
  padding:clamp(7px,1.15vh,12px) clamp(11px,0.95vw,15px);
  font-size:clamp(12.5px,1.65vh,15px);
}
#tradeModal #f_lesson{ min-height:clamp(52px,7.5vh,96px); }

/* ---------- 2. STEP 1 — LOSS SCENARIO PLAN ---------- */
/* The five loss options were a single 5-row stack, which is what pushed
   the footer off the bottom. Two across turns 5 rows into 3 and the
   panel is wider to carry them. */
#preTradePlanModal.modal-backdrop{ align-items:center; padding:12px 0; }
#preTradePlanModal .modal{
  max-width:min(920px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(16px,2.2vh,26px) clamp(18px,2vw,28px);
}
#preTradePlanModal .ptp-loss-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(6px,0.9vh,10px);
}
#preTradePlanModal .ptf-stepper{
  padding:clamp(6px,1vh,12px) 0 clamp(8px,1.3vh,16px);
  margin-bottom:clamp(8px,1.4vh,16px);
}
#preTradePlanModal .ptp-risk-card{
  margin-bottom:clamp(8px,1.4vh,16px);
  padding:clamp(9px,1.3vh,14px) clamp(12px,1.1vw,16px);
}
#preTradePlanModal .ptp-loss-option{ padding:clamp(7px,1.1vh,11px) clamp(9px,0.9vw,12px); }
#preTradePlanModal #ptpWhyTrade{ min-height:clamp(48px,6.5vh,90px) !important; }
#preTradePlanModal #ptpIfLoss{ min-height:clamp(44px,5.5vh,78px) !important; }
#preTradePlanModal .form-group{ margin-bottom:clamp(8px,1.3vh,16px); }

/* ---------- 3. STEP 2 — PRE-TRADE CHECKLIST ---------- */
/* Two columns, so the confluence list can be tall enough to show every
   item without its own inner scrollbar while the commitment box and the
   score sit beside it instead of below it.

      planSummary  |  score
      "tick every" |  commitment (spans down)
      the list     |
      institutional rule (full width)
      back / proceed (full width)                                    */
#checklistRequiredModal.modal-backdrop{ align-items:center; padding:12px 0; }
#checklistRequiredModal .clr-modal{
  max-width:min(1000px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}
#checklistRequiredModal .clr-modal-header{ padding:clamp(11px,1.6vh,20px) clamp(16px,1.5vw,24px); }
#checklistRequiredModal .clr-modal-body{
  padding:clamp(12px,1.8vh,20px) clamp(16px,1.5vw,24px);
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  column-gap:clamp(14px,1.4vw,22px);
  row-gap:clamp(8px,1.2vh,14px);
  align-content:start;
  overflow-y:auto;                 /* fallback only */
  overscroll-behavior:contain;
}
#checklistRequiredModal .clr-modal-body > #ptfPlanSummary{ grid-column:1; grid-row:1; }
#checklistRequiredModal .clr-modal-body > .clr-modal-msg{ grid-column:1; grid-row:2; margin-bottom:0; }
#checklistRequiredModal .clr-modal-body > #clrModalList{
  grid-column:1; grid-row:3;
  margin-bottom:0;
  /* Tall enough for the whole confluence list on a normal screen, so the
     inner scrollbar the user was seeing is gone. Seven items need ~338px
     (40px row + 6px gap + 16px padding); 42vh gives ~361px at 860px. */
  max-height:clamp(200px,42vh,520px);
}
#checklistRequiredModal .clr-modal-body > #ptfStrength{ grid-column:2; grid-row:1; margin:0; }
#checklistRequiredModal .clr-modal-body > #traderCommitmentBox{ grid-column:2; grid-row:2 / span 2; margin:0; }
#checklistRequiredModal .clr-modal-body > .clr-modal-rule{ grid-column:1 / -1; grid-row:4; margin-bottom:0; }
#checklistRequiredModal .clr-modal-body > .clr-modal-actions{ grid-column:1 / -1; grid-row:5; }
#checklistRequiredModal .ptf-stepper{
  padding:clamp(6px,1vh,12px) 0 clamp(8px,1.3vh,16px);
  margin-bottom:0;
}

/* ---------- narrow screens keep the old single-column behaviour ---------- */
@media (max-width:900px){
  #preTradePlanModal.modal-backdrop,
  #checklistRequiredModal.modal-backdrop{ align-items:flex-start; padding:16px 0; }
  #preTradePlanModal .modal{ max-height:88vh; }
  #preTradePlanModal .ptp-loss-options{ grid-template-columns:1fr; }
  #checklistRequiredModal .clr-modal{ max-height:none; display:block; }
  #checklistRequiredModal .clr-modal-body{
    display:block;
    overflow-y:visible;
  }
  #checklistRequiredModal .clr-modal-body > #clrModalList{ max-height:280px; margin-bottom:14px; }
  #checklistRequiredModal .clr-modal-body > #ptfStrength{ margin:14px 0; }
  #checklistRequiredModal .clr-modal-body > #traderCommitmentBox{ margin:14px 0; }
  #checklistRequiredModal .clr-modal-body > .clr-modal-msg,
  #checklistRequiredModal .clr-modal-body > .clr-modal-rule{ margin-bottom:14px; }
}


/* ===================================================================
   PRE-TRADE WIZARD ON A PHONE — ONE SCROLL, CTA ALWAYS VISIBLE (v139)
   -------------------------------------------------------------------
   Measured on a 393x852 phone against the v138 file:

     panel height 1214px in an 852px viewport
       -> 394px of backdrop scroll
     #clrModalList carried its own 280px cap
       -> a SECOND, nested 149px scroll inside the first
     "All Confirmed -> Log Trade" sat at y=1178, i.e. off screen
     .ptf-stepper is a direct child of .clr-modal, which is padding:0
       -> "Loss Plan" started at x=11 and "Log Trade" ended at x=382,
          both flush against the panel edge, so both read as clipped

   Fix: the two wizard dialogs become proper phone sheets. The panel is
   capped to the viewport, the stepper and the header stay put, the body
   is the ONE scroller, the confluence list flows inside it instead of
   scrolling on its own, and the action row is sticky so the button the
   whole screen exists for is never below the fold.

   Everything is !important on purpose: four separate mobile blocks
   earlier in this file already set these properties with !important,
   and this block is last so it is the one that wins.
   =================================================================== */
@media (max-width:900px){

  /* ---------- backdrop: full screen, no wasted top padding ---------- */
  /* The backdrop is z-index 2000, above the mobile topbar, so the old
     56-80px top padding was clearing something that is already covered. */
  #checklistRequiredModal.modal-backdrop,
  #preTradePlanModal.modal-backdrop{
    align-items:flex-start !important;
    padding:max(env(safe-area-inset-top, 0px), 8px) 8px
            max(env(safe-area-inset-bottom, 0px), 8px) 8px !important;
    overflow-y:auto !important;
  }
  /* On mobile Safari a position:fixed inset:0 box is sized to the LARGE
     viewport, so its bottom hides behind the URL bar and takes the sticky
     action row with it. dvh tracks the visible height instead. */
  @supports (height:100dvh){
    #checklistRequiredModal.modal-backdrop,
    #preTradePlanModal.modal-backdrop,
    #tradeModal.modal-backdrop{ height:100dvh !important; }
  }

  /* ================= STEP 2 — PRE-TRADE CHECKLIST ================= */
  #checklistRequiredModal .clr-modal{
    display:flex !important;
    flex-direction:column !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 auto !important;
    overflow:hidden !important;
  }
  #checklistRequiredModal .ptf-stepper,
  #checklistRequiredModal .clr-modal-header{ flex:0 0 auto !important; }

  /* The stepper sits directly inside a padding:0 panel, which is why the
     first and last labels ran into the panel edge. */
  #checklistRequiredModal .ptf-stepper{
    padding:9px 14px 10px !important;
    margin-bottom:0 !important;
    gap:6px !important;
    overflow:hidden !important;
  }
  #checklistRequiredModal .ptf-step-num{
    width:24px !important; height:24px !important; font-size:11px !important;
  }
  #checklistRequiredModal .ptf-step-label{ font-size:9.5px !important; letter-spacing:.04em !important; }
  #checklistRequiredModal .ptf-step-line{ min-width:10px !important; }

  /* Title was wrapping to two lines and the icon was 32px. */
  #checklistRequiredModal .clr-modal-header{ padding:10px 14px !important; gap:9px !important; }
  #checklistRequiredModal .clr-modal-icon{ font-size:21px !important; }
  #checklistRequiredModal .clr-modal-title{ font-size:14px !important; letter-spacing:.03em !important; }

  /* THE one scroller. */
  #checklistRequiredModal .clr-modal-body{
    display:block !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    padding:10px 14px 0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  /* No nested scroll: the list flows inside the body scroller. */
  #checklistRequiredModal .clr-modal-body > #clrModalList{
    max-height:none !important;
    overflow:visible !important;
    padding:6px !important;
    margin-bottom:9px !important;
  }
  #checklistRequiredModal .clr-modal-list .checklist-item{
    padding:9px 11px !important;
    gap:10px !important;
    margin-bottom:5px !important;
  }
  #checklistRequiredModal .clr-modal-list .checklist-num{
    width:24px !important; height:24px !important; border-radius:7px !important; font-size:11px !important;
  }
  #checklistRequiredModal .clr-modal-list .checklist-box{
    width:19px !important; height:19px !important; font-size:12px !important;
  }
  #checklistRequiredModal .clr-modal-list .checklist-text{
    font-size:12.5px !important; line-height:1.35 !important;
  }

  /* Everything else trimmed so a 7-item checklist lands on one screen. */
  #checklistRequiredModal #ptfPlanSummary{ padding:10px 12px !important; margin-bottom:9px !important; }
  #checklistRequiredModal .ptf-plan-summary-row{ font-size:11.5px !important; line-height:1.45 !important; }
  #checklistRequiredModal .clr-modal-msg{ font-size:12.5px !important; line-height:1.45 !important; margin-bottom:9px !important; }
  #checklistRequiredModal #ptfStrength{ margin:0 0 9px !important; padding:9px 12px !important; }
  #checklistRequiredModal .ptf-strength-bar{ margin-bottom:6px !important; }
  #checklistRequiredModal #traderCommitmentBox{ margin:0 0 9px !important; padding:11px 12px !important; }
  #checklistRequiredModal .trader-commitment-header{ margin-bottom:8px !important; padding-bottom:8px !important; gap:8px !important; }
  #checklistRequiredModal .trader-commitment-text{ font-size:11.5px !important; line-height:1.45 !important; }
  #checklistRequiredModal .clr-modal-rule{ padding:8px 12px !important; font-size:11.5px !important; line-height:1.45 !important; margin-bottom:0 !important; }
  /* The commitment sub-line only restates the title, and the timestamp
     column pushed the header onto two rows on a narrow panel. */
  #checklistRequiredModal .trader-commitment-sub{ display:none !important; }

  /* Sticky action row. Negative side margins take it edge to edge against
     the body's 14px padding so nothing shows through underneath it. */
  #checklistRequiredModal .clr-modal-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:4 !important;
    flex-direction:row !important;
    gap:8px !important;
    margin:10px -14px 0 !important;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    background:#0d0d18 !important;
    border-top:1px solid #252539 !important;
  }
  #checklistRequiredModal .clr-modal-actions button{
    width:auto !important;
    padding:11px 10px !important;
    font-size:12.5px !important;
    line-height:1.25 !important;
  }
  #checklistRequiredModal .btn-clr-back{ flex:0 0 34% !important; }
  #checklistRequiredModal .btn-clr-proceed{ flex:1 1 auto !important; }

  /* ================= STEP 3 — LOG TRADE ================= */
  /* This form is ~2100px of fields; it will never fit a phone and it is not
     supposed to. The measured problem was that "Save Trade" sat 1346px down
     the scroller, so the button the form exists for was only reachable after
     scrolling the entire thing. .tm-head is already sticky at the top; the
     action row now matches it at the bottom. */
  #tradeModal.modal-backdrop{
    align-items:flex-start !important;
    padding:max(env(safe-area-inset-top, 0px), 8px) 8px
            max(env(safe-area-inset-bottom, 0px), 8px) 8px !important;
  }
  /* Specificity note: an earlier block caps this at calc(100dvh - 88px) with
     `.modal-backdrop.open:not(#preTradePlanModal) > .modal`, which scores the
     same as a plain `#tradeModal .modal`. The doubled class below outranks it
     so the panel can use the height the reclaimed padding just freed up. */
  #tradeModal.modal-backdrop.open > .modal.modal{
    max-height:100% !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:0 !important;
  }
  #tradeModal .tm-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:6 !important;
    margin:10px -14px 0 !important;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    background:#0d0d18 !important;
    border-top:1px solid #252539 !important;
  }

  /* ================= STEP 1 — LOSS SCENARIO PLAN ================= */
  /* The panel scrolls itself instead of the backdrop, so the footer can be
     pinned. Its first child is the 3px decorative accent line, which an
     earlier "make the modal title row sticky" rule was turning into a 29px
     empty sticky bar — restored to what it was meant to be. */
  #preTradePlanModal .modal{
    max-height:100% !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    /* padding-bottom goes to the sticky footer instead. A sticky bottom:0
       aligns to the scrollport's padding edge, so any padding left here
       becomes a strip of scrolling content visible UNDER the footer. */
    padding-bottom:0 !important;
  }
  #preTradePlanModal .modal > div:first-child{
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important;
    height:3px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(90deg,#7C5CFC,#ef4444,#22c55e) !important;
  }
  #preTradePlanModal .ptf-stepper{ padding:8px 0 10px !important; margin-bottom:12px !important; gap:6px !important; }
  #preTradePlanModal .ptf-step-num{ width:24px !important; height:24px !important; font-size:11px !important; }
  #preTradePlanModal .ptf-step-label{ font-size:9.5px !important; letter-spacing:.04em !important; }
  #preTradePlanModal #ptfFooter{
    position:sticky !important;
    bottom:0 !important;
    z-index:4 !important;
    margin:14px -12px 0 !important;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    background:#0d0d18 !important;
    border-top:1px solid #252539 !important;
  }
}